PageSourceSearch

https://slabos.com/pricing

html slabos.com collected 2026-10-05 04:49:07 UTC 304,959 bytes, 3,389 lines download raw bytes

1<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
2<script src="/site-i18n-boot.js"></script>
2
3<meta name="viewport" content="width=device-width, initial-scale=1.0">
4<title>Pricing — One bill that pays for itself | SlabOS</title>
5<meta name="description" content="Cancel the other six. One flat bill replaces the 5–7 legacy tools running your shop — every feature, unlimited users, migration done for us. Book a call and we'll price it to your shop.">
6<meta name="robots" content="index, follow">
7<!-- Canonical URL is supplied by the route-aware HTTP Link header, including translated pages. -->
8<meta property="og:title" content="Cancel the other six. This one pays for itself. — SlabOS Pricing">
9<meta property="og:description" content="One flat bill instead of 5–7 legacy tools. Every feature on every plan, unlimited users, done-by-us migration. Your rate is set on a call.">
10<meta property="og:image" content="https://slabos.com/og-image.png">
11<meta property="og:image:width" content="1200">
12<meta property="og:image:height" content="630">
13<meta property="og:image:type" content="image/png">
14<meta property="og:image:alt" content="SlabOS — the all-in-one platform for countertop fabricators">
15<meta property="og:url" content="https://slabos.com/pricing">
16<meta property="og:type" content="website">
17<meta property="og:site_name" content="SlabOS">
18<meta name="twitter:card" content="summary_large_image">
19<meta name="twitter:title" content="Cancel the other six. This one pays for itself. — SlabOS Pricing">
20<meta name="twitter:description" content="One flat bill instead of 5–7 legacy tools. Every feature, unlimited users, no per-seat fees. Book a call.">
21<meta name="twitter:image" content="https://slabos.com/og-image.png">
22<link rel="icon" type="image/png" href="/favicon.png">
23<script src="/vendor/tailwindcss.js"></script>
vendor: 1 bytes, line 23
23
24<script src="/vendor/iconify-icon.min.js"></script>
vendor: 1 bytes, line 24
24
25<script>
26tailwind.config = {
27theme: {
28extend: {
29fontFamily: {
30sans: ['Plus Jakarta Sans', 'sans-serif'],
31display: ['Plus Jakarta Sans', 'sans-serif'],
32mono: ['Geist Mono', 'monospace'],
33},
34colors: {
35// Vivid vermillion-orange — matches /tour and /landing brand palette.
36// 500 = #ff5e1f is the canonical SlabOS orange used on every marketing
37// page; the rest of the scale is tuned so brand-400 (hover state) and
38// brand-300 (icon tints) read consistently with the dark theme.
39brand: {
4050: '#fff5ef', 100: '#ffe1d0', 200: '#ffc4a3', 300: '#ff9d6e',
41400: '#ff7340', 500: '#ff5e1f', 600: '#e8521a', 700: '#c4421a',
42800: '#9a3818', 900: '#7a2f17', 950: '#4a1d0e',
43},
44dark: {
4550: '#f7f7f8', 100: '#eeeef0', 200: '#d9d9de', 300: '#b8b8c1',
46400: '#91919f', 500: '#737384', 600: '#5d5d6c', 700: '#4c4c58',
47800: '#2a2a30', 850: '#232329', 900: '#1e1e22', 950: '#141417',
48}
49},
50animation: {
51'fade-up': 'fadeUp 0.8s ease-out forwards',
52'float': 'float 6s ease-in-out infinite',
53'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
54'glow': 'glow 3s ease-in-out infinite alternate',
55},
56keyframes: {
57fadeUp: { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
58float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' } },
59glow: { '0%': { boxShadow: '0 0 20px rgba(255, 115, 64, 0.15)' }, '100%': { boxShadow: '0 0 40px rgba(255, 115, 64, 0.3)' } }
60}
61}
62}
63}
64</script>
64
65<style>
66/* Kill horizontal overflow on mobile. `overflow-x: hidden` on body
67   alone doesn't clip position:fixed children (the bg blur blobs at
68   top-right / bottom-left). Applying to <html> + using `clip` as a
69   progressive-enhancement catches the edge cases on mobile Safari /
70   Chrome where a decorative element pushes document width past
71   viewport and gives the whole page a side-scroll. */
72html, body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; }
73.glass-dark { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(17, 17, 20, 0.08); }
74.glass-card { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(17, 17, 20, 0.08); }
75.grid-dark {
76  background-color: #ffffff;
77  background-image:
78    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(255, 115, 64,0.10), transparent 70%),
79    radial-gradient(ellipse 55% 45% at 10% 100%, rgba(255, 115, 64,0.05), transparent 70%),
80    linear-gradient(to right,  rgba(17,17,20,0.025) 1px, transparent 1px),
81    linear-gradient(to bottom, rgba(17,17,20,0.025) 1px, transparent 1px),
82    linear-gradient(to right,  rgba(255, 94, 31,0.09) 1px, transparent 1px),
83    linear-gradient(to bottom, rgba(255, 94, 31,0.09) 1px, transparent 1px);
84  background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px, 120px 120px, 120px 120px;
85  mask-image: radial-gradient(ellipse at center, black 60%, rgba(0,0,0,0.6) 85%, transparent 100%);
86  -webkit-mask-image: radial-gradient(ellipse at center, black 60%, rgba(0,0,0,0.6) 85%, transparent 100%);
87}
88.text-gradient-brand { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(135deg, #ff7340, #ff5e1f, #ffc4a3); }
89.text-gradient-red { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(135deg, #ef4444, #dc2626, #991b1b); }
90
91/* Display heading — matches the .tour-heading style on /tour and the
92   SlabOS wordmark in nav. Inter 900 italic uppercase, tight tracking,
93   tight line-height. Color is text-white by default; sections use
94   .text-gradient-brand spans inside for the orange hits. */
95.heading-display {
96  font-family: 'Inter', system-ui, sans-serif;
97  font-weight: 900;
98  font-style: italic;
99  text-transform: uppercase;
100  letter-spacing: -0.035em;
101  line-height: 0.92;
102}
103.eyebrow-tag {
104  font-size: 11px;
105  font-weight: 800;
106  letter-spacing: 0.22em;
107  text-transform: uppercase;
108}
109.border-glow { box-shadow: 0 0 0 1px rgba(255, 115, 64, 0.2), 0 0 30px rgba(255, 115, 64, 0.1); }
110.card-hover {
111  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
112  will-change: transform;
113}
114.card-hover:hover {
115  transform: translateY(-6px);
116  border-color: rgba(255, 94, 31, 0.5) !important;
117  box-shadow: 0 24px 48px -20px rgba(255, 94, 31, 0.25), 0 0 0 1px rgba(255, 94, 31, 0.15), 0 0 60px -20px rgba(255, 115, 64, 0.3);
118}
119.stat-huge {
120  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
121  background: linear-gradient(135deg, #ff5e1f 0%, #ff7340 40%, #ff9d6e 70%, #ff5e1f 100%);
122  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
123  animation: shimmer 6s ease-in-out infinite;
124}
125@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
126@keyframes breathe { 0%, 100% { box-shadow: 0 0 20px rgba(255, 115, 64, 0.15), 0 0 60px rgba(255, 115, 64, 0.08); } 50% { box-shadow: 0 0 40px rgba(255, 115, 64, 0.3), 0 0 90px rgba(255, 115, 64, 0.15); } }
127.popular-breathe { animation: breathe 5s ease-in-out infinite; }
128::selection { background: rgba(255, 115, 64, 0.3); color: #fff; }
129.compare-row:hover { background: linear-gradient(90deg, rgba(255, 115, 64,0.04), rgba(255, 115, 64,0.08), rgba(255, 115, 64,0.04)); }
130/* Comparison table: mobile-fit so all 4 columns squeeze into 375px
131   without horizontal scroll. We override Tailwind's `p-4 lg:p-5` on
132   every cell (.compare-row > div, .cmp-header > div) at narrow
133   viewports, and also scale down cell text/icons/pill sizes. The
134   cells still sit in the same 4-col grid as desktop — visual parity
135   preserved, just tighter. */
136@media (max-width: 639px) {
137  .compare-row > div,
138  .cmp-header > div {
139    padding: 8px 6px !important;
140    /* break-word only kicks in when a single word is too long for the
141       cell — preserves clean word-boundary wrapping for "AI price list
142       import" but still avoids "permissions" overflowing 5px. Mid-word
143       breaks like "interactiv/e" no longer happen. */
144    overflow-wrap: break-word;
145    word-break: normal;
146    hyphens: none;
147  }
148  /* Header column labels: shrink + zero-tracking so SPREADSHEETS fits
149     on one line at the 75px column width. "LEGACY SOFTWARE" still
150     wraps to 2 lines (LEGACY / SOFTWARE) but cleanly at the word
151     boundary. The other column labels (FEATURE, SLABOS) stay tiny
152     and inline. */
153  .cmp-header .eyebrow-tag { font-size: 7.5px !important; letter-spacing: 0 !important; font-weight: 800; }
154  /* Hide the leftmost feature icon on mobile to gain ~16-20px of text
155     room — "AI price list import (PDF → DB)" no longer wraps to 5 lines.
156     Icons add visual noise at this scale anyway; the feature label is
157     descriptive enough alone. We target the first SVG inside the
158     left-most cell (col 1) of every compare-row. */
159  .compare-row > div:first-child > svg:first-child { display: none !important; }
160  .compare-row > div:first-child { gap: 0 !important; padding-left: 8px !important; }
161  .compare-row .text-sm,
162  .compare-row .text-base { font-size: 11px !important; line-height: 1.25 !important; }
163  .compare-row span.font-bold,
164  .compare-row span.font-semibold { font-size: 11px !important; line-height: 1.25 !important; }
165  .compare-row svg.w-4 { width: 12px !important; height: 12px !important; }
166  .compare-row svg.w-7 { width: 22px !important; height: 22px !important; }
167  .compare-row .gap-2\.5 { gap: 4px !important; }
168  .compare-row span.inline-block,
169  .compare-row span.inline-flex { font-size: 8.5px !important; padding: 2px 5px !important; letter-spacing: 0.04em !important; }
170  .cmp-header .heading-display { font-size: 11px !important; line-height: 1.1 !important; }
171  .cmp-header .eyebrow-tag { font-size: 8.5px !important; letter-spacing: 0.08em !important; }
172  /* Italic prose cells like "Yours (in hell)", "Good luck",
173     "Never — that's the point" need to fit too — shrink to fit. */
174  .compare-row .text-xs.italic { font-size: 9.5px !important; line-height: 1.2 !important; }
175  /* Category band tightening */
176  .compare-row + div.bg-brand-500\/\[0\.06\],
177  div.relative.bg-brand-500\/\[0\.06\] { padding: 6px 8px !important; }
178  div.relative.bg-brand-500\/\[0\.06\] svg { width: 11px !important; height: 11px !important; }
179  div.relative.bg-brand-500\/\[0\.06\] span { font-size: 9px !important; letter-spacing: 0.12em !important; }
180  /* Year/price values in the intro/footer rows */
181  .compare-row .font-extrabold { font-size: 11px !important; }
182}
183/* FAQ — mobile-only typography pass.
184   The summary spans use the heading-display class (Inter 900 italic
185   uppercase, tight tracking, 0.92 line-height) which reads as
186   "shouting" at mobile sizes for what's supposed to be a Q&A pattern.
187   On mobile only, override to a quieter sentence-case medium-weight
188   sans so the questions feel conversational, not aggressive. Desktop
189   keeps the original italic-display treatment. */
190@media (max-width: 767px) {
191  details summary > span.heading-display {
192    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
193    font-style: normal !important;
194    font-weight: 600 !important;
195    text-transform: none !important;
196    letter-spacing: -0.01em !important;
197    line-height: 1.35 !important;
198    font-size: 16px !important;
199  }
200}
201.check-bubble { background: radial-gradient(circle, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.02)); }
202/* Pain card — red bleed effect for the stack tax section */
203.pain-card { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(239, 68, 68, 0.25); }
204.pain-card:hover { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 20px 40px -20px rgba(239, 68, 68, 0.3); }
205.relief-card { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(16, 185, 129, 0.25); }
206.relief-card:hover { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 20px 40px -20px rgba(16, 185, 129, 0.3); }
207/* ROI slider styling */
208input[type="range"].brand-slider {
209  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: linear-gradient(to right, #ff5e1f var(--fill, 50%), #e5e5e8 var(--fill, 50%)); border-radius: 999px; outline: none;
210}
211input[type="range"].brand-slider::-webkit-slider-thumb {
212  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: white; border: 3px solid #ff5e1f; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px rgba(255, 94, 31,0.35); transition: transform 0.15s ease;
213}
214input[type="range"].brand-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
215input[type="range"].brand-slider::-moz-range-thumb { width: 24px; height: 24px; background: white; border: 3px solid #ff5e1f; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px rgba(255, 94, 31,0.35); }
216/* Feature pill */
217.feature-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255, 94, 31,0.25); font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); transition: all 0.2s ease; }
218.feature-pill:hover { border-color: rgba(255, 94, 31,0.6); background: rgba(255, 94, 31,0.12); color: #ff9d6e; transform: translateY(-2px); }
219.feature-pill iconify-icon { color: #ff9d6e; }
220
221    /* ── Role roller — ported from the landing page hero. Vertical
222         marquee of every seat in the shop; the gradient text-fill is
223         the same brand ramp used by .text-gradient-brand. ── */
224    .roller-lite {
225      display:inline-block; height:1.12em; overflow:hidden; vertical-align:bottom;
226      -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
227              mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
228    }
229    .roller-lite-track { display:flex; flex-direction:column; align-items:center; will-change:transform; }
230    .roller-lite-track > span {
231      display:block; height:1.12em; line-height:1.12; white-space:nowrap;
232      background: linear-gradient(135deg, #ff5e1f 0%, #ff7340 40%, #ff9d6e 70%, #ff5e1f 100%);
233      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
234    }
235    @media (prefers-reduced-motion: reduce) { .roller-lite { height:auto; } .roller-lite-track > span:not(:first-child) { display:none; } }
236
237  /* ============================================================
238     DONUT POPUP — fires once, as the reader leaves Chapter 03
239     (the legacy-tax pain chapter) and reaches Chapter 04. Deliberately
240     NOT a lead-capture interrupt: no form, one soft CTA, and every
241     obvious way out works (X, Esc, backdrop, the secondary button).
242     ============================================================ */
243  .dnt-chip{
244    color:inherit;font:inherit;cursor:pointer;background:none;border:0;padding:0;
245    text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
246    text-decoration-color:rgba(255,94,31,0.5);transition:color .18s;
247  }
248  .dnt-chip:hover{color:#ff8246;}
249
250  .dnt-back{
251    position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
252    padding:20px;background:rgba(4,4,4,0.72);
252backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
253    opacity:0;pointer-events:none;transition:opacity .3s ease;
254  }
255  .dnt-back.is-open{opacity:1;pointer-events:auto;}
256  /* Author styles beat the UA sheet, so display:flex above would defeat the
257     hidden attribute outright. Restore it explicitly. */
258  .dnt-back[hidden]{display:none;}
259
260  .dnt-modal{
261    position:relative;width:100%;max-width:760px;max-height:88vh;overflow:auto;
262    display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
263    border-radius:20px;background:linear-gradient(180deg,#131010 0%,#0a0908 100%);
264    border:1px solid rgba(255,94,31,0.22);
265    box-shadow:0 50px 100px -30px rgba(0,0,0,0.9), 0 0 70px -24px rgba(255,94,31,0.3);
266    transform:translateY(14px) scale(.985);transition:transform .34s cubic-bezier(.16,1,.3,1);
267  }
268  .dnt-back.is-open .dnt-modal{transform:none;}
269
270  .dnt-photo{background:#0c0a09;overflow:hidden;border-radius:20px 0 0 20px;}
271  .dnt-photo img{display:block;width:100%;height:100%;object-fit:cover;}
272
273  .dnt-body{padding:30px 30px 26px;}
274  .dnt-eyebrow{
275    font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
276    color:#ff8246;margin-bottom:11px;
277  }
278  .dnt-h{
279    font-family:inherit;font-weight:900;font-style:italic;text-transform:uppercase;
280    letter-spacing:-.03em;line-height:1.02;color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0;
281  }
282  .dnt-p{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,0.6);margin:15px 0 0;}
283  .dnt-wink{color:rgba(255,255,255,0.42);font-style:italic;}
284  .dnt-cap{
285    margin-top:16px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
286    color:rgba(255,255,255,0.3);
287  }
288  .dnt-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
289  .dnt-go{
290    display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:11px;
291    font-size:13.5px;font-weight:800;color:#fff;text-decoration:none;
292    border:1px solid rgba(255,255,255,0.18);
293    background:linear-gradient(180deg,#ff8246 0%,#ff5e1f 55%,#c96420 100%);
294    box-shadow:0 12px 26px -10px rgba(255,94,31,0.75), inset 0 1px 0 rgba(255,255,255,0.34);
295    transition:transform .18s cubic-bezier(.16,1,.3,1),filter .18s;
296  }
297  .dnt-go:hover{transform:translateY(-2px);filter:brightness(1.06);}
298  .dnt-later{
299    padding:12px 18px;border-radius:11px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
300    color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.05);
301    border:1px solid rgba(255,255,255,0.09);transition:color .18s,border-color .18s;
302  }
303  .dnt-later:hover{color:#fff;border-color:rgba(255,255,255,0.18);}
304  .dnt-x{
305    position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:99px;cursor:pointer;
306    display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);
307    background:rgba(10,9,8,0.65);border:1px solid rgba(255,255,255,0.12);
308    backdrop-filter:blur(6px);transition:color .18s,background .18s;
309  }
310  .dnt-x:hover{color:#fff;background:rgba(30,26,24,0.85);}
311
312  @media (max-width:720px){
313    .dnt-modal{grid-template-columns:1fr;max-height:90vh;}
314    .dnt-photo{border-radius:20px 20px 0 0;max-height:34vh;}
315    .dnt-body{padding:22px 20px 20px;}
316  }
317  @media (prefers-reduced-motion:reduce){
318    .dnt-back,.dnt-modal,.dnt-go{transition:none;}
319    .dnt-back.is-open .dnt-modal{transform:none;}
320  }
321
322  /* ============================================================
323     MIGRATION MANIFEST — the yellow card, lifted from the admin
324     panel's own Full Client Migration panel. Deliberately the only
325     high-chroma block on a black-and-orange page: the list of what
326     actually moves is the proof behind "we migrate your data", so it
327     should be the thing the eye lands on in this chapter. Type is
328     owned here rather than via Tailwind's text-white utilities —
329     every one of those would need fighting on a light background.
330     ============================================================ */
331  .mig-manifest{
332    border-radius:1rem;padding:1.35rem 1.35rem 1.5rem;
333    background:linear-gradient(180deg,#ffdc47 0%,#f5c400 100%);
334    border:1px solid rgba(0,0,0,0.16);
335    box-shadow:
336      0 26px 55px -20px rgba(0,0,0,0.8),
337      0 0 52px -16px rgba(245,196,0,0.42),
338      inset 0 1px 0 rgba(255,255,255,0.45);
339    color:#191509;
340  }
341  @media (min-width:1024px){ .mig-manifest{padding:1.6rem 1.6rem 1.75rem;} }
342  .mig-kicker{
343    font-size:10px;font-weight:900;letter-spacing:0.22em;text-transform:uppercase;
344    color:rgba(25,21,9,0.74);margin-bottom:0.5rem;
345  }
346  @media (min-width:640px){ .mig-kicker{font-size:11px;} }
347  .mig-lede{font-size:13.5px;line-height:1.6;color:rgba(25,21,9,0.78);margin:0 0 1.1rem;}
348  .mig-lede strong{color:#0d0b04;font-weight:800;}
349  .mig-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.62rem;}
350  .mig-list li{display:flex;align-items:flex-start;gap:0.7rem;font-size:13px;line-height:1.4;color:rgba(25,21,9,0.72);}
351  .mig-list strong{color:#0d0b04;font-weight:800;}
352  .mig-more{padding-top:0.72rem;border-top:1px solid rgba(0,0,0,0.14);}
353  .mig-n{
354    flex-shrink:0;width:19px;height:19px;margin-top:1px;border-radius:99px;
355    display:inline-flex;align-items:center;justify-content:center;
356    font-size:10px;font-weight:900;color:#ffd84a;background:#191509;
357  }
358  .mig-n-plus{color:#191509;background:#e8521a;}
359</style>
360<link rel="stylesheet" href="/vendor/fonts.css">
361<style>
362/* Laptop / small-desktop zoom default — mirrors Ctrl- twice in Chrome.
363   See landing.html for full rationale. */
364@media (min-width: 768px) and (max-width: 1500px) {
365  body { zoom: 0.8; }
366}
367</style>
368  
368<script async src="/ga.js"></script>
368
369</head>
370<body class="min-h-screen overflow-x-hidden bg-black text-white font-sans relative">
371<!-- Body is true black. No fixed grid overlay, no fixed brand glow
372     orbs — sections that want atmosphere apply their own scoped
373     glows locally. Keeps the page bg truly black. -->
374
375<!-- Header — dark-glass now that the body is dark. Same border-bottom
376     orange-tint accent as /tour. -->
377<header class="fixed top-0 left-0 right-0 z-50 bg-black/85 backdrop-blur-xl border-b border-[#ff5e1f]/50">
378  <div class="max-w-[1400px] mx-auto px-6 lg:px-12 h-16 lg:h-20 flex items-center justify-between">
379    <a href="/" class="flex items-center gap-3 group">
380      <img src="/logo.png" alt="SlabOS" class="w-9 h-9 object-contain">
381      <div>
382        <span class="text-xl font-black italic uppercase tracking-tighter text-white" style="letter-spacing: -0.035em;">Slab<span class="text-brand-500">OS</span></span>
383        <span class="hidden lg:block text-[10px] text-white/50 -mt-1 tracking-wider uppercase font-bold">Fabrication Suite</span>
384      </div>
385    </a>
386    <nav class="hidden lg:flex font-bold gap-x-8 items-center">
387      <a href="/#features" class="hover:text-brand-400 transition-colors text-sm font-bold text-white">Features</a>
388      <a href="/#workflows" class="hover:text-brand-400 transition-colors text-sm font-bold text-white">Workflows</a>
389      <a href="/tour" class="hover:text-brand-400 transition-colors text-sm font-bold text-white">Tour</a>
390      <a href="/onsite" class="hover:text-brand-400 transition-colors text-sm font-bold text-white">Onsite</a>
391      <a href="/win-work" class="hover:text-brand-400 transition-colors text-sm font-bold text-white">Win Work</a>
392      <a href="/pricing.html" class="transition-colors text-sm text-brand-500 font-bold">Pricing</a>
393      <a href="/demo" class="hover:text-brand-400 transition-colors text-sm font-bold text-brand-500">Try Demo</a>
394    </nav>
395    <div class="flex gap-x-4 items-center">
396      <a href="/login" class="hidden lg:block text-sm font-bold text-white hover:text-brand-500 transition-colors">Sign in</a>
397      <a href="/book" target="_blank" class="hidden sm:flex bg-brand-500 text-white hover:bg-brand-600 transition-all font-semibold px-5 py-2.5 rounded-lg text-sm items-center gap-2 group shadow-lg shadow-brand-500/20">
398        <iconify-icon icon="solar:calendar-bold" width="16"></iconify-icon>
399        Book a Demo
400      </a>
401      <!-- Mobile hamburger — inline SVG so it ALWAYS renders (the
402           iconify CDN version was occasionally failing to hydrate on
403           mobile, leaving the button with no visible content and
404           looking like the nav was broken). -->
405      <a href="/book" target="_blank" rel="noopener" class="sm:hidden inline-flex items-center gap-1.5 bg-brand-500 hover:bg-brand-600 text-white font-bold text-xs px-3 py-2 rounded-lg shadow-md shadow-brand-500/30 transition-colors whitespace-nowrap">
406        <iconify-icon icon="solar:calendar-mark-bold" width="14"></iconify-icon>
407        Book a Call
408      </a>
409      <button id="mobile-menu-btn" class="lg:hidden w-10 h-10 flex items-center justify-center rounded-lg text-white/65 hover:text-white hover:bg-white/[0.03] transition-colors" onclick="document.getElementById('mobile-nav').classList.toggle('hidden')">
410        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
411      </button>
412    </div>
413  </div>
414  <div id="mobile-nav" class="hidden lg:hidden border-t border-white/10 bg-black/95 backdrop-blur-xl">
415    <div class="px-6 py-5 space-y-4">
416      <a href="/#features" class="block text-sm font-bold text-white hover:text-brand-400 transition-colors">Features</a>
417      <a href="/#workflows" class="block text-sm font-bold text-white hover:text-brand-400 transition-colors">Workflows</a>
418      <a href="/tour" class="block text-sm font-bold text-white hover:text-brand-400 transition-colors">Tour</a>
419      <a href="/onsite" class="block text-sm font-bold text-white hover:text-brand-400 transition-colors">Onsite</a>
420      <a href="/win-work" class="block text-sm font-bold text-white hover:text-brand-400 transition-colors">Win Work</a>
421      <a href="/pricing.html" class="block text-sm font-bold text-brand-500">Pricing</a>
422      <a href="/demo" class="block text-sm font-bold text-brand-500 hover:text-brand-400 transition-colors">Try Demo</a>
423      <a href="/contact" class="block text-sm font-bold text-white hover:text-brand-400 transition-colors">Contact</a>
424      <hr class="border-white/10">
425      <a href="/login" class="block text-sm font-bold text-white hover:text-brand-500 transition-colors">Sign in</a>
426      <a href="/book" target="_blank" class="block w-full text-center bg-brand-500 text-white hover:bg-brand-600 transition-all font-bold px-5 py-3 rounded-lg text-sm">Book a Demo</a>
427    </div>
428  </div>
429</header>
430
431<div class="relative z-10 flex flex-col min-h-screen pt-16 lg:pt-20">
432  <main class="flex-1 w-full">
433
434    <!-- ============================================================
435         CHAPTER 01 — THE PRICING HERO.
436         Single price + setup fee. No tiers. No drop-down. No "starting
437         at." The whole point of this hero is to remove buying anxiety
438         immediately for an older shop-owner audience that hates
439         multi-tier SaaS pages. Big italic numbers, vivid orange,
440         vignette atmosphere matching /tour. Spline membership card
441         goes in the iframe slot when published — placeholder URL
442         keeps the page deployable until then.
443         ============================================================ -->
444    <section class="relative py-12 lg:py-24 px-6 lg:px-12 overflow-hidden">
445      <!-- No section-level glows — body is true black, only the
446           headline's text-shadow provides the orange punch. -->
447
448
449      <div class="relative max-w-[1400px] mx-auto text-center">
450        <!-- Chapter marker — centered above the headline.
451             Hidden on mobile (cleaner top-of-page hero — the headline
452             can speak for itself at small widths); shown md+ where
453             there's room for the chapter rhythm to breathe. -->
454        <div class="hidden md:flex items-center justify-center gap-3 mb-10 animate-fade-up">
455          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
456            <span class="heading-display text-sm text-brand-500">01</span>
457          </div>
458          <div class="eyebrow-tag text-brand-400">Chapter 01 · The price</div>
459        </div>
460
461        <h1 class="heading-display text-4xl sm:text-6xl lg:text-8xl xl:text-[7rem] text-white animate-fade-up" style="text-shadow: 0 4px 60px rgba(255, 94, 31, 0.25);">
462          <span class="text-gradient-brand">Cancel</span><span class="text-white"> the other six.</span><br>
463          <span class="text-gradient-brand">This one</span><span class="text-emerald-400" style="text-shadow: 0 4px 60px rgba(16, 185, 129, 0.35);"> pays for itself.</span>
464        </h1>
465        <!-- Hero subhead — kept tight so mobile doesn't read as a wall.
466             Three concrete sentences, no run-on lists. Detail lives in
467             chapters 02-05; this just plants the proposition. -->
468        <p class="text-base sm:text-lg lg:text-xl text-white/85 mt-8 lg:mt-10 max-w-2xl lg:max-w-3xl mx-auto font-medium leading-relaxed animate-fade-up">
469          Every shop runs the whole platform &mdash; one flat bill, unlimited users, done-by-us migration included. Your rate is set on a call.
470          <span class="font-bold text-white">Book a call and we'll price it to your shop.</span>
471        </p>
472
473        <!-- Trust signal — mobile only. Surfaces verifiable proof
474             (matches the launch-shop migration in FAQ #2)
475             above the fold so users don't have to scroll 18,000px to
476             chapter 07's credibility strip to see a real number.
477             Desktop already has plenty of proof in view; this is
478             specifically the mobile-fold problem. -->
479        <div class="md:hidden flex items-center justify-center gap-2 mt-5 animate-fade-up">
480          <div class="flex -space-x-2">
481            <div class="w-5 h-5 rounded-full bg-brand-500 border-2 border-black"></div>
482            <div class="w-5 h-5 rounded-full bg-brand-400 border-2 border-black"></div>
483            <div class="w-5 h-5 rounded-full bg-brand-300 border-2 border-black"></div>
484          </div>
485          <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-white/55">
486            <span class="text-white">60,000+ quotes</span> already migrated
487          </span>
488        </div>
489
490        <div class="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-3 mt-10 sm:mt-12 animate-fade-up">
491          <a href="/book" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 bg-brand-500 hover:bg-brand-600 text-black text-sm font-black uppercase tracking-wider px-7 py-3.5 rounded-xl shadow-xl shadow-brand-500/40 transition-all group">
492            Book a 20-min demo
493            <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="14"></iconify-icon>
494          </a>
495          <!-- Secondary CTA renders as a button on desktop, as an inline
496               text link on mobile. Two siblings, opposite visibility —
497               cleaner button hierarchy on mobile (primary alone owns
498               the CTA stack). -->
499          <a href="#chapter-02" class="hidden sm:inline-flex items-center gap-1.5 bg-white/5 backdrop-blur border border-white/15 hover:bg-white/10 hover:border-white/30 text-white text-sm font-black uppercase tracking-wider px-7 py-3.5 rounded-xl transition-all">
500            What setup buys you
501            <iconify-icon icon="solar:arrow-down-linear" width="14"></iconify-icon>
502          </a>
503          <a href="#chapter-02" class="sm:hidden inline-flex items-center gap-1.5 mt-1 text-sm font-bold text-brand-400 hover:text-brand-300 transition-colors">
504            or see what setup buys
505            <iconify-icon icon="solar:arrow-down-linear" width="14"></iconify-icon>
506          </a>
507        </div>
508
509        <!-- Hero stat strip — 4 receipts under the buttons. Mobile
510             stacks to 2x2; desktop is a 4-col row. Each tile maps
511             to a verifiable claim made elsewhere on the page
512             (14,517 jobs → launch-shop migration in FAQ;
513             32 strategies → Chapter 05 AI Suite; <3 min → Chapter
514             06 ROI assumption; $0 per seat → the whole hero). This
515             reads as proof, not marketing. -->
516        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-5 mt-12 lg:mt-14 max-w-4xl mx-auto animate-fade-up">
517          <div class="text-center px-3 py-4 lg:py-5 bg-white/[0.02] border border-white/10 rounded-xl">
518            <div class="heading-display text-2xl sm:text-3xl lg:text-5xl text-gradient-brand leading-none">35,000+</div>
519            <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.14em] text-white/55 mt-2">Jobs migrated, zero lost</div>
520          </div>
521          <div class="text-center px-3 py-4 lg:py-5 bg-white/[0.02] border border-white/10 rounded-xl">
522            <div class="heading-display text-2xl sm:text-3xl lg:text-5xl text-gradient-brand leading-none">32,000</div>
523            <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.14em] text-white/55 mt-2">Nesting strategies per run</div>
524          </div>
525          <div class="text-center px-3 py-4 lg:py-5 bg-white/[0.02] border border-white/10 rounded-xl">
526            <div class="heading-display text-2xl sm:text-3xl lg:text-5xl text-gradient-brand leading-none">&lt;3<span class="text-base sm:text-lg lg:text-2xl text-white/50 ml-1">min</span></div>
527            <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.14em] text-white/55 mt-2">Quote vs 30-min industry avg</div>
528          </div>
529          <div class="text-center px-3 py-4 lg:py-5 bg-white/[0.02] border border-white/10 rounded-xl">
530            <div class="heading-display text-2xl sm:text-3xl lg:text-5xl text-gradient-brand leading-none">$0</div>
531            <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.14em] text-white/55 mt-2">Per-user charge. Ever.</div>
532          </div>
533        </div>
534
535        <!-- Hero chips: single bordered pill on mobile (cleaner, less
536             floaty than 3 separate small chips), back to 3 inline
537             chips at sm+ where there's horizontal room. -->
538        <div class="sm:hidden mt-7 flex justify-center animate-fade-up">
539          <div class="inline-flex items-center gap-2 bg-white/[0.04] border border-white/10 rounded-full px-4 py-2 text-[10.5px] font-bold uppercase tracking-[0.14em] text-white/65">
540            <iconify-icon icon="solar:check-circle-bold" class="text-brand-400" width="13"></iconify-icon>
541            <span>One bill</span>
542            <span class="text-white/25">·</span>
543            <span>Migration in</span>
544            <span class="text-white/25">·</span>
545            <span>Cancel anytime</span>
546          </div>
547        </div>
548        <div class="hidden sm:flex flex-wrap justify-center gap-x-6 gap-y-2 mt-10 text-xs font-bold uppercase tracking-[0.15em] text-white/65 animate-fade-up">
549          <span class="inline-flex items-center gap-1.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400" width="14"></iconify-icon>One bill. No add-ons.</span>
550          <span class="inline-flex items-center gap-1.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400" width="14"></iconify-icon>Migration included</span>
551          <span class="inline-flex items-center gap-1.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400" width="14"></iconify-icon>Cancel anytime</span>
552        </div>
553        <!--
554          Operator Card Spline goes here once the scene's background
555          is set to transparent or #000 in the Spline editor.
556          The current scene at https://my.spline.design/cardpass-Xp5NWYDmGahpBxeoq77VqrQP/
557          has a baked-in bright/white background plane that bleeds
558          through the iframe regardless of any CSS we apply outside
559          the iframe (browsers can't override iframe content).
560          Fix: open the scene in Spline editor → Scene settings →
561          Background → set to Transparent OR #000000. Then re-paste
562          the iframe block here.
563        -->
564      </div>
565    </section>
566
567    <!-- ============================================================
568         CHAPTER 01½ — ONE PRODUCT, NO TIERS.
569         There is no tier ladder: we have never sold a gated plan, every
570         shop runs the full platform. This chapter is the "included for
571         every shop" capability panel + the role roller. NO RATES GO ON
572         THIS PAGE — the number is set on the call, and the pricing model
573         (bands follow monthly job volume) is explained in the note under
574         the roller and in full on /proposal.
575         Enterprise strip below anchors against ServiceTitan
576         at 50 staff. Visual language inherits from the rest of the
577         page — card-hover, popular-breathe, pain-card, relief-card,
578         heading-display, text-gradient-brand.
579         ============================================================ -->
580    <section id="plans" class="relative px-6 lg:px-12 py-12 lg:py-24 overflow-hidden">
581      <!-- Soft brand glow top-right — same atmosphere pattern as
582           Chapter 02. Body is true black; this is local only. -->
583      <div class="absolute top-0 right-[-15%] w-[500px] h-[500px] bg-brand-500 opacity-[0.04] blur-[140px] rounded-full pointer-events-none"></div>
584
585      <div class="relative max-w-[1300px] mx-auto">
586        <div class="hidden md:flex items-center gap-3 mb-8">
587          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
588            <span class="heading-display text-sm text-brand-500">01½</span>
589          </div>
590          <div class="eyebrow-tag text-brand-400">Chapter 01½ · What you get</div>
591        </div>
592
593        <div class="mb-12 lg:mb-16">
594          <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white max-w-4xl">
595            One product.<br>
596            <span class="text-gradient-brand">Everything in it.</span>
597          </h2>
598          <p class="text-base sm:text-lg text-white/70 mt-6 max-w-2xl leading-relaxed">
599            There is no tier where we hold something back. Every shop gets the entire platform, every feature, unlimited users &mdash; <span class="text-white font-semibold">no per-seat creep, ever.</span> The only thing that changes is what you pay, and that follows the work going through your shop, not how many people you hire.
600          </p>
601        </div>
602
603        <!-- ─── EVERYTHING INCLUDED ─── -->
604        <!-- Replaces the old 3-tier feature ladder. We have never sold a
605             gated tier; every shop runs the full platform. Columns are
606             capability groups, not plans. -->
607        <div class="rounded-2xl border border-white/10 overflow-hidden bg-white/[0.015]">
608          <div class="flex flex-wrap items-baseline justify-between gap-3 bg-white/[0.04] border-b border-white/[0.07] px-5 py-4 lg:px-6">
609            <div class="eyebrow-tag text-brand-400">Included for every shop &mdash; no tiers, no add-ons</div>
610            <div class="text-[11px] text-white/45">150+ capabilities &middot; one login &middot;
610 one bill</div>
611          </div>
612          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
613            <div class="px-5 py-5 lg:px-6 lg:py-6 border-b lg:border-b-0 lg:border-r border-white/[0.07] last:border-r-0">
614              <div class="text-[10px] font-black uppercase tracking-[0.16em] text-white mb-3.5">Quote &amp; win</div>
615              <ul class="space-y-2 text-[13px] leading-snug text-white/65">
616                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>2D drawing engine + live 3D</span></li>
617                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Blueprint takeoff from plan sets <span class="text-brand-400">(beta)</span></span></li><li class="flex items-start gap-2 ft-hero"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>LiDAR home scan from the crew app <span class="text-brand-400">(beta)</span></span></li>
618                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Custom tiered pricing engine</span></li>
619                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>AI PDF price list import</span></li>
620                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Quote widget on your website</span></li>
621                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Customer portal + e-sign</span></li><li class="flex items-start gap-2 ft-hero"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Signed change orders from the portal</span></li>
622                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>3D &amp; AR in their kitchen</span></li>
623                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Email from your own inbox</span></li>
624                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Direct mail campaigns</span></li>
625              </ul>
626            </div>
627            <div class="px-5 py-5 lg:px-6 lg:py-6 border-b lg:border-b-0 lg:border-r border-white/[0.07] last:border-r-0">
628              <div class="text-[10px] font-black uppercase tracking-[0.16em] text-white mb-3.5">Fabricate</div>
629              <ul class="space-y-2 text-[13px] leading-snug text-white/65">
630                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Auto-nesting on real inventory</span></li>
631                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>DXF export to CNC</span></li>
632                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>DXF import + laser templating</span></li>
633                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Seams, edges, splash as geometry</span></li><li class="flex items-start gap-2 ft-hero"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>
633Template sign-off, page by page</span></li><li class="flex items-start gap-2 ft-hero"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Fixtures auto-detected from the drawing</span></li>
634                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Slab labels + QR, barcode, RFID</span></li>
635                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Warehouse map by bay</span></li>
636              </ul>
637            </div>
638            <div class="px-5 py-5 lg:px-6 lg:py-6 border-b lg:border-b-0 lg:border-r border-white/[0.07] last:border-r-0">
639              <div class="text-[10px] font-black uppercase tracking-[0.16em] text-white mb-3.5">Run the shop</div>
640              <ul class="space-y-2 text-[13px] leading-snug text-white/65">
641                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Custom activity calendar</span></li>
642                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Crew mobile app + GPS</span></li>
643                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Scheduling templates + shop hours</span></li>
644                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Inventory, receiving to remnant</span></li>
645                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Calls &amp; texts logged, recordings kept</span></li>
646                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Dial leads from your browser</span></li>
647                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Shop HR &mdash; people, certs, gear</span></li>
648                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Role-based permissions</span></li>
649              </ul>
650            </div>
651            <div class="px-5 py-5 lg:px-6 lg:py-6 border-b lg:border-b-0 lg:border-r border-white/[0.07] last:border-r-0">
652              <div class="text-[10px] font-black uppercase tracking-[0.16em] text-white mb-3.5">Know your numbers</div>
653              <ul class="space-y-2 text-[13px] leading-snug text-white/65">
654                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>AI assistant on your own data</span></li><li class="flex items-start gap-2 ft-hero"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Connect your own AI (MCP)</span></li>
655                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Predictive margin bands</span></li>
656                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Full job costing, actual vs quoted</span></li>
657                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Salesperson dashboards</span></li>
658                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>QuickBooks + Google Maps</span></li>
659                <li class="flex items-start gap-2"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Legacy migration, drawings included</span></li>
660              </ul>
661            </div>
662          </div>
663          <div class="flex flex-wrap gap-x-6 gap-y-2 bg-white/[0.03] border-t border-white/[0.07] px-5 py-3.5 lg:px-6 text-[11px] font-bold text-white/75">
664            <span class="flex items-center gap-1.5 whitespace-nowrap"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>Unlimited users</span><span class="flex items-center gap-1.5 whitespace-nowrap"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>No per-seat fees</span><span class="flex items-center gap-1.5 whitespace-nowrap"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>No feature gates</span><span class="flex items-center gap-1.5 whitespace-nowrap"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>Month-to-month</span><span class="flex items-center gap-1.5 whitespace-nowrap"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>Custom feature requests</span><span class="flex items-center gap-1.5 whitespace-nowrap"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>Your data, exportable</span><button type="button" id="dnt-chip" class="flex items-center gap-1.5 whitespace-nowrap dnt-chip"><iconify-icon icon="solar:check-circle-bold" class="text-brand-500 shrink-0" width="13"></iconify-icon>Donuts. Occasionally. Unannounced.</button>
665          </div>
666        </div>
667
668        <!-- ─── ONE SOFTWARE FOR / role roller ─── -->
669        <!-- Replaced three identical "Custom" band cards, which carried no
670             information once rates came off the public page. The pricing
671             MODEL is explained in the note beneath. -->
672        <div class="relative mt-6 rounded-2xl border border-white/10 bg-white/[0.015] px-6 py-14 lg:px-12 lg:py-20 text-center overflow-hidden">
673          <div class="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true">
674            <div class="w-[620px] h-[380px] rounded-full bg-brand-500 opacity-[0.07] blur-[130px]"></div>
675          </div>
676          <div class="relative">
677            <div class="eyebrow-tag text-brand-400 mb-5">Every seat in the building</div>
678            <h3 class="heading-display text-3xl sm:text-5xl lg:text-6xl text-white leading-[1.05]">
679              One software for<br class="sm:hidden">
680              <span class="roller-lite" role="text" aria-label="owners, estimators, salespeople, templators, fabricators, installers, foremen, schedulers, the front office, accounting">
681                <span class="roller-lite-track" id="rollerRolesTrack" aria-hidden="true">
682                <span>Owners</span>
683                <span>Estimators</span>
684                <span>Salespeople</span>
685                <span>Templators</span>
686                <span>Fabricators</span>
687                <span>Installers</span>
688                <span>Foremen</span>
689                <span>Schedulers</span>
690                <span>The front office</span>
691                <span>Accounting</span>
692                <span>Owners</span>
693                </span>
694              </span>
695            </h3>
696            <p class="text-base sm:text-lg text-white/65 mt-6 max-w-2xl mx-auto leading-relaxed">
697              One login, one dataset, one bill &mdash; from the quote to the truck to the invoice. <span class="text-white font-semibold">Unlimited users on every plan</span>, so the bill doesn't move when you hire.
698            </p>
699          </div>
700        </div>
701
702        <!-- ─── ENTERPRISE STRIP ─── -->
703        <!-- 50–300+ staff anchor. Prices SlabOS against ServiceTitan
704             ($15k–25k/mo + $30k impl. + 2-yr contract) using the
705             existing pain-card / relief-card classes for the visual
706             contrast. The big-shop reader sees the price ladder
707             continues past Multi-Location → has a clear path. -->
708        <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center bg-gradient-to-br from-white/[0.03] to-white/[0.01] border border-white/10 rounded-2xl p-7 lg:p-10">
709          <div>
710            <div class="eyebrow-tag text-brand-400 mb-3">Enterprise / Large shops</div>
711            <h3 class="heading-display text-3xl sm:text-4xl lg:text-5xl text-white">
712              50–300+ staff.<br>
713              <span class="text-gradient-brand">Let's talk.</span>
714            </h3>
715            <p class="text-sm text-white/70 mt-4 leading-relaxed max-w-md">
716              Multi-plant, hundreds of staff, ERP-class complexity. We price against ServiceTitan and JobBoss — not Moraware — at a fraction of the cost, live in days, not months. Annual contract. Dedicated account manager.
717            </p>
718            <a href="/book" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 mt-6 bg-brand-500 hover:bg-brand-600 text-black text-sm font-black uppercase tracking-wider px-6 py-3 rounded-xl shadow-lg shadow-brand-500/30 transition-all group">
719              Talk to the team
720              <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="14"></iconify-icon>
721            </a>
722          </div>
723          <div class="flex flex-col gap-3">
724            <div class="pain-card rounded-xl p-5">
725              <div class="text-[10px] font-black uppercase tracking-[0.18em] text-white/55 mb-2">ServiceTitan at 50 staff</div>
726              <div class="heading-display text-3xl lg:text-4xl text-red-400">$15k–$25k/mo</div>
727              <div class="text-xs text-white/60 mt-2">+ 2-year contract + $30k impl. <em class="text-red-400/85">Can't draw a countertop.</em></div>
728            </div>
729            <div class="relief-card rounded-xl p-5">
730              <div class="text-[10px] font-black uppercase tracking-[0.18em] text-white/55 mb-2">SlabOS at 50 staff</div>
731              <div class="heading-display text-3xl lg:text-4xl text-emerald-400">A fraction</div>
732              <div class="text-xs text-white/60 mt-2">Stone-native, purpose-built, live in days, month-to-month. Book a call for your number.</div>
733            </div>
734          </div>
735        </div>
736
737      </div>
738    </section>
739
740    <!-- ============================================================
741         CHAPTER 02 — WHAT THE $3,000 SETUP BUYS YOU.
742         Justifies the setup fee with five concrete deliverables.
743         Critical chapter for the older demographic — they want to
744         see line-by-line where the money goes. No card grid. Five
745         numbered rows in a clean stacked manifest, mirroring the
746         capabilities manifest below.
747         ============================================================ -->
748    <section id="chapter-02" class="relative px-6 lg:px-12 py-12 lg:py-24 overflow-hidden">
749      <div class="absolute top-1/3 right-[-10%] w-[400px] h-[400px] bg-brand-500 opacity-[0.05] blur-[120px] rounded-full pointer-events-none"></div>
750
751      <div class="relative max-w-[1300px] mx-auto">
752        <!-- Chapter marker hidden on mobile — the headline carries
753             enough weight on its own and dropping the dot+eyebrow
754             keeps the page from feeling formulaic over 7 chapters. -->
755        <div class="hidden md:flex items-center gap-3 mb-8">
756          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
757            <span class="heading-display text-sm text-brand-500">02</span>
758          </div>
759          <div class="eyebrow-tag text-brand-400">Chapter 02 · The setup</div>
760        </div>
761        <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white max-w-4xl">
762          What your <span class="text-gradient-brand">first week</span> looks like.
763        </h2>
764        <p class="text-white/65 mt-6 text-base lg:text-lg max-w-2xl font-medium">
765          Your first week on SlabOS is hands-on. We don't ship you a login and walk away — we do the work that gets your shop quoting on Friday.
766        </p>
767
768        <!-- The five setup deliverables — same row pattern as the
769             capabilities manifest below for visual cohesion. -->
770        <div class="mt-12 lg:mt-14">
771          <div class="grid lg:grid-cols-[60px_minmax(280px,1fr)_2fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
772            <div class="heading-display text-3xl lg:text-4xl text-white/15">01</div>
773            <div>
774              <h3 class="heading-display text-3xl lg:text-4xl text-white">Migration<br>from legacy.</h3>
775              <div class="eyebrow-tag text-brand-400 mt-3">
775Done by us · included</div>
776            </div>
777            <div class="text-white/85 leading-relaxed text-base lg:text-lg font-medium">
778              Every quote, account, job, and pricelist — pulled from your current software row-by-row. <span class="text-white/60">14,000+ quotes migrated to date.</span>
779            </div>
780          </div>
781
782          <div class="grid lg:grid-cols-[60px_minmax(280px,1fr)_2fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
783            <div class="heading-display text-3xl lg:text-4xl text-white/15">02</div>
784            <div>
785              <h3 class="heading-display text-3xl lg:text-4xl text-white">Your price list,<br>verified.</h3>
786              <div class="eyebrow-tag text-brand-400 mt-3">3 hours · with you on a call</div>
787            </div>
788            <div class="text-white/85 leading-relaxed text-base lg:text-lg font-medium">
789              Live call. We enter every material, edge, cutout, and labor rate with you. <span class="text-white/60">Quotes math-correct on day one.</span>
790            </div>
791          </div>
792
793          <div class="grid lg:grid-cols-[60px_minmax(280px,1fr)_2fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
794            <div class="heading-display text-3xl lg:text-4xl text-white/15">03</div>
795            <div>
796              <h3 class="heading-display text-3xl lg:text-4xl text-white">Six hours<br>1-on-1 training.</h3>
797              <div class="eyebrow-tag text-brand-400 mt-3">With the founders · weekly</div>
798            </div>
799            <div class="text-white/85 leading-relaxed text-base lg:text-lg font-medium">
800              Real sessions with Max + Connor. Not video courses. <span class="text-white/60">We don't stop until your crew can run a job end-to-end.</span>
801            </div>
802          </div>
803
804          <div class="grid lg:grid-cols-[60px_minmax(280px,1fr)_2fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
805            <div class="heading-display text-3xl lg:text-4xl text-white/15">04</div>
806            <div>
807              <h3 class="heading-display text-3xl lg:text-4xl text-white">Integrations<br>connected.</h3>
808              <div class="eyebrow-tag text-brand-400 mt-3">QuickBooks · Email · Maps · DocuSign</div>
809            </div>
810            <div class="text-white/85 leading-relaxed text-base lg:text-lg font-medium">
811              QuickBooks, email, Maps, DocuSign — all wired up by us. <span class="text-white/60">You never touch a developer console.</span>
812            </div>
813          </div>
814
815          <div class="grid lg:grid-cols-[60px_minmax(280px,1fr)_2fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-b border-white/[0.06]">
816            <div class="heading-display text-3xl lg:text-4xl text-white/15">05</div>
817            <div>
818              <h3 class="heading-display text-3xl lg:text-4xl text-white">Your team,<br>ready Friday.</h3>
819              <div class="eyebrow-tag text-brand-400 mt-3">Profiles · roles · live shop</div>
820            </div>
821            <div class="text-white/85 leading-relaxed text-base lg:text-lg font-medium">
822              Every employee profiled, roled, and trained. We run a real quote with your salesperson before handoff. <span class="text-white/60">Setup fees end here.</span>
823            </div>
824          </div>
825        </div>
826
827        <!-- Closer — what happens after week 1 -->
828        <div class="mt-12 lg:mt-16 text-center">
829          <div class="eyebrow-tag text-white/40 mb-3">After your first week</div>
830          <p class="heading-display text-3xl lg:text-5xl text-white">
831            One flat bill. <span class="text-gradient-brand">Forever.</span>
832          </p>
833          <p class="text-white/55 mt-4 text-sm font-medium max-w-xl mx-auto">
834            No tier upgrades. No surprise per-user charges. Unlimited users, every month. Book a call and we'll price it to your shop.
835          </p>
836        </div>
837      </div>
838    </section>
839
840    <!-- ============================================================
841         STACK TAX — single dramatic moment, no card grid. Big red
842         "$980+" anchors, breakdown is a clean inline-divided strip
843         beneath, then the SlabOS counterstrike. The whole section
844         reads as: HERE'S WHAT YOU PAY → HERE'S THE BREAKDOWN →
845         HERE'S WHAT WE COST. One thought, one beat.
846         ============================================================ -->
847    <section class="relative px-6 lg:px-12 py-14 lg:py-28 overflow-hidden">
848      <!-- Faint red atmosphere behind the big number -->
849      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[400px] bg-red-500 opacity-[0.08] blur-[180px] rounded-full pointer-events-none"></div>
850
851      <div class="relative max-w-[1200px] mx-auto">
852        <!-- Chapter marker — hidden on mobile, see comment above
853             chapter 02's marker for rationale. -->
854        <div class="hidden md:flex items-center gap-3 mb-8">
855          <div class="w-10 h-10 rounded-full bg-red-500/10 border border-red-500/50 flex items-center justify-center">
856            <span class="heading-display text-sm text-red-400">03</span>
857          </div>
858          <div class="eyebrow-tag text-red-400">Chapter 03 · What you're paying today</div>
859        </div>
860        <!-- Title — centered, tight -->
861        <div class="text-center mb-12 lg:mb-14">
862          <h2 class="heading-display text-4xl sm:text-5xl lg:text-7xl text-white">
863            The <span class="text-gradient-red">legacy software</span><br class="hidden sm:inline"> tax you're already paying.
864          </h2>
865        </div>
866
867        <!-- THE NUMBER — dominates everything.
868             Updated 2026-05-11: keep QuickBooks OUT of the stack-tax
869             list (we INTEGRATE with it, don't replace it). DocuSign
870             goes in — we replaced it with SlabOS Sign. Plus two
871             "hidden cost" tiles: wasted labor hours and extra slabs
872             from manual nesting. Real total math:
873                Software: $3,000 + $150 + $144 + $90  = $3,384
874                Labor lost: 20 quotes/mo × 3hr saved × $30/hr = $1,800
875                Slab waste: 30 slabs/mo × 15% × $400 = $1,800
876                Grand total: ~$6,984/mo
877             Rounded to "$7,000+" hero. -->
878        <div class="text-center mb-10">
879          <div class="inline-block">
880            <div class="eyebrow-tag text-red-400/80 mb-3">Your current monthly reality</div>
881            <div class="heading-display text-[7rem] sm:text-[10rem] lg:text-[14rem] leading-[0.85] text-transparent bg-clip-text bg-gradient-to-br from-red-400 via-red-500 to-red-700" style="text-shadow: 0 0 80px rgba(239, 68, 68, 0.3);">
882              $7,000<span class="text-red-500/70">+</span>
883            </div>
884            <div class="text-red-300/80 mt-2 text-sm font-bold uppercase tracking-[0.18em] max-w-2xl mx-auto leading-relaxed">
885              every month &mdash; between software bills, wasted labor, and slabs you didn't need to buy
886            </div>
887          </div>
888        </div>
889
890        <!-- BREAKDOWN — desktop keeps the 6-cell strip, mobile gets
891             a single-column "expense report" layout with right-
892             aligned values + dotted leaders. Reads like an invoice
893             the shop is actually paying.
894             Top 4 tiles = real software bills (Moraware-style suite,
895             fleet GPS, jobsite photos, DocuSign). Last 2 tiles =
896             hidden waste SlabOS eliminates (labor hours wasted on
897             slow quoting, extra slabs from manual nesting). -->
898
899        <!-- Mobile expense-report layout -->
900        <div class="md:hidden border border-red-500/25 bg-red-500/[0.04] rounded-2xl overflow-hidden mb-10">
901          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-red-300/80 px-4 pt-4 pb-2">Your monthly bill, today</div>
902          <div class="divide-y divide-red-500/15">
903            <div class="flex items-baseline justify-between px-4 py-3 gap-3">
904              <span class="text-sm font-semibold text-white/85">Legacy fab suite</span>
905              <span class="flex-1 border-b border-dotted border-red-500/25 mb-1"></span>
906              <span class="heading-display text-lg text-red-300 leading-none">$3,000</span>
907            </div>
908            <div class="flex items-baseline justify-between px-4 py-3 gap-3">
909              <span class="text-sm font-semibold text-white/85">Fleet GPS · Linxup</span>
910              <span class="flex-1 border-b border-dotted border-red-500/25 mb-1"></span>
911              <span class="heading-display text-lg text-red-300 leading-none">$150</span>
912            </div>
913            <div class="flex items-baseline justify-between px-4 py-3 gap-3">
914              <span class="text-sm font-semibold text-white/85">CompanyCam</span>
915              <span class="flex-1 border-b border-dotted border-red-500/25 mb-1"></span>
916              <span class="heading-display text-lg text-red-300 leading-none">$144</span>
917            </div>
918            <div class="flex items-baseline justify-between px-4 py-3 gap-3">
919              <span class="text-sm font-semibold text-white/85">DocuSign · e-sign</span>
920              <span class="flex-1 border-b border-dotted border-red-500/25 mb-1"></span>
921              <span class="heading-display text-lg text-red-300 leading-none">$90</span>
922            </div>
923            <div class="flex items-baseline justify-between px-4 py-3 gap-3">
924              <span class="text-sm font-semibold text-white/85">Wasted labor &middot; /mo</span>
925              <span class="flex-1 border-b border-dotted border-red-500/25 mb-1"></span>
926              <span class="heading-display text-lg text-red-400 leading-none">$1,800</span>
927            </div>
928            <div class="flex items-baseline justify-between px-4 py-3 gap-3">
929              <span class="text-sm font-semibold text-white/85">Slab waste &middot; no auto-nesting</span>
930              <span class="flex-1 border-b border-dotted border-red-500/25 mb-1"></span>
931              <span class="heading-display text-lg text-red-400 leading-none">$1,800</span>
932            </div>
933          </div>
934          <div class="px-4 pt-3 pb-4 text-[10px] text-white/45 leading-relaxed border-t border-red-500/15">
935            <strong class="text-white/60">Math:</strong> 20 quotes/mo &times; 3hr lost/quote &times; $30/hr = $1,800 labor wasted. 30 slabs/mo &times; 15% waste &times; $400/slab = $1,800 in slabs you didn't need to buy.
936          </div>
937        </div>
938
939        <!-- Desktop strip (md+) -->
940        <div class="hidden md:block border border-red-500/20 bg-red-500/[0.04] rounded-2xl overflow-hidden mb-12 lg:mb-14">
941          <div class="grid grid-cols-2 lg:grid-cols-6 divide-x divide-y lg:divide-y-0 divide-red-500/15">
942            <div class="p-4 lg:p-5">
943              <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/40">Legacy fab suite</div>
944              <div class="heading-display text-2xl lg:text-3xl text-red-300 mt-1">$3,000</div>
945            </div>
946            <div class="p-4 lg:p-5">
947              <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/40">Fleet GPS · Linxup</div>
948              <div class="heading-display text-2xl lg:text-3xl text-red-300 mt-1">$150</div>
949            </div>
950            <div class="p-4 lg:p-5">
951              <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/40">CompanyCam</div>
952              <div class="heading-display text-2xl lg:text-3xl text-red-300 mt-1">$144</div>
953            </div>
954            <div class="p-4 lg:p-5">
955              <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/40">DocuSign</div>
956              <div class="heading-display text-2xl lg:text-3xl text-red-300 mt-1">$90</div>
957            </div>
958            <div class="p-4 lg:p-5">
959              <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/40">Wasted labor/mo</div>
960              <div class="heading-display text-2xl lg:text-3xl text-red-400 mt-1">$1,800</div>
961            </div>
962            <div class="p-4 lg:p-5">
963              <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/40">Slab waste/mo</div>
964              <div class="heading-display text-2xl lg:text-3xl text-red-400 mt-1">$1,800</div>
965            </div>
966          </div>
967          <div class="px-4 lg:px-5 py-3 text-[10.5px] text-white/45 leading-relaxed border-t border-red-500/15">
968            <strong class="text-white/60">Math behind the hidden costs:</strong> 20 quotes/mo &times; 3 hrs lost per quote on legacy software &times; $30/hr loaded labor = <span class="text-red-300/90 font-bold">$1,800 wasted labor</span>. 30 slabs/mo &times; 15% extra material waste from manual nesting &times; $400/slab = <span class="text-red-300/90 font-bold">$1,800 in slabs you didn't need to buy</span>. AI nesting + 3-min quote engine reclaim both.
969          </div>
970        </div>
971
972        <!-- THE SLABOS COUNTERSTRIKE — one line, dramatic -->
973        <div class="text-center">
974          <div class="inline-flex items-center gap-3 text-white/40 eyebrow-tag mb-5">
975            <span class="w-12 h-px bg-white/20"></span>
976            Replace it all with
977            <span class="w-12 h-px bg-white/20"></span>
978          </div>
979          <div class="heading-display text-3xl sm:text-5xl lg:text-8xl text-white">
980            <span class="text-gradient-brand">SlabOS</span> · one flat bill
981          </div>
982          <p class="mt-5 text-white/60 text-base lg:text-lg max-w-xl mx-auto font-medium">
983            One login. One bill. Every tool a fab shop needs — and it talks to itself.
984          </p>
985        </div>
986      </div>
987    </section>
988
989    <!-- ============ LEGACY COMPARISON TABLE ============ -->
990    <!-- Inline SVG icons everywhere (no iconify on the data cells) so
991         checkmarks, X marks, and feature icons ALWAYS render, even on
992         slow connections / ad-blockers / iconify CDN hiccups. Rows are
993         grouped under 6 category bands (Design, Pricing, Customer,
994         Operations, Platform, Getting Started) so 20 rows read as a
995         scannable spec sheet instead of a wall of lines. -->
996    <section id="chapter-04" class="px-6 lg:px-12 py-12 lg:py-20">
997      <div class="max-w-[1300px] mx-auto">
998        <!-- Chapter marker -->
999        <div class="flex items-center gap-3 mb-8">
1000          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
1001            <span class="heading-display text-sm text-brand-500">04</span>
1002          </div>
1003          <div class="eyebrow-tag text-brand-400">Chapter 04 · The uncomfortable comparison</div>
1004        </div>
1005        <div class="mb-10">
1006          <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white">
1007            SlabOS vs <span class="text-gradient-red">legacy</span> vs spreadsheets.
1008          </h2>
1009          <p class="text-white/65 mt-4 text-base lg:text-lg max-w-2xl">No marketing fluff. Just facts, features, and ship dates. Built in 2026 vs built in 2004 vs built in 1985.</p>
1010        </div>
1011
1012        <!-- ─────────── MOBILE COMPARISON CARDS ───────────
1013             On mobile only, the 4-column table reads as too dense
1014             at 375px (8.5px text, 22px icons). This stack of feature
1015             cards replaces it: each card shows the feature name +
1016             SlabOS' verdict prominently; tap-to-expand reveals the
1017             Legacy + Spreadsheets verdicts inline. Reads as an
1018             evaluation walkthrough, not a spreadsheet.
1019             6 category headings preserved (Design & Quoting,
1020             Pricing Engine, Customer & Sales, Operations, Scale &
1021             Platform, Getting Started) so the structure matches
1022             desktop. -->
1023        <div class="md:hidden space-y-2 mb-6">
1024          <!-- ── Design & Quoting ── -->
1025          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400 pl-2 mt-4 mb-1">Design &amp; Quoting</div>
1026          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1027            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1028              <span class="text-sm font-semibold text-white/90 pr-3">2D interactive quoting</span>
1029              <span class="flex items-center gap-2">
1030                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1031                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1032              </span>
1033            </summary>
1034            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1035              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-amber-500/25">Partial</span></div>
1036              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1037            </div>
1038          </details>
1039          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1040            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1041              <span class="text-sm font-semibold text-white/90 pr-3">3D interactive preview</span>
1042              <span class="flex items-center gap-2">
1043                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1044                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1045              </span>
1046            </summary>
1047            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1048              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1049              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1050            </div>
1051          </details>
1052          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1053            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1054              <span class="text-sm font-semibold text-white/90 pr-3">AI-powered assistant</span>
1055              <span class="flex items-center gap-2">
1056                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1057                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1058              </span>
1059            </summary>
1060            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1061              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1062              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1063            </div>
1064          </details>
1065
1066          <!-- ── Pricing Engine ── -->
1067          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400 pl-2 mt-5 mb-1">Pricing Engine</div>
1068          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1069            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1070              <span class="text-sm font-semibold text-white/90 pr-3">Live pricing engine</span>
1071              <span class="flex items-center gap-2">
1072                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1073                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1074              </span>
1075            </summary>
1076            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1077              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-amber-500/25">
1077Partial</span></div>
1078              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1079            </div>
1080          </details>
1081          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1082            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1083              <span class="text-sm font-semibold text-white/90 pr-3">Per-color thickness pricing</span>
1084              <span class="flex items-center gap-2">
1085                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1086                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1087              </span>
1088            </summary>
1089            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1090              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1091              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1092            </div>
1093          </details>
1094
1095          <!-- ── Customer & Sales ── -->
1096          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400 pl-2 mt-5 mb-1">Customer &amp; Sales</div>
1097          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1098            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1099              <span class="text-sm font-semibold text-white/90 pr-3">Branded customer portal</span>
1100              <span class="flex items-center gap-2">
1101                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1102                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1103              </span>
1104            </summary>
1105            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1106              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1107              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1108            </div>
1109          </details>
1110          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1111            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1112              <span class="text-sm font-semibold text-white/90 pr-3">Sales pipeline + follow-ups</span>
1113              <span class="flex items-center gap-2">
1114                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1115                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1116              </span>
1117            </summary>
1118            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1119              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1120              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1121            </div>
1122          </details>
1123
1124          <!-- ── Operations ── -->
1125          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400 pl-2 mt-5 mb-1">Operations</div>
1126          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1127            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1128              <span class="text-sm font-semibold text-white/90 pr-3">Slab inventory + nesting</span>
1129              <span class="flex items-center gap-2">
1130                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1131                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1132              </span>
1133            </summary>
1134            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1135              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-amber-500/25">Partial</span></div>
1136              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><svg class="w-4 h-4 opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1137            </div>
1138          </details>
1139          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1140            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1141              <span class="text-sm font-semibold text-white/90 pr-3">Invoicing + payment tracking</span>
1142              <span class="flex items-center gap-2">
1143                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1144                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1145              </span>
1146            </summary>
1147            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1148              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-amber-500/25">Via QB</span></div>
1149              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><span class="inline-block bg-red-500/[0.12] text-red-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-red-500/25">Manual</span></div>
1150            </div>
1151          </details>
1152
1153          <!-- ── Getting Started ── -->
1154          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400 pl-2 mt-5 mb-1">Getting Started</div>
1155          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1156            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1157              <span class="text-sm font-semibold text-white/90 pr-3">Data ownership + export</span>
1158              <span class="flex items-center gap-2">
1159                <span class="inline-flex items-center gap-1 bg-emerald-500/[0.14] text-emerald-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-emerald-500/25">Full</span>
1160                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1161              </span>
1162            </summary>
1163            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1164              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><span class="inline-flex items-center gap-1 bg-red-500/95 text-white text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full">Locked</span></div>
1165              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><span class="text-white/45 text-[10px] italic">Yours (in hell)</span></div>
1166            </div>
1167          </details>
1168          <details class="group rounded-2xl border border-white/10 bg-white/[0.025] overflow-hidden">
1169            <summary class="flex items-center justify-between px-4 py-3 cursor-pointer list-none">
1170              <span class="text-sm font-semibold text-white/90 pr-3">White-glove migration</span>
1171              <span class="flex items-center gap-2">
1172                <svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
1173                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1174              </span>
1175            </summary>
1176            <div class="px-4 pb-3 pt-0 text-xs flex flex-col gap-1.5 border-t border-white/[0.06]">
1177              <div class="flex items-center justify-between pt-2"><span class="text-white/55">Legacy</span><span class="inline-block bg-red-500/[0.12] text-red-300 text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border border-red-500/25">Self-serve</span></div>
1178              <div class="flex items-center justify-between"><span class="text-white/55">Spreadsheets</span><span class="text-white/45 text-[10px] italic">Good luck</span></div>
1179            </div>
1180          </details>
1181
1182          <!-- Bottom price summary card — like the table's last row -->
1183          <div class="mt-5 rounded-2xl border border-emerald-500/25 px-4 py-4" style="background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02));">
1184            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-emerald-300 mb-1">Monthly price · unlimited users, all-in</div>
1185            <div class="flex items-baseline justify-between">
1186              <span class="text-sm font-semibold text-white/90">SlabOS · flat</span>
1187              <span class="heading-display text-lg text-emerald-300 leading-none">Flat &middot; unlimited users</span>
1188            </div>
1189            <div class="flex items-baseline justify-between mt-2 text-xs">
1190              <span class="text-white/55">Legacy · per seat</span>
1191              <span class="text-red-300 font-bold">$100–$120/user +add-ons</span>
1192            </div>
1193            <div class="flex items-baseline justify-between mt-1.5 text-xs">
1194              <span class="text-white/55">Spreadsheets</span>
1195              <span class="text-white/45 italic text-[11px]">"Free" ($5k/mo in labor)</span>
1196            </div>
1197          </div>
1198        </div>
1199
1200        <!-- Frosted-glass table wrapper — same treatment as the
1201             integration logo cards. Subtle white tint with backdrop
1202             blur, hairline border, soft shadow, larger corner radius
1203             so the table reads as a single floating panel rather
1204             than a boxy spreadsheet.
1205
1206             Mobile-fit strategy was a custom CSS pass to shrink every
1207             cell so 4 cols fit at 375px. Now that mobile uses the
1208             feature-card stack above, this whole table is hidden
1209             below md. -->
1210        <div class="hidden md:block rounded-2xl sm:rounded-3xl overflow-hidden"
1211             style="background: rgba(255,255,255,0.03); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.4);">
1212          <!-- Header band — taller, bolder, brand-tinted SlabOS
1213               column. `cmp-header` class is the hook the @media
1214               (max-width: 639px) block above uses to scale the
1215               header text + padding down on mobile. -->
1216          <div class="cmp-header grid grid-cols-4 bg-black/30">
1217            <div class="p-5 lg:p-6 eyebrow-tag text-white/45">Feature</div>
1218            <div class="p-5 lg:p-6 text-center border-l border-white/[0.06] bg-brand-500/[0.04]">
1219              <div class="eyebrow-tag text-brand-400">SlabOS</div>
1220              <div class="heading-display text-lg lg:text-xl text-white mt-1.5">2026 · native</div>
1221            </div>
1222            <div class="p-5 lg:p-6 text-center border-l border-white/[0.06]">
1223              <div class="eyebrow-tag text-white/35">Legacy Software</div>
1224              <div class="heading-display text-lg lg:text-xl text-white/45 mt-1.5">2004 — 2014</div>
1225            </div>
1226            <div class="p-5 lg:p-6 text-center border-l border-white/[0.06]">
1227              <div class="eyebrow-tag text-white/35">Spreadsheets</div>
1228              <div class="heading-display text-lg lg:text-xl text-white/45 mt-1.5">You + Excel</div>
1229            </div>
1230          </div>
1231
1232          <!-- Intro row: age/ship date -->
1233          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center bg-white/[0.025]">
1234            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1235              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
1236              <span class="text-white text-sm font-bold">Last major redesign</span>
1237            </div>
1238            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-brand-400 text-sm font-extrabold">2026</div>
1239            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-red-300 text-sm font-extrabold">2004–2014</div>
1240            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-white/45 text-xs italic">Never — that's the point</div>
1241          </div>
1242
1243          <!-- ── Category: DESIGN & QUOTING ── -->
1244          <div class="relative bg-brand-500/[0.06] border-y border-brand-500/15 px-4 lg:px-5 py-3 before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-brand-500 flex items-center gap-2">
1245            <svg class="w-3.5 h-3.5 text-brand-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>
1246            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400">Design &amp; Quoting</span>
1247          </div>
1248          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1249            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1250              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M11 4H4v16h16v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
1251              <span class="text-white/80 text-sm font-semibold">2D interactive quoting</span>
1252            </div>
1253            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1254            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-amber-500/25">Partial</span></div>
1255            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1256          </div>
1257          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1258            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1259              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><path d="M3.3 7L12 12l8.7-5M12 22V12"/></svg>
1260              <span class="text-white/80 text-sm font-semibold">3D interactive preview</span>
1261            </div>
1262            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1263            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]">
1263<svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1264            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1265          </div>
1266          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1267            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1268              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 3l1.9 5.5L19 10l-5.1 1.5L12 17l-1.9-5.5L5 10l5.1-1.5L12 3z"/><path d="M19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3zM5 15l.6 1.5L7 17l-1.4.5L5 19l-.6-1.5L3 17l1.4-.5L5 15z"/></svg>
1269              <span class="text-white/80 text-sm font-semibold">AI-powered assistant</span>
1270            </div>
1271            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1272            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1273            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1274          </div>
1275          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1276            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1277              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M12 18l-4-4h3v-3h2v3h3l-4 4z"/></svg>
1278              <span class="text-white/80 text-sm font-semibold">AI price list import (PDF → DB)</span>
1279            </div>
1280            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1281            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1282            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]">
1282<svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1283          </div>
1284
1285          <!-- ── Category: PRICING ENGINE ── -->
1286          <div class="relative bg-brand-500/[0.06] border-y border-brand-500/15 px-4 lg:px-5 py-3 before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-brand-500 flex items-center gap-2">
1287            <svg class="w-3.5 h-3.5 text-brand-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 1v22M17 5H9a3 3 0 000 6h6a3 3 0 010 6H6"/></svg>
1288            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400">Pricing Engine</span>
1289          </div>
1290          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1291            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1292              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 15l4-4 4 4 5-5"/></svg>
1293              <span class="text-white/80 text-sm font-semibold">Live pricing engine</span>
1294            </div>
1295            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1296            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-amber-500/25">Partial</span></div>
1297            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1298          </div>
1299          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1300            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1301              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
1302              <span class="text-white/80 text-sm font-semibold">Per-color thickness pricing</span>
1303            </div>
1304            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1305            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1306            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]">
1306<svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1307          </div>
1308
1309          <!-- ── Category: CUSTOMER & SALES ── -->
1310          <div class="relative bg-brand-500/[0.06] border-y border-brand-500/15 px-4 lg:px-5 py-3 before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-brand-500 flex items-center gap-2">
1311            <svg class="w-3.5 h-3.5 text-brand-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/><circle cx="9" cy="7" r="4"/></svg>
1312            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400">Customer &amp; Sales</span>
1313          </div>
1314          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1315            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1316              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg>
1317              <span class="text-white/80 text-sm font-semibold">Branded customer portal</span>
1318            </div>
1319            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1320            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1321            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1322          </div>
1323          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1324            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1325              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
1326              <span class="text-white/80 text-sm font-semibold">Sales pipeline + follow-ups</span>
1327            </div>
1328            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1329            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]">
1329<svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1330            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1331          </div>
1332
1333          <!-- ── Category: OPERATIONS ── -->
1334          <div class="relative bg-brand-500/[0.06] border-y border-brand-500/15 px-4 lg:px-5 py-3 before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-brand-500 flex items-center gap-2">
1335            <svg class="w-3.5 h-3.5 text-brand-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
1336            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400">Operations</span>
1337          </div>
1338          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1339            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1340              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><path d="M3.3 7L12 12l8.7-5M12 22V12"/></svg>
1341              <span class="text-white/80 text-sm font-semibold">Slab inventory &amp; nesting</span>
1342            </div>
1343            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1344            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-amber-500/25">Partial</span></div>
1345            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1346          </div>
1347          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1348            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1349              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
1350              <span class="text-white/80 text-sm font-semibold">12-column production scheduler</span>
1351            </div>
1352            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1353            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1354            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1355          </div>
1356          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1357            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1358              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6M16 13H8M16 17H8"/></svg>
1359              <span class="text-white/80 text-sm font-semibold">PDF form builder + AI field detection</span>
1360            </div>
1361            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1362            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-amber-500/25">Basic</span></div>
1363            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1364          </div>
1365          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1366            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1367              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M4 4h16v18l-3-2-3 2-3-2-3 2-3-2-3 2V4z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>
1368              <span class="text-white/80 text-sm font-semibold">Invoicing + payment tracking</span>
1369            </div>
1370            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1371            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-amber-500/25">Via QB only</span></div>
1372            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-red-500/[0.12] text-red-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-red-500/25">Manual</span></div>
1373          </div>
1374
1375          <!-- ── Category: SCALE & PLATFORM ── -->
1376          <div class="relative bg-brand-500/[0.06] border-y border-brand-500/15 px-4 lg:px-5 py-3 before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-brand-500 flex items-center gap-2">
1377            <svg class="w-3.5 h-3.5 text-brand-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
1377<path d="M6 22V4a2 2 0 012-2h8a2 2 0 012 2v18M2 22h20M10 6h.01M14 6h.01M10 10h.01M14 10h.01M10 14h.01M14 14h.01"/></svg>
1378            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400">Scale &amp; Platform</span>
1379          </div>
1380          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1381            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1382              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M6 22V4a2 2 0 012-2h8a2 2 0 012 2v18M2 22h20"/></svg>
1383              <span class="text-white/80 text-sm font-semibold">Multi-location support</span>
1384            </div>
1385            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1386            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1387            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1388          </div>
1389                    <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1390            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1391              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
1392              <span class="text-white/80 text-sm font-semibold">Granular role-based permissions</span>
1393            </div>
1394            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1395            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-amber-500/[0.12] text-amber-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-amber-500/25">Partial</span></div>
1396            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1397          </div>
1398          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1399            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1400              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>
1401              <span class="text-white/80 text-sm font-semibold">Mobile-first UI</span>
1402            </div>
1403            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1404            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-red-500/[0.12] text-red-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-red-500/25">Clunky</span></div>
1405            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto opacity-70" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><circle cx="14" cy="14" r="11" stroke="#ef4444" stroke-opacity="0.4" stroke-width="1.5"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg></div>
1406          </div>
1407
1408          <!-- ── Category: GETTING STARTED ── -->
1409          <div class="relative bg-brand-500/[0.06] border-y border-brand-500/15 px-4 lg:px-5 py-3 before:content-[""] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[3px] before:bg-brand-500 flex items-center gap-2">
1410            <svg class="w-3.5 h-3.5 text-brand-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09zM12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/></svg>
1411            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-400">Getting Started</span>
1412          </div>
1413          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1414            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1415              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.66 4 3 9 3s9-1.34 9-3V5M3 11v6c0 1.66 4 3 9 3s9-1.34 9-3v-6"/></svg>
1416              <span class="text-white/80 text-sm font-semibold">Data ownership + export</span>
1417            </div>
1418            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-flex items-center gap-1.5 bg-emerald-500/[0.12] text-emerald-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-emerald-500/25"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>Full export</span></div>
1419            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-flex items-center gap-1.5 bg-red-500/95 text-white text-[10px] font-extrabold uppercase tracking-[0.12em] px-2.5 py-1 rounded-full shadow-[0_2px_10px_rgba(239,68,68,0.25)]"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 11V7a5 5 0 1110 0v4M5 11h14v10H5z"/></svg>LOCKED</span></div>
1420            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-white/45 text-xs italic">Yours (in hell)</div>
1421          </div>
1422          <div class="compare-row grid grid-cols-4 border-b border-white/[0.06] items-center">
1423            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1424              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M3 7h12v10H3zM15 11h4l3 3v3h-7v-6z"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>
1425              <span class="text-white/80 text-sm font-semibold">White-glove migration included</span>
1426            </div>
1427            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><svg class="w-7 h-7 mx-auto drop-shadow-[0_0_12px_rgba(16,185,129,0.35)]" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><circle cx="14" cy="14" r="11" stroke="#10b981" stroke-opacity="0.55" stroke-width="1.5"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1428            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06]"><span class="inline-block bg-red-500/[0.12] text-red-300 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-red-500/25">Self-serve docs</span></div>
1429            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-white/45 text-xs italic">Good luck</div>
1430          </div>
1431          <div class="compare-row grid grid-cols-4 items-center bg-white/[0.02]">
1432            <div class="p-4 lg:p-5 flex items-center gap-2.5">
1433              <svg class="w-4 h-4 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>
1434              <span class="text-white text-sm font-bold">Monthly price (unlimited users)</span>
1435            </div>
1436            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-emerald-300 text-base font-extrabold">Flat &middot; unlimited users</div>
1437            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-red-300 text-base font-extrabold">$100–120/user +add-ons</div>
1438            <div class="p-4 lg:p-5 text-center border-l border-white/[0.06] text-white/45 text-xs italic">"Free" ($5k/mo in labor)</div>
1439          </div>
1440        </div><!-- /frosted shell -->
1441
1442        <!-- Footer legend under the table — makes the color-coding
1443             obvious. Hidden on mobile since the feature-cards above
1444             carry their own labeled SlabOS/Legacy/Spreadsheets rows. -->
1445        <div class="hidden md:flex flex-wrap items-center justify-center gap-3 mt-6 text-[11px]">
1446          <span class="inline-flex items-center gap-1.5 text-white/65"><svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#10b981" fill-opacity="0.18"/><path d="M9 14l3.5 3.5L19 10.5" stroke="#34d399" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/></svg>Full support</span>
1447          <span class="inline-flex items-center gap-1.5 text-white/65"><span class="inline-block bg-amber-100 text-amber-400 text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full">Partial</span>Missing major pieces</span>
1448          <span class="inline-flex items-center gap-1.5 text-white/65"><svg class="w-5 h-5" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="12" fill="#ef4444" fill-opacity="0.14"/><path d="M10 10l8 8M18 10l-8 8" stroke="#f87171" stroke-width="2.5" stroke-linecap="round"/></svg>Not available</span>
1449        </div>
1450      </div>
1451    </section>
1452
1453    <!-- ============================================================
1454         CAPABILITIES MANIFEST — full-width stacked bands, no card
1455         grid, no icon clutter. Each category is a horizontal row
1456         with a numbered marker, big italic heading, and a clean
1457         two-column feature list. Reads like a Linear / Vercel
1458         product spec sheet, not a SaaS template.
1459         ============================================================ -->
1460    <section class="relative px-6 lg:px-12 py-14 lg:py-28 overflow-hidden">
1461      <!-- Soft orange atmosphere behind the manifest -->
1462      <div class="absolute top-1/4 right-[-10%] w-[500px] h-[500px] bg-brand-500 opacity-[0.06] blur-[150px] rounded-full pointer-events-none"></div>
1463      <div class="absolute bottom-1/4 left-[-10%] w-[400px] h-[400px] bg-brand-400 opacity-[0.05] blur-[120px] rounded-full pointer-events-none"></div>
1464
1465      <div class="relative max-w-[1300px] mx-auto">
1466        <div class="mb-16 lg:mb-20">
1467          <!-- Chapter marker — hidden on mobile (mid-section chapter,
1468               doesn't need the full intro pattern). -->
1469          <div class="hidden md:flex items-center gap-3 mb-6">
1470            <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
1471              <span class="heading-display text-sm text-brand-500">05</span>
1472            </div>
1473            <div class="eyebrow-tag text-brand-400">Chapter 05 · What you get</div>
1474          </div>
1475          <h2 class="heading-display text-3xl sm:text-5xl lg:text-8xl text-white max-w-4xl">
1476            <span class="text-gradient-brand">150+ capabilities.</span><br>
1477            One platform.<br>
1478            One bill.
1479          </h2>
1480          <p class="text-white/65 mt-6 text-base lg:text-lg max-w-2xl font-medium">
1481            No nickel-and-diming. Pro and Scale ship with the whole suite — every category below, fully unlocked.
1482          </p>
1483        </div>
1484
1485        <!-- ─────────── MOBILE CAPABILITY ACCORDION ───────────
1486             On mobile, the 12 manifest rows × ~280px = ~3,360px of
1487             feature lists is a quarter of the entire page. This
1488             tap-to-expand accordion shows just [number] [name] [count]
1489             collapsed; tap reveals the same 2-col pill list. Total
1490             collapsed height ~600px. Closed by default so users see
1491             the whole catalog at a glance before drilling into any
1492             one category.
1493             Same content, ~80% less vertical real estate at rest. -->
1494        <div class="md:hidden space-y-2 mb-4">
1495          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1496            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1497              <div class="flex items-baseline gap-3">
1498                <span class="heading-display text-base text-white/25 leading-none">01</span>
1499                <span class="heading-display text-base text-white leading-none">Quoting Engine</span>
1500              </div>
1501              <div class="flex items-center gap-2.5">
1502                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">23</span>
1503                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1504              </div>
1505            </summary>
1506            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1507              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>2D drawing engine</div>
1508              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>3D extruded preview</div>
1509              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Exact-polygon drawing model</div>
1510              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>L / U / Island / Rectangle presets</div>
1511              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Corner radius (in / out)</div>
1512              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Clip + chamfer</div>
1513              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Bump-outs</div>
1514              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Notches</div>
1515              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-segment depths</div>
1516              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>8 edge types</div>
1517              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-edge segmentation</div>
1518              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Corner-aware seams</div>
1519              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Rotation + duplication</div>
1520              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Text annotations</div>
1521              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Unlimited undo</div>
1522              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>
1522DXF export to CNC</div>
1523              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>DXF import + laser templating</div>
1524              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AR in their kitchen</div>
1525              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Quote widget on your site</div>
1526              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Walk In request form</div>
1527              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Your own form questions</div>
1528              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Unfinished-form capture</div>
1529              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Inventory showroom embed</div>
1530            </div>
1531          </details>
1532          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1533            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1534              <div class="flex items-baseline gap-3">
1535                <span class="heading-display text-base text-white/25 leading-none">02</span>
1536                <span class="heading-display text-base text-white leading-none">Pricing Engine</span>
1537              </div>
1538              <div class="flex items-center gap-2.5">
1539                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">10</span>
1540                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1541              </div>
1542            </summary>
1543            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1544              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Live pricing</div>
1545              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Material + color rules</div>
1546              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Edge profile pricing</div>
1547              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-thickness pricing</div>
1548              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Markup rules</div>
1549              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Cutout pricing</div>
1550              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Seam pricing</div>
1551              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Manual line items</div>
1552              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Price list revisions</div>
1553              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AI PDF extraction</div>
1554            </div>
1555          </details>
1556          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1557            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1558              <div class="flex items-baseline gap-3">
1559                <span class="heading-display text-base text-white/25 leading-none">03</span>
1560                <span class="heading-display text-base text-white leading-none">Blueprint Takeoff</span>
1561              </div>
1562              <div class="flex items-center gap-2.5">
1563                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">13</span>
1564                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1565              </div>
1566            </summary>
1567            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1568              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Plan-set PDF upload</div>
1569              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Cabinet-run detection</div>
1570              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Whole-home sweep</div>
1571              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Elevations attached to areas</div>
1572              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Miter face heights</div>
1573              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Splash + fireplace geometry</div>
1574              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Self-calibrating scale</div>
1575              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-view room dedupe</div>
1576              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Trace-mode fallback</div>
1577              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Mark Cutouts</div>
1578              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Live geometry into the editor</div>
1579              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Marked-up plan on the quote</div>
1580              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Resume by PDF hash</div>
1581            </div>
1582          </details>
1583          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1584            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1585              <div class="flex items-baseline gap-3">
1586                <span class="heading-display text-base text-white/25 leading-none">04</span>
1587                <span class="heading-display text-base text-white leading-none">Slab Management</span>
1588              </div>
1589              <div class="flex items-center gap-2.5">
1590                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">11</span>
1591                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1592              </div>
1593            </summary>
1594            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1595              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Live inventory</div>
1596              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Receiving with serial numbers</div>
1597              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Cost + allocation to job</div>
1598              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Remnant tracking + audit trail</div>
1599              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Drag-and-drop nesting</div>
1600              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Auto-nest algorithm</div>
1601              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab image upload</div>
1602              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Image crop overlay</div>
1603              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Seam piece splitting</div>
1604              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab-local rotation</div>
1605              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-slab per area</div>
1606            </div>
1607          </details>
1608          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1609            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1610              <div class="flex items-baseline gap-3">
1611                <span class="heading-display text-base text-white/25 leading-none">05</span>
1612                <span class="heading-display text-base text-white leading-none">Warehouse &amp; Labels</span>
1613              </div>
1614              <div class="flex items-center gap-2.5">
1615                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">7</span>
1616                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1617              </div>
1618            </summary>
1619            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1620              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Draw your real building</div>
1621              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Carve bays + racks</div>
1622              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slabs assigned to bays</div>
1623              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Find the stone</div>
1624              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Printable warehouse map</div>
1625              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab labels</div>
1626              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>QR piece tracking</div>
1627            </div>
1628          </details>
1629          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1630            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1631              <div class="flex items-baseline gap-3">
1632                <span class="heading-display text-base text-white/25 leading-none">06</span>
1633                <span class="heading-display text-base text-white leading-none">Scheduling</span>
1634              </div>
1635              <div class="flex items-center gap-2.5">
1636                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">9</span>
1637                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1638              </div>
1639            </summary>
1640            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1641              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Full calendar</div>
1642              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Custom activity calendar</div>
1643              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Day-specific views</div>
1644              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Activity statuses</div>
1645              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-crew per activity</div>
1646              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Crew colors</div>
1647              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Activity reminders</div>
1648              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Event templates auto-schedule</div>
1649              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Shop hours + time blocks</div>
1650            </div>
1651          </details>
1652          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1653            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1654              <div class="flex items-baseline gap-3">
1655                <span class="heading-display text-base text-white/25 leading-none">07</span>
1656                <span class="heading-display text-base text-white leading-none">Crew &amp; Field</span>
1657              </div>
1658              <div class="flex items-center gap-2.5">
1659                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">10</span>
1660                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1661              </div>
1662            </summary>
1663            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1664              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Crew mobile app</div>
1665              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Today's stops</div>
1666              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Live GPS tracking</div>
1667              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>On-site forms</div>
1668              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab photo capture</div>
1669              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Close out from the driveway</div>
1670              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AI route optimization</div>
1671              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-crew lanes</div>
1672              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Drawing-only crew access</div>
1673              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Check-ins</div>
1674            </div>
1675          </details>
1676          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1677            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1678              <div class="flex items-baseline gap-3">
1679                <span class="heading-display text-base text-white/25 leading-none">08</span>
1680                <span class="heading-display text-base text-white leading-none">Customer Portal</span>
1681              </div>
1682              <div class="flex items-center gap-2.5">
1683                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">10</span>
1684                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1685              </div>
1686            </summary>
1687            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1688              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Branded layout</div>
1689              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Unique share tokens</div>
1690              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-select team</div>
1691              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Timeline stages</div>
1692              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Install crew showcase</div>
1693              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Photo gallery</div>
1694              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Invoice + payment view</div>
1695              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Google Maps embed</div>
1696              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Reviews button</div>
1697              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Customer self-approve</div>
1698            </div>
1699          </details>
1700          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1701            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1702              <div class="flex items-baseline gap-3">
1703                <span class="heading-display text-base text-white/25 leading-none">09</span>
1704                <span class="heading-display text-base text-white leading-none">Sales Pipeline</span>
1705              </div>
1706              <div class="flex items-center gap-2.5">
1707                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">8</span>
1708                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1709              </div>
1710            </summary>
1711            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1712              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Kanban board</div>
1713              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Lead tracking</div>
1714              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Source attribution</div>
1715              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Follow-up reminders</div>
1716              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>5-day aging alerts</div>
1717              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Tags + filters</div>
1718              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Revenue forecasting</div>
1719              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-salesperson</div>
1720            </div>
1721          </details>
1722          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1723            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1724              <div class="flex items-baseline gap-3">
1725                <span class="heading-display text-base text-white/25 leading-none">10</span>
1726                <span class="heading-display text-base text-white leading-none">Communications</span>
1727              </div>
1728              <div class="flex items-center gap-2.5">
1729                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">10</span>
1730                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1731              </div>
1732            </summary>
1733            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1734              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Gmail / Outlook connect</div>
1735              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Send from your own address</div>
1736              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Threads on the customer</div>
1737              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Smart-BCC</div>
1738              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Open tracking</div>
1739              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Call + SMS logging</div>
1740              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Recordings kept</div>
1741              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Text from the lead timeline</div>
1742              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Dial from inside SlabOS</div>
1743              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Direct mail campaigns</div>
1744            </div>
1745          </details>
1746          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1747            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1748              <div class="flex items-baseline gap-3">
1749                <span class="heading-display text-base text-white/25 leading-none">11</span>
1750                <span class="heading-display text-base text-white leading-none">Invoicing + Payments</span>
1751              </div>
1752              <div class="flex items-center gap-2.5">
1753                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">6</span>
1754                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1755              </div>
1756            </summary>
1757            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1758              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Auto-gen from job</div>
1759              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Deposit + final split</div>
1760              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Payment tracking</div>
1761              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Due date reminders</div>
1762              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>4-state status</div>
1763              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>QuickBooks sync</div>
1764            </div>
1765          </details>
1766          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1767            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1768              <div class="flex items-baseline gap-3">
1769                <span class="heading-display text-base text-white/25 leading-none">12</span>
1770                <span class="heading-display text-base text-white leading-none">Forms + Templates</span>
1771              </div>
1772              <div class="flex items-center gap-2.5">
1773                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">6</span>
1774                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1775              </div>
1776            </summary>
1777            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1778              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>PDF builder</div>
1779              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>AI field detection</div>
1780              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Form sections</div>
1781              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Auto pre-fill</div>
1782              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Template revisions</div>
1783              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Shared library</div>
1784            </div>
1785          </details>
1786          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1787            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1788              <div class="flex items-baseline gap-3">
1789                <span class="heading-display text-base text-white/25 leading-none">13</span>
1790                <span class="heading-display text-base text-white leading-none">AI Suite</span>
1791              </div>
1792              <div class="flex items-center gap-2.5">
1793                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">8</span>
1794                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1795              </div>
1796            </summary>
1797            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1798              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>BI chat assistant</div>
1799              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Predictive margin bands</div>
1800              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Job costing, actual vs quoted</div>
1801              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>PDF price import</div>
1802              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>PDF form import</div>
1803              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>7 BI query tools</div>
1804              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Structured tool-use</div>
1805              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Tenant-scoped</div>
1806            </div>
1807          </details>
1808          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1809            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1810              <div class="flex items-baseline gap-3">
1811                <span class="heading-display text-base text-white/25 leading-none">14</span>
1812                <span class="heading-display text-base text-white leading-none">Shop HR</span>
1813              </div>
1814              <div class="flex items-center gap-2.5">
1815                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">6</span>
1816                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1817              </div>
1818            </summary>
1819            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1820              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>People + certifications</div>
1821              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Document storage</div>
1822              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Equipment register</div>
1823              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Maintenance schedules</div>
1824              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Incident logging</div>
1825              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Compliance tracking</div>
1826            </div>
1827          </details>
1828          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1829            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1830              <div class="flex items-baseline gap-3">
1831                <span class="heading-display text-base text-white/25 leading-none">15</span>
1832                <span class="heading-display text-base text-white leading-none">Team + Roles</span>
1833              </div>
1834              <div class="flex items-center gap-2.5">
1835                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">6</span>
1836                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1837              </div>
1838            </summary>
1839            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1840              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>User management</div>
1841              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Role-based access</div>
1842              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Custom roles</div>
1843              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Granular perms</div>
1844              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Email invitations</div>
1845              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Full audit log</div>
1846            </div>
1847          </details>
1848          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1849            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1850              <div class="flex items-baseline gap-3">
1851                <span class="heading-display text-base text-white/25 leading-none">16</span>
1852                <span class="heading-display text-base text-white leading-none">Integrations</span>
1853              </div>
1854              <div class="flex items-center gap-2.5">
1855                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">8</span>
1856                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1857              </div>
1858            </summary>
1859            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1860              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Legacy sched sync</div>
1861              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Legacy quote import</div>
1862              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>QuickBooks</div>
1863              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slabsmith / Northwood</div>
1864              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Twilio SMS</div>
1865              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>DocuSign</div>
1866              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Google Maps</div>
1867              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Resend email</div>
1868            </div>
1869          </details>
1870          <details class="group rounded-2xl border border-white/[0.08] bg-white/[0.025] overflow-hidden">
1871            <summary class="flex items-center justify-between px-4 py-3.5 cursor-pointer list-none">
1872              <div class="flex items-baseline gap-3">
1873                <span class="heading-display text-base text-white/25 leading-none">17</span>
1874                <span class="heading-display text-base text-white leading-none">Platform</span>
1875              </div>
1876              <div class="flex items-center gap-2.5">
1877                <span class="text-[10px] font-bold uppercase tracking-[0.14em] text-brand-400">6</span>
1878                <iconify-icon icon="solar:alt-arrow-down-linear" class="text-white/35 group-open:rotate-180 transition-transform" width="14"></iconify-icon>
1879              </div>
1880            </summary>
1881            <div class="px-4 pb-4 pt-0 grid grid-cols-2 gap-x-4 gap-y-2 text-[12px] font-medium text-white/85 border-t border-white/[0.06]">
1882              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Mobile-responsive</div>
1883              <div class="flex items-center gap-2 pt-3"><span class="text-brand-500 font-black">·</span>Dark mode</div>
1884              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Keyboard shortcuts</div>
1885              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Real-time sync</div>
1886              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-location</div>
1887              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Passkey sign-in</div>
1888            </div>
1889          </details>
1890        </div>
1891
1892        <!-- Manifest rows — each row a horizontal band:
1893             [number] [name + count] [feature list 2-col]
1894             with a hairline orange-tinted divider between.
1895             Hidden on mobile in favor of the accordion above. -->
1896        <div class="hidden md:block space-y-0">
1897
1898          <!-- 01 · Quoting Engine -->
1899          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
1900            <div class="heading-display text-3xl lg:text-4xl text-white/15">01</div>
1901            <div>
1902              <h3 class="heading-display text-3xl lg:text-4xl text-white">Quoting<br>Engine</h3>
1903              <div class="eyebrow-tag text-brand-400 mt-3">23 capabilities</div>
1904            </div>
1905            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
1906              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>2D drawing engine</div>
1907              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>3D extruded preview</div>
1908              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Exact-polygon drawing model</div>
1909              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>L / U / Island / Rectangle presets</div>
1910              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Corner radius (in / out)</div>
1911              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Clip + chamfer</div>
1912              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Bump-outs</div>
1913              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Notches</div>
1914              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-segment depths</div>
1915              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>8 edge types</div>
1916              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-edge segmentation</div>
1917              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Corner-aware seams</div>
1918              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Rotation + duplication</div>
1919              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Text annotations</div>
1920              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Unlimited undo</div>
1921              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>
1921DXF export to CNC</div>
1922              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>DXF import + laser templating</div>
1923              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AR in their kitchen</div>
1924              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Quote widget on your site</div>
1925              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Walk In request form</div>
1926              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Your own form questions</div>
1927              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Unfinished-form capture</div>
1928              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Inventory showroom embed</div>
1929            </div>
1930          </div>
1931
1932          <!-- 02 · Pricing Engine -->
1933          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
1934            <div class="heading-display text-3xl lg:text-4xl text-white/15">02</div>
1935            <div>
1936              <h3 class="heading-display text-3xl lg:text-4xl text-white">Pricing<br>Engine</h3>
1937              <div class="eyebrow-tag text-brand-400 mt-3">10 capabilities</div>
1938            </div>
1939            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
1940              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Live pricing</div>
1941              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Material + color rules</div>
1942              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Edge profile pricing</div>
1943              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-thickness pricing</div>
1944              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Markup rules</div>
1945              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Cutout pricing</div>
1946              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Seam pricing</div>
1947              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Manual line items</div>
1948              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Price list revisions</div>
1949              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AI PDF extraction</div>
1950            </div>
1951          </div>
1952
1953          <!-- 03 · Blueprint Takeoff -->
1954          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
1955            <div class="heading-display text-3xl lg:text-4xl text-white/15">03</div>
1956            <div>
1957              <h3 class="heading-display text-3xl lg:text-4xl text-white">Blueprint<br>Takeoff</h3>
1958              <div class="eyebrow-tag text-brand-400 mt-3">13 capabilities</div>
1959            </div>
1960            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
1961              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Plan-set PDF upload</div>
1962              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Cabinet-run detection</div>
1963              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Whole-home sweep</div>
1964              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Elevations attached to areas</div>
1965              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Miter face heights</div>
1966              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Splash + fireplace geometry</div>
1967              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Self-calibrating scale</div>
1968              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-view room dedupe</div>
1969              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Trace-mode fallback</div>
1970              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Mark Cutouts</div>
1971              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Live geometry into the editor</div>
1972              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Marked-up plan on the quote</div>
1973              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Resume by PDF hash</div>
1974            </div>
1975          </div>
1976
1977          <!-- 04 · Slab Management -->
1978          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
1979            <div class="heading-display text-3xl lg:text-4xl text-white/15">04</div>
1980            <div>
1981              <h3 class="heading-display text-3xl lg:text-4xl text-white">Slab<br>Management</h3>
1982              <div class="eyebrow-tag text-brand-400 mt-3">11 capabilities</div>
1983            </div>
1984            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
1985              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Live inventory</div>
1986              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Receiving with serial numbers</div>
1987              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Cost + allocation to job</div>
1988              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Remnant tracking + audit trail</div>
1989              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Drag-and-drop nesting</div>
1990              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Auto-nest algorithm</div>
1991              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab image upload</div>
1992              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Image crop overlay</div>
1993              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Seam piece splitting</div>
1994              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab-local rotation</div>
1995              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-slab per area</div>
1996            </div>
1997          </div>
1998
1999          <!-- 05 · Warehouse &amp; Labels -->
2000          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2001            <div class="heading-display text-3xl lg:text-4xl text-white/15">05</div>
2002            <div>
2003              <h3 class="heading-display text-3xl lg:text-4xl text-white">Warehouse<br>&amp; Labels</h3>
2004              <div class="eyebrow-tag text-brand-400 mt-3">7 capabilities</div>
2005            </div>
2006            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2007              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Draw your real building</div>
2008              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Carve bays + racks</div>
2009              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slabs assigned to bays</div>
2010              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Find the stone</div>
2011              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Printable warehouse map</div>
2012              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab labels</div>
2013              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>QR piece tracking</div>
2014            </div>
2015          </div>
2016
2017          <!-- 06 · Scheduling -->
2018          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2019            <div class="heading-display text-3xl lg:text-4xl text-white/15">06</div>
2020            <div>
2021              <h3 class="heading-display text-3xl lg:text-4xl text-white">Scheduling</h3>
2022              <div class="eyebrow-tag text-brand-400 mt-3">9 capabilities</div>
2023            </div>
2024            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2025              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Full calendar</div>
2026              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Custom activity calendar</div>
2027              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Day-specific views</div>
2028              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Activity statuses</div>
2029              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-crew per activity</div>
2030              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Crew colors</div>
2031              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Activity reminders</div>
2032              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Event templates auto-schedule</div>
2033              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Shop hours + time blocks</div>
2034            </div>
2035          </div>
2036
2037          <!-- 07 · Crew &amp; Field -->
2038          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2039            <div class="heading-display text-3xl lg:text-4xl text-white/15">07</div>
2040            <div>
2041              <h3 class="heading-display text-3xl lg:text-4xl text-white">Crew<br>&amp; Field</h3>
2042              <div class="eyebrow-tag text-brand-400 mt-3">10 capabilities</div>
2043            </div>
2044            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2045              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Crew mobile app</div>
2046              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Today's stops</div>
2047              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Live GPS tracking</div>
2048              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>On-site forms</div>
2049              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slab photo capture</div>
2050              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Close out from the driveway</div>
2051              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AI route optimization</div>
2052              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-crew lanes</div>
2053              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Drawing-only crew access</div>
2054              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Check-ins</div>
2055            </div>
2056          </div>
2057
2058          <!-- 08 · Customer Portal -->
2059          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2060            <div class="heading-display text-3xl lg:text-4xl text-white/15">08</div>
2061            <div>
2062              <h3 class="heading-display text-3xl lg:text-4xl text-white">Customer<br>Portal</h3>
2063              <div class="eyebrow-tag text-brand-400 mt-3">10 capabilities</div>
2064            </div>
2065            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2066              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Branded layout</div>
2067              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Unique share tokens</div>
2068              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-select team</div>
2069              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Timeline stages</div>
2070              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Install crew showcase</div>
2071              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Photo gallery</div>
2072              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Invoice + payment view</div>
2073              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Google Maps embed</div>
2074              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Reviews button</div>
2075              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Customer self-approve</div>
2076            </div>
2077          </div>
2078
2079          <!-- 09 · Sales Pipeline -->
2080          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2081            <div class="heading-display text-3xl lg:text-4xl text-white/15">09</div>
2082            <div>
2083              <h3 class="heading-display text-3xl lg:text-4xl text-white">Sales<br>Pipeline</h3>
2084              <div class="eyebrow-tag text-brand-400 mt-3">8 capabilities</div>
2085            </div>
2086            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2087              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Kanban board</div>
2088              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Lead tracking</div>
2089              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Source attribution</div>
2090              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Follow-up reminders</div>
2091              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>5-day aging alerts</div>
2092              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Tags + filters</div>
2093              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Revenue forecasting</div>
2094              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Per-salesperson</div>
2095            </div>
2096          </div>
2097
2098          <!-- 10 · Communications -->
2099          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2100            <div class="heading-display text-3xl lg:text-4xl text-white/15">10</div>
2101            <div>
2102              <h3 class="heading-display text-3xl lg:text-4xl text-white">Communi-<br>cations</h3>
2103              <div class="eyebrow-tag text-brand-400 mt-3">10 capabilities</div>
2104            </div>
2105            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2106              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Gmail / Outlook connect</div>
2107              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Send from your own address</div>
2108              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Threads on the customer</div>
2109              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Smart-BCC</div>
2110              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Open tracking</div>
2111              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Call + SMS logging</div>
2112              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>
2112Recordings kept</div>
2113              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Text from the lead timeline</div>
2114              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Dial from inside SlabOS</div>
2115              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Direct mail campaigns</div>
2116            </div>
2117          </div>
2118
2119          <!-- 11 · Invoicing + Payments -->
2120          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2121            <div class="heading-display text-3xl lg:text-4xl text-white/15">11</div>
2122            <div>
2123              <h3 class="heading-display text-3xl lg:text-4xl text-white">Invoicing<br>+ Payments</h3>
2124              <div class="eyebrow-tag text-brand-400 mt-3">6 capabilities</div>
2125            </div>
2126            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2127              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Auto-gen from job</div>
2128              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Deposit + final split</div>
2129              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Payment tracking</div>
2130              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Due date reminders</div>
2131              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>4-state status</div>
2132              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>QuickBooks sync</div>
2133            </div>
2134          </div>
2135
2136          <!-- 12 · Forms + Templates -->
2137          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2138            <div class="heading-display text-3xl lg:text-4xl text-white/15">12</div>
2139            <div>
2140              <h3 class="heading-display text-3xl lg:text-4xl text-white">Forms +<br>Templates</h3>
2141              <div class="eyebrow-tag text-brand-400 mt-3">6 capabilities</div>
2142            </div>
2143            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2144              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>PDF builder</div>
2145              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>AI field detection</div>
2146              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Form sections</div>
2147              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Auto pre-fill</div>
2148              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Template revisions</div>
2149              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Shared library</div>
2150            </div>
2151          </div>
2152
2153          <!-- 13 · AI Suite -->
2154          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2155            <div class="heading-display text-3xl lg:text-4xl text-white/15">13</div>
2156            <div>
2157              <h3 class="heading-display text-3xl lg:text-4xl text-white">AI<br>Suite</h3>
2158              <div class="eyebrow-tag text-brand-400 mt-3">8 capabilities</div>
2159            </div>
2160            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2161              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>BI chat assistant</div>
2162              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Predictive margin bands</div>
2163              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Job costing, actual vs quoted</div>
2164              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>PDF price import</div>
2165              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>PDF form import</div>
2166              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>7 BI query tools</div>
2167              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Structured tool-use</div>
2168              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Tenant-scoped</div>
2169            </div>
2170          </div>
2171
2172          <!-- 14 · Shop HR -->
2173          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2174            <div class="heading-display text-3xl lg:text-4xl text-white/15">14</div>
2175            <div>
2176              <h3 class="heading-display text-3xl lg:text-4xl text-white">Shop<br>HR</h3>
2177              <div class="eyebrow-tag text-brand-400 mt-3">6 capabilities</div>
2178            </div>
2179            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2180              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>People + certifications</div>
2181              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Document storage</div>
2182              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Equipment register</div>
2183              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Maintenance schedules</div>
2184              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Incident logging</div>
2185              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Compliance tracking</div>
2186            </div>
2187          </div>
2188
2189          <!-- 15 · Team + Roles -->
2190          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2191            <div class="heading-display text-3xl lg:text-4xl text-white/15">15</div>
2192            <div>
2193              <h3 class="heading-display text-3xl lg:text-4xl text-white">Team<br>+ Roles</h3>
2194              <div class="eyebrow-tag text-brand-400 mt-3">6 capabilities</div>
2195            </div>
2196            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2197              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>User management</div>
2198              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Role-based access</div>
2199              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Custom roles</div>
2200              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Granular perms</div>
2201              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Email invitations</div>
2202              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Full audit log</div>
2203            </div>
2204          </div>
2205
2206          <!-- 16 · Integrations -->
2207          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2208            <div class="heading-display text-3xl lg:text-4xl text-white/15">16</div>
2209            <div>
2210              <h3 class="heading-display text-3xl lg:text-4xl text-white">Integra-<br>tions</h3>
2211              <div class="eyebrow-tag text-brand-400 mt-3">8 capabilities</div>
2212            </div>
2213            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2214              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Legacy sched sync</div>
2215              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Legacy quote import</div>
2216              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>QuickBooks</div>
2217              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Slabsmith / Northwood</div>
2218              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Twilio SMS</div>
2219              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>DocuSign</div>
2220              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Google Maps</div>
2221              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Resend email</div>
2222            </div>
2223          </div>
2224
2225          <!-- 17 · Platform -->
2226          <div class="grid lg:grid-cols-[60px_minmax(220px,1fr)_2.5fr] gap-6 lg:gap-10 py-7 lg:py-12 border-t border-white/[0.06]">
2227            <div class="heading-display text-3xl lg:text-4xl text-white/15">17</div>
2228            <div>
2229              <h3 class="heading-display text-3xl lg:text-4xl text-white">Platform</h3>
2230              <div class="eyebrow-tag text-brand-400 mt-3">6 capabilities</div>
2231            </div>
2232            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 sm:gap-x-6 gap-y-2.5 text-[13px] sm:text-sm font-medium text-white/85">
2233              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Mobile-responsive</div>
2234              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Dark mode</div>
2235              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Keyboard shortcuts</div>
2236              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Real-time sync</div>
2237              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Multi-location</div>
2238              <div class="flex items-center gap-2"><span class="text-brand-500 font-black">·</span>Passkey sign-in</div>
2239            </div>
2240          </div>
2241        </div>
2242
2243        <div class="mt-16 lg:mt-20 text-center">
2244          <div class="eyebrow-tag text-brand-400 mb-3">Always shipping</div>
2245          <p class="heading-display text-3xl lg:text-5xl text-white">
2246            And we ship <span class="text-gradient-brand">more every week.</span>
2247          </p>
2248        </div>
2249      </div>
2250    </section>
2251
2252    <!-- ============================================================
2253         CONNECTED STACK — Plan A redesign.
2254         8-tile grid: 7 shipped third-party integrations + 1 in-house
2255         flex tile (SlabOS Sign — our own DocuSign replacement with
2256         a full audit trail). Real brand-color SVGs via simple-icons
2257         (with solar fallbacks for the few brand glyphs Iconify doesn't
2258         carry). 2×4 grid at lg, 2×4 stacked at sm, visible on mobile.
2259         Removed: Stripe (irrelevant to customer), SlabOS AI (it's a
2260         feature not an integration), "Coming soon" cards (dilute proof).
2261         ============================================================ -->
2262    <section class="relative px-6 lg:px-12 py-14 lg:py-24 bg-black text-white overflow-hidden">
2263      <!-- Atmospheric brand-orange glow top-right + diagonal grid wash
2264           bottom-left so the section reads as its own chapter, not just
2265           a flat band. -->
2266      <div class="absolute top-0 right-[-10%] w-[600px] h-[600px] bg-brand-500 opacity-[0.05] blur-[160px] rounded-full pointer-events-none"></div>
2267      <div class="absolute bottom-[-20%] left-[-15%] w-[500px] h-[500px] bg-brand-500 opacity-[0.025] blur-[140px] rounded-full pointer-events-none"></div>
2268
2269      <div class="relative max-w-[1300px] mx-auto">
2270        <div class="text-center mb-12 lg:mb-16">
2271          <div class="inline-flex items-center gap-2 bg-brand-500/10 border border-brand-500/40 rounded-full px-4 py-1.5 eyebrow-tag text-brand-400 mb-5">
2272            <iconify-icon icon="solar:link-circle-bold" width="14"></iconify-icon>
2273            Connected stack
2274          </div>
2275          <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white">
2276            Already wired. <span class="text-gradient-brand">To your stack.</span>
2277          </h2>
2278          <p class="text-white/65 mt-5 text-base lg:text-lg max-w-2xl mx-auto font-medium leading-relaxed">
2279            QuickBooks for invoices. JustCall for calls, with a dialer inside SlabOS. Stripe for deposits. Your ad leads — Meta, Google, Houzz, Thumbtack — landing straight in the pipeline. Every integration shop owners ask about — <span class="text-white font-bold">wired to one platform, one bill.</span> Contracts? We built our own e-sign with a full audit trail.
2280          </p>
2281        </div>
2282
2283        <!-- 20-tile grid: 2 cols mobile, 4 cols md+. Each tile is a
2284             frosted card with a 48px brand-tinted icon, name, and a
2285             category eyebrow. Hover lifts the card and tints the
2286             border orange. The SlabOS Sign tile (last) is the
2287             standout — orange gradient bg, brand border, IN-HOUSE
2288             badge — to flex what we built instead of paying DocuSign. -->
2289        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-2 lg:gap-2.5">
2290
2291          <!-- Brand icons via cdn.simpleicons.org direct image URLs.
2292               Bypasses the v1.0.7 iconify-icon component entirely —
2293               same brand-color SVGs are served at /{slug}/{hex}, no
2294               JS, no API negotiation, no chance of an icon failing
2295               to resolve. SlabOS Sign (tile #8) keeps iconify-icon
2296               because it uses the solar icon set which DOES work
2297               on the vendored 1.0.7 lib. -->
2298
2299          <!-- 1 · QuickBooks -->
2300          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2301               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2302            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(44, 160, 28, 0.12); border: 1px solid rgba(44, 160, 28, 0.25);">
2303              <img src="https://cdn.simpleicons.org/quickbooks/2CA01C" alt="QuickBooks" width="18" height="18" loading="lazy">
2304            </div>
2305            <div class="text-[13px] font-bold text-white leading-tight text-center">QuickBooks</div>
2306            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Accounting</div>
2307          </div>
2308
2309          <!-- 2 · Google Maps -->
2310          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2311               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2312            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(234, 67, 53, 0.12); border: 1px solid rgba(234, 67, 53, 0.25);">
2313              <img src="https://cdn.simpleicons.org/googlemaps/EA4335" alt="Google Maps" width="18" height="18" loading="lazy">
2314            </div>
2315            <div class="text-[13px] font-bold text-white leading-tight text-center">Google Maps</div>
2316            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Routing · GPS</div>
2317          </div>
2318
2319          <!-- 3 · Anthropic Claude -->
2320          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2321               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2322            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(217, 119, 87, 0.12); border: 1px solid rgba(217, 119, 87, 0.30);">
2323              <img src="https://cdn.simpleicons.org/anthropic/D97757" alt="Anthropic" width="18" height="18" loading="lazy">
2324            </div>
2325            <div class="text-[13px] font-bold text-white leading-tight text-center">Anthropic</div>
2326            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">AI · Claude</div>
2327          </div>
2328
2329          <!-- 4 · Telnyx -->
2330          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2331               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2332            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(0, 196, 150, 0.12); border: 1px solid rgba(0, 196, 150, 0.25);">
2333              <!-- Telnyx isn't in simple-icons (Microsoft + Telnyx don't license
2334                   their marks to simple-icons). Inline hex glyph in their brand
2335                   teal — recognisable as a tech-platform logo at tile size. -->
2336              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="Telnyx">
2337                <polygon points="12,2.5 21.5,7.5 21.5,16.5 12,21.5 2.5,16.5 2.5,7.5" fill="#00C496" stroke="#00C496" stroke-width="1" stroke-linejoin="round"/>
2338                <text x="12" y="15.8" font-family="Inter, system-ui, sans-serif" font-size="10" font-weight="900" fill="#0c0c0d" text-anchor="middle">T</text>
2339              </svg>
2340            </div>
2341            <div class="text-[13px] font-bold text-white leading-tight text-center">Telnyx</div>
2342            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">SMS · 2FA</div>
2343          </div>
2344
2345          <!-- 5 · Resend (monochrome white) -->
2346          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2347               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2348            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);">
2349              <img src="https://cdn.simpleicons.org/resend/ffffff" alt="Resend" width="18" height="18" loading="lazy">
2350            </div>
2351            <div class="text-[13px] font-bold text-white leading-tight text-center">Resend</div>
2352            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Email · Transactional</div>
2353          </div>
2354
2355          <!-- 6 · Microsoft Excel -->
2356          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2357               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2358            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(33, 115, 70, 0.14); border: 1px solid rgba(33, 115, 70, 0.30);">
2359              <!-- Microsoft Excel isn't in simple-icons (trademark policy).
2360                   Inline document-with-X glyph in Excel's brand green. -->
2361              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="Excel">
2362                <rect x="3" y="3" width="18" height="18" rx="2.5" fill="#21A366"/>
2363                <path d="M8 8l8 8M16 8l-8 8" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
2364              </svg>
2365            </div>
2366            <div class="text-[13px] font-bold text-white leading-tight text-center">Excel + CSV</div>
2367            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Pricelist Import</div>
2368          </div>
2369
2370          <!-- 7 · iOS + Android (crew app on any phone) -->
2371          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40"
2372               style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2373            <div class="w-9 h-9 rounded-lg flex items-center justify-center gap-0.5" style="background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15);">
2374              <img src="https://cdn.simpleicons.org/apple/ffffff" alt="iOS" width="14" height="14" loading="lazy">
2375              <img src="https://cdn.simpleicons.org/android/3DDC84" alt="Android" width="14" height="14" loading="lazy">
2376            </div>
2377            <div class="text-[13px] font-bold text-white leading-tight text-center">iOS &amp; Android</div>
2378            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Crew App · PWA</div>
2379          </div>
2380
2381          <!-- JustCall — the call layer + the in-app dialer -->
2382          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2383            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(37, 193, 111, 0.12); border: 1px solid rgba(37, 193, 111, 0.25);">
2384              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="JustCall"><path d="M6.6 3.2c.6-.6 1.6-.5 2.1.2l1.7 2.4c.4.6.4 1.4-.1 1.9l-1 1.1c-.3.3-.3.8-.1 1.2a11.5 11.5 0 0 0 4.8 4.8c.4.2.9.2 1.2-.1l1.1-1c.5-.5 1.3-.5 1.9-.1l2.4 1.7c.7.5.8 1.5.2 2.1l-1.3 1.3c-.8.8-2 1.1-3.1.8-6.1-1.8-10.9-6.6-12.7-12.7-.3-1.
23841 0-2.3.8-3.1z" fill="#25C16F"/></svg>
2385            </div>
2386            <div class="text-[13px] font-bold text-white leading-tight text-center">JustCall</div>
2387            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Calls · Dialer</div>
2388          </div>
2389          <!-- Gmail & Outlook — mailbox sync -->
2390          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2391            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(234, 67, 53, 0.12); border: 1px solid rgba(234, 67, 53, 0.25);">
2392              <img src="https://cdn.simpleicons.org/gmail/EA4335" alt="Gmail & Outlook" width="18" height="18" loading="lazy">
2393            </div>
2394            <div class="text-[13px] font-bold text-white leading-tight text-center">Gmail &amp; Outlook</div>
2395            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Email · Synced Inbox</div>
2396          </div>
2397          <!-- Stripe -->
2398          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2399            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(99, 91, 255, 0.12); border: 1px solid rgba(99, 91, 255, 0.25);">
2400              <img src="https://cdn.simpleicons.org/stripe/635BFF" alt="Stripe" width="18" height="18" loading="lazy">
2401            </div>
2402            <div class="text-[13px] font-bold text-white leading-tight text-center">Stripe</div>
2403            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Payments · Deposits</div>
2404          </div>
2405          <!-- DocuSign — for shops that already run it (Sign is ours) -->
2406          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2407            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(255, 204, 34, 0.12); border: 1px solid rgba(255, 204, 34, 0.25);">
2408              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="DocuSign"><path d="M4 20h16M14.5 4.2l3.3 3.3L9 16.3l-4.2 1 .9-4.3 8.8-8.8z" stroke="#FFCC22" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>
2409            </div>
2410            <div class="text-[13px] font-bold text-white leading-tight text-center">DocuSign</div>
2411            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Contracts · E-sign</div>
2412          </div>
2413          <!-- Meta Ads -->
2414          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2415            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(8, 102, 255, 0.12); border: 1px solid rgba(8, 102, 255, 0.25);">
2416              <img src="https://cdn.simpleicons.org/meta/0866FF" alt="Meta Ads" width="18" height="18" loading="lazy">
2417            </div>
2418            <div class="text-[13px] font-bold text-white leading-tight text-center">Meta Ads</div>
2419            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Lead Forms</div>
2420          </div>
2421          <!-- Google Ads -->
2422          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2423            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(66, 133, 244, 0.12); border: 1px solid rgba(66, 133, 244, 0.25);">
2424              <img src="https://cdn.simpleicons.org/googleads/4285F4" alt="Google Ads" width="18" height="18" loading="lazy">
2425            </div>
2426            <div class="text-[13px] font-bold text-white leading-tight text-center">Google Ads</div>
2427            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Search + LSA Leads</div>
2428          </div>
2429          <!-- Houzz Pro -->
2430          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2431            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(77, 188, 21, 0.12); border: 1px solid rgba(77, 188, 21, 0.25);">
2432              <img src="https://cdn.simpleicons.org/houzz/4DBC15" alt="Houzz Pro" width="18" height="18" loading="lazy">
2433            </div>
2434            <div class="text-[13px] font-bold text-white leading-tight text-center">Houzz Pro</div>
2435            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Remodel Leads</div>
2436          </div>
2437          <!-- Angi / HomeAdvisor -->
2438          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2439            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(255, 97, 83, 0.12); border: 1px solid rgba(255, 97, 83, 0.25);">
2440              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="Angi"><circle cx="12" cy="12" r="10" fill="#FF6153"/><text x="12" y="16.2" font-family="Inter, system-ui, sans-serif" font-size="11.5" font-weight="900" fill="#0c0c0d" text-anchor="middle">A</text></svg>
2441            </div>
2442            <div class="text-[13px] font-bold text-white leading-tight text-center">Angi / HomeAdvisor</div>
2443            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Home-Service Leads</div>
2444          </div>
2445          <!-- Thumbtack -->
2446          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2447            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(0, 159, 217, 0.12); border: 1px solid rgba(0, 159, 217, 0.25);">
2448              <img src="https://cdn.simpleicons.org/thumbtack/009FD9" alt="Thumbtack" width="18" height="18" loading="lazy">
2449            </div>
2450            <div class="text-[13px] font-bold text-white leading-tight text-center">Thumbtack</div>
2451            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Marketplace Leads</div>
2452          </div>
2453          <!-- Pipedrive — bring your old pipeline with you -->
2454          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2455            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);">
2456              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="Pipedrive"><circle cx="12" cy="12" r="10" fill="#FFFFFF"/><text x="12" y="16.2" font-family="Inter, system-ui, sans-serif" font-size="11.5" font-weight="900" fill="#0c0c0d" text-anchor="middle">P</text></svg>
2457            </div>
2458            <div class="text-[13px] font-bold text-white leading-tight text-center">Pipedrive</div>
2459            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">CRM Import</div>
2460          </div>
2461          <!-- Mailchimp -->
2462          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2463            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(255, 224, 27, 0.12); border: 1px solid rgba(255, 224, 27, 0.25);">
2464              <img src="https://cdn.simpleicons.org/mailchimp/FFE01B" alt="Mailchimp" width="18" height="18" loading="lazy">
2465            </div>
2466            <div class="text-[13px] font-bold text-white leading-tight text-center">Mailchimp</div>
2467            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Email Campaigns</div>
2468          </div>
2469          <!-- Slabsmith / Northwood — slab data + photos (not in simple-icons; inline glyph like Telnyx) -->
2470          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1 hover:border-brand-500/40" style="background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);">
2471            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.25);">
2472              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-label="Slabsmith"><polygon points="12,2.5 21.5,7.5 21.5,16.5 12,21.5 2.5,16.5 2.5,7.5" fill="#8B5CF6" stroke="#8B5CF6" stroke-width="1" stroke-linejoin="round"/><text x="12" y="15.8" font-family="Inter, system-ui, sans-serif" font-size="10" font-weight="900" fill="#0c0c0d" text-anchor="middle">S</text></svg>
2473            </div>
2474            <div class="text-[13px] font-bold text-white leading-tight text-center">Slabsmith</div>
2475            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-white/45">Slab Data Sync</div>
2476          </div>
2477
2478          <!-- 8 · SlabOS Sign — IN-HOUSE FLEX.
2479               This is the standout. Orange gradient bg, brand border,
2480               brand-orange icon, and a small "In-house" badge at the
2481               top corner. Reads visually different from the seven
2482               third-party tiles around it. Says without saying it:
2483               "we didn't need DocuSign — we built our own." -->
2484          <div class="group relative rounded-xl px-3 py-4 flex flex-col items-center gap-1.5 transition-all hover:-translate-y-1"
2485               style="background: linear-gradient(160deg, rgba(255, 94, 31, 0.10), rgba(255, 94, 31, 0.02)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 94, 31, 0.4); box-shadow: inset 0 1px 0 rgba(255, 94, 31, 0.15), 0 8px 28px rgba(255, 94, 31, 0.18), 0 0 60px rgba(255, 94, 31, 0.08);">
2486            <!-- "In-house" pill in top-right corner -->
2487            <div class="absolute top-2.5 right-2.5 text-[8.5px] font-black uppercase tracking-[0.14em] text-brand-300 bg-brand-500/15 border border-brand-500/40 rounded-full px-2 py-0.5">
2488              In-house
2489            </div>
2490            <div class="w-9 h-9 rounded-lg flex items-center justify-center bg-white" style="border: 1px solid rgba(255, 94, 31, 0.40);">
2491              <!-- Real SlabOS logo on a white tile so the brand mark reads
2492                   cleanly against the orange gradient card. The other tiles
2493                   use brand-tinted backgrounds; this one uses white so the
2494                   logo doesn't get muddied. -->
2495              <img src="/logo.png" alt="SlabOS Sign" width="22" height="22" class="object-contain">
2496            </div>
2497            <div class="text-[13px] font-bold text-white leading-tight text-center">SlabOS Sign</div>
2498            <div class="text-[8px] font-black uppercase tracking-[0.14em] text-center text-brand-300">E-sign · Audit Trail</div>
2499          </div>
2500
2501        </div>
2502
2503        <!-- Below-grid pillar bar: 3 small "what runs the platform"
2504             chips. Subtle, monochrome, sits under the tile grid so
2505             the technically-minded reader (the owner's son who got
2506             asked "should we switch?") sees the stack is real. Not
2507             flexed, just present. -->
2508        <div class="mt-10 lg:mt-14 pt-8 border-t border-white/[0.08]">
2509          <div class="text-center mb-5">
2510            <div class="text-[10px] font-black uppercase tracking-[0.22em] text-white/35">Built on a serious stack</div>
2511          </div>
2512          <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-white/40">
2513            <div class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.14em]">
2514              <img src="https://cdn.simpleicons.org/nextdotjs/8b8b8b" alt="Next.js" width="13" height="13" loading="lazy">
2515              Next.js 15
2516            </div>
2517            <div class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.14em]">
2518              <img src="https://cdn.simpleicons.org/postgresql/8b8b8b" alt="PostgreSQL" width="13" height="13" loading="lazy">
2519              PostgreSQL
2520            </div>
2521            <div class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.14em]">
2522              <img src="https://cdn.simpleicons.org/railway/8b8b8b" alt="Railway" width="13" height="13" loading="lazy">
2523              Railway · 32 vCPU
2524            </div>
2525            <div class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.14em]">
2526              <img src="https://cdn.simpleicons.org/cloudflare/8b8b8b" alt="Cloudflare" width="13" height="13" loading="lazy">
2527              Cloudflare CDN
2528            </div>
2529            <div class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.14em]">
2530              <iconify-icon icon="solar:shield-check-bold" width="14"></iconify-icon>
2531              AES-256 · TLS 1.3
2532            </div>
2533          </div>
2534        </div>
2535
2536        <div class="text-center mt-10">
2537          <a href="/tour" class="inline-flex items-center gap-1.5 text-sm font-bold text-brand-400 hover:text-brand-300 transition-colors group">
2538            See every integration in action on the tour
2539            <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="14"></iconify-icon>
2540          </a>
2541        </div>
2542      </div>
2543    </section>
2544
2545    <!-- ============ ROI CALCULATOR ============ -->
2546    <section class="px-6 lg:px-12 py-12 lg:py-24">
2547      <div class="max-w-[1200px] mx-auto">
2548        <!-- Chapter marker — hidden on mobile (mid-section chapter,
2549             doesn't need the full intro pattern). -->
2550        <div class="hidden md:flex items-center gap-3 mb-8">
2551          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
2552            <span class="heading-display text-sm text-brand-500">06</span>
2553          </div>
2554          <div class="eyebrow-tag text-brand-400">Chapter 06 · The math</div>
2555        </div>
2556        <div class="mb-10">
2557          <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white max-w-3xl">
2558            When does it<br>
2559            <span class="text-gradient-brand">pay for itself?</span>
2560          </h2>
2561          <p class="text-white/65 mt-4 text-base lg:text-lg max-w-2xl">Move the sliders. We'll show you the breakeven point. Conservative numbers — no fairy-tale "30-day payback" claims.</p>
2562        </div>
2563
2564        <!-- Unified ROI card — the mobile design language scaled up
2565             for desktop. One DOM tree, one set of canonical IDs (no
2566             more dual-binding JS).
2567
2568             Mobile (< lg): single-column stack — 3 slider tiles
2569             then the result tile beneath, then the assumption.
2570             Desktop (lg+): 2-col grid — 3 slider tiles on the left,
2571             single hero result tile on the right, side-by-side
2572             matched in height. Container widens from max-w-2xl
2573             (672px) on mobile to max-w-5xl (1024px) at lg so the
2574             two columns each get ~480px breathing room. -->
2575        <div class="max-w-2xl lg:max-w-5xl mx-auto">
2576          <!-- The grid: stacked under lg, 2-col side-by-side at lg+.
2577               items-stretch so the right-side result tile expands to
2578               match the slider stack's height. -->
2579          <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-6 lg:items-stretch">
2580          <!-- 3 compact frosted slider tiles. Value sits inline-right
2581               of the label as a hero stat. Padding + value font size
2582               step up at sm/md so the tiles feel substantial on
2583               desktop without changing structure. -->
2584          <div class="space-y-3 sm:space-y-4">
2585            <div class="rounded-2xl px-4 pt-4 pb-3 sm:px-6 sm:pt-5 sm:pb-4 border border-white/10" style="background: rgba(255,255,255,0.025);">
2586              <div class="flex items-baseline justify-between mb-2 sm:mb-3">
2587                <div class="text-[11px] sm:text-xs font-bold uppercase tracking-[0.18em] text-white/55">Quotes / month</div>
2588                <span id="roi-jobs-val" class="text-2xl sm:text-3xl lg:text-4xl font-black text-gradient-brand leading-none">20</span>
2589              </div>
2590              <!-- Slider raw value 1..1000 maps logarithmically to 1..1000
2591                   jobs. Initial 434 ≈ 20 jobs (log midpoint at 32). Keeps
2592                   small-shop range feeling responsive while still reaching
2593                   enterprise scale. -->
2594              <input type="range" id="roi-jobs" min="1" max="1000" value="434" class="brand-slider">
2595              <div class="flex justify-between text-[10px] sm:text-[11px] text-white/35 mt-1"><span>1</span><span>1000</span></div>
2596            </div>
2597            <div class="rounded-2xl px-4 pt-4 pb-3 sm:px-6 sm:pt-5 sm:pb-4 border border-white/10" style="background: rgba(255,255,255,0.025);">
2598              <div class="flex items-baseline justify-between mb-2 sm:mb-3">
2599                <div class="text-[11px] sm:text-xs font-bold uppercase tracking-[0.18em] text-white/55">Hours / quote · legacy</div>
2600                <span id="roi-hours-val" class="text-2xl sm:text-3xl lg:text-4xl font-black text-gradient-brand leading-none">3h</span>
2601              </div>
2602              <input type="range" id="roi-hours" min="0.5" max="8" step="0.5" value="3" class="brand-slider">
2603              <div class="flex justify-between text-[10px] sm:text-[11px] text-white/35 mt-1"><span>30 min</span><span>8 hrs</span></div>
2604            </div>
2605            <div class="rounded-2xl px-4 pt-4 pb-3 sm:px-6 sm:pt-5 sm:pb-4 border border-white/10" style="background: rgba(255,255,255,0.025);">
2606              <div class="flex items-baseline justify-between mb-2 sm:mb-3">
2607                <div class="text-[11px] sm:text-xs font-bold uppercase tracking-[0.18em] text-white/55">Loaded $ / hour</div>
2608                <span id="roi-rate-val" class="text-2xl sm:text-3xl lg:text-4xl font-black text-gradient-brand leading-none">$60</span>
2609              </div>
2610              <input type="range" id="roi-rate" min="30" max="150" step="5" value="60" class="brand-slider">
2611              <div class="flex justify-between text-[10px] sm:text-[11px] text-white/35 mt-1"><span>$30</span><span>$150</span></div>
2612            </div>
2613          </div>
2614
2615          <!-- Single hero result tile — money is the primary signal,
2616               hours + multiplier as small supporting chips. Orange
2617               border + radial glow so it visually owns the right
2618               column at lg+ (and the bottom of the stack on mobile).
2619               Top margin only applies under lg — at lg+ the grid gap
2620               handles the spacing.
2621               flex flex-col + justify-center so the content vertically
2622               centers within the column when the right tile stretches
2623               to match the slider stack's height. -->
2624          <div class="rounded-3xl overflow-hidden relative px-5 py-6 sm:px-8 sm:py-9 flex flex-col justify-center"
2625               style="background: linear-gradient(135deg, rgba(255,94,31,0.16), rgba(255,94,31,0.04)); border: 1px solid rgba(255,94,31,0.35);">
2626            <div class="absolute -top-12 -right-12 w-40 h-40 sm:w-60 sm:h-60 bg-brand-500/30 blur-3xl rounded-full pointer-events-none"></div>
2627            <div class="relative">
2628              <div class="text-[10px] sm:text-[11px] font-bold uppercase tracking-[0.22em] text-brand-300 mb
2628-2">Money left on the table</div>
2629              <div class="flex items-baseline gap-1.5 sm:gap-2">
2630                <span id="roi-money-saved" class="text-[2.75rem] sm:text-7xl lg:text-7xl xl:text-8xl leading-none font-black stat-huge">$3,200</span>
2631                <span class="text-sm sm:text-lg text-white/45 font-bold">/mo</span>
2632              </div>
2633              <div class="mt-3 sm:mt-4 flex items-center gap-3 sm:gap-4 text-[11px] sm:text-xs font-bold uppercase tracking-[0.14em] text-white/55">
2634                <span><span id="roi-hours-saved" class="text-white">53 hrs</span> lost</span>
2635                <span class="text-white/25">·</span>
2636                <span><span id="roi-multiplier" class="text-white">3x</span> SlabOS</span>
2637              </div>
2638              <a href="/book" target="_blank" rel="noopener" class="mt-5 sm:mt-7 block w-full text-center bg-brand-500 hover:bg-brand-600 text-black font-black uppercase tracking-wider px-5 py-3.5 sm:py-4 rounded-xl transition-all text-xs sm:text-sm shadow-lg shadow-brand-500/30">
2639                Stop losing this →
2640              </a>
2641            </div>
2642          </div>
2643          </div><!-- /grid 2-col -->
2644
2645          <!-- Secondary ROI breakdown — three tiles below the hero
2646               result that surface the other value categories beyond
2647               quoting time. All derived from the same `jobs` input
2648               so the user only manipulates 3 sliders. Industry
2649               baselines: 1 slab/job, 15% yield improvement via AI
2650               nesting at $500/slab (SlabOS field data); remake rate
2651               1 per 30 jobs at $1,800/remake, 70% reduction (Stone
2652               World 2025 + SlabWise 2026); payback includes the
2653               $3,000 setup over the combined monthly ROI. -->
2654          <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mt-4 sm:mt-5">
2655            <div class="rounded-xl px-4 py-4 sm:px-5 sm:py-5 border border-white/10" style="background: rgba(255,255,255,0.025);">
2656              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.18em] text-white/55 mb-2">Slab yield bonus</div>
2657              <div class="heading-display text-2xl sm:text-3xl text-emerald-400" id="roi-slab-save">$2,250<span class="text-[11px] sm:text-xs text-white/45 font-bold normal-case ml-1.5 tracking-normal not-italic">/mo</span></div>
2658              <div class="text-[10.5px] sm:text-[11px] text-white/45 mt-1.5">15% from AI nesting</div>
2659            </div>
2660            <div class="rounded-xl px-4 py-4 sm:px-5 sm:py-5 border border-white/10" style="background: rgba(255,255,255,0.025);">
2661              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.18em] text-white/55 mb-2">Remake risk cut</div>
2662              <div class="heading-display text-2xl sm:text-3xl text-emerald-400" id="roi-remake-save">$1,260<span class="text-[11px] sm:text-xs text-white/45 font-bold normal-case ml-1.5 tracking-normal not-italic">/mo</span></div>
2663              <div class="text-[10.5px] sm:text-[11px] text-white/45 mt-1.5">70% drop from template verify</div>
2664            </div>
2665            <div class="rounded-xl px-4 py-4 sm:px-5 sm:py-5 border" style="background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(255,255,255,0.02)); border-color: rgba(34,197,94,0.25);">
2666              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.18em] text-emerald-300/85 mb-2">Payback in</div>
2667              <div class="heading-display text-2xl sm:text-3xl text-emerald-300" id="roi-payback">29<span class="text-[11px] sm:text-xs text-white/45 font-bold normal-case ml-1.5 tracking-normal not-italic">days</span></div>
2668              <div class="text-[10.5px] sm:text-[11px] text-white/45 mt-1.5">incl. one-time setup</div>
2669            </div>
2670          </div>
2671
2672          <!-- Assumption note — small, low-weight, sits below the
2673               grid so it doesn't compete with the hero number. -->
2674          <p class="mt-4 sm:mt-5 text-[10.5px] sm:text-xs leading-relaxed text-white/40 px-1">
2675            <strong class="text-white/55">Sources:</strong> SlabOS quote = 20 min avg (measured across ~200 shops). Yield: 10–20% improvement with AI nesting (SlabOS field data). Remake rate: 1 per 30 jobs at $1,800 each (Stone World 2025, SlabWise 2026). Payback math includes the one-time onboarding fee.
2676          </p>
2677        </div>
2678      </div>
2679    </section>
2680
2681    <!-- ============================================================
2682         FAQ — minimal accordion, dark theme, big italic chevrons.
2683         Updated copy to founder pricing ($1,500 Core reference) + $3K
2684         setup — no tier-switching language anymore.
2685         ============================================================ -->
2686    <section class="relative px-6 lg:px-12 py-14 lg:py-28">
2687      <div class="max-w-[1100px] mx-auto">
2688        <div class="mb-14">
2689          <div class="eyebrow-tag text-white/40 mb-3">Common questions</div>
2690          <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white">
2691            Things shops ask <span class="text-gradient-brand">before they sign.</span>
2692          </h2>
2693        </div>
2694        <div class="space-y-0 border-t border-white/10">
2695          <details class="group border-b border-white/10 py-6 lg:py-8">
2696            <summary class="flex items-center justify-between cursor-pointer list-none">
2697              <span class="heading-display text-xl lg:text-2xl text-white pr-4">What does the setup fee actually cover?</span>
2698              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2699            </summary>
2700            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">Five things, all done by us in week one: data migration from your current software, pricelist rebuild on a 3-hour call, six hours of 1-on-1 founder training, every integration wired up (QuickBooks, email, maps, DocuSign), and your team profiled and quoting by Friday. Setup fee ends there — your flat monthly rate starts from week two.</p>
2701          </details>
2702          <details class="group border-b border-white/10 py-6 lg:py-8">
2703            <summary class="flex items-center justify-between cursor-pointer list-none">
2704              <span class="heading-display text-xl lg:text-2xl text-white pr-4">Do you really migrate my legacy data?</span>
2705              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2706            </summary>
2707            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">Yes. 14,000+ quotes migrated to date. We pull jobs, accounts, activities, calendar events, POs, pricelists, and form templates row-by-row — verified with you before going live. Most migrations finish in under 90 minutes. A $12M/yr production shop moved their whole shop in one sitting.</p>
2708          </details>
2709          <details class="group border-b border-white/10 py-6 lg:py-8">
2710            <summary class="flex items-center justify-between cursor-pointer list-none">
2711              <span class="heading-display text-xl lg:text-2xl text-white pr-4">My team's older. They won't use another app. How is this different?</span>
2712              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2713            </summary>
2714            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">Two reasons. One, SlabOS is built by people who've cut stone — Connor ran a fab shop for 8 years — so it maps to how floors actually work. Two, your setup buys six hours of 1-on-1 training with the founders, not a "watch these 40 videos" email. Most crews are running it day-to-day by end of week one.</p>
2715          </details>
2716          <details class="group border-b border-white/10 py-6 lg:py-8">
2717            <summary class="flex items-center justify-between cursor-pointer list-none">
2718              <span class="heading-display text-xl lg:text-2xl text-white pr-4">My pricing is my crown jewel. Is my data safe?</span>
2719              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2720            </summary>
2721            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">Your pricing is yours. Period. Strict tenant isolation — no other shop ever sees your pricelist, customers, or jobs. AES-256 at rest, TLS 1.3 in transit, every request scoped to your shop ID. Export everything to CSV anytime. No lock-in.</p>
2722          </details>
2723          <details class="group border-b border-white/10 py-6 lg:py-8">
2724            <summary class="flex items-center justify-between cursor-pointer list-none">
2725              <span class="heading-display text-xl lg:text-2xl text-white pr-4">Are there per-user fees?</span>
2726              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2727            </summary>
2728            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">No. Your flat monthly is your shop, not your seats. Salespeople, schedulers, owners, admins — all included. Non-login employees (fabricators, installers, drivers) are also unlimited and free. We don't charge you to add your shop floor.</p>
2729          </details>
2730          <details class="group border-b border-white/10 py-6 lg:py-8">
2731            <summary class="flex items-center justify-between cursor-pointer list-none">
2732              <span class="heading-display text-xl lg:text-2xl text-white pr-4">Is there a contract? Can I cancel?</span>
2733              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2734            </summary>
2735            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">No contracts. Month-to-month, cancel from Settings — no "call us to cancel" games. Onboarding is one-time (your rate is set on a call), and the monthly is fully cancelable. Annual billing available at 15% off if you want to lock in.</p>
2736          </details>
2737          <details class="group border-b border-white/10 py-6 lg:py-8">
2738            <summary class="flex items-center justify-between cursor-pointer list-none">
2739              <span class="heading-display text-xl lg:text-2xl text-white pr-4">Can I try it before I commit?</span>
2740              <iconify-icon icon="solar:alt-arrow-down-bold" class="group-open:rotate-180 transition-transform text-brand-500 shrink-0" width="22"></iconify-icon>
2741            </summary>
2742            <p class="text-white/70 text-base mt-4 leading-relaxed max-w-3xl">Yes — book a 20-minute demo and we'll walk through it live on your own data. Bring your worst job from last year and your current pricelist. We'll quote it in front of you, in real time. If you're not sold by minute 18, we won't take your money. <a href="/reviews" class="text-brand-400 hover:text-brand-300 font-semibold">Or see what shops are already saying &rarr;</a></p>
2743          </details>
2744        </div>
2745      </div>
2746    </section>
2747
2748    <!-- ============================================================
2749         CHAPTER 06½ — HOW ONBOARDING WORKS.
2750         Day 1 → go-live timeline. Risk-reversal block — "we don't get
2751         paid until your data is in." Reads cold to a 50-year-old shop
2752         owner who's been burned by SaaS migrations before. Sits
2753         immediately before the final CTA. No money-back guarantee is
2754         offered or implied — month-to-month, cancel anytime.
2755         ============================================================ -->
2756    <section class="relative px-6 lg:px-12 py-14 lg:py-24 overflow-hidden">
2757      <div class="absolute bottom-0 left-[-10%] w-[500px] h-[500px] bg-brand-500 opacity-[0.04] blur-[140px] rounded-full pointer-events-none"></div>
2758
2759      <div class="relative max-w-[1300px] mx-auto">
2760        <div class="hidden md:flex items-center gap-3 mb-8">
2761          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
2762            <span class="heading-display text-sm text-brand-500">06½</span>
2763          </div>
2764          <div class="eyebrow-tag text-brand-400">Chapter 06½ · How onboarding works</div>
2765        </div>
2766
2767        <div class="mb-12 lg:mb-14">
2768          <h2 class="heading-display text-3xl sm:text-5xl lg:text-7xl text-white max-w-4xl">
2769            We don't get paid<br>
2770            <span class="text-gradient-brand">until your data's in.</span>
2771          </h2>
2772          <p class="text-base sm:text-lg text-white/70 mt-6 max-w-2xl leading-relaxed">
2773            Your whole system comes across in <strong class="text-white">days, not months</strong> &mdash; price lists, accounts, jobs, quotes, drawings, inventory, the lot. Then one-on-one training on a layout your team already recognises. No monthly invoice until you&rsquo;re actually running on it.
2774          </p>
2775        </div>
2776
2777        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
2778
2779          <!-- ─── LEFT COLUMN: what we need + go-live timeline ─── -->
2780          <div class="flex flex-col gap-6 lg:gap-8">
2781
2782          <div class="mig-need rounded-2xl p-5 lg:p-6 bg-white/[0.025] border border-white/10">
2783            <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.22em] text-white/55 mb-2.5">What we need from you</div>
2784            <p class="text-sm text-white/70 leading-relaxed mb-3">Short list. Everything else is on us.</p>
2785            <ul class="space-y-2 text-[13px] leading-snug text-white/65">
2786              <li class="flex items-start gap-2.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>A login to whatever you&rsquo;re running today</span></li>
2787              <li class="flex items-start gap-2.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Your current price list, in whatever shape it lives in</span></li>
2788              <li class="flex items-start gap-2.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>An hour with whoever actually knows your pricing</span></li>
2789              <li class="flex items-start gap-2.5"><iconify-icon icon="solar:check-circle-bold" class="text-brand-400 mt-0.5 shrink-0" width="14"></iconify-icon><span>Names and emails for who needs an account</span></li>
2790            </ul>
2791          </div>
2792
2793          <!-- ─── TIMELINE ───
2794               Compressed from the old Day-1 → Day-30 ladder: the scrape is
2795               one click and runs in 30–90 minutes, so the honest shape is
2796               days, not weeks. Setup is still invoiced on signup — it is our
2797               labor, non-refundable — and the first MONTHLY invoice still
2798               waits until they are live. -->
2799          <div class="relative pl-7 lg:pl-9">
2800            <div class="absolute top-2 bottom-2 left-0 w-0.5 bg-gradient-to-b from-brand-500/60 via-brand-500/30 to-brand-500/10"></div>
2801
2802          <div class="relative py-5 lg:py-6">
2803            <span class="inline-block bg-brand-500/10 border border-brand-500/40 text-brand-400 text-[9px] sm:text-[10px] font-black uppercase tracking-[0.16em] rounded-full px-2.5 py-1 mb-2.5">Day 1</span>
2804            <div class="text-base lg:text-lg font-bold text-white">Your whole system lands.</div>
2805            <div class="text-sm text-white/60 mt-1.5 leading-relaxed max-w-md">One click, fully automated, 30&ndash;90 minutes depending on how much history you have. Price lists, accounts, jobs, quotes, drawings and inventory come over together. <strong class="text-white">Your old software keeps running the whole time</strong> &mdash; the migration is a copy, not a cut-over, so nothing gets switched off and the shop never stops quoting. Onboarding is invoiced on signup; it&rsquo;s our labor for the migration, the pricelist build, training and integrations.</div>
2806          </div>
2807
2808          <div class="relative py-5 lg:py-6 border-t border-white/[0.06]">
2809            <span class="inline-block bg-brand-500/10 border border-brand-500/40 text-brand-400 text-[9px] sm:text-[10px] font-black uppercase tracking-[0.16em] rounded-full px-2.5 py-1 mb-2.5">Day 1&ndash;2</span>
2810            <div class="text-base lg:text-lg font-bold text-white">One-on-one training. Not a webinar.</div>
2811            <div class="text-sm text-white/60 mt-1.5 leading-relaxed max-w-md">We sit with your people, on your data, on the jobs they already know &mdash; not a recorded webinar and not a help-centre link. Estimators, schedulers, the office and the install crew each get the part they actually touch, so nobody sits through an hour about a screen they will never open. The layout and the flow will look familiar: it&rsquo;s the same shape of work your team already does, with everything an owner needs to outrun the shop down the road.</div>
2812          </div>
2813
2814          <div class="relative py-5 lg:py-6 border-t border-white/[0.06]">
2815            <span class="inline-block bg-brand-500/10 border border-brand-500/40 text-brand-400 text-[9px] sm:text-[10px] font-black uppercase tracking-[0.16em] rounded-full px-2.5 py-1 mb-2.5">Day 2&ndash;3</span>
2816            <div class="text-base lg:text-lg font-bold text-white">You&rsquo;re quoting real jobs.</div>
2817            <div class="text-sm text-white/60 mt-1.5 leading-relaxed max-w-md">Real quotes, your real margins, in front of you. The test we&rsquo;d suggest: take a job you already sold, re-quote it in SlabOS, and compare the number and the time it took. Still no monthly charge while you do it &mdash; you decide if it&rsquo;s right first.</div>
2818          </div>
2819
2820          <div class="relative py-5 lg:py-6 border-t border-white/[0.06]">
2821            <span class="inline-block bg-brand-500/10 border border-brand-500/40 text-brand-400 text-[9px] sm:text-[10px] font-black uppercase tracking-[0.16em] rounded-full px-2.5 py-1 mb-2.5">Month-to-month</span>
2822            <div class="text-base lg:text-lg font-bold text-white">First invoice, at your agreed rate.</div>
2823            <div class="text-sm text-white/60 mt-1.5 leading-relaxed max-w-md">Cancel anytime &mdash; no lock-in, no &quot;call us to cancel&quot; games. Your data stays yours and stays exportable, on the way in and on the way out. If we stop being worth it, you should be able to leave without a phone call and without losing a decade of jobs.</div>
2824          </div>
2825          </div>
2826          </div>
2827          <!-- end LEFT COLUMN -->
2828
2829          <!-- ─── RIGHT COLUMN: plain-English, what moves, terms ─── -->
2830          <div class="flex flex-col gap-3 lg:gap-4">
2831            <div class="relief-card rounded-2xl p-6 lg:p-7">
2832              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.22em] text-emerald-300/85 mb-3">Plain English</div>
2833              <p class="text-base lg:text-lg text-white leading-relaxed">
2834                We move your data first, in days.<br>
2835                Your shop keeps running while we do it.<br>
2836                <strong class="text-emerald-300">Month-to-month after that &mdash; cancel anytime.</strong>
2837              </p>
2838            </div>
2839
2840            <div class="mig-manifest">
2841              <div class="mig-kicker">What actually comes across</div>
2842              <p class="mig-lede">Your working system, rebuilt. <strong>Around 99% of it lands on the first pass</strong>, and anything that doesn&rsquo;t we square up with you before go-live.</p>
2843              <ul class="mig-list">
2844                <li><span class="mig-n">0</span><span><strong>Price lists</strong> &mdash; Supplier price lists &mdash; materials, colors, thicknesses, pricing rules</span></li>
2845                <li><span class="mig-n">1</span><span><strong>Accounts</strong> &mdash; All client and contractor accounts</span></li>
2846                <li><span class="mig-n">2</span><span><strong>Account addresses</strong> &mdash; Business address for every account</span></li>
2847                <li><span class="mig-n">3</span><span><strong>Jobs</strong> &mdash; Every job, linked to its account, with statuses and activities</span></li>
2848                <li><span class="mig-n">4</span><span><strong>Job site addresses</strong> &mdash; Site contact, address, phone and email per job</span></li>
2849                <li><span class="mig-n">5</span><span><strong>Quote&ndash;account mapping</strong> &mdash; Quotes tied back to accounts and jobs</span></li>
2850                <li><span class="mig-n">6</span><span><strong>Quote drawings</strong> &mdash; The full 2D countertop drawings, not just the totals</span></li>
2851                <li><span class="mig-n">7</span><span><strong>Quote site addresses</strong> &mdash; Contact name, address and phone for every quote</span></li>
2852                <li><span class="mig-n">8</span><span><strong>Job&ndash;quote linking</strong> &mdash; Jobs matched to quotes by name and account</span></li>
2853                <li><span class="mig-n">
28539</span><span><strong>Slab inventory</strong> &mdash; Every slab &mdash; serial numbers, suppliers, finishes, locations</span></li>
2854                <li class="mig-more"><span class="mig-n mig-n-plus">+</span><span><strong>Everything else, automatically</strong> &mdash; activity types, orders, file attachments, PO dates, then the post-run fixups: salesperson re-match, job-address backfill, linked-quote promotion.</span></li>
2855              </ul>
2856            </div>
2857
2858            <div class="rounded-2xl p-5 lg:p-6 bg-white/[0.025] border border-white/10">
2859              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.22em] text-white/55 mb-2">And whatever else you run</div>
2860              <p class="text-sm text-white/70 leading-relaxed">Google Calendar, your invoicing engine, Meta ads, whatever other software the shop depends on &mdash; tell us on the call and we wire it up. <strong class="text-white">It comes with the onboarding.</strong> No integration is a separate line item.</p>
2861            </div>
2862
2863            <div class="rounded-2xl p-5 lg:p-6 bg-white/[0.025] border border-white/10">
2864              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.22em] text-white/55 mb-2">No contract. No lock-in.</div>
2865              <p class="text-sm text-white/70 leading-relaxed">Month-to-month. Cancel anytime from Settings &mdash; no &quot;call us to cancel&quot; games. We keep your business by building software you can&rsquo;t stop using, not by trapping you in paperwork.</p>
2866            </div>
2867
2868            <div class="rounded-2xl p-5 lg:p-6 bg-white/[0.025] border border-white/10">
2869              <div class="text-[10px] sm:text-[11px] font-black uppercase tracking-[0.22em] text-white/55 mb-2">Annual option &middot; save 15%</div>
2870              <p class="text-sm text-white/70 leading-relaxed">Pay annually and take <strong class="text-white">15% off your rate</strong> &mdash; whatever band you land in. Same platform, same unlimited users, one invoice a year instead of twelve.</p>
2871            </div>
2872          </div>
2873
2874        </div>
2875      </div>
2876    </section>
2877
2878    <!-- ============ FINAL CTA ============ -->
2879    <!-- ============================================================
2880         CHAPTER 07 — TALK TO US.
2881         The closer for the demographic — older shop owners buy from
2882         humans, not landing-page CTAs. Three contact options side by
2883         side (Calendly / phone / email). Founder credibility folded
2884         in below as proof points: who built this, who's running it.
2885         Contacts currently
2886         route to Max's Calendly + the sales@ alias.
2887         own Calendly is wired up.
2888         ============================================================ -->
2889    <section class="relative px-6 lg:px-12 py-14 lg:py-28 overflow-hidden">
2890      <!-- Atmospheric orange glow centered behind the CTA -->
2891      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-brand-500 opacity-20 blur-[150px] rounded-full pointer-events-none"></div>
2892      <div class="absolute bottom-[-15%] left-[-10%] w-[400px] h-[400px] bg-brand-400 opacity-10 blur-[120px] rounded-full pointer-events-none"></div>
2893      <div class="absolute bottom-[-15%] right-[-10%] w-[400px] h-[400px] bg-brand-400 opacity-10 blur-[120px] rounded-full pointer-events-none"></div>
2894
2895      <div class="relative max-w-[1300px] mx-auto">
2896        <!-- Chapter marker -->
2897        <div class="flex items-center gap-3 mb-8">
2898          <div class="w-10 h-10 rounded-full bg-brand-500/10 border border-brand-500/50 flex items-center justify-center">
2899            <span class="heading-display text-sm text-brand-500">07</span>
2900          </div>
2901          <div class="eyebrow-tag text-brand-400">Chapter 07 · Claim it</div>
2902        </div>
2903
2904        <!-- Headline -->
2905        <h2 class="heading-display text-4xl sm:text-6xl lg:text-8xl xl:text-[7rem] text-white text-center" style="text-shadow: 0 4px 60px rgba(255, 94, 31, 0.25);">
2906          Talk to <span class="text-gradient-brand">the team.</span><br>
2907          20 minutes. <span class="text-white/45">No pitch.</span>
2908        </h2>
2909        <!-- Description — desktop keeps the longer 4-sentence pitch.
2910             Mobile gets a 3-sentence trim so it doesn't read as a wall
2911             above the CTA. -->
2912        <p class="hidden md:block text-white/70 mt-8 text-base lg:text-xl text-center max-w-3xl mx-auto font-medium leading-relaxed">
2913          Bring your current pricelist. Bring the worst job from last year. We'll show you what SlabOS does with both, in real time, on a screen-share. If we can't save you 4 hours a quote by the end of the call, we'll tell you ourselves.
2914        </p>
2915        <p class="md:hidden text-white/70 mt-6 text-base text-center max-w-md mx-auto font-medium leading-relaxed">
2916          Bring your worst job from last year. We'll quote it live on a screen-share. <span class="text-white">If we can't save you 4 hours per quote, we'll tell you ourselves.</span>
2917        </p>
2918
2919        <!-- ─────────── DESKTOP CONTACT CARDS (md+) ───────────
2920             3 equal-weight tiles side-by-side. Mobile version below
2921             promotes the Calendly tile to a single hero button and
2922             tucks call/email into a slim secondary strip. -->
2923        <div class="hidden md:grid grid-cols-1 md:grid-cols-3 gap-4 mt-12 max-w-4xl mx-auto">
2924          <!-- Calendly -->
2925          <a href="/book" target="_blank" rel="noopener"
2926             class="group bg-brand-500 hover:bg-brand-600 text-black rounded-2xl p-6 shadow-xl shadow-brand-500/30 transition-all">
2927            <iconify-icon icon="solar:calendar-bold" width="32" class="mb-3"></iconify-icon>
2928            <div class="eyebrow-tag mb-2">Best · Recommended</div>
2929            <div class="heading-display text-2xl mb-2">Book a demo</div>
2930            <div class="text-sm font-bold opacity-80">20 min · Calendly · Mon-Fri 9-5 PT</div>
2931            <div class="mt-4 inline-flex items-center gap-1.5 text-sm font-black uppercase tracking-wider">
2932              Pick a time
2933              <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="14"></iconify-icon>
2934            </div>
2935          </a>
2936          <!-- Phone -->
2937          <a href="tel:+12368181740"
2938             class="group bg-dark-900 border border-white/10 hover:border-brand-500/50 text-white rounded-2xl p-6 transition-all">
2939            <iconify-icon icon="solar:phone-calling-bold" width="32" class="text-brand-400 mb-3"></iconify-icon>
2940            <div class="eyebrow-tag text-white/40 mb-2">Talk now</div>
2941            <div class="heading-display text-2xl mb-2">Call us</div>
2942            <div class="text-sm font-bold text-white/60">+1 (236) 818-1740</div>
2943            <div class="mt-4 inline-flex items-center gap-1.5 text-sm font-black uppercase tracking-wider text-brand-400">
2944              Tap to dial
2945              <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="14"></iconify-icon>
2946            </div>
2947          </a>
2948          <!-- Email -->
2949          <a href="mailto:[email protected]?subject=SlabOS%20pricing
2949%20question"
2950             class="group bg-dark-900 border border-white/10 hover:border-brand-500/50 text-white rounded-2xl p-6 transition-all">
2951            <iconify-icon icon="solar:letter-bold" width="32" class="text-brand-400 mb-3"></iconify-icon>
2952            <div class="eyebrow-tag text-white/40 mb-2">Async · 1hr reply</div>
2953            <div class="heading-display text-2xl mb-2">Email us</div>
2954            <div class="text-sm font-bold text-white/60 break-all">[email protected]</div>
2955            <div class="mt-4 inline-flex items-center gap-1.5 text-sm font-black uppercase tracking-wider text-brand-400">
2956              Open my email
2957              <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="14"></iconify-icon>
2958            </div>
2959          </a>
2960        </div>
2961
2962        <!-- ─────────── MOBILE CONTACT BLOCK ───────────
2963             Single hero Calendly button (the only tap that matters
2964             on a phone visit), with a slim "or call/email" strip
2965             beneath. Roughly 1/3 the vertical real estate of the
2966             3-card stack. -->
2967        <div class="md:hidden mt-9 max-w-md mx-auto">
2968          <a href="/book" target="_blank" rel="noopener"
2969             class="block rounded-2xl px-5 py-5 bg-brand-500 hover:bg-brand-600 text-black shadow-xl shadow-brand-500/30 transition-all">
2970            <div class="flex items-center gap-3 mb-1">
2971              <iconify-icon icon="solar:calendar-bold" width="22"></iconify-icon>
2972              <div class="text-[10.5px] font-bold uppercase tracking-[0.2em]">Best · Recommended</div>
2973            </div>
2974            <div class="heading-display text-2xl">Book a demo with the team</div>
2975            <div class="flex items-center justify-between mt-3">
2976              <div class="text-[11px] font-bold uppercase tracking-[0.16em] opacity-80">20 min · Mon-Fri 9-5 PT</div>
2977              <div class="inline-flex items-center gap-1.5 text-xs font-black uppercase tracking-wider">
2978                Pick a time
2979                <iconify-icon icon="solar:arrow-right-linear" width="13"></iconify-icon>
2980              </div>
2981            </div>
2982          </a>
2983
2984          <!-- Slim secondary strip — call + email as inline tap targets,
2985               not full cards. Single line per option, brand-tinted icon
2986               left, label center, "tap" affordance right. -->
2987          <div class="mt-4 rounded-2xl border border-white/10 bg-white/[0.025] divide-y divide-white/[0.06]">
2988            <a href="tel:+12368181740" class="flex items-center gap-3 px-4 py-3.5 hover:bg-white/[0.03] transition-colors">
2989              <iconify-icon icon="solar:phone-calling-bold" class="text-brand-400 shrink-0" width="18"></iconify-icon>
2990              <div class="flex-1 min-w-0">
2991                <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/45">Call</div>
2992                <div class="text-sm font-bold text-white truncate">+1 (236) 818-1740</div>
2993              </div>
2994              <iconify-icon icon="solar:arrow-right-linear" class="text-white/35 shrink-0" width="14"></iconify-icon>
2995            </a>
2996            <a href="mailto:[email protected]?subject=SlabOS%20pricing
2996%20question" class="flex items-center gap-3 px-4 py-3.5 hover:bg-white/[0.03] transition-colors">
2997              <iconify-icon icon="solar:letter-bold" class="text-brand-400 shrink-0" width="18"></iconify-icon>
2998              <div class="flex-1 min-w-0">
2999                <div class="text-[10px] font-bold uppercase tracking-[0.18em] text-white/45">Email · 1hr reply</div>
3000                <div class="text-sm font-bold text-white truncate">[email protected]</div>
3001              </div>
3002              <iconify-icon icon="solar:arrow-right-linear" class="text-white/35 shrink-0" width="14"></iconify-icon>
3003            </a>
3004          </div>
3005        </div>
3006
3007        <!-- ─────────── PROPOSAL PDF DOWNLOAD BANNER ───────────
3008             Sits between the contact cards and the founder strip.
3009             One full-width tile, visible on every breakpoint, points
3010             at /proposal.html (which has its own "Download PDF" button
3011             that drives window.print()). Gives owners a way to hand
3012             the full pricing pitch to a partner / accountant / their
3013             team without dragging them through a 7-chapter web page. -->
3014        <div class="mt-10 max-w-4xl mx-auto">
3015          <a href="/overview" target="_blank" rel="noopener"
3016             class="group block relative overflow-hidden rounded-2xl border border-brand-500/30 hover:border-brand-500/60 transition-all"
3017             style="background: linear-gradient(135deg, rgba(255, 94, 31, 0.10), rgba(255, 94, 31, 0.02));">
3018            <!-- Soft radial glow top-right -->
3019            <div class="absolute top-0 right-0 w-56 h-56 bg-brand-500/15 blur-3xl rounded-full pointer-events-none"></div>
3020            <div class="relative flex flex-col sm:flex-row items-start sm:items-center gap-5 sm:gap-7 px-6 py-6 sm:px-8 sm:py-7">
3021              <!-- Icon block — inline SVG of a document w/ "PDF" label
3022                   embedded. Renders without relying on iconify (solar
3023                   icon set has been spotty on the vendored 1.0.7 lib).
3024                   The "PDF" text inside the doc shape makes the file
3025                   type instantly readable. -->
3026              <div class="shrink-0 w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center bg-brand-500/15 border border-brand-500/40">
3027                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ff7340" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-label="PDF document">
3028                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="rgba(255,94,31,0.10)"/>
3029                  <polyline points="14 2 14 8 20 8"/>
3030                  <text x="12" y="17.5" font-size="4.2" font-weight="900" fill="#ff7340" stroke="none" text-anchor="middle" font-family="Inter, system-ui, sans-serif" letter-spacing="0.3">PDF</text>
3031                </svg>
3032              </div>
3033              <!-- Copy -->
3034              <div class="flex-1 min-w-0">
3035                <div class="eyebrow-tag text-brand-400 mb-1.5">Want it in writing?</div>
3036                <h3 class="heading-display text-2xl sm:text-3xl text-white leading-tight">
3037                  Download the <span class="text-gradient-brand">platform overview.</span>
3038                </h3>
3039                <p class="text-sm sm:text-base text-white/65 mt-2 leading-relaxed max-w-xl">
3040                  The whole platform on paper — 150+ capabilities, the full comparison, and your custom rate. Print it, hand it to your partner, sleep on it.
3041                </p>
3042              </div>
3043              <!-- CTA chip -->
3044              <div class="shrink-0">
3045                <span class="inline-flex items-center gap-1.5 bg-brand-500 group-hover:bg-brand-600 text-black text-sm font-black uppercase tracking-wider px-5 py-3 rounded-xl shadow-lg shadow-brand-500/30 transition-all">
3046                  <iconify-icon icon="solar:download-minimalistic-bold" width="14"></iconify-icon>
3047                  Download PDF
3048                  <iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform" width="13"></iconify-icon>
3049                </span>
3050              </div>
3051            </div>
3052          </a>
3053        </div>
3054
3055        <!-- ─────────── DESKTOP FOUNDER CREDIBILITY STRIP ───────────
3056             3-col grid: Max (engineering) · Connor (ops)
3057             · 60k-quote migration proof point. md:grid-cols-2 mid-breakpoint
3058             so the cards don't squeeze on tablets; lg:grid-cols-4 for
3059             the full row on desktop. max-w bumped to 6xl so each tile
3060             keeps breathing room. -->
3061        <div class="hidden md:block mt-16 lg:mt-20 pt-12 border-t border-white/10">
3062          <div class="text-center mb-8">
3063            <div class="eyebrow-tag text-white/40">Built by people who've cut stone</div>
3064          </div>
3065          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
3066            <div class="text-center">
3067              <div class="heading-display text-3xl text-white">Max</div>
3068              <div class="eyebrow-tag text-brand-400 mt-1">
3068Co-founder · Engineering</div>
3069              <div class="text-sm text-white/60 mt-3 font-medium">Built every line of SlabOS. Answers every support email himself. Will personally onboard your shop.</div>
3070            </div>
3071            <div class="text-center">
3072              <div class="heading-display text-3xl text-white">Connor</div>
3073              <div class="eyebrow-tag text-brand-400 mt-1">Co-founder · Operations</div>
3074              <div class="text-sm text-white/60 mt-3 font-medium">Ran a fab shop for 8 years before SlabOS. Knows what your worst Tuesday looks like, because he lived it.</div>
3075            </div>
3076            <div class="text-center">
3077              <div class="heading-display text-3xl text-white">60,000+</div>
3078              <div class="eyebrow-tag text-brand-400 mt-1">Quotes migrated</div>
3079              <div class="text-sm text-white/60 mt-3 font-medium">A $12M/yr production shop moved 11,840 quotes, 14,517 jobs, and 13 pricelists onto SlabOS in 90 minutes. Your data lands the same way.</div>
3080            </div>
3081          </div>
3082        </div>
3083
3084        <!-- ─────────── MOBILE FOUNDER CREDIBILITY STRIP ───────────
3085             Compact horizontal row instead of 4 stacked tiles with
3086             22-word descriptions. Three names + roles in one row,
3087             then a single "14,000+ quotes migrated" stat tile beneath.
3088             Saves ~400px vs the desktop tile stack on mobile. -->
3089        <div class="md:hidden mt-12 pt-9 border-t border-white/10">
3090          <div class="text-center mb-5">
3091            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">Built by people who've cut stone</div>
3092          </div>
3093
3094          <!-- 3-name row, divided by hairlines -->
3095          <div class="grid grid-cols-2 rounded-2xl border border-white/[0.08] bg-white/[0.025] divide-x divide-white/[0.06] mb-4">
3096            <div class="text-center px-2 py-4">
3097              <div class="heading-display text-xl text-white leading-none">Max</div>
3098              <div class="text-[9.5px] font-bold uppercase tracking-[0.14em] text-brand-400 mt-1.5">Engineering</div>
3099            </div>
3100            <div class="text-center px-2 py-4">
3101              <div class="heading-display text-xl text-white leading-none">Connor</div>
3102              <div class="text-[9.5px] font-bold uppercase tracking-[0.14em] text-brand-400 mt-1.5">Operations</div>
3103            </div>
3104          </div>
3105
3106          <!-- Single proof-stat tile — orange-tinted to anchor the
3107               page closer. Reads like a spec sheet line: BIG NUMBER +
3108               one verifiable claim, no marketing voice. -->
3109          <div class="rounded-2xl border border-brand-500/25 px-4 py-4" style="background: linear-gradient(135deg, rgba(255,94,31,0.10), rgba(255,94,31,0.02));">
3110            <div class="flex items-baseline gap-2.5">
3111              <span class="heading-display text-3xl text-gradient-brand leading-none">60,000+</span>
3112              <span class="text-[10px] font-bold uppercase tracking-[0.18em] text-brand-300">quotes migrated</span>
3113            </div>
3114            <p class="text-xs text-white/55 mt-2 leading-relaxed">
3115              A $12M/yr production shop moved <span class="text-white font-semibold">11,840 quotes + 14,517 jobs</span> onto SlabOS in 90 minutes. Yours lands the same way.
3116            </p>
3117          </div>
3118        </div>
3119      </div>
3120    </section>
3121
3122  </main>
3123
3124  <!-- ============ FOOTER ============ -->
3125  <footer class="border-t border-white/10 py-12 px-6 lg:px-12">
3126    <div class="max-w-[1400px] mx-auto flex flex-col lg:flex-row justify-between items-center gap-6">
3127      <div class="flex items-center gap-3">
3128        <img src="/Mask group (21).png" alt="SlabOS" class="w-8 h-8 object-contain">
3129        <span class="text-sm font-bold text-white">Slab<span class="text-brand-400">OS</span></span>
3130      </div>
3131      <div class="flex flex-wrap gap-6 sm:gap-8 text-sm text-white/45">
3132        <a href="/#features" class="hover:text-white transition-colors">Features</a>
3133        <a href="/#workflows" class="hover:text-white transition-colors">Workflows</a>
3134        <a href="/pricing.html" class="hover:text-white transition-colors">Pricing</a>
3135        <a href="/overview" target="_blank" rel="noopener" class="hover:text-white transition-colors">Platform Overview</a>
3136        <a href="/founders" class="hover:text-white transition-colors">Founders</a>
3137        <a href="/reviews" class="hover:text-white transition-colors">Reviews</a>
3138        <a href="/guides" class="hover:text-white transition-colors">Guides</a>
3139        <a href="/legal/" class="hover:text-white transition-colors">Legal</a>
3140        <a href="/contact" class="hover:text-white transition-colors">Contact</a>
3141        <a href="/login" class="hover:text-white transition-colors">Sign In</a>
3142      </div>
3143      <div class="flex flex-wrap gap-4 sm:gap-6 text-white/65 text-xs">
3144        <a href="/privacy" class="hover:text-white/45 transition-colors">Privacy Policy</a>
3145        <a href="/terms" class="hover:text-white/45 transition-colors">Terms of Service</a>
3146        <span class="text-white/45">2026 SlabOS. All rights reserved.</span>
3147      </div>
3148    </div>
3149  </footer>
3150</div>
3151
3152<script>
3153// ROI calculator — updates the three output numbers live as the user
3154// drags the sliders. Baseline: SlabOS takes ~20 minutes per quote
3155// (0.33 hrs); anything above that is time shops are losing on their
3156// current tool. Core is $1,500/mo, so ROI multiplier = monthlySaved / 1500.
3157(function() {
3158  const jobsInput = document.getElementById('roi-jobs');
3159  const hoursInput = document.getElementById('roi-hours');
3160  const rateInput = document.getElementById('roi-rate');
3161  const jobsVal = document.getElementById('roi-jobs-val');
3162  const hoursVal = document.getElementById('roi-hours-val');
3163  const rateVal = document.getElementById('roi-rate-val');
3164  const hoursSaved = document.getElementById('roi-hours-saved');
3165  const moneySaved = document.getElementById('roi-money-saved');
3166  const roiMultiplier = document.getElementById('roi-multiplier');
3167  // Secondary breakdown tiles — derived from `jobs` only so the
3168  // user keeps a 3-slider UI. Optional (page works without them).
3169  const slabSaveEl = document.getElementById('roi-slab-save');
3170  const remakeSaveEl = document.getElementById('roi-remake-save');
3171  const paybackEl = document.getElementById('roi-payback');
3172  if (!jobsInput) return;
3173
3174  function updateSliderFill(input) {
3175    const min = parseFloat(input.min);
3176    const max = parseFloat(input.max);
3177    const val = parseFloat(input.value);
3178    const pct = ((val - min) / (max - min)) * 100;
3179    input.style.setProperty('--fill', pct + '%');
3180  }
3181
3182  // Logarithmic mapping for the jobs slider — raw 1..1000 → jobs 1..1000.
3183  // raw=1→1, raw=500→32, raw=1000→1000. Keeps the realistic 1-100 range
3184  // taking up the bottom two-thirds of the bar.
3185  function jobsFromSlider(raw) {
3186    return Math.round(Math.pow(1000, (raw - 1) / 999));
3187  }
3188
3189  function update() {
3190    const jobs = jobsFromSlider(parseFloat(jobsInput.value));
3191    const hours = parseFloat(hoursInput.value);
3192    const rate = parseInt(rateInput.value);
3193    const slabosHours = 0.33; // 20 min per quote baseline
3194    const timeSavedPerQuote = Math.max(hours - slabosHours, 0);
3195    const monthlyHoursSaved = jobs * timeSavedPerQuote;
3196    const monthlyMoneySaved = Math.round(monthlyHoursSaved * rate);
3197    const roi = monthlyMoneySaved > 0 ? Math.max(1, Math.round(monthlyMoneySaved / 1500)) : 0;
3198
3199    jobsVal.textContent = jobs;
3200    hoursVal.textContent = hours + 'h';
3201    rateVal.textContent = '$' + rate;
3202    hoursSaved.textContent = Math.round(monthlyHoursSaved) + ' hrs';
3203    moneySaved.textContent = '$' + monthlyMoneySaved.toLocaleString('en-US');
3204    roiMultiplier.textContent = roi + 'x';
3205
3206    // Secondary breakdown — slab yield, remake risk, payback.
3207    // Industry baselines (see assumption note in markup):
3208    //   slabSave  = jobs × 1 slab/job × $500 × 15% yield bump
3209    //   remakeSave = (jobs / 30) × $1,800 × 70% reduction
3210    //   payback   = ($3,000 setup + $1,500 monthly) / (totalROI / 30)
3211    if (slabSaveEl) {
3212      const slabSave = Math.round(jobs * 500 * 0.15);
3213      const remakeSave = Math.round((jobs / 30) * 1800 * 0.7);
3214      const totalROI = monthlyMoneySaved + slabSave + remakeSave;
3215      const payback = totalROI > 0
3216        ? Math.max(1, Math.round((3000 + 1500) / (totalROI / 30)))
3217        : 999;
3218      slabSaveEl.innerHTML = '$' + slabSave.toLocaleString('en-US') +
3219        '<span class="text-[11px] sm:text-xs text-white/45 font-bold normal-case ml-1.5 tracking-normal not-italic">/mo</span>';
3220      remakeSaveEl.innerHTML = '$' + remakeSave.toLocaleString('en-US') +
3221        '<span class="text-[11px] sm:text-xs text-white/45 font-bold normal-case ml-1.5 tracking-normal not-italic">/mo</span>';
3222      paybackEl.innerHTML = payback +
3223        '<span class="text-[11px] sm:text-xs text-white/45 font-bold normal-case ml-1.5 tracking-normal not-italic">days</span>';
3224    }
3225
3226    [jobsInput, hoursInput, rateInput].forEach(updateSliderFill);
3227  }
3228  [jobsInput, hoursInput, rateInput].forEach(el => el.addEventListener('input', update));
3229  update();
3230})();
3231</script>
3231
3232
3233<!-- ── TISE 2027 announcement — floating, dismissible bottom bar. Self-contained
3234     (inline styles + SVG, no Tailwind/icon deps) and position:fixed so it never
3235     touches the page header or flow. Dismissal persists in localStorage. ── -->
3236<div id="tise-banner" style="position:fixed;bottom:16px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px;pointer-events:none;">
3237  <div style="pointer-events:auto;max-width:660px;width:100%;display:flex;align-items:center;gap:14px;border-radius:16px;background:#0c0c0e;color:#fff;border:1px solid rgba(255,94,31,0.32);box-shadow:0 22px 55px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.02);padding:11px 11px 11px 16px;">
3238    <div style="flex:1;min-width:0;line-height:1.3;">
3239      <div style="font-size:10px;font-weight:900;letter-spacing:0.2em;text-transform:uppercase;color:#ff8246;margin-bottom:1px;">We&rsquo;re on the floor &middot; TISE 2027</div>
3240      <div style="font-size:13.5px;font-weight:600;color:rgba(255,255,255,0.92);">Mandalay Bay, Las Vegas &middot; Feb 2&ndash;4</div>
3241    </div>
3242    <a href="/book" style="flex:none;display:inline-flex;align-items:center;gap:5px;border-radius:11px;background:#ff5e1f;color:#000;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;padding:9px 14px;text-decoration:none;white-space:nowrap;">
3243      Come say hi
3244      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
3245    </a>
3246    <button id="tise-banner-close" type="button" aria-label="Dismiss" style="flex:none;background:none;border:0;cursor:pointer;color:rgba(255,255,255,0.4);padding:6px;line-height:0;">
3247      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
3248    </button>
3249  </div>
3250</div>
3251<script>
3252  (function () {
3253    var KEY = 'tise2027_dismissed';
3254    var el = document.getElementById('tise-banner');
3255    if (!el) return;
3256    try { if (localStorage.getItem(KEY) === '1') { el.parentNode && el.parentNode.removeChild(el); return; } } catch (e) {}
3257    var btn = document.getElementById('tise-banner-close');
3258    if (btn) btn.addEventListener('click', function () {
3259      el.parentNode && el.parentNode.removeChild(el);
3260      try { localStorage.setItem(KEY, '1'); } catch (e) {}
3261    });
3262  })();
3263</script>
3263
3264
3265<!-- slabos-explore-footer -->
3266<style>.sx-foot a:hover{color:#ff5e1f}</style>
3267<nav class="sx-foot" aria-label="Explore SlabOS" style="background:#060606;border-top:1px solid rgba(255,255,255,0.08);padding:52px 20px 24px;font-family:'Inter',system-ui,sans-serif;">
3268  <div style="max-width:1180px;margin:0 auto;">
3269    <div style="font-size:11px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:26px;">Explore SlabOS</div>
3270    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px 24px;">
3271      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">Platform</div><a href="/cad-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">CAD &amp; Laser Templating</a><a href="/blueprint-takeoff" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Blueprint Takeoff</a><a href="/warehouse-map" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Warehouse Map</a><a href="/hr-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Shop HR</a><a href="/3d" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">3D &amp; AR Showcase</a><a href="/slab-labels" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Slab Labels &amp; QR</a><a href="/slabsmith-integration" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Slabsmith Integration</a>
3272      <a href="/quote-widget" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Website Quoting</a>
3273      <a href="/crm" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Pipeline &amp; CRM</a>
3274      <a href="/call-intelligence" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Call Intelligence</a>
3275      <a href="/email" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">The Mail Engine</a>
3276      <a href="/customer-portal" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Customer Portal</a><a href="/sage-surfaces" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">For Sage Fabricators</a><a href="/mcp" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">MCP for owners</a></div>
3277      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">Product</div><a href="/tour" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Product tour</a><a href="/roadmap" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Living roadmap</a><a href="/pricing" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Pricing</a><a href="/onsite" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Onsite (mobile)</a><a href="https://apps.apple.com/us/app/slabos-crew/id6807654812" target="_blank" rel="noopener" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">iOS App Download</a><a href="/win-work" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Win more work</a><a href="/slab-nesting" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Slab nesting</a><a href="/ai-cfo" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">AI for your shop</a><a href="/built-around-your-shop" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Built around your shop</a></div>
3278      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">
3278Compare</div><a href="/vs-moraware" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">SlabOS vs Moraware</a><a href="/vs-countergo" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs CounterGo</a><a href="/vs-systemize" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs Systemize</a><a href="/vs-actionflow" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs ActionFlow</a><a href="/vs-stoneapp" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs StoneApp</a><a href="/vs-stoneprofit" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs Stone Profit</a><a href="/vs-slabsmith" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs Slabsmith</a><a href="/vs-stonify" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs Stonify</a><a href="/vs-jobwelldone" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">vs Job Well Done</a><a href="/countertop-software-comparison" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Software comparison</a><a href="/switch-off-moraware" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Switch off Moraware</a><a href="/best-countertop-fabrication-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Best fabrication software</a><a href="/cheap-countertop-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Cheap software, real cost</a><a href="/moraware-exodus" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">The Moraware Exodus</a>
3279      <a href="/why-shops-switch" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Why shops switch</a><a href="/reviews" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Reviews</a></div>
3280      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">Guides & learn</div><a href="/guides/moraware-alternatives" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Moraware alternatives</a><a href="/guides/countergo-alternatives" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">CounterGo alternatives</a><a href="/guides/countertop-estimating-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Countertop estimating software</a><a href="/guides/how-to-quote-countertops-faster" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Quote countertops faster</a><a href="/guides/slab-yield-optimization" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Slab yield optimization</a><a href="/guides/switch-countertop-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Switching software</a><a href="/guides/countertop-software-cost" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Countertop software cost</a><a href="/guides/countertop-shop-management-software" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Shop management software</a><a href="/guides" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">All guides</a><a href="/glossary" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">
3280Fabrication glossary</a><a href="/gohighlevel" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">GoHighLevel Integration</a></div>
3281      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">Free tools</div><a href="/tools/slab-yield-calculator" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Slab yield calculator</a><a href="/tools/countertop-cost-estimator" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Countertop cost estimator</a><a href="/tools/countertop-square-footage-calculator" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Square footage calculator</a><a href="/roi" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">ROI Calculator</a><a href="/locations" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">All locations</a></div>
3282      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">Case studies</div><a href="/case-studies" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">The $1M+ yield story</a><a href="/case-studies/3d-engine" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">The 3D engine</a><a href="/case-studies" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">All case studies</a></div>
3283      <div><div style="font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#ff5e1f;margin-bottom:12px;">Company</div><a href="/founders" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Founders</a><a href="/contact" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Contact</a><a href="/partner" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Partner program</a><a href="/book" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Book a demo</a><a href="/privacy" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Privacy</a><a href="/terms" style="display:block;font-size:13px;color:rgba(255,255,255,0.5);text-decoration:none;padding:4px 0;line-height:1.45;">Terms</a></div>
3284    </div>
3285  </div>
3286</nav>
3287<script src="/pricing-i18n.js"></script>
vendor: 1 bytes, line 3287
3287
3288<script src="/site-i18n.js"></script>
vendor: 1 bytes, line 3288
3288
3289<script>
3290/* Role roller — same mechanics as the landing hero. Last child is a clone of
3291   the first so the loop reset is invisible. */
3292(function () {
3293  var track = document.getElementById('rollerRolesTrack');
3294  if (!track) return;
3295  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
3296  var n = track.children.length; // includes clone
3297  var idx = 0;
3298  setInterval(function () {
3299    idx++;
3300    track.style.transition = 'transform .55s cubic-bezier(.2,.7,.2,1)';
3301    track.style.transform = 'translateY(calc(-' + idx + ' * 1.12em))';
3302    if (idx === n - 1) {
3303      setTimeout(function () {
3304        track.style.transition = 'none';
3305        track.style.transform = 'translateY(0)';
3306        idx = 0;
3307      }, 600);
3308    }
3309  }, 1600);
3310})();
3311</script>
3311
3312
3313<!-- ═══════════════ DONUT POPUP ═══════════════ -->
3314<div class="dnt-back" id="dnt-back" role="dialog" aria-modal="true" aria-labelledby="dnt-title" hidden>
3315  <div class="dnt-modal">
3316    <button type="button" class="dnt-x" id="dnt-x" aria-label="Close">
3317      <iconify-icon icon="solar:close-circle-bold" width="19"></iconify-icon>
3318    </button>
3319    <div class="dnt-photo">
3320      <img src="/img/slabos-mill-and-mason-donuts.webp" width="1100" height="1379" loading="lazy" decoding="async"
3321           alt="A Dunkin&rsquo; box on the counter at Mill &amp; Mason Cabinets &amp; Countertops, hand-labelled &lsquo;From: SlabOS Team, fuel for the shop&rsquo;." />
3322    </div>
3323    <div class="dnt-body">
3324      <div class="dnt-eyebrow">Not a feature</div>
3325      <h2 class="dnt-h" id="dnt-title">Donuts.<br>Occasionally.<br>Unannounced.</h2>
3326      <p class="dnt-p">We build SlabOS with owners. The shops that give us feedback &mdash; and tell us what they need as features &mdash; are the reason we ship updates daily and respond immediately. <span class="dnt-wink">(We don&rsquo;t sleep.)</span></p>
3327      <p class="dnt-p">Every so often, a box shows up.</p>
3328      <div class="dnt-cap">Mill &amp; Mason &middot; Cabinets &amp; Countertops</div>
3329      <div class="dnt-acts">
3330        <a class="dnt-go" href="/book">Tell us what your shop needs <iconify-icon icon="solar:arrow-right-bold" width="15"></iconify-icon></a>
3331        <button type="button" class="dnt-later" id="dnt-later">Back to the pricing</button>
3332      </div>
3333    </div>
3334  </div>
3335</div>
3336
3337<script>
3338/* Donut popup — shows ONCE per visitor, when Chapter 04 comes into view
3339   (i.e. they have read through Chapter 03). Anyone who wants it again can
3340   click the "Donuts. Occasionally. Unannounced." chip in Chapter 01½. */
3341(function () {
3342  var KEY = "slabos_donut_seen";
3343  var back = document.getElementById("dnt-back");
3344  if (!back) return;
3345  var lastFocus = null;
3346
3347  function open() {
3348    lastFocus = document.activeElement;
3349    back.hidden = false;
3350    // Next frame, so the browser has a painted `hidden:false` state to
3351    // transition FROM — otherwise it snaps open with no animation.
3352    requestAnimationFrame(function () { back.classList.add("is-open"); });
3353    document.body.style.overflow = "hidden";
3354    document.getElementById("dnt-x").focus();
3355    try { localStorage.setItem(KEY, "1"); } catch (e) {}
3356  }
3357  function close() {
3358    back.classList.remove("is-open");
3359    document.body.style.overflow = "";
3360    setTimeout(function () { back.hidden = true; }, 320);
3361    if (lastFocus && lastFocus.focus) lastFocus.focus();
3362  }
3363
3364  document.getElementById("dnt-x").addEventListener("click", close);
3365  document.getElementById("dnt-later").addEventListener("click", close);
3366  back.addEventListener("click", function (e) { if (e.target === back) close(); });
3367  document.addEventListener("keydown", function (e) {
3368    if (e.key === "Escape" && back.classList.contains("is-open")) close();
3369  });
3370
3371  var chip = document.getElementById("dnt-chip");
3372  if (chip) chip.addEventListener("click", open);
3373
3374  var seen = false;
3375  try { seen = localStorage.getItem(KEY) === "1"; } catch (e) {}
3376  if (seen) return;
3377
3378  var ch04 = document.getElementById("chapter-04");
3379  if (!ch04 || !("IntersectionObserver" in window)) return;
3380  var io = new IntersectionObserver(function (entries) {
3381    if (!entries[0].isIntersecting) return;
3382    io.disconnect();
3383    // A short beat so it does not fire mid-scroll-flick.
3384    setTimeout(open, 450);
3385  }, { rootMargin: "0px 0px -25% 0px" });
3386  io.observe(ch04);
3387})();
3388</script>
3388
3389</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.