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 — 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"><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 — <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 — no tiers, no add-ons</div> 610 <div class="text-[11px] text-white/45">150+ capabilities · one login ·
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 & 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 & 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 & 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 — 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 — 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 — 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 · /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 · 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 × 3hr lost/quote × $30/hr = $1,800 labor wasted. 30 slabs/mo × 15% waste × $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 × 3 hrs lost per quote on legacy software × $30/hr loaded labor = <span class="text-red-300/90 font-bold">$1,800 wasted labor</span>. 30 slabs/mo × 15% extra material waste from manual nesting × $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 & 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 & 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 · 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 & 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 & 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 & 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 & 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 · 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 & 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 & 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 & 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>& 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 & 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>& 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 & 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 & 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 →</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> — 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’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’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–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> — 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’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–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 — 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’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–3</span> 2816 <div class="text-base lg:text-lg font-bold text-white">You’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’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 — you decide if it’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 — no lock-in, no "call us to cancel" 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 — 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’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> — Supplier price lists — materials, colors, thicknesses, pricing rules</span></li> 2845 <li><span class="mig-n">1</span><span><strong>Accounts</strong> — All client and contractor accounts</span></li> 2846 <li><span class="mig-n">2</span><span><strong>Account addresses</strong> — Business address for every account</span></li> 2847 <li><span class="mig-n">3</span><span><strong>Jobs</strong> — 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> — Site contact, address, phone and email per job</span></li> 2849 <li><span class="mig-n">5</span><span><strong>Quote–account mapping</strong> — Quotes tied back to accounts and jobs</span></li> 2850 <li><span class="mig-n">6</span><span><strong>Quote drawings</strong> — 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> — Contact name, address and phone for every quote</span></li> 2852 <li><span class="mig-n">8</span><span><strong>Job–quote linking</strong> — Jobs matched to quotes by name and account</span></li> 2853 <li><span class="mig-n">
28539</span><span><strong>Slab inventory</strong> — Every slab — 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> — 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 — 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 — no "call us to cancel" games. We keep your business by building software you can’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 · 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> — 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’re on the floor · TISE 2027</div> 3240 <div style="font-size:13.5px;font-weight:600;color:rgba(255,255,255,0.92);">Mandalay Bay, Las Vegas · Feb 2–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 & 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 & 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 & 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 & 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’ box on the counter at Mill & Mason Cabinets & Countertops, hand-labelled ‘From: SlabOS Team, fuel for the shop’." /> 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 — and tell us what they need as features — are the reason we ship updates daily and respond immediately. <span class="dnt-wink">(We don’t sleep.)</span></p> 3327 <p class="dnt-p">Every so often, a box shows up.</p> 3328 <div class="dnt-cap">Mill & Mason · Cabinets & 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.