PageSourceSearch

https://cadient.ai/

html cadient.ai collected 2026-10-01 12:01:33 UTC 391,171 bytes, 5,678 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Cadient Talent — SmartSuite Smart Agents for High-Volume Hiring</title>
8    <link rel="canonical" href="https://cadient.ai/">
9    <meta name="description" content="850 million applications trained Cadient's Smart Agents. SmartSuite sources, screens, scores, schedules, and hires on top of the ATS you already run — built for high-volume hourly hiring.">
10    <link rel="icon" type="image/png" href="/static/images/favicon_cadientai.png">
11    <link rel="stylesheet" href="/static/css/tailwind.css?v=6b6fbc49b0">
12    
13    <link rel="preconnect" href="https://fonts.googleapis.com">
14    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" media="print" onload="this.media='all'">
16    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" media="print" onload="this.media='all'"><link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,600&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
17    <style>
18        body { font-family: 'Inter', sans-serif; }
19
20        /* Alternating section bands.
21           The page runs white / tinted / white / tinted down to the black CTA,
22           so each section reads as its own beat. One class rather than a hex
23           repeated per section, because the whole point is that every tinted
24           band is the SAME tint — the sections previously mixed #f7f5f2 with
25           Tailwind's bg-gray-50 (#f9fafb), which are opposite temperatures:
26           f7f5f2 is warm and clearly visible, f9fafb is cool and barely
27           separates from white. #f7f5f2 is the house value (26 uses across
28           templates, and what the resource pages use). */
29        .band-tint { background-color: #f7f5f2; }
30
31        /* DEV-ONLY: blinking marker on unfilled placeholders (remove before prod) */
32        .pb-ph { position: relative; }
33        .pb-ph::before {
34            content: ""; display: inline-block;
35            width: 11px; height: 11px; margin-right: 9px; vertical-align: baseline;
36            border-radius: 50%; background: #2563eb; border: 2px solid #ffffff;
37            animation: pb-ph-blink 1.2s ease-in-out infinite;
38        }
39        @keyframes pb-ph-blink {
40            0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(37, 99, 235, .6); }
41            50%      { opacity: .5; box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
42        }
43
44        /* Section 3 filter tab hover: inactive = light gray bg, active = stays dark */
45        .pb-ftab:not(.pb-ftab-active):hover { background-color: #f3f4f6; color: #111; }
46        .pb-ftab.pb-ftab-active:hover { background-color: #111; color: #fff; }
47
48        .text-cadient-blue { color: #0077b6; }
49        .bg-cadient-blue   { background-color: #0077b6; }
50        .hover\:bg-sky-700:hover { background-color: #0369a1; }
51        .hover\:text-cadient-blue:hover { color: #0077b6; }
52
53        /* SmartTenure watchlist header: keep full "Recommended Action" on
54           tablet/desktop, but use a short "Action" on narrow phones so the
55           long word doesn't clip at the card edge. */
56        .rec-action-full  { display: none; }
57        .rec-action-short { display: inline; }
58        @media (min-width: 480px) {
59            .rec-action-full  { display: inline; }
60            .rec-action-short { display: none; }
61        }
62
63        /* Solutions dropdown show/hide now lives in blog/_header.html so it
64           works on every page that uses the shared header. */
65
66        .line-clamp-3 {
67            display: -webkit-box;
68            -webkit-line-clamp: 3;
69            -webkit-box-orient: vertical;
70            overflow: hidden;
71        }
72    </style>
73    
74
75
76    
77
78
79<script>
80    window.dataLayer = window.dataLayer || [];
81    function gtag() { dataLayer.push(arguments); }
82    (function () {
83        // Single source: app.py parses GTM_CONTAINER_IDS once into the GTM_IDS
84        // Jinja global, which _gtm_noscript.html reads too — see the note there.
85        // Fails closed (no containers) if it is somehow undefined.
86        var GTM_IDS = ["GTM-WWP5NR36", "GTM-PDRS4M23"];
87        // Configured, not hardcoded, and each vendor is skipped below when its
88        // ID is blank. ANALYTICS_ENABLED stays the master switch for the whole
89        // stack; these decide WHICH vendors that switch turns on.
90        //
91        // That distinction is what makes a non-prod environment testable. These
92        // two used to be literals, so the only way to exercise any vendor on dev
93        // was ANALYTICS_ENABLED=true, which also pointed dev traffic at the
94        // PRODUCTION GA4 property and Clarity project — quietly polluting the
95        // baseline the SEO programme is measured against. Now dev can enable the
96        // stack with these blank and run a single vendor in isolation.
97        //
98        // The defaults are the live prod IDs, so an environment that sets
99        // neither behaves exactly as before.
100        var GA_ID = "G-1T86EMJJXX";
101        var CLARITY_ID = "vfab1wc1af";
102        var started = false;
103
104        // ── Embedded (iframe) awareness ────────────────────────────────────────
105        // Set by pages that are normally rendered inside an iframe on one of our
106        // own pages — the scheduler at /lp/schedule. Such a page is a WIDGET, not
107        // a destination: the visitor never navigated to /lp/schedule, so a
108        // page_view against that URL is a phantom hit that inflates its views and
109        // distorts engagement for the property (LEAD_AUDIT.md F19).
110        //
111        // The old fix was to load NOTHING when embedded. That killed the phantom
112        // page_view but also blinded us on the same page's direct loads — and
113        // /lp/schedule has 19 real hrefs pointing at it, plus cross-origin
114        // WordPress embeds where the parent may carry no tags of ours at all. So
115        // it traded a known over-count for an unknown blind spot on the surface
116        // that books demos.
117        //
118        // What is actually unwanted is the automatic page_view, not the stack. So
119        // load everything either way and decide the page_view at RUNTIME, which
120        // is also the only place the answer is knowable: whether we are framed is
121        // not a fact the server has.
122        //
123        // IMPORTANT — this only covers the page_view that OUR gtag config sends.
124        // If a GTM container holds a GA4 tag firing on All Pages, that tag sends
125        // its own and no template change can stop it. `embedded` is pushed to the
126        // dataLayer BEFORE gtm.js loads so the container can carry a trigger
127        // exception on it; until someone adds that exception in the GTM UI, the
128        // container's own page_view still fires here. See LEAD_AUDIT.md F19 and
129        // the unresolved two-container question above.
130        var embedded = false && (function () {
131            try { return window.self !== window.top; } catch (e) { return true; }
132        })();
133
134        function loadAnalytics() {
135            if (started) return; started = true;
136            // Google Tag Manager
137            dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
138            if (embedded) { dataLayer.push({ embedded: true }); }
139            GTM_IDS.forEach(function (id) {
140                var s = document.createElement('script');
141                s.async = true;
142                s.src = 'https://www.googletagmanager.com/gtm.js?id=' + id;
143                document.head.appendChild(s);
144            });
145            // Google Analytics (gtag.js). Skipped entirely without an ID —
146            // loading gtag.js with an empty id still opens a connection to
147            // Google and registers a property-less client, so the guard has to
148            // be here rather than relying on GA to ignore the config call.
149            if (GA_ID) {
150                var g = document.createElement('script');
151                g.async = true;
152                g.src = 'https://www.googletagmanager.com/gtag/js?i
152d=' + GA_ID;
153                document.head.appendChild(g);
154                gtag('js', new Date());
155                // send_page_view:false keeps gtag() live for event hits (a booking is
156                // still measurable) while omitting the phantom navigation hit.
157                gtag('config', GA_ID, { send_page_view: !embedded });
158            }
159            // Microsoft Clarity
160            if (CLARITY_ID) {
161                (function (c, l, a, r, i, t, y) {
162                    c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
163                    t = l.createElement(r); t.async = 1; t.src = 'https://www.clarity.ms/tag/' + i;
164                    y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
165                })(window, document, 'clarity', 'script', CLARITY_ID);
166            }
167        }
168        var evts = ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'];
169        function onFirst() {
170            evts.forEach(function (e) { window.removeEventListener(e, onFirst); });
171            loadAnalytics();
172        }
173        evts.forEach(function (e) { window.addEventListener(e, onFirst, { passive: true }); });
174        window.addEventListener('load', function () {
175            if ('requestIdleCallback' in window) { requestIdleCallback(loadAnalytics, { timeout: 4000 }); }
176            else { setTimeout(loadAnalytics, 3000); }
177        });
178    })();
179</script>
179
180
181
182
183<script>
184    (function () {
185        // Queue stub first and synchronously: it is the whole point of the
186        // vendor's snippet shape. Anything measured before the SDK lands is
187        // held here and replayed, so deferring the network load cannot lose an
188        // event.
189        window.oaiq = window.oaiq || function () {
190            (window.oaiq.q = window.oaiq.q || []).push(arguments);
191        };
192
193        var PIXEL_ID = "QnvACeEzLpeAcz9ok3djRz";
194
195        // Same question the page_view asks: are we the scheduler running
196        // inside one of our own pages? If so the parent owns measurement.
197        var embedded = (function () {
198            try { return window.self !== window.top; } catch (e) { return true; }
199        })();
200        if (embedded) return;
201
202        oaiq('init', { pixelId: PIXEL_ID });
203
204        var loaded = false;
205        function loadPixel() {
206            if (loaded) return; loaded = true;
207            var s = document.createElement('script');
208            s.async = true;
209            s.src = 'https://bzrcdn.openai.com/sdk/oaiq.min.js';
210            document.head.appendChild(s);
211        }
212        var evts = ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'];
213        function onFirst() {
214            evts.forEach(function (e) { window.removeEventListener(e, onFirst); });
215            loadPixel();
216        }
217        evts.forEach(function (e) { window.addEventListener(e, onFirst, { passive: true }); });
218        window.addEventListener('load', function () {
219            if ('requestIdleCallback' in window) { requestIdleCallback(loadPixel, { timeout: 4000 }); }
220            else { setTimeout(loadPixel, 3000); }
221        });
222
223        // Our event names -> OpenAI's taxonomy. Both are `customer_action`;
224        // neither carries an amount, because a booked demo has no transaction
225        // value we can state honestly. Adding an invented one would flow
226        // straight into their bidding.
227        var EVENTS = {
228            demo_booking_success: 'appointment_scheduled',
229            playbook_request_success: 'lead_created'
230        };
231
232        // Fired at most once per event name per page: the two channels below
233        // can both be live on one page, and a booking must not be reported
234        // twice because it arrived by two routes.
235        var sent = {};
236
237        function measureConversion(name, detail) {
238            try {
239                var mapped = EVENTS[name];
240                if (!mapped || sent[mapped]) return;
241                sent[mapped] = true;
242                var options = {};
243                // event_id is what lets a future Conversions API call dedupe
244                // against this one. The playbook flows have a real lead id to
245                // key on; the iframe route has none on the parent, so it goes
246                // without and cannot be deduped server-side until the slot is
247                // threaded back. Sharing one id across the two event NAMES is
248                // fine — the dedup key is (pixel, event name, event_id).
249                if (detail && detail.eventId) options.event_id = String(detail.eventId);
250                oaiq('measure', mapped, { type: 'customer_action' }, options);
251            } catch (e) { /* measurement must never break the page */ }
252        }
253        window.cadientMeasureConversion = measureConversion;
254
255        // Route 1: the scheduler iframe announcing a confirmed booking. Same
256        // message the ad consultants' own listener consumes. Origin-checked —
257        // the frame posts to '*' because it is embedded cross-origin by the
258        // WordPress estate, so the check belongs here, on the receiving end.
259        window.addEventListener('message', function (e) {
260            if (e.origin !== window.location.origin &&
261                e.origin !== 'https://cadient.ai' &&
262                e.origin !== 'https://dev.cadient.ai') return;
263            if (!e.data || e.data.event !== 'demo_booking_success') return;
264            measureConversion('demo_booking_success', e.data);
265        });
266    })();
267</script>
267
268
269
270<!-- Warmly — visitor de-anonymisation, i.e. analytics, so it rides the same
271     gate as everything above it including suppress_analytics. -->
272
273
274<script id="warmly-script-loader" src="https://opps-widget.getwarmly.com/warmly.js?clientId=5a34a1084b3b8a03e3901742e03c280b" defer></script>
274
275
276
277    
278
279<!-- Chat widget — loaded only after the first user interaction, so it stays off
280     the initial load (no PageSpeed/Speed-Index hit during the lab test, which
281     doesn't interact). Once loaded, the widget's own open-delay behaviour is
282     unchanged. -->
283<script>
284    (function () {
285        // ── Suppress the widget's auto-open on mobile ──────────────────────────
286        // On a phone the panel covers the whole screen, so auto-opening hides the
287        // page the visitor came to read. The bubble stays fully functional; only
288        // the unprompted open is blocked. Desktop behaviour is untouched.
289        //
290        // This used to pre-seed sessionStorage['cadient-chat-widget-dismissed'],
291        // which was a GUESS at widget.js's internals and verifiably did nothing —
292        // tested against the live script with that key set, and the panel still
293        // auto-opened. widget.js is third-party, exposes no config for this, and
294        // contains no matchMedia/innerWidth at all, so it has no concept of
295        // mobile.
296        //
297        // So we gate on the one thing that is observable and stable: the widget
298        // opens by adding class "open" to #cadient-chat-widget-frame. When that
299        // happens unprompted we close it again by clicking the widget's OWN
300        // bubble, not by stripping the class.
301        //
302        // That distinction matters and cost a bug: removing the class directly
303        // hides the panel but leaves the widget's internal isOpen === true, so the
304        // visitor's first real tap on the bubble only toggles that stale flag back
305        // to false and appears to do nothing — they'd have to tap twice. Driving
306        // the widget's own toggle keeps its state and the DOM in step, so the
307        // first tap opens the panel properly (verified both ways against the live
308        // script).
309        //
310        // The pointerdown listener is on capture, so `userAsked` is always set
311        // before the widget's click handler runs — no race. Our own .click()
312        // dispatches no pointerdown, so it can't trip that flag. After the first
313        // genuine tap we stop interfering entirely. autoCloses is capped at 3 as a
314        // loop guard in case a future widget build reopens itself.
315        try {
316            if (window.matchMedia('(max-width: 767.98px)').matches) {
317                var userAsked = false, autoCloses = 0;
318                document.addEventListener('pointerdown', function (e) {
319                    if (e.target && e.target.closest &&
320                        e.target.closest('#cadient-chat-widget-bubble')) userAsked = true;
321                }, true);
322                new MutationObserver(function () {
323                    if (userAsked || autoCloses >= 3) return;
324                    var f = document.getElementById('cadient-chat-widget-frame');
325                    var b = document.getElementById('cadient-chat-widget-bubble');
326                    if (f && b && f.classList.contains('open')) { autoCloses++; b.click(); }
327                }).observe(document.documentElement,
328                    { subtree: true, childList: true, attributeFilter: ['class'] });
329            }
330        } catch (e) { /* very old browser — fall through, widget just behaves as before */ }
331
332        // ── Give the widget's bubble a landmark ────────────────────────────────
333        // widget.js appends #cadient-chat-widget-bubble straight to <body>, so
334        // its text/icon content sits outside every landmark (main/nav/etc.) —
335        // an axe "region" violation. We don't control widget.js, so once the
336        // bubble shows up we label it as its own landmark region instead of
337        // waiting on a third-party fix.
338        function labelChatBubbleLandmark() {
339            var b = document.getElementById('cadient-chat-widget-bubble');
340            if (b && !b.hasAttribute('role')) {
341                b.setAttribute('role', 'region');
342                b.setAttribute('aria-label', 'Chat with us');
343            }
344            return !!b;
345        }
346        var chatBubbleObserver = new MutationObserver(function () {
347            if (labelChatBubbleLandmark()) chatBubbleObserver.disconnect();
348        });
349        // documentElement, NOT document.body. This include is pulled into <head>
350        // (see smart_automation/base.html and every other layout that uses it),
351        // and <body> does not exist yet at that point — so this line threw
352        // "parameter 1 is not of type 'Node'" on every page load of every page in
353        // the product, and the label this observer exists to apply was never
354        // applied. The uncaught exception was the visible symptom; the silent
355        // accessibility regression was the actual cost.
356        //
357        // The observer twenty lines above already got this right. subtree:true
358        // means watching the root covers the widget's append to <body> exactly as
359        // watching <body> would, and it works before <body> is parsed.
360        chatBubbleObserver.observe(document.documentElement, { childList: true, subtree: true });
361        // The bubble can also already be in the DOM if this include is ever moved
362        // below the widget script: a MutationObserver only reports changes AFTER
363        // it starts, so an element that is already there never fires it. Cheap to
364        // check once, and it removes the ordering dependency entirely.
365        if (labelChatBubbleLandmark()) chatBubbleObserver.disconnect();
366
367        var loaded = false;
368        function loadWidget() {
369            if (loaded) return; loaded = true;
370            var s = document.createElement('script');
371            s.src = "https://consultant-api-dev.cadient.ai/static/widget.js?key=cadient_test_key_abc123";
372            s.defer = true;
373            // loadWidget only ever runs from a user-interaction handler, so <body>
374            // is parsed by now even though this include sits in <head>.
375            document.body.appendChild(s);
376        }
377        // Deliberate-engagement signals only — no 'mousemove' (fires near-instantly
378        // on desktop) and no 'click' (redundant with 'pointerdown').
379        var evts = ['scroll', 'pointerdown', 'touchstart', 'keydown'];
380        function onFirst() {
381            evts.forEach(function (e) { window.removeEventListener(e, onFirst); });
382            loadWidget();
383        }
384        evts.forEach(function (e) { window.addEventListener(e, onFirst, { passive: true, once: true }); });
385    })();
386</script>
386
387
388    <meta name="google-site-verification" content="m7ajGGhjHlVIRFBNfk4R_RFP2U7noR-vETqfb0m3l3g">
389</head>
390<body class="bg-white text-gray-900 flex flex-col min-h-screen">
vendor: 75 bytes, lines 390-394
390
391    
392
393
394<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
394GTM-WWP5NR36
vendor: 151 bytes, lines 394-397
394"
395height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
396
397<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
397GTM-PDRS4M23
vendor: 86 bytes, lines 397-401
397"
398height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
399
400
401
402<style>
403/* Mobile menu: keep the scroll inside the panel.
404   The panel is max-h + overflow-y-auto, so on a phone its link list scrolls.
405   Without this, reaching the end of that list hands the remaining gesture to
406   the document — you keep swiping, the page moves behind the open menu, and
407   closing it reveals you are somewhere else entirely. overscroll-behavior
408   contains the chain at the panel's boundary.
409   Applied here rather than in the 28 per-page toggle scripts, none of which
410   need to change. */
411#mobile-menu { overscroll-behavior: contain; }
412
413/* Mobile menu geometry.
414   ------------------------------------------------------------------------
415   Earlier versions capped the panel with calc(100vh - Npx), then
416   calc(100svh - Npx). Both derive the bottom edge from numbers that are wrong on
417   a phone: N is a guess at the header height (not one value — 80px on the blog
418   header, 90px on /smart-refer, 80px on /smart-shield) and 100vh is the LARGE
419   viewport, 60-120px taller than what is visible with the browser toolbar shown.
420   Any error there puts the panel's bottom edge outside the visible area, and the
421   tail then cannot be scrolled to: scrolling moves content to the panel's own
422   bottom edge and that edge is itself off-screen. The panel reports
423   scrollTop === scrollHeight - clientHeight while its last child is invisible.
424
425   The script sets an exact height from the panel's measured position and
426   visualViewport.height, so nothing here has to be right.
427
428   Note bottom:0 is deliberately NOT used. It reads as the obvious fix, but
429   _product_nav.html's <nav> carries backdrop-blur, and backdrop-filter makes an
430   element a containing block for fixed descendants — bottom:0 there resolves
431   against the nav rather than the viewport and collapses the panel to ~33px.
432   Measuring getBoundingClientRect() sidesteps that: it is in viewport
433   coordinates whatever the containing block is.
434
435   The max-height below is the no-JS floor only. */
436#mobile-menu {
437    position: fixed;
438    top: 80px;
439    left: 0;
440    right: 0;
441    max-height: calc(100vh - 100px);
442    max-height: calc(100svh - 100px);
443    overflow-y: auto;
444    z-index: 50;
445    /* 5rem, not 1rem. This is scroll slack, and it is load-bearing.
446       The JS sizes the panel to end at the reported viewport bottom
447       (visualViewport.height, or innerHeight). Nothing guarantees that number
448       equals the area actually on screen: DevTools reports a 932px device while
449       displaying ~884px of it, and mobile browsers can over-report the same way
450       with a toolbar overlaying content. When they disagree, the bottom band of
451       the panel is unreachable — the panel is already at scrollTop === maxScroll,
452       so scrolling cannot recover it, and the last child sat only 17px above the
453       box bottom (= the old 1rem padding).
454
455       Bottom padding on an overflow container IS included in scrollHeight, so at
456       the scroll end the last child now stops ~65px above the box bottom instead
457       of 17px, without the panel needing to know the true visible height.
458
459       65px is chosen against a measured 48px discrepancy (a 932px-reported device
460       displaying ~884px), leaving ~17px of margin. Don't trim this much further:
461       below ~50px it stops covering that case and the last CTA becomes unreachable
462       again, which is the bug this exists to prevent.
463
464       env() adds the iPhone home-indicator inset on top, which no viewport unit
465       accounts for. */
466    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
467}
468
469    /* Solutions mega-menu — matches page design language (brand orange accent) */
470    /* Visibility lives here (not in any single page) so the dropdown behaves
471       correctly on EVERY page that includes this header, not just the homepage. */
472    .solutions-menu { display: none; }
473    /* Invisible hover bridge across the few px between the trigger's bottom edge
474       and the panel's top, so moving the pointer down does not close the menu. */
475    .solutions-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
476    .solutions-trigger:hover .solutions-menu,
477    .solutions-menu:hover { display: block; }
478    .sol-link { color:#374151; transition: background-color .15s ease, color .15s ease; }
479    .sol-link:hover { background-color:#fff7f5; color:#fe4a23; }
480    .sol-new { font-size:9px; font-weight:700; letter-spacing:.04em; color:#fff; background:#fe4a23; padding:2px 6px; border-radius:4px; line-height:1; }
481    /* Solutions mega-menu promo card — one product called out beside the three
482       Recruit/Hire/Retain columns, e.g. Cadient Talent's MCP while it's new.
483       Peach/orange to match the brand accent, not the neutral list styling
484       above, so it reads as a callout rather than a fourth column of links. */
485    .mcp-promo-card {
486        display: flex; flex-direction: column; height: 100%;
487        background: #FFF3EE; border: 1px solid #FFD9C2; border-radius: 14px;
488        padding: 16px; text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
489    }
490    .mcp-promo-card:hover { background: #FFEBE1; border-color: #fe4a23; }
491    .mcp-promo-top { display: flex; align-items: center; justify-content: space-between; }
492    .mcp-promo-title { margin: 10px 0 4px; font-weight: 700; font-size: 14.5px; color: #111827; }
493    .mcp-promo-desc { margin: 0; font-size: 12.5px; color: #6b7280; line-height: 1.45; flex: 1; }
494    .mcp-promo-link { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #fe4a23; }
495    /* Mobile variant of the same promo. The sheet is one narrow column, so this
496       lays out horizontally (mark beside the copy) instead of the desktop card's
497       vertical stack, and sits at the top of the Solutions group. */
498    .mcp-promo-m {
499        display: flex; align-items: flex-start; gap: 12px;
500        margin: 8px 16px 4px; padding: 14px;
501        background: #FFF3EE; border: 1px solid #FFD9C2; border-radius: 12px;
502        text-decoration: none;
503    }
504    .mcp-promo-m > img { flex: none; width: 34px; height: 34px; }
505    .mcp-promo-m-head { display: flex; align-items: center; gap: 8px; }
506    .mcp-promo-m-title { margin: 0; font-weight: 700; font-size: 14.5px; color: #111827; }
507    .mcp-promo-m-desc { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.45; }
508    .mcp-promo-m-link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #fe4a23; }
509    .solutions-trigger .fa-chevron-down { transition: transform .2s ease; }
510    .solutions-trigger:hover .fa-chevron-down { transform: rotate(180deg); }
511
512    /* Media dropdown — "Cadient in the Press" card, same white/orange
513       hover pattern as the Solutions mega-menu above. */
514    .media-menu { display: none; }
515    .media-trigger:hover .media-menu,
516    .media-menu:hover { display: block; }
517    .media-trigger .fa-chevron-down { transition: transform .2s ease; }
518    .media-trigger:hover .fa-chevron-down { transform: rotate(180deg); }
519    .media-item:not(:last-child) { border-bottom: 1px solid #f3f4f6; }
520    .media-item:hover { background-color:#fff7f5; }
521</style><div id="site-sticky-top" style="position:sticky; top:0; z-index:50;">
522<style>
523    /* position:relative, not sticky: blog/_header.html wraps this banner and
524       the <header> that follows it in ONE shared position:sticky container,
525       so the pair sticks together as a unit. (An earlier attempt made this
526       element sticky on its own, alongside the header's own independent
527       sticky — two sticky siblings are supposed to stack, but body's Tailwind
528       flex layout on several pages made the header render pinned under the
529       banner instead of below it.) Keep this position:relative; the sticky
530       behavior lives one level up now. */
531    #promo-banner { position:relative; background:linear-gradient(90deg,#fb923c,#fe4a23); color:#fff; font-size:14px; }
532    /* The whole banner is the link, with no separate CTA pill. The icon used to
533       be a flex sibling of the message paragraph; when the row didn't fit
534       and wrapped, the icon (a tiny flex item) got shoved onto its own
535       line above the text instead of sitting beside the first word, adding a
536       3rd line of near-empty height on top of the message's own 2 lines.
537       Putting the icon INSIDE the paragraph as inline content means the
538       whole thing wraps as ordinary text, so it costs no more height than
539       the message text itself needs. */
540    #promo-banner .promo-link {
541        display:block; color:inherit; text-decoration:none;
542        max-width:80rem; margin:0 auto; padding:10px 40px 10px 16px;
543        text-align:center;
544    }
545    #promo-banner .promo-link:hover .promo-msg,
546    #promo-banner .promo-link:focus-visible .promo-msg { text-decoration:underline; }
547    #promo-banner .promo-msg { margin:0; font-weight:500; font-size:13px; line-height:1.35; }
548    #promo-banner .promo-msg i { font-size:11px; }
549    #promo-close {
550        position:absolute; right:12px; top:50%; transform:translateY(-50%);
551        background:transparent; border:0; color:rgba(255,255,255,.8); cursor:pointer; padding:4px;
552        line-height:1; z-index:1;
553    }
554    #promo-close:hover { color:#fff; }
555    @media (min-width: 640px) {
556        #promo-banner .promo-link { text-align:left; padding-left:24px; padding-right:48px; }
557        #promo-banner .promo-msg { font-size:14px; }
558        #promo-close { right:24px; }
559    }
560</style>
561<div id="promo-banner">
562    <a class="promo-link" href="/mcp">
563        <p class="promo-msg"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Get the first look at <strong>Cadient Talent MCP</strong> - your ATS, now connected to AI <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></p>
564    </a>
565    <button type="button" id="promo-close" aria-label="Dismiss announcement">
566        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
567    </button>
568</div>
569<script>
570(function () {
571    /* Bump this version to re-show the bar to people who dismissed the last one. */
572    var DISMISS_KEY = 'cadient_promo_banner_dismissed_v2';
573    var banner = document.getElementById('promo-banner');
574    if (!banner) return;
575    try {
576        if (localStorage.getItem(DISMISS_KEY)) { banner.remove(); return; }
577    } catch (e) {}
578    var closeBtn = document.getElementById('promo-close');
579    if (closeBtn) {
580        closeBtn.addEventListener('click', function () {
581            banner.remove();
582            try { localStorage.setItem(DISMISS_KEY, '1'); } catch (e) {}
583        });
584    }
585})();
586</script>
586
587
588<!-- HEADER -->
589<header class="bg-white border-b border-slate-200"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
590        <div class="flex justify-between items-center h-20">
591            <!-- Logo -->
592            <div class="flex-shrink-0 flex items-center">
593                <a href="/"><img src="/static/img/logo.webp" width="300" height="93" class="w-32"
594                        alt="Cadient"></a>
595            </div>
596
597            <!-- Desktop Nav -->
598            <nav class="hidden md:flex flex-1 items-center justify-center space-x-10 lg:space-x-12">
599                <div class="solutions-trigger">
600                    <a href="/solutions"
601                        class="flex items-center gap-1 text-slate-600 hover:text-cadient-blue font-medium transition-colors py-6">
602                        Solutions <i class="fa-solid fa-chevron-down text-xs mt-0.5"></i>
603                    </a>
604                    <div
605                        class="solutions-menu absolute top-full left-1/2 -translate-x-1/2 bg-white rounded-2xl border border-gray-100 z-50 p-7"
606                        style="width: 940px; max-width: calc(100vw - 32px); box-shadow: 0 20px 50px -12px rgba(17,24,39,0.18);">
607                        <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 240px; gap: 32px;">
608                            <!-- Recruit -->
609                            <div>
610                                <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-3">Recruit</p>
611                                <div class="space-y-0.5">
612                                    <a href="/smart-automation" class="sol-link flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm">SmartAutomation <span class="sol-new">*New</span></a>
613                                    <a href="/smart-refer/" class="sol-link flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm">SmartRefer <span class="sol-new">NEW</span></a>
614                                    <a href="/smart-source" class="sol-link flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm">SmartSource <span class="sol-new">NEW</span></a>
615                                    <a href="/smart-registry" class="sol-link flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm">SmartRegistry <span class="sol-new">NEW</span></a>
616                                    <a href="/smartsuite/smartmatch/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartMatch</a>
617                                    <a href="/smartsuite/smartscreen/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartScreen</a>
618                                    <a href="/smartsuite/smarttexting/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartTexting</a>
619                                </div>
620                            </div>
621                            <!-- Hire -->
622                            <div>
623                                <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-3">Hire</p>
624                                <div class="space-y-0.5">
625                                    <a href="/smart-shield" class="sol-link flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm">SmartShield <span class="sol-new">NEW</span></a>
626                                    <a href="/smartsuite/smarthire/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartHire</a>
627                                    <a href="/smartsuite/smartinterview/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartInterview</a>
628                                    <a href="/smartsuite/smarttexting/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartTexting</a>
629                                    <a href="/smartsuite/smartoffer/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartOffer</a>
630                                </div>
631                            </div>
632                            <!-- Retain -->
633                            <div>
634                                <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-3">Retain</p>
635                                <div class="space-y-0.5">
636                                    <a href="/smart-communicate/" class="sol-link flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm">SmartCommunicate <span class="sol-new">NEW</span></a>
637                                    <a href="/smartsuite/smarttenure/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartTenure</a>
638                                    <a href="/smartsuite/smartfeedback/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartFeedback</a>
639                                    <a href="/smartsuite/smarttexting/" class="sol-link block px-2.5 py-2 rounded-lg text-sm">SmartTexting</a>
640                                </div>
641                            </div>
642                            <!-- MCP promo -->
643                            <a href="/mcp" class="mcp-promo-card">
644                                <div class="mcp-promo-top">
645                                    <img src="/static/img/logo-mark.webp" alt="" width="28" height="28">
646                                    <span class="sol-new">NEW</span>
647                                </div>
648                                <p class="mcp-promo-title">Cadient Talent&rsquo;s MCP</p>
649                                <p class="mcp-promo-desc">Ask your AI assistant about your hiring data.</p>
650                                <span class="mcp-promo-link">Learn more &rarr;</span>
651                            </a>
652                        </div>
653                        <div class="mt-5 pt-4 border-t border-gray-100">
654                            <a href="/lp/schedule" rel="nofollow"
655                                class="trigger-contact-sales flex items-center justify-center gap-2 text-sm font-medium hover:underline" style="color:#fe4a23;">Not
656                                sure where to start? <strong>Book Consult →</strong></a>
657                        </div>
658                    </div>
659                </div>
660                <a href="/why-cadient"
661                    class="text-slate-600 hover:text-cadient-blue font-medium transition-colors">Why Cadient</a>
662                <a href="/industries/"
663                    class="text-slate-600 hover:text-cadient-blue font-medium transition-colors">Industries</a>
664                <a href="/playbooks/"
665                    class="text-slate-600 hover:text-cadient-blue font-medium transition-colors">Playbooks</a>
666                <a href="/article" class="text-slate-600 hover:text-cadient-blue font-medium transition-colors">Blog</a>
667                <div class="media-trigger relative">
668                    <a href="/press/article"
669                        class="flex items-center gap-1 text-slate-600 hover:text-cadient-blue font-medium transition-colors py-6">
670                        Media <i class="fa-solid fa-chevron-down text-xs mt-0.5"></i>
671                    </a>
672                    <div class="media-menu absolute top-full right-0 bg-white rounded-2xl border border-gray-100 z-50 p-5"
673                        style="width: 360px; box-shadow: 0 20px 50px -12px rgba(17,24,39,0.18);">
674                        <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-2">Cadient in the Press</p>
675                        
676                        <a href="/article/usatoday-ai-resume-human-touch"
677                            class="media-item block px-2.5 py-3 -mx-2.5 rounded-lg">
678                            <div class="flex items-center gap-2 mb-1">
679                                <span class="text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">USA TODAY</span>
680                                <span class="text-[10px] text-gray-400">Sep 18, 2026</span>
681                            </div>
682                            <p class="text-sm font-semibold text-gray-900 leading-snug">
683                                Bot vs. bot. Why your AI-written résumé needs a human touch
684                            </p>
685                        </a>
686                        
687                        <a href="/article/authority-magazine-bill-mastin-sticky-tech-products"
688                            class="media-item block px-2.5 py-3 -mx-2.5 rounded-lg">
689                            <div class="flex items-center gap-2 mb-1">
690                                <span class="text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">Authority Magazine</span>
691                                <span class="text-[10px] text-gray-400">Aug 6, 2026</span>
692                            </div>
693                            <p class="text-sm font-semibold text-gray-900 leading-snug">
694                                Bill Mastin of Cadient on 5 tricks for creating “sticky” tech products
695                            </p>
696                        </a>
697                        
698                        <a href="/article/forbes-entry-level-jobs-college-graduates"
699                            class="media-item block px-2.5 py-3 -mx-2.5 rounded-lg">
700                            <div class="flex items-center gap-2 mb-1">
701                                <span class="text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">Forbes</span>
702                                <span class="text-[10px] text-gray-400">Aug 2, 2026</span>
703                            </div>
704                            <p class="text-sm font-semibold text-gray-900 leading-snug">
705                                What the changes in entry-level jobs mean for new college graduates
706                            </p>
707                        </a>
708                        
709                        <a href="/article/hr-techseries-hiring-infrastructure-analysis"
710                            class="media-item block px-2.5 py-3 -mx-2.5 rounded-lg">
711                            <div class="flex items-center gap-2 mb-1">
712                                <span class="text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">HR TechSeries</span>
713                                <span class="text-[10px] text-gray-400">Jul 6, 2026</span>
714                            </div>
715                            <p class="text-sm font-semibold text-gray-900 leading-snug">
716                                Analysis of 1,386 employers reveals hiring infrastructure is holding companies back
717                            </p>
718                        </a>
719                        
720                        <a href="/article/hrdive-candidates-overuse-ai"
721                            class="media-item block px-2.5 py-3 -mx-2.5 rounded-lg">
722                            <div class="flex items-center gap-2 mb-1">
723                                <span class="text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">HR Dive</span>
724                                <span class="text-[10px] text-gray-400">Jul 1, 2026</span>
725                            </div>
726                            <p class="text-sm font-semibold text-gray-900 leading-snug">
727                                What happens when candidates overuse AI — and what recruiters can do
728                            </p>
729                        </a>
730                        
731                        <a href="/article/issuewire-ai-resume-verification-crisis"
732                            class="media-item block px-2.5 py-3 -mx-2.5 rounded-lg">
733                            <div class="flex items-center gap-2 mb-1">
734                                <span class="text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">IssueWire</span>
735                                <span class="text-[10px] text-gray-400">Jun 3, 2026</span>
736                            </div>
737                            <p class="text-sm font-semibold text-gray-900 leading-snug">
738                                Cadient report: rise of AI-generated resumes has precipitated a new hiring verification crisis
739                            </p>
740                        </a>
741                        
742                        <div class="mt-2 pt-3 border-t border-gray-100">
743                            <a href="/press/article"
744                                class="text-xs font-bold" style="color:#fe4a23;">All media coverage &rarr;</a>
745                        </div>
746                    </div>
747                </div>
748            </nav>
749
750            <!-- CTA -->
751            <div class="hidden md:flex items-center gap-4">
752                
753                
754                <a href="/auth/login?next=/?" rel="nofollow"
755                    class="text-slate-600 hover:text-cadient-blue font-medium transition-colors">Log In</a>
756                <a href="/lp/schedule?source=home" rel="nofollow"
757                    onclick="if(window.openPlaybookScheduler){event.preventDefault();window.openPlaybookScheduler({inline:true,role:'expert'});}"
758                    class="inline-flex items-center text-white px-6 py-2.5 rounded-full font-semibold transition-colors shadow-md"
759                    style="background-color:#fe4a23; box-shadow:0 4px 14px -4px rgba(254,74,35,.5);"
760                    onmouseover="this.style.backgroundColor='#d93d1a'"
761                    onmouseout="this.style.backgroundColor='#fe4a23'">Book session</a>
762                
763            </div>
764
765            <!-- Mobile: optional CTA + menu button -->
766            <div class="md:hidden flex items-center gap-3">
767                <a href="/lp/schedule?source=home" rel="nofollow"
768                    onclick="if(window.openPlaybookScheduler){event.preventDefault();window.openPlaybookScheduler({inline:true,role:'expert'});}"
769                    class="inline-flex items-center whitespace-nowrap rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors"
770                    style="border-color:#fe4a23; color:#fe4a23;">Book session</a>
771                
772                <button id="mobile-menu-btn" aria-label="Open menu" aria-expanded="false" class="text-slate-600 hover:text-slate-900 focus:outline-none">
773                    <i class="fa-solid fa-bars text-2xl" aria-hidden="true"></i>
774                </button>
775            </div>
776        </div>
777    </div>
778
779    <!-- Mobile Menu -->
780    <div id="mobile-menu"
781        class="hidden md:hidden bg-white border-b border-slate-100 p-4 absolute w-full z-50 max-h-[calc(100vh-80px)] overflow-y-auto">
782        <div class="py-2 border-b border-slate-100">
783            <a href="/solutions"
784                class="flex items-center justify-between px-4 py-2 text-sm font-semibold text-slate-500 uppercase hover:bg-slate-50 rounded-md">Solutions
785                <span aria-hidden="true" class="font-normal">&rarr;</span></a><a href="/mcp" class="mcp-promo-m">
786                <img src="/static/img/logo-mark.webp" alt="" width="34" height="34">
787                <span>
788                    <span class="mcp-promo-m-head">
789                        <span class="sol-new">NEW</span>
790                        <p class="mcp-promo-m-title">Cadient Talent&rsquo;s MCP</p>
791                    </span>
792                    <p class="mcp-promo-m-desc">Connect your ATS to AI.</p>
793                    <span class="mcp-promo-m-link">Learn more &rarr;</span>
794                </span>
795            </a>
796
797            <p class="px-4 pt-2 pb-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">Recruit</p>
798            <div class="pl-4 space-y-1">
799                <a href="/smart-automation" class="flex items-center justify-between px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartAutomation <span class="text-[10px] font-bold text-white px-2 py-0.5 rounded-full" style="background:#fe4a23;">*New</span></a>
800                <a href="/smart-refer/" class="flex items-center justify-between px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartRefer <span class="text-[10px] font-bold text-white px-2 py-0.5 rounded-full" style="background:#fe4a23;">NEW</span></a>
801                <a href="/smart-source" class="flex items-center justify-between px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartSource <span class="text-[10px] font-bold text-white px-2 py-0.5 rounded-full" style="background:#fe4a23;">NEW</span></a>
802                <a href="/smart-registry" class="flex items-center justify-between px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartRegistry <span class="text-[10px] font-bold text-white px-2 py-0.5 rounded-full" style="background:#fe4a23;">NEW</span></a>
803                <a href="/smartsuite/smartmatch/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartMatch</a>
804                <a href="/smartsuite/smartscreen/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartScreen</a>
805                <a href="/smartsuite/smarttexting/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartTexting</a>
806            </div>
807
808            <p class="px-4 pt-2 pb-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">Hire</p>
809            <div class="pl-4 space-y-1">
810                <a href="/smart-shield" class="flex items-center justify-between px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartShield <span class="text-[10px] font-bold text-white px-2 py-0.5 rounded-full" style="background:#fe4a23;">NEW</span></a>
811                <a href="/smartsuite/smarthire/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartHire</a>
812                <a href="/smartsuite/smartinterview/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartInterview</a>
813                <a href="/smartsuite/smarttexting/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartTexting</a>
814                <a href="/smartsuite/smartoffer/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartOffer</a>
815            </div>
816
817            <p class="px-4 pt-2 pb-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">Retain</p>
818            <div class="pl-4 space-y-1">
819                <a href="/smart-communicate/" class="flex items-center justify-between px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartCommunicate <span class="text-[10px] font-bold text-white px-2 py-0.5 rounded-full" style="background:#fe4a23;">NEW</span></a>
820                <a href="/smartsuite/smarttenure/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartTenure</a>
821                <a href="/smartsuite/smartfeedback/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartFeedback</a>
822                <a href="/smartsuite/smarttexting/" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-cadient-blue rounded-md">SmartTexting</a>
823            </div>
824        </div>
825        <a href="/why-cadient"
826            class="block px-4 py-3 text-slate-600 font-medium hover:bg-slate-50 hover:text-cadient-blue">Why Cadient</a>
827        <a href="/industries/"
828            class="block px-4 py-3 text-slate-600 font-medium hover:bg-slate-50 hover:text-cadient-blue">Industries</a>
829        <a href="/playbooks/"
830            class="block px-4 py-3 text-slate-600 font-medium hover:bg-slate-50 hover:text-cadient-blue">Playbooks</a>
831        <a href="/article"
832            class="block px-4 py-3 text-slate-600 font-medium hover:bg-slate-50 hover:text-cadient-blue">Blog</a>
833        <div class="py-2 border-t border-slate-100"><a href="/press/article"
834                class="flex items-center justify-between px-4 py-2 text-sm font-semibold text-slate-500 uppercase hover:bg-slate-50 rounded-md">Media
835                <span aria-hidden="true" class="font-normal">&rarr;</span></a>
836            <div class="pl-4 space-y-1">
837                
838                <a href="/article/usatoday-ai-resume-human-touch" class="block px-4 py-2 rounded-md hover:bg-slate-50">
839                    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">USA TODAY &middot; Sep 18, 2026</span>
840                    <span class="block text-sm text-slate-700 leading-snug">Bot vs. bot. Why your AI-written résumé needs a human touch</span>
841                </a>
842                
843                <a href="/article/authority-magazine-bill-mastin-sticky-tech-products" class="block px-4 py-2 rounded-md hover:bg-slate-50">
844                    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">Authority Magazine &middot; Aug 6, 2026</span>
845                    <span class="block text-sm text-slate-700 leading-snug">Bill Mastin of Cadient on 5 tricks for creating “sticky” tech products</span>
846                </a>
847                
848                <a href="/article/forbes-entry-level-jobs-college-graduates" class="block px-4 py-2 rounded-md hover:bg-slate-50">
849                    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">Forbes &middot; Aug 2, 2026</span>
850                    <span class="block text-sm text-slate-700 leading-snug">What the changes in entry-level jobs mean for new college graduates</span>
851                </a>
852                
853                <a href="/article/hr-techseries-hiring-infrastructure-analysis" class="block px-4 py-2 rounded-md hover:bg-slate-50">
854                    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">HR TechSeries &middot; Jul 6, 2026</span>
855                    <span class="block text-sm text-slate-700 leading-snug">Analysis of 1,386 employers reveals hiring infrastructure is holding companies back</span>
856                </a>
857                
858                <a href="/article/hrdive-candidates-overuse-ai" class="block px-4 py-2 rounded-md hover:bg-slate-50">
859                    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">HR Dive &middot; Jul 1, 2026</span>
860                    <span class="block text-sm text-slate-700 leading-snug">What happens when candidates overuse AI — and what recruiters can do</span>
861                </a>
862                
863                <a href="/article/issuewire-ai-resume-verification-crisis" class="block px-4 py-2 rounded-md hover:bg-slate-50">
864                    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#fe4a23;">IssueWire &middot; Jun 3, 2026</span>
865                    <span class="block text-sm text-slate-700 leading-snug">Cadient report: rise of AI-generated resumes has precipitated a new hiring verification crisis</span>
866                </a>
867                
868                <a href="/press/article" class="block px-4 py-2 text-sm font-bold" style="color:#fe4a23;">All media coverage &rarr;</a>
869            </div>
870        </div>
871        <div class="mt-4 pt-4 border-t border-slate-100 px-4 flex flex-col gap-3">
872            
873            <a href="/lp/schedule?source=home" rel="nofollow"
874                onclick="if(window.openPlaybookScheduler){event.preventDefault();window.openPlaybookScheduler({inline:true,role:'expert'});}"
875                class="block px-4 py-3 text-center text-white font-semibold rounded-lg shadow-sm"
876                style="background-color:#fe4a23;">Book session</a>
877            
878            <a href="/auth/login?next=/?" rel="nofollow"
879                class="block px-4 py-3 text-center text-slate-600 font-medium border border-slate-200 rounded-lg hover:bg-slate-50">Log
880                In</a>
881            
882            
883        </div>
884    </div>
885</header>
886</div>
887
888<script>
889/* Mobile menu: exact height, measured in viewport coordinates.
890   ------------------------------------------------------------------------
891   Two inputs, both asked for rather than assumed:
892
893     getBoundingClientRect().top  where the panel actually starts. Read AFTER
894                                  setting `top`, because `top` resolves against
895                                  the containing block and _product_nav.html's
896                                  <nav> has backdrop-blur, which makes it one —
897                                  there, top:91px lands at viewport y=101. The
898                                  rect is always viewport-relative, so measuring
899                                  after the write self-corrects for that.
900     visualViewport.height        the genuinely visible height, excluding browser
901                                  chrome and any on-screen keyboard. This is the
902                                  number vh/svh/dvh only approximate, and the
903                                  reason the panel used to run off the bottom of
904                                  the screen with the toolbar showing.
905
906   height, not max-height: the panel then ends exactly at the visible bottom, so
907   every child is reachable by scrolling.
908
909   Re-runs on visualViewport resize, so showing/hiding the URL bar while the menu
910   is open re-fits it instead of clipping it. */
911(function () {
912    var MIN = 160;
913    var writing = false;
914
915    function panel() { return document.getElementById('mobile-menu'); }
916
917    function isOpen() {
918        var m = panel();
919        /* Not offsetParent: that is null for position:fixed elements, which the
920           panel is — the guard silently bailed every time on blog/_header.html and
921           only appeared to work on _product_nav.html, where the nav's
922           backdrop-filter containing block makes it non-null. Check display. */
923        return !!m && getComputedStyle(m).display !== 'none';
924    }
925
926    function place() {
927        var m = panel();
928        if (!m || !isOpen()) return;
929        var bar = m.parentElement;
930        if (!bar) return;
931        writing = true;
932
933        /* Intent: start just below the header bar. */
934        var barBottom = Math.round(bar.getBoundingClientRect().bottom);
935        var wantTop = Math.max(0, barBottom) + 'px';
936        if (m.style.top !== wantTop) m.style.top = wantTop;
937
938        /* Reality: where that actually put it. getBoundingClientRect is relative to
939           the LAYOUT viewport, and a fixed element is positioned against that too —
940           but visualViewport.height measures the VISUAL viewport. On a phone those
941           two diverge (offsetTop > 0) once the browser shifts the visible area
942           within the layout viewport, so the two numbers have to be brought into
943           the same coordinate space before subtracting. Mixing them made the panel
944           come out short by offsetTop. */
945        var vv = window.visualViewport;
946        var visible = vv ? vv.height : window.innerHeight;
947        var offset = vv ? vv.offsetTop : 0;
948        var topInVisual = m.getBoundingClientRect().top - offset;
949
950        var wantH = Math.max(MIN, Math.round(visible - topInVisual)) + 'px';
951        if (m.style.height !== wantH) m.style.height = wantH;   /* only on change: this
952                                                                   runs every frame */
953        if (m.style.maxHeight !== 'none') m.style.maxHeight = 'none';
954        writing = false;
955    }
956
957    /* Re-measure every frame for as long as the panel is open.
958       ----------------------------------------------------------------
959       This replaced an event-driven approach (visualViewport resize +
960       orientationchange + window resize) that was correct whenever it ran but
961       depended on being *told* the viewport changed. On a phone the browser
962       toolbar sliding in shrinks visualViewport.height, and the last resize event
963       can arrive before the transition settles — so a height computed one frame
964       too early stays in place and the tail of the panel ends up below the visible
965       area. Nothing re-runs, and it looks intermittent because it depends on
966       toolbar state and scroll position at the moment the menu was opened.
967
968       A frame loop cannot be out of date by more than one frame, whatever the
969       browser does or doesn't report. It only runs while the menu is open — a
970       short, idle, user-initiated state — and the writes above are guarded 
970so a
971       steady state performs no style mutations at all. */
972    var raf = null;
973    function loop() {
974        if (!isOpen()) { raf = null; return; }
975        place();
976        raf = requestAnimationFrame(loop);
977    }
978    function startLoop() {
979        place();                       /* immediately, so nothing paints mis-sized */
980        if (raf === null) raf = requestAnimationFrame(loop);
981    }
982
983    var m = panel();
984    if (m) {
985        /* ~28 per-page scripts open this panel, all via classList.toggle('hidden').
986           Observing the attribute catches every one without editing any of them. */
987        new MutationObserver(function () {
988            if (!writing) startLoop();
989        }).observe(m, { attributes: true, attributeFilter: ['class'] });
990    }
991
992    var btn = document.getElementById('mobile-menu-btn');
993    if (btn) btn.addEventListener('click', startLoop);
994
995    /* The frame loop is the real mechanism; these only matter when frames are not
996       being served. rAF is paused in a hidden tab, so a device rotated or resized
997       while backgrounded would otherwise restore mis-sized. */
998    document.addEventListener('visibilitychange', startLoop);
999    window.addEventListener('orientationchange', startLoop);
1000    window.addEventListener('resize', startLoop);
1001    startLoop();
1002})();
1003</script>
1003<style>
1004    /* ── Utilities this partial owns outright — DO NOT move back to classes ──
1005       Tailwind's scanner does not follow Jinja includes, and this partial is not
1006       listed in tailwind.config.js's `content` array, so every utility it is the
1007       only user of gets purged out of static/css/tailwind.css. The classes are
1008       still on the markup below (they resolve on the Play-CDN pages, which
1009       generate at runtime); these rules are what makes them true on the purged
1010       bundle — /solutions, home, blog, playbooks, why-cadient, smartsuite,
1011       resources, industries, comparisons, mcp, roi-calculator.
1012
1013       The one that mattered: `z-[110]` was missing, so the overlay computed to
1014       z-index:auto. #site-sticky-top (blog/_header.html, z-index:50) painted
1015       over it, and so did the page's own `position:relative` cards — this
1016       partial is included from the header, i.e. BEFORE <main> in the DOM, so
1017       two z-index:auto positioned elements resolve on source order and the
1018       cards win. The open modal rendered underneath the page.
1019
1020       Declared here rather than fixed in the config on purpose: it holds on
1021       both delivery paths and cannot regress the next time a partial is added
1022       without being scanned. */
1023    #pb-scheduler-modal{z-index:110}                                     /* z-[110] */
1024    #pb-scheduler-modal [data-role="sched-panel"]{max-height:92vh}       /* max-h-[92vh] */
1025    #pb-scheduler-modal [data-role="sched-skip"]{
1026        border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}  /* rounded-b-2xl */
1027    #pb-scheduler-modal #pb-scheduler-frame{border:0}                    /* border-0 */
1028    #pb-scheduler-modal #pb-scheduler-close:hover{color:#374151}         /* hover:text-gray-700 */
1029    @media (min-width:768px){
1030        #pb-scheduler-modal [data-role="sched-form"],
1031        #pb-scheduler-modal [data-role="sched-thanks"],
1032        #pb-scheduler-modal [data-role="sched-skip"]{
1033            padding-left:1.5rem;padding-right:1.5rem}                    /* md:px-6 */
1034    }
1035
1036    /* ── Panel transition ───────────────────────────────────────────────
1037       The modal had no transition at all — a straight display:flex/none. Both
1038       presentations now animate off .is-open, which the JS toggles a reflow after
1039       display is set. */
1040    #pb-scheduler-modal [data-role="sched-panel"]{
1041        transition:transform .30s cubic-bezier(.32,.72,0,1),opacity .22s ease}
1042    #pb-scheduler-modal{opacity:0;transition:opacity .22s ease}
1043    #pb-scheduler-modal.is-open{opacity:1}
1044
1045    /* Desktop: a slight rise, nothing more. */
1046    #pb-scheduler-modal [data-role="sched-panel"]{transform:translateY(10px)}
1047    #pb-scheduler-modal.is-open [data-role="sched-panel"]{transform:none}
1048
1049    /* Inline SVG, not Font Awesome: this partial is included by blog pages
1050       (which load FA) AND by the product dashboards (which use Lucide), so a
1051       hardcoded FA class rendered as an empty box in half the app. 1em keeps
1052       them sized by the surrounding font-size, exactly like the icon font. */
1053    .pbs-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0}
1054    .pbs-ico-sm{width:.75em;height:.75em}
1055    .pbs-ico-lg{width:1.125em;height:1.125em}
1056
1057    /* Own the body's scrollbar. The panel body carries Tailwind's
1058       .overflow-y-auto, and smart-refer/dashboard.html styles THAT CLASS
1059       globally for its dark sidebar — a #0f172a track with a periwinkle-edged
1060       thumb — so the modal rendered a near-black scrollbar inside a white
1061       dialog on that page and a default grey one everywhere else. Keyed on the
1062       id + attribute so it outranks the page's class selector wherever this
1063       partial is embedded. */
1064    #pb-scheduler-modal [data-role="sched-body"]{
1065        scrollbar-width:thin;scrollbar-color:#d4d4d8 transparent}
1066    #pb-scheduler-modal [data-role="sched-body"]::-webkit-scrollbar{width:8px}
1067    #pb-scheduler-modal [data-role="sched-body"]::-webkit-scrollbar-track{
1068        background:transparent}
1069    #pb-scheduler-modal [data-role="sched-body"]::-webkit-scrollbar-thumb{
1070        background:#d4d4d8;border-radius:9999px;
1071        border:2px solid transparent;background-clip:content-box}
1072    #pb-scheduler-modal [data-role="sched-body"]::-webkit-scrollbar-thumb:hover{
1073        background:#a1a1aa;background-clip:content-box}
1074
1075    /* Grip is mobile-only; on desktop the sheet metaphor doesn't apply. */
1076    .pbs-grip{display:none}
1077
1078    /* ── Step 2 (borrowed form) ─────────────────────────────────────────
1079       Two things kept step 2 reading as a different popup rather than the
1080       same one:
1081       1. HEIGHT. Hiding the 560px iframe collapsed the panel to the form's own
1082          height — a ~290px drop, and a different aspect ratio. showFormPane
1083          pins this pane (and the header) to the height step 1 measured, so the
1084          panel does not change size at all between steps. Content is anchored
1085          to the TOP of that space: centring it left the form floating in the
1086          middle of a tall box, which looked worse than the jump.
1087       2. WIDTH. The panel is 672px; a form stretched across all of it reads as
1088          a clumsier, unrelated dialog. The column keeps the fields at the same
1089          measure they had in the standalone card. */
1090    /* Centred, not top-anchored: with the session block in place the column is
1091       ~420px of the ~600px pane, so the remaining space splits into two modest
1092       margins and reads as breathing room. (Centring was wrong when the form
1093       was alone — 340px of content left it floating.) */
1094    /* Biased above centre. True centring measured even, but read bottom-heavy:
1095       the header block above adds visual weight the maths doesn't account for,
1096       so the optical centre sits higher than the geometric one. The extra
1097       bottom padding shrinks the box the content centres within, lifting it. */
1098    #pb-scheduler-modal [data-role="sched-form"]{
1099        padding-top:1.5rem;padding-bottom:4.5rem;
1100        display:flex;flex-direction:column;align-items:center;justify-content:center}
1101    .pbs-formcol{width:100%;max-width:28rem}
1102
1103    /* Asset card. Deliberately NOT shaped like the panel header above it: that
1104       is a round accent medallion + bold heading + grey subline on white, and
1105       repeating the pattern here made the step look like the heading had been
1106       pasted in twice. This is a tinted, bordered card with a portrait document
1107       tile, a micro eyebrow and body-weight text — a thing being described,
1108       rather than a second title. */
1109    .pbs-asset{width:100%;margin-bottom:1.75rem;padding:1rem 1.125rem;
1110        background:#fffaf8;border:1px solid #ffe0d6;border-radius:.875rem}
1111    .pbs-asset-main{display:flex;align-items:flex-start;gap:.875rem}
1112    .pbs-doc{width:2.75rem;height:3.5rem;flex-shrink:0;border-radius:.375rem;
1113        display:flex;align-items:center;justify-content:center;
1114        background:#ffffff;border:1px solid #ffd5c8;color:#fe4a23;font-size:1.125rem;
1115        box-shadow:0 1px 2px rgba(17,17,17,.05)}
1116    .pbs-asset-txt{min-width:0;flex:1}
1117    .pbs-eyebrow{margin:0 0 .25rem;font-size:.6875rem;font-weight:700;
1118        letter-spacing:.08em;text-transform:uppercase;color:#c2410c}
1119    .pbs-asset-title{margin:0;font-size:.9375rem;font-weight:600;color:#111827;
1120        line-height:1.35}
1121    .pbs-asset-blurb{margin:.25rem 0 0;font-size:.8125rem;line-height:1.5;color:#6b7280}
1122    .pbs-asset-slot{display:flex;align-items:center;gap:.5rem;
1123        margin:.875rem 0 0;padding-top:.75rem;border-top:1px solid #ffe0d6;
1124        font-size:.8125rem;font-weight:600;color:#374151}
1125    .pbs-asset-slot svg{color:#fe4a23}
1126    .pbs-change{margin-left:auto;font-size:.75rem;font-weight:400;color:#9ca3af;
1127        text-decoration:underline;text-underline-offset:2px;transition:color .15s ease}
1128    .pbs-change:hover{color:#4b5563}
1129
1130    /* Scale the borrowed form up for the roomier panel. Scoped to this modal,
1131       so the standalone card (used when the panel can't host the form) keeps
1132       its original compact proportions. */
1133    /* The form's own legend and helper text ("Send it to your work email" /
1134       "We'll send the playbook straight to you") are redundant in here: the
1135       panel header already asks the question and the fields are labelled. They
1136       stay in the standalone card, which has no header to lean on. */
1137    #pb-scheduler-modal .pbf-legend,
1138    #pb-scheduler-modal .pbf-help{display:none}
1139    #pb-scheduler-modal .pbf-field{margin-bottom:.875rem;padding:0 1.125rem;
1140        border-radius:.875rem}
1141    #pb-scheduler-modal .pbf-field input{padding:1.0625rem 0;font-size:.9375rem}
1142    #pb-scheduler-modal .pbf-ico{font-size:1rem}
1143    #pb-scheduler-modal .pbf-submit{margin-top:.75rem;padding:1.0625rem 1.25rem;
1144        font-size:.9375rem;border-radius:.875rem}
1145    #pb-scheduler-modal .pbf-privacy{margin-top:1.25rem;font-size:.8125rem}
1146
1147    @media (max-width: 767.98px){
1148        /* ── Bottom sheet ──────────────────────────────────────────────
1149           Anchored to the bottom edge, full width, square at the bottom. */
1150        #pb-scheduler-modal{align-items:flex-end;padding:0}
1151        #pb-scheduler-modal [data-role="sched-panel"]{
1152            max-width:none;width:100%;
1153            border-radius:1.25rem 1.25rem 0 0;
1154            transform:translateY(100%);
1155            /* EXPLICIT height, not max-height. The body is flex:1 containing an
1156               iframe at height:100%, and a percentage needs a resolved parent
1157               height to compute against — with max-height alone the iframe
1158               collapses to its min-height and the time slots vanish below the
1159               fold. That was the "slots are not visible" bug on the sheet this
1160               replaces.
1161               vh first as the fallback, then dvh, which tracks the mobile URL bar
1162               collapsing where vh does not. */
1163            height:calc(92vh - 40px);
1164            height:calc(92dvh - 40px);
1165            max-height:none;
1166            /* Keeps the last row of slots clear of the iOS home indicator. */
1167            padding-bottom:env(safe-area-inset-bottom,0px)}
1168        #pb-scheduler-modal.is-open [data-role="sched-panel"]{transform:translateY(0)}
1169
1170        /* The sheet's bottom corners are square, so the pinned skip footer must
1171           be too — it is the panel's last child and would otherwise round
1172           against a straight edge. */
1173        #pb-scheduler-modal [data-role="sched-skip"]{border-radius:0}
1174
1175        /* Follows the finger during a drag — instant, no easing. */
1176        #pb-scheduler-modal [data-role="sched-panel"].is-dragging{transition:none}
1177
1178        .pbs-grip{display:flex;align-items:center;justify-content:center;
1179            padding:10px 0 2px;flex-shrink:0;cursor:grab;touch-action:none}
1180        .pbs-grip span{display:block;width:40px;height:4px;border-radius:999px;
1181            background:#D7D3CE}
1182        .pbs-grip:active{cursor:grabbing}
1183        /* The header's own top padding is redundant under the grip. */
1184        #pb-scheduler-modal [data-role="sched-panel"] > div:nth-of-type(2){
1185            padding-top:.5rem !important}
1186    }
1187
1188    @media (prefers-reduced-motion: reduce){
1189        #pb-scheduler-modal,
1190        #pb-scheduler-modal [data-role="sched-panel"]{transition:none}
1191        #pb-scheduler-modal [data-role="sched-panel"]{transform:none}
1192    }
1193</style>
1194    <!-- ══════════════════════════════════════════════════════
1195     Scheduler modal — opened automatically after a successful download
1196     capture (mirrors the playbook category pages). Embeds /lp/schedule
1197     and forwards source/topic/email through to /lp/capture.
1198     ══════════════════════════════════════════════════════ -->
1199    <div id="pb-scheduler-modal" class="fixed inset-0 z-[110] items-center justify-center px-4 py-6"
1200        style="display:none; background-color:rgba(17,17,17,0.6);">
1201        <div data-role="sched-panel"
1202            class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full relative flex flex-col max-h-[92vh]"><div data-role="sched-grip" class="pbs-grip" aria-hidden="true"><span></span></div>
1203            <div class="px-6 pb-3 border-b border-gray-100 flex-shrink-0" style="padding-top:1.75rem;">
1204                <div class="flex items-start gap-3">
1205                    <span data-role="sched-headicon"
1206                        class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
1207                        style="background-color:#fff2ef;">
1208                        <svg class="pbs-ico" style="color:#fe4a23;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/><path d="m9 16 2 2 4-4"/></svg>
1209                    </span>
1210                    <div data-role="sched-headtext" class="flex-1 min-w-0"><h2 data-role="sched-head" class="text-lg md:text-xl font-bold text-gray-900 leading-snug">
1211                            Want a quick walkthrough?
1212                        </h2>
1213                        <p data-role="sched-sub" class="text-sm text-gray-500 mt-1 leading-relaxed">
1214                            <span data-role="sched-topic">Your playbook</span> is on its way to your inbox. Grab 30
1215                            minutes with our team to see how it applies to your hiring — no pressure.
1216                        </p>
1217                    </div>
1218                    <button type="button" id="pb-scheduler-close" aria-label="Close"
1219                        class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-full text-gray-400 hover:text-gray-700 transition"
1220                        style="margin-top:-0.25rem; margin-right:-0.5rem;">
1221                        <svg class="pbs-ico pbs-ico-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
1222                    </button>
1223                </div>
1224            </div>
1225            <div class="flex-1 overflow-y-auto" data-role="sched-body">
1226                <iframe id="pb-scheduler-frame" title="Schedule a session" loading="lazy" class="w-full block border-0"
1227                    style="height:560px;" src="about:blank"></iframe><div data-role="sched-form" class="px-5 md:px-6 pb-6" style="display:none;">
1228                    
1229                    <div class="pbs-formcol">
1230                        
1231                        <div data-role="sched-summary" class="pbs-asset">
1232                            <div class="pbs-asset-main">
1233                                
1234                                <span class="pbs-doc" aria-hidden="true">
1235                                    <svg class="pbs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 12v5"/><path d="m9.5 14.5 2.5 2.5 2.5-2.5"/></svg>
1236                                </span>
1237                                <div class="pbs-asset-txt">
1238                                    <p class="pbs-eyebrow">You'll receive</p>
1239                                    <p class="pbs-asset-title" data-role="sched-assettitle">Your playbook</p>
1240                                    <p class="pbs-asset-blurb" data-role="sched-assetblurb"></p>
1241                                </div>
1242                            </div>
1243                            <p class="pbs-asset-slot" data-role="sched-slotrow" style="display:none;">
1244                                <svg class="pbs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/><path d="m9 16 2 2 4-4"/></svg>
1245                                <span data-role="sched-slottext"></span>
1246                                <button type="button" data-role="sched-slotchange" class="pbs-change">change</button>
1247                            </p>
1248                        </div>
1249                        <div data-role="sched-formhost"></div>
1250                    </div>
1251                </div><div data-role="sched-thanks" class="px-5 md:px-6 py-2" style="display:none;"></div>
1252            </div><div data-role="sched-skip"
1253                class="px-5 md:px-6 py-4 border-t border-gray-100 bg-white text-center flex-shrink-0 rounded-b-2xl"
1254                style="display:none;">
1255                <button type="button" data-role="sched-skip-btn"
1256                    class="inline-flex items-center gap-1.5 text-sm font-semibold transition"
1257                    style="color:#fe4a23;"
1258                    onmouseover="this.style.color='#d93d1a';"
1259                    onmouseout="this.style.color='#fe4a23';">
1260                    <span data-role="sched-skip-label">Just email me the playbook</span>
1261                    <svg class="pbs-ico pbs-ico-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
1262                </button>
1263            </div>
1264        </div>
1265    </div>
1266
1267    
1267<script>
1268        (function () {
1269            var modal = document.getElementById('pb-scheduler-modal');
1270            if (!modal) return;
1271            var frame = document.getElementById('pb-scheduler-frame');
1272            var topicEl = modal.querySelector('[data-role="sched-topic"]');
1273
1274            window.openPlaybookScheduler = function (ctx) {
1275                ctx = ctx || {};
1276                // Re-opening while a form is still borrowed (the chip's "change",
1277                // or a second entry point): give it back first, or the restore
1278                // target would become this panel's own host and the node would
1279                // be stranded here when the modal closes.
1280                restoreFormPane();
1281                resetThanks();
1282                // Carry context through the scheduler to /lp/capture.
1283                //
1284                // Seeded from the PARENT page's query string, not empty. This
1285                // used to be `new URLSearchParams()`, so a visitor who landed
1286                // on ?utm_source=google&gclid=... and opened this modal sent
1287                // an iframe URL with no attribution on it at all. The comment
1288                // inside lp-schedule.html says "Preserve existing query params
1289                // (UTMs)" — but inside an iframe `window.location.search` is
1290                // the iframe's own URL, i.e. whatever we build here. So the
1291                // UTMs were dropped at this boundary and /lp/capture rendered
1292                // five blank hidden inputs (LEAD_AUDIT.md F6).
1293                //
1294                // Whitelisted rather than copied wholesale: the parent URL can
1295                // carry things that must not end up in an iframe src (?email=,
1296                // tokens, one-time codes).
1297                var CARRY = ['utm_source', 'utm_medium', 'utm_campaign',
1298                             'utm_content', 'utm_term',
1299                             'gclid', 'gbraid', 'wbraid', 'fbclid',
1300                             'msclkid', 'li_fat_id', 'ttclid'];
1301                var parentParams = new URLSearchParams(window.location.search);
1302                var params = new URLSearchParams();
1303                CARRY.forEach(function (k) {
1304                    var v = parentParams.get(k);
1305                    if (v) params.set(k, v);
1306                });
1307                // The page the visitor is converting FROM. Distinct from the
1308                // first-touch landing URL the server reads out of the cookie —
1309                // this is the conversion page, and /lp/capture forwards it to
1310                // Zoho as Referral_Link.
1311                params.set('referral_page', window.location.href);
1312                // ctx.source lets a caller label its own lead source; the two
1313                // playbook values stay the default so existing callers are unchanged.
1314                params.set('source', ctx.source || (ctx.inline ? 'playbook_inline' : 'playbook'));
1315                if (ctx.page) params.set('topic', ctx.page);
1316                if (ctx.email) params.set('email', ctx.email);
1317                // Scheduler-first: we don't know who this is yet, so the iframe
1318                // must hand the slot back instead of trying to book it against a
1319                // lead that doesn't exist. See lp-schedule.html.
1320                slotHandler = (typeof ctx.onSlot === 'function') ? ctx.onSlot : null;
1321                if (slotHandler) params.set('flow', 'slot_first');
1322                // Optional: host the caller's form in this same panel for step 2
1323                // instead of handing back to a second modal.
1324                // Adopted for the scheduler-first flow (ctx.onSlot) and for
1325                // re-opening a finished one (ctx.startAtForm), which has no
1326                // calendar step and therefore no onSlot.
1327                formPane = ((slotHandler || ctx.startAtForm) &&
1328                            ctx.formPane && ctx.formPane.nodeType === 1)
1329                    ? ctx.formPane : null;
1330                formHead = ctx.formHead || 'Where should we send it?';
1331                formSub = ctx.formSub || '';
1332                // What they're getting, named per playbook. textContent, so
1333                // editor-supplied category copy can never inject markup.
1334                assetTitle = ctx.assetTitle || ctx.offer || 'Your playbook';
1335                assetBlurb = ctx.assetBlurb || '';
1336                if (frame) { resetFrameHeight(); frame.src = '/lp/schedule?' + params.toString(); }
1337
1338                // The skip is meaningful when something waits behind this modal
1339                // (a scheduler-first form) or when the caller says the whole
1340                // prompt is optional — the onboarding greeting has no second
1341                // step, it just needs a way out that isn't the X.
1342                dismissHandler = (typeof ctx.onDismiss === 'function') ? ctx.onDismiss : null;
1343                if (skipWrap) {
1344                    skipWrap.style.display = (slotHandler || ctx.dismissible) ? '' : 'none';
1345                }
1346                // "playbook" is wrong on the hub, where the asset is whatever the
1347                // widget is offering — let the caller name it. textContent, so a
1348                // caller's own copy can never inject markup.
1349                if (skipLabel) skipLabel.textContent = ctx.skipLabel || 'Just email me the playbook';
1350
1351                // Header + subhead adapt to the entry point. The download flow keeps
1352                // its "on its way to your inbox" confirmation; a cold mid-article
1353                // click (ctx.inline) gets a neutral "talk to an expert" framing.
1354                var headEl = modal.querySelector('[data-role="sched-head"]');
1355                var subEl = modal.querySelector('[data-role="sched-sub"]');
1356                if (ctx.head || ctx.sub) {
1357                    // Caller-supplied copy, for entry points that need their own
1358                    // confirmation — e.g. the Solutions Lab brief, which opens this
1359                    // modal to say the brief was emailed and then show slots.
1360                    // textContent, not innerHTML: this text can originate from a
1361                    // page's own JS and must never be able to inject markup.
1362                    if (ctx.head && headEl) headEl.textContent = ctx.head;
1363                    if (ctx.sub && subEl) subEl.textContent = ctx.sub;
1364                } else if (ctx.inline) {
1365                    if (headEl) headEl.textContent = 'Talk to a Cadient ' + (ctx.role || 'expert');
1366                    if (subEl) subEl.textContent =
1367                        'Book 30 minutes to talk through ' + (ctx.topic || 'your hiring') +
1368                        ' — no pitch, just answers.';
1369                } else {
1370                    if (headEl) headEl.textContent = 'Want a quick walkthrough?';
1371                    if (subEl) subEl.innerHTML =
1372                        '<span data-role="sched-topic">Your playbook</span> is on its way to ' +
1373                        'your inbox. Grab 30 minutes with our team to see how it applies to ' +
1374                        'your hiring — no pressure.';
1375                    var t = modal.querySelector('[data-role="sched-topic"]');
1376                    if (t) t.textContent = ctx.offer
1377                        ? ('Your playbook, “' + ctx.offer + ',”')
1378                        : 'Your playbook';
1379                }
1380                // A cold open (sidebar card, header CTA) is not part of the
1381                // download flow, so closing must not fire its callbacks —
1382                // otherwise dismissing this would surface a "check your inbox"
1383                // card for a download the visitor never requested.
1384                coldOpen = !!ctx.inline;
1385                // Per-open callback, from the copy this partial absorbed. Takes
1386                // precedence over the window.__pb* globals below: it lets the
1387                // originating widget decide its own end state, which the globals
1388                // can't do when more than one widget is on the page.
1389                currentResolve = (typeof ctx.onResolve === 'function') ? ctx.onResolve : null;
1390                // Every entry point ends on the confirmation now, so this defaults
1391                // rather than being opt-in. A caller overrides it only to add flow
1392                // context — the playbook forms append products=1 and an article
1393                // slug, which is what makes the two product cards appear; without
1394                // that the confirmation renders without the products section.
1395                //
1396                // Relative paths only, so a caller can't point this at another
1397                // origin and have its markup injected into the modal.
1398                thankYouUrl = (typeof ctx.thankYou === 'string' &&
1399                               ctx.thankYou.charAt(0) === '/' &&
1400                               ctx.thankYou.charAt(1) !== '/')
1401                    ? ctx.thankYou
1402                    : '/playbooks/thank-you';
1403                booked = false;
1404                handoffDone = false;
1405                openModalUI();
1406
1407                // ctx.startAtForm: re-opening a flow that already finished, so
1408                // there is nothing to book — jump straight to the form pane and
1409                // never load the calendar. Keeps the confirmation in THIS panel
1410                // at its usual width, instead of a second, smaller dialog.
1411                if (ctx.startAtForm && formPane) {
1412                    if (frame) { resetFrameHeight(); frame.src = 'about:blank'; }
1413                    handoffDone = true;
1414                    slotHandler = null;
1415                    showFormPane(ctx.slot || null, true);
1416                }
1417                };
1418
1419                var booked = false;
1420                var coldOpen = false;
1421                var currentResolve = null;
1422                var thankYouUrl = null;
1423                var thanksShown = false;
1424                // Scheduler-first state. slotHandler is set per open by ctx.onSlot;
1425                // handoffDone marks that we've already passed control back to the
1426                // caller (via a slot pick or the skip), so the close that follows
1427                // must not also fire the dismissal callbacks — the flow is
1428                // continuing in the caller's form, not ending here.
1429                var slotHandler = null;
1430                var handoffDone = false;
1431                var skipWrap = modal.querySelector('[data-role="sched-skip"]');
1432                var skipBtn = modal.querySelector('[data-role="sched-skip-btn"]');
1433                var skipLabel = modal.querySelector('[data-role="sched-skip-label"]');
1434                // In-panel step 2. formPane is the caller's node while we're
1435                // borrowing it; formHome remembers exactly where to put it back
1436                // (parent + the sibling it sat before), so restoring can't
1437                // reorder the page.
1438                var formWrap = modal.querySelector('[data-role="sched-form"]');
1439                var formHost = modal.querySelector('[data-role="sched-formhost"]');
1440                var assetTitleEl = modal.querySelector('[data-role="sched-assettitle"]');
1441                var assetBlurbEl = modal.querySelector('[data-role="sched-assetblurb"]');
1442                var slotRow = modal.querySelector('[data-role="sched-slotrow"]');
1443                var slotText = modal.querySelector('[data-role="sched-slottext"]');
1444                var slotChange = modal.querySelector('[data-role="sched-slotchange"]');
1445                var formPane = null, formHome = null, formHead = '', formSub = '';
1446                var assetTitle = '', assetBlurb = '';
1447                // Set by ctx.onDismiss. Fires once, however the visitor leaves —
1448                // skip link, X, Escape or backdrop — so a one-time prompt is
1449                // never shown twice because they closed it the "wrong" way.
1450                var dismissHandler = null;
1451                var thanksEl = modal.querySelector('[data-role="sched-thanks"]');
1452                // The header BAR stays while the confirmation shows — it carries
1453                // the close button, and hiding the whole block left the visitor with
1454                // no X at all. Only the icon and the heading text go, since the
1455                // confirmation has its own heading.
1456                var headBlock = modal.querySelector('[data-role="sched-head"]')
1457                    ? modal.querySelector('[data-role="sched-head"]').closest('.border-b')
1458                    : null;
1459                var headIcon = modal.querySelector('[data-role="sched-headicon"]');
1460                var headText = modal.querySelector('[data-role="sched-headtext"]');function showFormPane(slot, noPin) {
1461                    if (!formPane || !formHost) return false;
1462                    // Lock step 2 to the exact height step 1 occupied, measured
1463                    // rather than hardcoded — the calendar's height varies with
1464                    // the slot grid, and the CSS min-height alone still left the
1465                    // panel shrinking by however tall the skip block was. Desktop
1466                    // only: the mobile sheet is already a fixed height, and
1467                    // forcing this there would push the submit button off-screen.
1468                    // Hold the panel at exactly the size step 1 occupied. Measured,
1469                    // not hardcoded: the calendar's height varies with the slot
1470                    // grid. Both halves matter — the body (which loses the 560px
1471                    // iframe and the skip block) and the header (whose two-line
1472                    // subhead becomes one line), or the panel still shifts.
1473                    // noPin: no calendar step preceded this open, so there is no
1474                    // height to match — let the pane size to its content.
1475                    var bodyEl = modal.querySelector('[data-role="sched-body"]');
1476                    if (!noPin && bodyEl && formWrap && window.innerWidth >= 768) {
1477                        // The skip footer lives OUTSIDE the body and is hidden a
1478                        // few lines below, so its height has to be folded into
1479                        // the pin or the panel shrinks by exactly that much when
1480                        // step 2 appears.
1481                        var footerH = (skipWrap && skipWrap.offsetParent !== null)
1482                            ? skipWrap.offsetHeight : 0;
1483                        formWrap.style.minHeight = (bodyEl.offsetHeight + footerH) + 'px';
1484                        if (headBlock) headBlock.style.minHeight = headBlock.offsetHeight + 'px';
1485                    }
1486                    formHome = { parent: formPane.parentNode, before: formPane.nextSibling };
1487                    formHost.appendChild(formPane);
1488                    if (frame) frame.style.display = 'none';
1489                    if (skipWrap) skipWrap.style.display = 'none';
1490                    if (assetTitleEl) assetTitleEl.textContent = assetTitle;
1491                    if (assetBlurbEl) {
1492                        assetBlurbEl.textContent = assetBlurb;
1493                        // No category description configured — drop the line
1494                        // rather than leaving an empty gap under the title.
1495                        assetBlurbEl.style.display = assetBlurb ? '' : 'none';
1496                    }
1497
1498                    // The summary block itself is always shown; only the booked
1499                    // slot line is conditional.
1500                    if (slotRow) {
1501                        if (slot && slotText) {
1502                            slotText.textContent = slot;
1503                            slotRow.style.display = '';
1504                        } else {
1505                            slotRow.style.display = 'none';
1506                        }
1507                    }
1508                    var headEl = modal.querySelector('[data-role="sched-head"]');
1509                    var subEl = modal.querySelector('[data-role="sched-sub"]');
1510                    if (headEl) headEl.textContent = formHead;
1511                    if (subEl) subEl.textContent = formSub;
1512                    formWrap.style.display = '';
1513                    var body = modal.querySelector('[data-role="sched-body"]');
1514                    if (body) body.scrollTop = 0;
1515
1516                    // Focus the first empty field so the visitor can just type.
1517                    var firstInput = formPane.querySelector('input[type="email"], input[type="text"]:not([tabindex="-1"])');
1518                    if (firstInput) setTimeout(function () { firstInput.focus(); }, 120);
1519                    return true;
1520                }function restoreFormPane() {
1521                    if (formPane && formHome && formHome.parent) {
1522                        formHome.parent.insertBefore(formPane, formHome.before);
1523                    }
1524                    formPane = null;
1525                    formHome = null;
1526                    if (formWrap) { formWrap.style.display = 'none'; formWrap.style.minHeight = ''; }
1527                    if (headBlock) headBlock.style.minHeight = '';
1528                    if (slotRow) slotRow.style.display = 'none';
1529                    // Drop any leftover animation state, or the next open would
1530                    // start pinned to the previous step's height.
1531                    if (panel) panel.style.height = '';
1532                }
1533
1534                // "change" on the chip: back to the calendar, same panel.
1535                if (slotChange) slotChange.addEventListener('click', function () {
1536                    if (typeof window.__pbReopenScheduler === 'function') window.__pbReopenScheduler();
1537                });
1538
1539                function handoff(slot, tz) {
1540                    if (handoffDone || !slotHandler) return;
1541                    handoffDone = true;
1542                    var fn = slotHandler;
1543                    slotHandler = null;
1544                    // With a form pane the panel STAYS OPEN and swaps its body;
1545                    // without one we fall back to the original behaviour of
1546                    // closing and letting the caller open its own surface.
1547                    if (!showFormPane(slot)) closeModalUI();
1548                    fn(slot || null, tz || null);
1549                }
1550
1551                function fireDismiss() {
1552                    if (!dismissHandler) return false;
1553                    var fn = dismissHandler;
1554                    dismissHandler = null;   // once only
1555                    try { fn(); } catch (e) { /* caller's problem, not ours */ }
1556                    return true;
1557                }
1558
1559                if (skipBtn) skipBtn.addEventListener('click', function () {
1560                    // A dismissible prompt with no form behind it: record the
1561                    // dismissal and close, rather than handing off to a step
1562                    // that doesn't exist.
1563                    if (!slotHandler && dismissHandler) { fireDismiss(); closeScheduler(); return; }
1564                    handoff(null, null);
1565                });
1566
1567                function closeScheduler() {
1568                    // However this prompt is being left — skip, X, Escape,
1569                    // backdrop — it counts as shown.
1570                    fireDismiss();
1571                    // Step 2 is showing in this panel: close for real and give the
1572                    // borrowed form back to the page. No end-of-flow callbacks —
1573                    // the visitor abandoned, they didn't finish.
1574                    if (handoffDone) {
1575                        closeModalUI();
1576                        setTimeout(function () { restoreFormPane(); resetThanks(); }, 320);
1577                        return;
1578                    }
1579                    // Scheduler-first WITHOUT an in-panel form: dismissing is
1580                    // treated as the skip, so the visitor still reaches the
1581                    // caller's own form rather than losing the download.
1582                    // With a form pane we don't do that — the panel would appear
1583                    // to ignore the X. The skip link is the route to step 2.
1584                    if (slotHandler && !formPane) { handoff(null, null); return; }
1585                    if (slotHandler) { slotHandler = null; formPane = null; }
1586
1587                    closeModalUI();
1588
1589                    var resolve = currentResolve;
1590                    var didBook = booked;
1591                    currentResolve = null;
1592                    booked = false;
1593                    // Cleared here too, so a later cold open can't inherit a
1594                    // thank-you target from a dismissed download flow.
1595                    thankYouUrl = null;
1596                    resetThanks();
1597
1598                    // An explicit per-open callback is honoured whether or not this
1599                    // was a cold open. A caller that passed onResolve has asked to be
1600                    // told the outcome; coldOpen exists to suppress the GLOBAL __pb*
1601                    // download fallbacks below, which is what it was added for.
1602                    //
1603                    // Without this the Solutions Lab could never learn that a booking
1604                    // happened — it opens inline — so its done state went on offering
1605                    // "Impatient? Grab a slot on our calendar" to someone who had just
1606                    // grabbed one.
1607                    if (resolve) {
1608                        coldOpen = false;
1609                        resolve(didBook);
1610                        return;
1611                    }
1612                    if (coldOpen) {
1613                        // Not part of a download flow and no explicit callback, so the
1614                        // globals must not fire — otherwise dismissing this would
1615                        // surface a "check your inbox" card for a download the visitor
1616                        // never requested.
1617                        coldOpen = false;
1618                        return;
1619                    }
1620                    if (didBook) {
1621                        // A booking completed inside the iframe and its confirmation
1622                        // already showed — close the underlying download modal too, so
1623                        // we don't re-surface the "check your inbox" card. The flow
1624                        // ends on the booking confirmation (single success message).
1625                        if (window.__pbCloseDownloadModal) window.__pbCloseDownloadModal();
1626                    } else {
1627                        // Visitor dismissed the walkthrough without booking — now show
1628                        // the inline download confirmation underneath.
1629                        if (window.__pbShowDownloadSuccess) window.__pbShowDownloadSuccess();
1630                    }
1631                }
1632
1633                // ── Show / hide ───────────────────────────────────────────
1634                // Two steps, because the panel now animates: display first so the
1635                // element has a box, then .is-in on the next paint to trigger the
1636                // transition. The reflow between them is a synchronous
1637                // `void offsetWidth`, NOT requestAnimationFrame — rAF is paused in
1638                // hidden and throttled tabs, which would leave the sheet stuck at
1639                // opacity 0 with no error. That exact bug cost a debugging session
1640                // on the consult sheet this replaces.
1641                var panel = modal.querySelector('[data-role="sched-panel"]') ||
1642                            modal.firstElementChild;
1643                var closeT = null;
1644
1645                
1646                
1647                var IFRAME_BASE_H = 560;
1648                var frameRO = null;
1649
1650                function fitFrameToContent() {
1651                    if (!frame) return;
1652                    var doc;
1653                    try { doc = frame.contentDocument; } catch (e) { return; }
1654                    if (!doc || !doc.body) return;
1655                    var h = Math.max(doc.documentElement ? doc.documentElement.scrollHeight : 0,
1656                                     doc.body.scrollHeight, 0);
1657                    if (h > 0) frame.style.height = h + 'px';
1658                }
1659
1660                function watchFrameHeight() {
1661                    var doc, win;
1662                    try { doc = frame && frame.contentDocument; win = frame && frame.contentWindow; }
1663                    catch (e) { return; }
1664                    if (!doc || !doc.body) return;
1665                    fitFrameToContent();
1666                    if (frameRO) { frameRO.disconnect(); frameRO = null; }
1667
1668                    // The grid grows and shrinks as the visitor changes date or
1669                    // the morning/evening tab, so one measurement is never
1670                    // enough. Note the constructor: it must be the IFRAME's
1671                    // ResizeObserver, not ours. Observations belong to the
1672                    // document that created the observer, so a parent-window
1673                    // observer watching a node inside the child silently never
1674                    // fires — the box stayed at its 560px placeholder while the
1675                    // content underneath grew to 605.
1676                    if (win && typeof win.ResizeObserver === 'function') {
1677                        frameRO = new win.ResizeObserver(fitFrameToContent);
1678                        frameRO.observe(doc.body);
1679                    }
1680
1681                    // Safety net for the first render: the slot grid arrives
1682                    // from a fetch after load, so the measurement above can land
1683                    // before there is anything to measure. Cheap, bounded, and
1684                    // stops as soon as the height settles.
1685                    var polls = 0, lastH = -1;
1686                    (function settle() {
1687                        if (polls++ > 12) return;                    // ~3s
1688                        fitFrameToContent();
1689                        var h = frame ? parseInt(frame.style.height, 10) : 0;
1690                        if (h === lastH && polls > 3) return;        // stable
1691                        lastH = h;
1692                        setTimeout(settle, 250);
1693                    })();
1694                }
1695
1696                if (frame) frame.addEventListener('load', watchFrameHeight);
1697
1698                // Back to the placeholder height before a new document loads, so
1699                // a tall previous render doesn't leave a gap under a short one.
1700                function resetFrameHeight() {
1701                    if (frameRO) { frameRO.disconnect(); frameRO = null; }
1702                    if (frame) frame.style.height = IFRAME_BASE_H + 'px';
1703                }
1704
1705                function ensureIconFont() {
1706                    if (document.getElementById('pbs-iconfont')) return;
1707                    if (document.querySelector('link[href*="font-awesome"],link[href*="fontawesome"]')) return;
1708                    var l = document.createElement('link');
1709                    l.id = 'pbs-iconfont';
1710                    l.rel = 'stylesheet';
1711                    l.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
1712                    document.head.appendChild(l);
1713                }
1714
1715                function openModalUI() {
1716                    // Fetched early so the stylesheet has arrived by the time a
1717                    // booking completes and the confirmation renders.
1718                    ensureIconFont();
1719                    clearTimeout(closeT);
1720                    modal.style.display = 'flex';
1721                    document.body.style.overflow = 'hidden';
1722                    void modal.offsetWidth;
1723                    modal.classList.add('is-open');
1724                }
1725
1726                function closeModalUI() {
1727                    modal.classList.remove('is-open');
1728                    // Keep it displayed until the slide-out finishes. The timeout is a
1729                    // fallback rather than the mechanism: transitionend does not fire
1730                    // if the property never animates (reduced-motion, or a browser
1731                    // that ignores the transition), which would leave the modal
1732                    // permanently covering the page.
1733                    clearTimeout(closeT);
1734                    closeT = setTimeout(function () {
1735                        modal.style.display = 'none';
1736                        document.body.style.overflow = '';
1737                        if (panel) panel.style.transform = '';   // clear any drag offset
1738                    }, 300);
1739                }
1740
1741                function isOpen() { return modal.classList.contains('is-open'); }
1742
1743                var closeBtn = document.getElementById('pb-scheduler-close');
1744                if (closeBtn) closeBtn.addEventListener('click', closeScheduler);
1745                modal.addEventListener('click', function (e) {
1746                    if (e.target === modal) closeScheduler();
1747                });
1748                // Keyed off the class, not style.display: display is now 'flex' for
1749                // the whole slide-out too, so the old test would have fired a second
1750                // close mid-animation.
1751                document.addEventListener('keydown', function (e) {
1752                    if (e.key === 'Escape' && isOpen()) closeScheduler();
1753                });
1754                // After a successful booking the embedded confirmation posts
1755                // 'closeModal' — mark it booked and close the flow cleanly.
1756                //
1757                // It also posts a structured 'cadient:booked' immediately, carrying
1758                // the slot. We act on that ONLY when the caller asked for a
1759                // thank-you redirect: reacting to it otherwise would close the
1760                // modal at once and cut short the in-frame confirmation that every
1761                // other entry point currently ends on.
1762                window.addEventListener('message', function (e) {
1763                    if (e.data === 'closeModal') {
1764                        // Once our own confirmation is up, this 3s-delayed message
1765                        // from the iframe must not tear the modal down underneath
1766                        // it — the visitor is reading the thank-you.
1767                        if (thanksShown) return;
1768                        booked = true; closeScheduler(); return;
1769                    }
1770
1771                    if (!e.data || e.origin !== window.location.origin) return;
1772
1773                    // Scheduler-first: the iframe hands the picked slot back
1774                    // instead of booking it, because there's no lead yet. The
1775                    // caller holds it and commits the booking with its form.
1776                    if (e.data.type === 'cadient:slot') {
1777                        handoff(e.data.slot, e.data.timeZone);
1778                        return;
1779                    }
1780
1781                    // Booked: stamp the prompt now rather than waiting for the
1782                    // close, so a tab crash mid-confirmation can't re-greet
1783                    // someone who has a meeting on the calendar.
1784                    if (e.data.type === 'cadient:booked') fireDismiss();
1785
1786                    // Structured payload. Same-origin only — the bare string above
1787                    // stays permissive for the cross-origin WordPress embed, but
1788                    // this one drives a fetch and a DOM swap.
1789                    if (e.data.type !== 'cadient:booked') return;
1790                    if (!thankYouUrl || thanksShown) return;
1791
1792                    booked = true;
1793                    showThanks(e.data.slot, e.data.timeZone);
1794                });
1795
1796                // ── Post-booking confirmation, in place of the scheduler ──
1797                // Fetched rather than pre-rendered: the fragment depends on the
1798                // booked slot, which only exists once the booking is made, and on
1799                // the article's two featured products, which are resolved
1800                // server-side. One template serves this and the standalone page.
1801                function showThanks(slot, tz) {
1802                    var url = thankYouUrl;
1803                    if (slot) url += (url.indexOf('?') === -1 ? '?' : '&') +
1804                        'slot=' + encodeURIComponent(slot);
1805                    if (tz) url += '&tz=' + encodeURIComponent(tz);
1806
1807                    fetch(url, { credentials: 'same-origin' })
1808                        .then(function (r) { if (!r.ok) throw new Error(r.status); return r.text(); })
1809                        .then(function (html) {
1810                            if (!thanksEl) throw new Error('no host');
1811                            thanksEl.innerHTML = html;
1812                            thanksShown = true;
1813                            // style.display, NOT the hidden attribute: the iframe
1814                            // carries Tailwind's `block`, and .block{display:block}
1815                            // outranks the UA's [hidden]{display:none}. Setting
1816                            // hidden left it laid out as a 560px blank gap above
1817                            // the confirmation.
1818                            if (frame) frame.style.display = 'none';
1819                            // The modal's own heading duplicates the
1820                            // confirmation's, so it goes — but the bar holding the
1821                            // close button stays.
1822                            if (headIcon) headIcon.style.display = 'none';
1823                            if (headText) headText.style.display = 'none';
1824                            if (headBlock) {
1825                                headBlock.style.borderBottomColor = 'transparent';
1826                                headBlock.style.paddingBottom = '0';
1827                            }
1828                            // The skip footer offered "Maybe later" on a booking
1829                            // that had just succeeded — it read as though the
1830                            // booking had not taken, and clicking it only closed
1831                            // the modal. There is nothing left to skip here.
1832                            if (skipWrap) skipWrap.style.display = 'none';
1833                            // A CTA pointing at the page we are already on should
1834                            // close the modal, not reload it. Bound here because
1835                            // innerHTML never runs 
1835<script> in the fragment.
1836                            var tyCta = thanksEl.querySelector('[data-role="ty-cta"]');
1837                            if (tyCta) {
1838                                tyCta.addEventListener('click', function (ev) {
1839                                    var href = tyCta.getAttribute('href') || '';
1840                                    if (href && href.split('?')[0] === window.location.pathname) {
1841                                        ev.preventDefault();
1842                                        closeScheduler();
1843                                    }
1844                                });
1845                            }
1846                            thanksEl.style.display = '';
1847                            var body = modal.querySelector('[data-role="sched-body"]');
1848                            if (body) body.scrollTop = 0;
1849                        })
1850                        .catch(function () {
1851                            // Fetch failed and the meeting is already booked, so
1852                            // fall back to the iframe's own confirmation rather than
1853                            // leaving a blank panel. It closes itself after 3s.
1854                            thanksShown = false;
1855                        });
1856                }
1857
1858                // Put the modal back the way it was, so the next open shows the
1859                // scheduler and not a stale confirmation.
1860                
1861                window.pbSchedulerShowFragment = function (html) {
1862                    if (!thanksEl) return false;
1863                    // Re-opening a finished flow: the panel is closed, so open it
1864                    // here rather than letting the caller fall back to its own
1865                    // (much smaller) card — that size flip is exactly what the
1866                    // single-panel work was for.
1867                    if (!isOpen()) {
1868                        if (frame) { resetFrameHeight(); frame.src = 'about:blank'; }
1869                        handoffDone = true;
1870                        slotHandler = null;
1871                        if (skipWrap) skipWrap.style.display = 'none';
1872                        openModalUI();
1873                    }
1874                    if (formWrap) formWrap.style.display = 'none';
1875                    if (frame) frame.style.display = 'none';
1876                    if (headIcon) headIcon.style.display = 'none';
1877                    if (headText) headText.style.display = 'none';
1878                    if (headBlock) {
1879                        headBlock.style.borderBottomColor = 'transparent';
1880                        headBlock.style.paddingBottom = '0';
1881                    }
1882                    thanksEl.innerHTML = html;
1883                    thanksEl.style.display = '';
1884                    thanksShown = true;
1885                    var body = modal.querySelector('[data-role="sched-body"]');
1886                    if (body) body.scrollTop = 0;
1887                    return true;
1888                };
1889
1890                // Whether the panel is currently hosting a caller's form.
1891                window.pbSchedulerHasFormPane = function () { return !!formPane; };
1892
1893                function resetThanks() {
1894                    thanksShown = false;
1895                    if (thanksEl) { thanksEl.style.display = 'none'; thanksEl.innerHTML = ''; }
1896                    if (formWrap) formWrap.style.display = 'none';
1897                    if (frame) frame.style.display = '';
1898                    if (headIcon) headIcon.style.display = '';
1899                    if (headText) headText.style.display = '';
1900                    if (headBlock) {
1901                        headBlock.style.borderBottomColor = '';
1902                        headBlock.style.paddingBottom = '';
1903                    }
1904                }
1905
1906                // ── Drag to dismiss ───────────────────────────────────────
1907                // Handle only, and that is a constraint rather than a choice: the
1908                // panel body is a same-origin iframe, and pointer events inside a
1909                // nested document never reach this one, so a drag begun over the
1910                // scheduler cannot be tracked. Hence the visible grip.
1911                //
1912                // Pointer Events, not touchstart/touchmove: one code path covers
1913                // touch, pen and mouse, and setPointerCapture keeps delivering moves
1914                // if the finger slides outside the handle — which it will, because
1915                // the gesture is downward and the handle is 14px tall.
1916                var grip = modal.querySelector('[data-role="sched-grip"]');
1917                if (grip && panel && window.PointerEvent) {
1918                    var startY = 0, dy = 0, dragging = false;
1919                    var DISMISS_PX = 90;     // past this, let go and it closes
1920
1921                    grip.addEventListener('pointerdown', function (e) {
1922                        dragging = true; startY = e.clientY; dy = 0;
1923                        panel.classList.add('is-dragging');
1924                        grip.setPointerCapture(e.pointerId);
1925                    });
1926
1927                    grip.addEventListener('pointermove', function (e) {
1928                        if (!dragging) return;
1929                        dy = e.clientY - startY;
1930                        // Downward only. Allowing an upward drag would lift the sheet
1931                        // off the bottom edge and expose the backdrop beneath it.
1932                        if (dy < 0) dy = 0;
1933                        panel.style.transform = 'translateY(' + dy + 'px)';
1934                    });
1935
1936                    function endDrag() {
1937                        if (!dragging) return;
1938                        dragging = false;
1939                        panel.classList.remove('is-dragging');
1940                        if (dy > DISMISS_PX) {
1941                            // Hand back to the normal close path so the end-state
1942                            // callbacks still run — a dismissed sheet has to behave
1943                            // exactly like pressing the × or Escape.
1944                            panel.style.transform = '';
1945                            closeScheduler();
1946                        } else {
1947                            panel.style.transform = '';   // springs back via the transition
1948                        }
1949                        dy = 0;
1950                    }
1951                    grip.addEventListener('pointerup', endDrag);
1952                    grip.addEventListener('pointercancel', endDrag);
1953                }
1954            }) ();
1955    </script>
1955
1956
1957<script>
1958    const menuBtn = document.getElementById('mobile-menu-btn');
1959    const mobileMenu = document.getElementById('mobile-menu');
1960    if (menuBtn && mobileMenu) {
1961        menuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
1962    }
1963</script>
1963
1964
1965<main id="main-content">
1966
1967
1968<!-- ══════════════════════════════════════════════════════════
1969     SECTION 1 — Agentic Hero (SmartSuite Smart Agents)
1970     All styles are scoped under agh- prefixed classes so nothing
1971     leaks into the shared header/footer or Tailwind sections.
1972     ══════════════════════════════════════════════════════════ -->
1973<style>
1974    .agh-block{
1975        /* tokens matched to the page: bg = other cream sections, muted = text-gray-500,
1976           accent-soft/border = the page's #fff7f5/#fee2d5 soft-orange pair */
1977        --agh-bg:#f7f5f2; --agh-ink:#111827; --agh-muted:#6b7280; --agh-dim:#9CA3AF;
1978        --agh-accent:#fe4a23; --agh-accent-soft:#fff7f5; --agh-accent-line:#fee2d5;
1979        --agh-blue:#0077b6; --agh-line:#E5E7EB;
1980        color:var(--agh-ink);
1981    }
1982    .agh-wrap{max-width:1280px;margin:0 auto;padding:0 32px}
1983
1984    .agh-hero{background:var(--agh-bg);text-align:center;padding:64px 0 56px;position:relative;overflow:hidden}
1985    .agh-hero::before{
1986        content:'';position:absolute;inset:0;pointer-events:none;
1987        background:
1988            radial-gradient(ellipse 700px 380px at 85% 0%, rgba(254,74,35,.06), transparent 60%),
1989            radial-gradient(ellipse 600px 360px at 8% 100%, rgba(0,119,182,.05), transparent 60%);
1990    }
1991    .agh-hero > .agh-wrap{position:relative;z-index:1}
1992
1993    .agh-badge{
1994        display:inline-flex;align-items:center;gap:8px;
1995        font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--agh-accent);
1996        background:var(--agh-accent-soft);border:1px solid var(--agh-accent-line);
1997        padding:7px 16px;border-radius:100px;margin-bottom:26px;
1998    }
1999    .agh-badge .agh-pulse{width:7px;height:7px;border-radius:50%;background:var(--agh-accent);animation:agh-pulse 2s ease-in-out infinite}
2000    /* keyframes renamed from "pulse" to avoid clobbering Tailwind's animate-pulse */
2001    @keyframes agh-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(254,74,35,.45)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(254,74,35,0)}}
2002
2003    .agh-hero h1{
2004        /* caps at 3.5rem to match Section 3's display headline */
2005        font-size:clamp(2rem,4vw,3.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;
2006        max-width:1010px;margin:0 auto 20px;color:var(--agh-ink);
2007    }
2008    .agh-hero h1 .agh-hl{color:var(--agh-accent)}
2009
2010    .agh-sub{
2011        font-size:clamp(16px,1.5vw,18px);color:var(--agh-muted);line-height:1.65;
2012        max-width:700px;margin:0 auto 14px;
2013    }
2014    .agh-sub b{color:var(--agh-ink);font-weight:700}
2015
2016    .agh-ats{
2017        display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
2018        font-size:14px;color:var(--agh-muted);margin-bottom:32px;
2019    }
2020    .agh-chip{
2021        background:#fff;border:1px solid var(--agh-line);border-radius:100px;
2022        padding:5px 13px;font-weight:600;color:var(--agh-muted);font-size:12px;
2023    }
2024
2025    .agh-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
2026    .agh-bridge{
2027        display:inline-flex;align-items:center;gap:7px;margin-bottom:46px;
2028        font-size:14px;font-weight:600;color:var(--agh-muted);text-decoration:none;transition:color .15s;
2029    }
2030    .agh-bridge:hover{color:var(--agh-accent)}
2031    /* offset for the sticky header when jumping to the anchor */
2032    #agh-problems{scroll-margin-top:96px}
2033    .agh-btn{
2034        /* rounded-xl + darken hover, matching sitewide CTAs */
2035        font-size:16px;font-weight:600;padding:13px 30px;border-radius:0.75rem;
2036        text-decoration:none;transition:background-color .15s, border-color .15s, color .15s;
2037        display:inline-flex;align-items:center;justify-content:center;gap:10px;
2038    }
2039    .agh-btn .agh-stack{display:flex;flex-direction:column;align-items:center;line-height:1.3;text-align:center}
2040    .agh-btn .agh-t{display:inline-flex;align-items:center;gap:8px}
2041    .agh-btn small{font-weight:400;font-size:12px;margin-top:2px;opacity:.85}
2042    .agh-btn-primary{background:var(--agh-accent);color:#fff}
2043    .agh-btn-primary:hover{background:#d93d1a}
2044    .agh-btn-ghost{color:var(--agh-ink);border:1.5px solid var(--agh-ink);background:transparent}
2045    .agh-btn-ghost:hover{background:#fff}
2046
2047    .agh-counter-label{
2048        font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
2049        color:var(--agh-dim);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px;
2050    }
2051    .agh-counter-label .agh-live{display:inline-flex;align-items:center;gap:5px;color:var(--agh-accent);letter-spacing:.08em}
2052    .agh-counter-label .agh-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--agh-accent);animation:agh-pulse 1.6s ease-in-out infinite}
2053    .agh-odometer{
2054        font-variant-numeric:tabular-nums;
2055        font-size:clamp(42px,7vw,90px);font-weight:800;letter-spacing:0;line-height:1;
2056        display:flex;justify-content:center;align-items:baseline;gap:2px;color:var(--agh-ink);
2057    }
2058    .agh-odometer .agh-sep{color:var(--agh-dim);font-weight:300;font-size:.7em;transform:translateY(-4px)}
2059    .agh-odometer .agh-tail{color:var(--agh-accent)}
2060    .agh-counter-sub{margin-top:12px;font-size:14px;color:var(--agh-muted)}
2061    .agh-counter-sub b{color:var(--agh-ink)}
2062
2063    .agh-stats{background:#fff;border-top:1px solid var(--agh-line);border-bottom:1px solid var(--agh-line)}
2064    .agh-stats-inner{
2065        max-width:1280px;margin:0 auto;padding:24px 32px;
2066        display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
2067    }
2068    /* ── "From the Playbook" guidance rows ──────────────────────────────
2069       Row 01 is the default selection: tinted fill, accent border, solid accent
2070       number badge. Rows 02-05 previously carried hover:bg-gray-50 plus
2071       group-hover:text-[#fe4a23] on the arrow — but that arbitrary-value class
2072       is not in the prebuilt sheet (no JIT), so the only hover feedback that
2073       ever landed was a #f9fafb wash on white, which is why they read as dead.
2074
2075       The hover state is deliberately WEAKER than the selection: a faint accent
2076       tint and the number/arrow picking up the accent colour, but no border and
2077       no filled badge. Those two remain exclusive to row 01, so hovering never
2078       looks like selecting. --agh-guide-accent is set per list, because the
2079       Pipeline panel is violet where the rest are orange. */
2080    .agh-guide-row{transition:background-color .16s ease,color .16s ease}
2081    /* An explicit tint per list rather than color-mix(): one less thing that can
2082       resolve to transparent if the custom property is ever missing, and it
2083       works without the wide-gamut colour functions.
2084
2085       The tint is a whisper (#FFFBFA) and deliberately LIGHTER than the selected
2086       row's fill (#FFF7F5) — at my first attempt the two were within one step of
2087       each other and hovering looked like selecting. The real hover signal is the
2088       number and arrow taking the accent colour; the fill only supports it. */
2089    /* Gated on a real pointer: ungated, a tap on a touch device leaves the hover
2090       state stuck on whichever row was last touched. */
2091    @media (hover:hover) and (pointer:fine){
2092        .agh-guide-row:not(.is-current):hover{background:var(--agh-guide-tint,#FAFAF9)}
2093        .agh-guide-row:not(.is-current):hover>span:first-child,
2094        .agh-guide-row:not(.is-current):hover>i{color:var(--agh-guide-accent)}
2095    }
2096    /* Touch has no hover, so rows 02-05 would sit permanently grey — the same
2097       "looks disabled" problem, but unfixable by hovering. They get a standing
2098       affordance instead: the arrow carries the accent at reduced strength.
2099       Still clearly weaker than row 01, which keeps the fill, the border and a
2100       full-strength arrow beside a solid badge. */
2101    @media (hover:none){
2102        .agh-guide-row:not(.is-current)>i{color:var(--agh-guide-accent);opacity:.55}
2103    }
2104    .agh-guide-row:not(.is-current):focus-visible{
2105        outline:2px solid var(--agh-guide-accent);outline-offset:2px}
2106
2107    .agh-stat{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;position:relative}
2108    .agh-stat:not(:last-child)::after{content:'';position:absolute;right:-10px;top:15%;height:70%;width:1px;background:var(--agh-line)}
2109    .agh-stat .agh-n{font-size:24px;font-weight:800;letter-spacing:-.02em}
2110    .agh-stat .agh-n em{font-style:normal;color:var(--agh-accent)}
2111    .agh-stat .agh-n.agh-nblue em{color:var(--agh-blue)}
2112    .agh-stat .agh-l{font-size:12px;color:var(--agh-muted)}
2113    .agh-stat .agh-n.agh-dated{color:var(--agh-accent);font-size:20px}
2114
2115    .agh-lineage{padding:18px 0 22px;text-align:center;background:#f9fafb}
2116    .agh-lineage-inner{
2117        display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
2118        font-size:12px;color:var(--agh-muted);letter-spacing:.01em;
2119    }
2120    .agh-lineage-inner .agh-lsep{color:var(--agh-accent);opacity:.55;font-size:9px}
2121    .agh-lineage-inner .agh-now{color:var(--agh-accent);font-weight:700}
2122
2123    @media(max-width:820px){
2124        .agh-stats-inner{grid-template-columns:repeat(2,1fr);row-gap:22px}
2125        .agh-stat:nth-child(2)::after{display:none}
2126    }
2127    @media(max-width:480px){
2128        .agh-hero{padding:48px 0 44px}
2129        .agh-wrap{padding:0 20px}
2130        .agh-ctas{flex-direction:column;align-items:stretch}
2131    }
2132
2133    /* ══════════════════════════════════════════════════════════
2134       HERO (ch-*) — ported from the Cadient Hero design export.
2135       Own namespace so nothing here can touch the agh-* rules above
2136       or the Tailwind build. All values are literal CSS: the site
2137       ships a prebuilt Tailwind file, so utilities not already used
2138       elsewhere in the codebase are absent from the compiled sheet.
2139       ══════════════════════════════════════════════════════════ */
2140    .ch-hero{position:relative;width:100%;
2141        /* 80px is the sticky site header. Deliberately not 100vh: the
2142           export's nav floated over the video, ours sits above it. */
2143        height:calc(100vh - 80px);height:calc(100dvh - 80px);
2144        min-height:560px;max-height:900px;overflow:hidden;background:#141414}
2145    /* Stack, bottom to top: gradient fallback (0) → video (1) → scrim (2) →
2146       sheen/lift (3) → wash/corner (4) → copy (5). The gradient sits at 0 and
2147       comes AFTER the video in the DOM, so it must be given a lower z-index
2148       explicitly or it paints straight over the footage. */
2149    /* No filter at all — the footage plays sharp at full brightness. The copy is
2150       protected by the hard-edged gradient below instead of by blur. The scale
2151       is gone too; it only existed to hide the soft edges blur left. */
2152    .ch-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
2153    .ch-layer{position:absolute;inset:0;pointer-events:none}
2154    .ch-base{z-index:0;background:radial-gradient(120% 90% at 78% 18%,#3a2a24 0%,#1c1614 45%,#141414 100%);opacity:.9}
2155    /* Diagonal rather than a straight left-to-right band, and never fully
2156       opaque — peak .92 lets the footage read faintly even behind the copy,
2157       which stops the left half looking like a flat black panel. 112deg keeps
2158       the weight at the top-left where the copy sits and clears toward the
2159       bottom-right. Alpha stays >=.6 out to ~58% (the H1's right edge) so the
2160       headline holds contrast on the brightest frames — see the luminance
2161       measurements: raw video behind the copy runs 100-161. */
2162    .ch-wash{z-index:4;background:linear-gradient(112deg,
2163        rgba(20,20,20,.9) 0%,
2164        rgba(20,20,20,.85) 32%,
2165        rgba(20,20,20,.76) 50%,
2166        rgba(20,20,20,.52) 66%,
2167        rgba(20,20,20,.2) 80%,
2168        rgba(20,20,20,0) 92%)}
2169
2170    /* The play button is bottom-left, in the copy's column, and is positioned
2171       against BOTH references at once:
2172
2173         --ch-play-bottom  its distance from the hero's bottom edge
2174         --ch-play-band    the strip at the foot of the hero reserved for it
2175
2176       .ch-inner carries the band as padding-bottom, which shrinks the box the
2177       copy is centred in and so lifts the CTA row clear of the button. That is
2178       what makes overlap impossible rather than merely unlikely: a fixed `bottom`
2179       alone can't work, because the copy is centred (measuring from the hero's
2180       middle) while the button is pinned (measuring from its bottom) — the two
2181       close on each other as the hero shrinks, which is how they collided before.
2182
2183       Both values scale with viewport HEIGHT, because the spare room does. Hero
2184       height minus copy height is 449px at 1920x1080 but only 133px at 1366x660,
2185       so a single generous band would have pushed the headline off the top of the
2186       shorter hero. Measured slack at every step below, worst case 1366x660. */
2187    .ch-hero{--ch-play-bottom:60px;--ch-play-band:132px}
2188    @media(max-height:860px){.ch-hero{--ch-play-bottom:44px;--ch-play-band:112px}}
2189    /* Below ~700px tall the hero is genuinely short on room — at 1366x660 there is
2190       only 133px of slack to hold a 46px button plus margins — so both values
2191       tighten again. This is the binding case: it yields a 36px gap under the CTA
2192       row and 22px above the eyebrow. Earlier settings gave 20px/18px here, which
2193       cleared but looked cramped on a very common laptop size. */
2194    @media(max-height:700px){.ch-hero{--ch-play-bottom:28px;--ch-play-band:88px}}
2195
2196    .ch-inner{position:relative;z-index:5;height:100%;display:flex;align-items:center;
2197        width:min(1240px,calc(100% - 32px));margin:0 auto;
2198        padding-bottom:var(--ch-play-band)}
2199    .ch-copy{max-width:860px}
2200
2201    /* Plain uppercase label, not a glass pill: the capsule, border, blur and
2202       orange dot were all removed so the headline carries the weight. */
2203    .ch-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.1em;line-height:1.3;
2204        text-transform:uppercase;color:rgba(255,255,255,.82);
2205        animation:chUp .7s cubic-bezier(.2,.7,.2,1) .05s both}
2206
2207    .ch-h1{margin:22px 0 0;font-size:clamp(34px,4.6vw,64px);line-height:1.04;font-weight:900;
2208        letter-spacing:-.03em;color:#fff;text-wrap:balance;max-width:24ch;
2209        animation:chUp .7s cubic-bezier(.2,.7,.2,1) .14s both}
2210    .ch-beat{display:block;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:-.02em}
2211    .ch-line{display:block}
2212
2213    .ch-sub{margin:20px 0 0;max-width:560px;font-size:15px;line-height:1.6;font-weight:400;
2214        color:rgba(255,255,255,.8);text-wrap:pretty;animation:chUp .7s cubic-bezier(.2,.7,.2,1) .24s both}
2215    /* The proof figure carries the sentence, so it steps up a size and to full
2216       white while the rest of the subhead stays at 80%. */
2217    .ch-sub-em{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#fff}
2218
2219    .ch-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:38px;
2220        animation:chUp .7s cubic-bezier(.2,.7,.2,1) .34s both}
2221    .ch-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:#FE4A23;color:#fff;
2222        font-size:16px;font-weight:700;padding:16px 28px;border-radius:8px;white-space:nowrap;cursor:pointer;
2223        transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
2224    .ch-btn:hover{background:#E63E1A;color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(254,74,35,.35)}
2225    .ch-link{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:15px;font-weight:600;
2226        padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.42);white-space:nowrap;
2227        transition:border-color .2s ease}
2228    .ch-link:hover{border-color:#FE4A23}
2229    .ch-arrow{color:#FE4A23;font-weight:800}
2230
2231    /* Floating play button, bottom-LEFT, aligned to the copy column.
2232
2233       `left` tracks that column: the wrap is min(1240px, 100% - 32px), so
2234       50% - 620px lines up with the copy on wide screens and falls back to the
2235       16px gutter below 1272px.
2236
2237       Clearance from the CTA row is NOT handled here — it comes from the
2238       --ch-play-band reserve on .ch-inner above. See that comment for why the
2239       button's own `bottom` can't solve it alone.
2240
2241       Solid dark disc rather than a glass circle — it holds up over bright
2242       footage, where a translucent white pill disappears. Fades in with the rest
2243       of the hero. */
2244    .ch-play{position:absolute;z-index:20;bottom:var(--ch-play-bottom);
2245        left:max(16px,calc(50% - 620px));
2246        display:inline-flex;align-items:center;justify-content:center;
2247        padding:0;border:0;background:transparent;cursor:pointer;border-radius:999px;
2248        transition:transform .2s ease;
2249        animation:chUp .7s cubic-bezier(.2,.7,.2,1) .46s both}
2250    .ch-play:hover{transform:scale(1.06)}
2251    .ch-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
2252    .ch-play-dot{display:inline-flex;align-items:center;justify-content:center;
2253        width:46px;height:46px;border-radius:999px;flex:0 0 auto;
2254        background:rgba(20,20,20,.9);box-shadow:0 4px 18px rgba(0,0,0,.3);
2255        transition:background .2s ease}
2256    .ch-play:hover .ch-play-dot{background:#FE4A23}
2257    /* Border triangle — identical on every platform, unlike the ▶ glyph. */
2258    .ch-play-tri{display:block;width:0;height:0;margin-left:3px;
2259        border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
2260
2261    @keyframes chUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
2262
2263    /* Tour lightbox */
2264    .ch-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
2265        padding:24px;background:rgba(20,20,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
2266    .ch-modal.is-open{display:flex}
2267    .ch-modal-panel{position:relative;width:min(1000px,100%);border-radius:24px;overflow:hidden;
2268        background:#141414;border:1px solid rgba(255,255,255,.12)}
2269    .ch-modal-stage{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
2270        background:radial-gradient(90% 90% at 50% 30%,#2a1f1c 0%,#141414 100%)}
2271    .ch-tour{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#141414}
2272    .ch-tour-fallback{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}
2273    .ch-tour-fallback p{margin:0;font-size:16px;font-weight:600;color:#fff}
2274    .ch-tour-badge{display:flex;align-items:center;justify-content:center;width:64px;height:64px;
2275        border-radius:999px;background:#FE4A23;color:#fff;font-size:19px;padding-left:4px}
2276    .ch-modal-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
2277        padding:20px 26px;border-top:1px solid rgba(255,255,255,.12);font-size:14.5px;color:#ABABAB}
2278    .ch-modal-cta{display:inline-flex;align-items:center;justify-content:center;background:#FE4A23;color:#fff;
2279        font-size:15px;font-weight:700;padding:13px 22px;border-radius:8px;white-space:nowrap;
2280        transition:background .2s ease,transform .2s ease}
2281    .ch-modal-cta:hover{background:#E63E1A;color:#fff;transform:translateY(-2px)}
2282    .ch-modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:999px;
2283        border:1px solid rgba(255,255,255,.2);background:rgba(20,20,20,.6);color:#fff;font-size:17px;
2284        cursor:pointer;backdrop-filter:blur(8px)}
2285    .ch-modal-close:hover{background:#FE4A23;border-color:#FE4A23}
2286
2287    @media(max-width:860px){
2288        /* Mobile hero is height:auto, so there is no centring to fight and no
2289           spare room to reserve — the clear band below the stacked CTAs is just
2290           the hero's own padding-bottom. The .ch-inner reserve is therefore
2291           cancelled here, or it would double up with that padding.
2292           This block must stay AFTER the max-height queries above: phones are tall
2293           (844-932px) so they match max-height:860px, and the later rule has to
2294           win to keep the 28px offset. */
2295        .ch-hero{height:auto;max-height:none;min-height:0;padding:56px 0 104px;
2296            --ch-play-bottom:28px}
2297        .ch-inner{align-items:flex-start;padding-bottom:0}
2298        .ch-h1{max-width:none}
2299        .ch-play{left:16px}
2300        .ch-play-dot{width:38px;height:38px}
2301        .ch-play-tri{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
2302        /* The copy spans the full width on a phone, so a horizontal gradient
2303           protects nothing — this one runs top-to-bottom instead. Peak .88, not
2304           opaque, and it clears hard through the lower third: that band is empty
2305           apart from the play button, so it's where the footage gets to show. */
2306        .ch-wash{background:linear-gradient(180deg,
2307            rgba(20,20,20,.8) 0%,
2308            rgba(20,20,20,.74) 46%,
2309            rgba(20,20,20,.58) 64%,
2310            rgba(20,20,20,.28) 82%,
2311            rgba(20,20,20,.06) 100%)}
2312    }
2313    @media(max-width:480px){
2314        /* Down from 12.5px so this 60-character label stays to two lines at
2315           phone width. The pill padding it used to need is gone with the pill. */
2316        .ch-eyebrow{font-size:11px;letter-spacing:.08em}
2317
2318        .ch-h1{margin-top:20px;font-size:34px;line-height:1.12;letter-spacing:-.025em}
2319
2320        /* Slightly larger than desktop: at this measure 15px was dense, and
2321           there's no column constraint to fight. */
2322        .ch-sub{margin-top:22px;max-width:none;font-size:16px;line-height:1.6}
2323        .ch-sub-em{font-size:18px}
2324
2325        .ch-ctas{flex-direction:column;align-items:stretch;gap:18px;margin-top:34px}
2326        /* Hug the label instead of filling the column — a full-bleed primary
2327           reads as a form submit rather than a CTA at this width. */
2328        .ch-btn{align-self:flex-start;justify-content:center;font-size:16px;padding:17px 26px}
2329        /* Left-aligned under the primary, hugging its own text — stretched full
2330           width the underline ran the whole column and read as a divider. */
2331        .ch-link{align-self:flex-start;justify-content:flex-start;font-size:15px;padding-bottom:10px}
2332    }
2333    @media(prefers-reduced-motion:reduce){
2334        .ch-eyebrow,.ch-h1,.ch-sub,.ch-ctas{animation:none}
2335    }
2336
2337    /* ══════════════════════════════════════════════════════════
2338       PROOF BAND (cd-*) — second section of the Cadient Hero export.
2339       Replaces the old agh-stats / agh-lineage / trust-strip bands.
2340       ══════════════════════════════════════════════════════════ */
2341    .cd-band{position:relative;background:#fff;padding:64px 0 80px}
2342    .cd-wrap{width:min(1240px,calc(100% - 32px));margin:0 auto}
2343    /* Demoted from a 22px near-black heading to a quiet label — the logos and
2344       metrics are the content here, not the header. */
2345    .cd-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
2346    .cd-head-title{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#4A4A4A}
2347    .cd-head-sub{margin:0;font-size:13px;font-weight:500;color:#9A9A9A}
2348
2349    /* ── Continuous marquee, all widths ──────────────────────────────────
2350       This band used to be a stepped carousel on desktop and a marquee only
2351       below 860px. That inverted once the roster grew from 5 brands to 20: the
2352       carousel advances one card every 2.4s over (20 - 4 + 1) = 17 steps, so a
2353       full pass took 40.8s and most brands were never seen. A marquee shows the
2354       whole roster continuously, which is also what "20 customers" should feel
2355       like. The stepped path stands itself down via isMarquee() below.
2356
2357       The pair of tracks is twice the content width, so translating -50%
2358       advances exactly one set and the duplicate lands where the original
2359       began — no visible seam. */
2360    .cd-track-wrap{overflow:hidden;
2361        /* Fade both edges so cards don't appear to hit the gutter. */
2362        -webkit-mask-image:linear-gradient(to right,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
2363        mask-image:linear-gradient(to right,transparent,#000 2rem,#000 calc(100% - 2rem),transparent)}
2364    /* Stepped, not continuous. A linear keyframe scroll read as a stutter: the
2365       animated element is 8868px wide, sits under a mask-image, and was being
2366       driven at a constant 96px/s — any dropped frame on that layer shows up as
2367       judder, and `will-change` was on .cd-track while .cd-marquee was the thing
2368       actually moving, so the compositor never got the hint.
2369
2370       Now JS advances one card per tick and this transition does the easing, so
2371       the band moves in discrete steps with a dwell between them. Movement only
2372       happens for ~0.5s of each ~1.8s tick, which also means the masked layer
2373       repaints far less. */
2374    .cd-marquee{display:flex;width:max-content;gap:12px;
2375        transition:transform .52s cubic-bezier(.22,.61,.36,1);
2376        will-change:transform}
2377    /* State marker only. Pausing is done in JS (the `hold` flag gates the step
2378       interval) rather than with animation-play-state, because the motion is no
2379       longer a keyframe animation. Kept because the reveal code toggles it and it
2380       is a useful hook for debugging. */
2381    /* Used for the seamless wrap: the jump back to 0 must not animate. */
2382    .cd-marquee.no-anim{transition:none}
2383    .cd-track{display:flex;align-items:stretch;gap:12px;flex:0 0 auto;min-width:auto}
2384    .cd-dup{display:flex}
2385    /* Chrome removed — no border, radius or gradient. The marks sit directly on
2386       the page and lift slightly on hover. */
2387    .cd-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:112px;
2388        padding:14px 8px;border:0;border-radius:0;background:transparent;overflow:hidden;
2389        /* Fixed width, not flex:1 — inside a max-content track a flex basis of 0
2390           collapses to nothing. 210px comfortably clears the widest mark
2391           (Wegmann, 4.76:1) at its 22px cap. */
2392        flex:0 0 210px;min-width:0;
2393        transition:transform .24s cubic-bezier(.2,.7,.2,1),opacity .24s ease}.cd-card:hover{transform:translateY(-3px)}
2394    /* Height comes from the per-logo inline style; width follows the ratio and
2395       is clamped by the card, with contain preventing distortion. */
2396    .cd-logo{max-width:100%;width:auto;object-fit:contain}
2397
2398    /* Explicit column counts rather than auto-fit/minmax: auto-fit could wrap to
2399       a ragged 3 + 1. Steps 4 → 2×2 → 1. */
2400    .cd-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 36px;margin-top:48px}
2401    @media(max-width:1100px){.cd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
2402    @media(max-width:560px){.cd-metrics{grid-template-columns:minmax(0,1fr)}}
2403    .cd-metric{padding:4px 0 6px 22px;border-left:2px solid #DCDCDC}
2404    .cd-metric.is-accent{border-left-color:#FE4A23}
2405    .cd-metric-value{font-size:26px;font-weight:900;letter-spacing:-.035em;line-height:1.08;color:#141414;text-wrap:balance}
2406    .cd-metric.is-accent .cd-metric-value{color:#FE4A23}
2407    .cd-metric-label{margin-top:10px;font-size:13.5px;font-weight:500;line-height:1.5;color:#4A4A4A;max-width:30ch;text-wrap:pretty}
2408
2409    .cd-timeline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;
2410        margin-top:26px;padding-top:22px;border-top:1px solid #DCDCDC}
2411    .cd-tl-item{display:inline-flex;align-items:center;gap:16px}
2412    .cd-tl-label{font-size:13px;font-weight:600;color:#141414;white-space:nowrap}
2413    .cd-tl-label.is-now{color:#FE4A23;font-weight:700}
2414    .cd-tl-sep{font-size:8px;color:#FE4A23;opacity:.55}
2415
2416    /* ══════════════════════════════════════════════════════════
2417       SOLUTIONS LAB (slab-*) — brief box, sits under the proof band.
2418
2419       All explicit CSS, not Tailwind utilities. solutions-lab.html c
2419an use
2420       arbitrary values like rounded-[1.25rem] because it loads the Tailwind CDN
2421       and compiles on the fly; this page ships the prebuilt sheet, where any
2422       utility not already used elsewhere simply doesn't exist. `.rounded-[1.25rem]`
2423       is absent from static/css/tailwind.css — checked — so copying the Lab
2424       markup verbatim would have silently produced square corners.
2425
2426       Type is scaled DOWN from the Lab page: there it's an h1 at up to 3.6rem
2427       because it's the page's own hero. Here it's one section among many, so the
2428       headline sits at the same clamp as the other section h2s on this page
2429       (30-40px) and the body copy matches .cd-metric-label's 15px rather than the
2430       Lab's 17px.
2431       ══════════════════════════════════════════════════════════ */
2432    /* Measured against the rest of the page and corrected to match it:
2433         padding   80px/80px — every other section on this page uses exactly that;
2434                   this was 76/84, which broke the vertical rhythm.
2435         background #F7F5F2 — the warm ground already used by the "Expert guidance"
2436                   section. The first version introduced a third off-white
2437                   (#FBF9F8) alongside that and #F9FAFB, growing the palette for
2438                   no reason.
2439         no border-top — this was the only section on the page with one. Everything
2440                   else delineates by background change alone. *//* ── Playbook filter pills ────────────────────────────────────────────
2441       Desktop: wraps to two rows, guaranteed by spanning the section rather
2442       than the 313px right column (see the note on the markup).
2443
2444       Mobile: a single scrolling row instead of wrapping. At 390px the section
2445       is 311px wide, so nine pills wrap to four rows — roughly 180px of filter
2446       chrome above the first article. A horizontal strip is the usual mobile
2447       pattern and keeps the cards near the top of the section. */
2448    /* Scroll, not wrap, below lg. The section carries md:px-40 — 160px of
2449       padding each side — so at 768px the strip is only 433px wide and the nine
2450       pills (1118px) still needed three rows. Two rows require ~560px, which
2451       only arrives at the lg breakpoint where the strip measures 689px. */
2452    @media (max-width: 1023.98px) {
2453        .pb-tabstrip {
2454            flex-wrap: nowrap;
2455            overflow-x: auto;
2456            -webkit-overflow-scrolling: touch;
2457            scrollbar-width: none;
2458        }
2459        .pb-tabstrip::-webkit-scrollbar { display: none; }
2460        /* Without flex:none the pills compress instead of overflowing. */
2461        .pb-tabstrip > .pb-ftab { flex: none; }
2462    }
2463
2464    /* Phone only: bleed to the screen edges so the row reads as scrollable
2465       rather than clipped. -2rem matches the section's px-8; the equal padding
2466       keeps the first and last pill on the text margin. Not applied above this
2467       width, where the padding is px-40 and there is no edge to reach. */
2468    @media (max-width: 767.98px) {
2469        .pb-tabstrip {
2470            margin-left: -2rem;
2471            margin-right: -2rem;
2472            padding: 2px 2rem;
2473            scroll-padding-left: 2rem;
2474        }
2475    }
2476
2477    .slab{position:relative;overflow:hidden;padding:80px 16px;
2478        background:linear-gradient(180deg,#FFFDFC 0%,#FDF6F3 52%,#FBF0EB 100%)}
2479    /* Decorative bloom behind the input. pointer-events:none so it can never
2480       intercept a click aimed at the card. */
2481    .slab::after{content:'';position:absolute;left:50%;top:40%;
2482        width:940px;height:460px;margin-left:-470px;
2483        pointer-events:none;filter:blur(14px);
2484        background:radial-gradient(closest-side,rgba(254,74,35,.20),rgba(254,74,35,0))}
2485    /* 768px = the same max-w-3xl measure the closing black CTA section uses, rather
2486       than a bespoke 760. Deliberately narrower than the page's 1280 container:
2487       a single input wants a focused column, not a full-bleed one. */
2488    .slab-inner{position:relative;z-index:1;width:min(768px,100%);margin:0 auto;text-align:center}
2489
2490    /* System monospace: avoids a second webfont on the site's heaviest page. Now
2491       only used on the chips — a component detail inside the card, where it reads
2492       as an input affordance. The section kicker uses the page's own convention. */
2493    .slab-mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
2494
2495    /* 11px / 700 / .1em orange, in Inter — matching every other uppercase label on
2496       this page. The Lab page's own kicker is wide-tracked monospace, which looked
2497       imported here: it was the only monospace text and the only 2.5px tracking on
2498       the whole page. */.slab-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
2499        font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
2500        color:#D93D1A;background:#fff;border:1px solid #EFEAE4;border-radius:999px;
2501        padding:7px 16px;box-shadow:0 4px 18px -8px rgba(20,20,20,.12)}
2502    /* 36px/700 deliberately matches #agh-problems' h2 ("Start with what you need
2503       to solve") rather than the Lab page's own 3.6rem/800 hero. Measured: at
2504       40px/800 this section visually outranked the one below it, which is wrong —
2505       they're peers. Differentiation comes from the warm ground and the card, not
2506       from a bigger headline. */
2507    .slab-h2{margin:0 0 14px;font-size:clamp(26px,3.2vw,36px);line-height:1.14;font-weight:700;
2508        letter-spacing:-.025em;color:#141414;text-wrap:balance}
2509    /* Fraunces italic for the accent phrase, matching the Lab page's treatment. */
2510    .slab-em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;color:#FE4A23}
2511    .slab-sub{margin:0 auto 30px;max-width:34rem;font-size:15px;line-height:1.65;color:#4A4A4A;
2512        text-wrap:pretty}
2513
2514    /* ── Agent presence, ported from the Solutions Lab design ─────────────
2515       The hero furniture (full-height wash, badge pill, drifting blobs) is
2516       deliberately NOT ported: this is a section inside a page, and a second
2517       full hero here would fight the rhythm of the bands around it. What comes
2518       across is the part that signals "an agent is waiting": the avatar, the
2519       status pill, the glass card and its breathe. */
2520    .slab-agent{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-left:6px;text-align:left}
2521    .slab-av{position:relative;width:32px;height:32px;flex:none}
2522    .slab-av-ring{position:absolute;inset:0;border-radius:50%;background:#FE4A23;
2523        animation:slab-ring 2.4s ease-out infinite}
2524    .slab-av-face{position:relative;width:32px;height:32px;border-radius:50%;background:#fff;
2525        display:flex;align-items:center;justify-content:center;
2526        box-shadow:0 0 0 1.5px rgba(20,20,20,.9),0 2px 10px -2px rgba(20,20,20,.18)}
2527    /* Cadient mark cropped from img/logo.webp — see solutions-lab.html. */
2528    .slab-av-img{width:23px;height:23px;object-fit:contain;display:block}
2529    .slab-av-live{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
2530        background:#FE4A23;border:2.5px solid #F7F5F2}
2531    .slab-status{display:flex;align-items:center;gap:8px;border-radius:999px;padding:6px 13px;
2532        background:#fff;border:1px solid #E5E7EB}
2533    .slab-status-name{font-size:12.5px;font-weight:700;color:#141414;letter-spacing:-.01em;white-space:nowrap}
2534    .slab-status-sep{width:1px;height:11px;background:#DCDCDC}
2535    .slab-status-txt{font-size:12px;font-weight:500;color:#6C665E}
2536    .slab-status-dots{display:flex;align-items:center;gap:3px;margin-left:2px}
2537    .slab-status-dots i{width:4px;height:4px;border-radius:50%;background:#FE4A23;display:block;
2538        animation:slab-dot 1.2s ease-in-out infinite}
2539    .slab-status-dots i:nth-child(2){animation-delay:.15s}
2540    .slab-status-dots i:nth-child(3){animation-delay:.3s}
2541    /* Desktop keeps the descriptor inline in .slab-status-txt. */
2542    .slab-status-sub{display:none}
2543    @media (max-width:640px){
2544        /* flex-basis 100% on a wrapping row drops it to its own line, so no
2545           wrapper element and the desktop pill is untouched.
2546
2547           text-align:left because .slab-inner is centred and a full-width block
2548           on the wrapped line inherits that — the descriptor's box lined up under
2549           the agent name but its text sat 50px right of it. row-gap 2px: the 8px
2550           column gap is right between row items, too loose between two lines of
2551           one label. */
2552        .slab-status{flex-wrap:wrap;row-gap:2px}
2553        .slab-status-sub{display:block;flex:0 0 100%;text-align:left;
2554            font-size:11.5px;line-height:1.35;color:#6C665E}
2555    }
2556
2557    /* Ghost placeholder + caret */
2558    .slab-ta-wrap{position:relative}
2559    .slab-ghost{position:absolute;left:0;right:0;top:0;font-size:15px;line-height:1.6;
2560        color:#A8A29A;pointer-events:none;white-space:pre-wrap}
2561    .slab-ta-wrap.is-live .slab-ghost{display:none}
2562    .slab-caret{display:inline-block;width:2px;height:17px;background:#FE4A23;
2563        vertical-align:-3px;animation:slab-caret 1s step-end infinite}
2564    /* #6C665E rather than the design's #A8A29A — see the note on the Lab page:
2565       #A8A29A measures 2.47:1 here, below the 4.5:1 AA floor for this size. */
2566    .slab-templates-label{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.1em;
2567        text-transform:uppercase;color:#6C665E;margin-right:2px;white-space:nowrap;align-self:center}
2568    .slab-chips{display:none}
2569    .slab-chips.is-open{display:flex;animation:slab-rise .28s ease both}
2570    .slab-hair{height:1px;margin:14px 0 0;
2571        background:linear-gradient(90deg,rgba(20,20,20,.02),rgba(20,20,20,.10),rgba(20,20,20,.02))}
2572    /* Phone width: same as the Lab page — hide the line, keep its height so the
2573       gap above the CTA doesn't move. After the base rule deliberately. */
2574    @media (max-width:640px){.slab-hair{background:none}}
2575
2576    @keyframes slab-caret{0%,45%{opacity:1}55%,100%{opacity:0}}
2577    @keyframes slab-ring{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.1);opacity:0}}
2578    @keyframes slab-dot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:1}}
2579    @keyframes slab-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
2580    @media (prefers-reduced-motion:reduce){
2581        .slab-av-ring,.slab-status-dots i,.slab-caret,.slab-chips.is-open{animation:none}
2582    }.slab-card{background:#fff;border:1px solid #EFE9E3;border-radius:16px;
2583        padding:22px;text-align:left;transition:border-color .18s ease;
2584        /* Real elevation now — it has a tinted field to lift away from. */
2585        box-shadow:0 2px 4px rgba(15,23,42,.04),0 22px 48px -26px rgba(15,23,42,.28)}
2586    .slab-card:focus-within{border-color:#FE4A23}.slab-ta{display:block;width:100%;border:0;outline:none;resize:none;background:transparent;
2587        font-family:inherit;font-size:15px;line-height:1.65;color:#141414;min-height:96px}
2588    .slab-ta::placeholder{color:#9CA3AF}.slab-ta-wrap.has-ghost .slab-ta::placeholder{color:transparent}.slab-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
2589        gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #F0EEE8}.slab-chips{flex-wrap:wrap;gap:8px;align-items:center}
2590    .slab-chip{border:1px solid #E5E7EB;border-radius:999px;background:#fff;padding:6px 12px;
2591        font-size:11px;letter-spacing:.02em;color:#6B7280;cursor:pointer;
2592        transition:border-color .15s ease,color .15s ease}
2593    .slab-chip:hover{border-color:#FE4A23;color:#FE4A23}
2594    .slab-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
2595        background:#FE4A23;color:#fff;font-size:14.5px;font-weight:700;padding:13px 24px;
2596        border-radius:12px;white-space:nowrap;transition:background-color .15s ease}
2597    .slab-btn:hover{background:#D93D1A}
2598    .slab-err{margin:10px 0 0;font-size:13.5px;font-weight:600;color:#DC2626}
2599
2600    @media(max-width:640px){
2601        /* 56px matches what the other sections drop to at this width. */
2602        .slab{padding:56px 16px}
2603        .slab-kicker{font-size:10.5px}
2604        .slab-sub{font-size:14.5px;margin-bottom:24px}
2605        .slab-card{padding:16px;border-radius:16px}
2606        /* Stack, and let the button fill: at this width a right-aligned button
2607           beside wrapped chips reads as detached from the box. */
2608        .slab-foot{flex-direction:column;align-items:stretch}
2609        .slab-btn{justify-content:center}
2610    }
2611
2612    /* Hover reveal */
2613
2614    /* The close button only earns its place on touch. Where a real pointer
2615       exists, the reveal already closes three other ways — mouseleave on the card,
2616       mouseleave on the dialog, and a 4.5s auto-dismiss — plus Escape and blur for
2617       keyboard, both wired document-wide. On touch there is no mouseleave at all
2618       (the card opens on `click`), so without this button a tapped card would sit
2619       open until the auto-dismiss fires.
2620       Hiding it here also reclaims the corner it was overlapping the tenure pill
2621       in, so the head row gets its full width back. */
2622    }
2623
2624    @media(max-width:860px){
2625        .cd-band{padding:48px 0 60px}
2626        .cd-head{margin-bottom:20px}
2627        .cd-head-title{font-size:19px}
2628        .cd-metrics{margin-top:36px;gap:26px 28px}
2629        .cd-metric-value{font-size:22px}
2630
2631        /* The marquee itself is now defined in the base rules — only its phone
2632           sizing differs here. Narrower cards and a shorter cycle so the same
2633           roster doesn't take proportionally longer to pass on a small screen. */
2634        .cd-card{flex:0 0 160px;min-height:96px}
2635    }
2636
2637    @media(prefers-reduced-motion:reduce){
2638        /* Hold still and show the whole roster as a centred wrapped grid. The
2639           previous rule set width:100% on a 20-card flex row, which squashed
2640           every card to ~60px and clipped the marks; wrapping shows all 20
2641           legibly instead, at the cost of a taller band. */
2642        .cd-marquee{transition:none!important;transform:none!important;
2643            width:100%!important;flex-wrap:wrap;justify-content:center}
2644        .cd-track{flex-wrap:wrap;justify-content:center;row-gap:4px}
2645        .cd-dup{display:none!important}
2646    }
2647</style>
2648
2649<section class="agh-block"><div class="ch-hero">
2650        <!-- Background video. No poster attribute: the gradient layer below
2651             sits behind it, so an absent or still-loading file degrades to the
2652             designed treatment rather than a black box. --><video class="ch-video" id="ch-video" autoplay muted loop playsinline preload="auto"
2653            poster="/static/video/hero-loop-poster.jpg" aria-hidden="true" tabindex="-1">
2654            <source src="/static/video/hero-loop.mp4" type="video/mp4">
2655        </video>
2656
2657        <!-- Two layers only: a warm base that shows through if the video is
2658             absent, and one diagonal wash darkest at the top-left where the copy
2659             sits. The export's extra scrim / soft-light sheen / white lift /
2660             corner vignette were stacking up to roughly 60% coverage and burying
2661             the footage; a single gradient reads cleaner and lets the video
2662             through, which is how paraform.com does it. -->
2663        <div class="ch-layer ch-base"></div>
2664        <div class="ch-layer ch-wash"></div>
2665
2666        <div class="ch-inner">
2667            <div class="ch-copy">
2668                <div class="ch-eyebrow">
2669                    Agentic hiring software, built on 25 years of real outcomes
2670                </div>
2671
2672                <h1 class="ch-h1">
2673                    <span class="ch-beat">Fill roles faster.</span>
2674                    <span class="ch-line">Screen smarter. Retain longer.</span>
2675                </h1>
2676
2677                <p class="ch-sub">
2678                    Cadient's Smart Agents are trained on <strong class="ch-sub-em">850M+
2679                        applications</strong> to know who's right — and who'll stay. Proven, not
2680                    guessed, Smart Agents source, score, schedule, and support hiring inside the ATS
2681                    you already run. You stay in control.
2682                </p>
2683
2684                <div class="ch-ctas"><a class="ch-btn trigger-contact-sales" href="/lp/schedule" rel="nofollow">
2685                        Talk to an Expert
2686                    </a>
2687                    <a class="ch-link" href="/solutions-lab">
2688                        Explore Solutions Lab
2689                        <span class="ch-arrow" aria-hidden="true">→</span>
2690                    </a>
2691                </div>
2692            </div>
2693        </div>
2694
2695        <!-- Floating play button, bottom-left of the hero and aligned to the
2696             content column. This is the only entry point to the walkthrough now
2697             that the primary CTA is "Talk to an Expert". --><button type="button" class="ch-play" id="ch-play" aria-label="Play video">
2698            <span class="ch-play-dot" aria-hidden="true">
2699                <span class="ch-play-tri"></span>
2700            </span>
2701        </button>
2702    </div>
2703
2704    <!-- Tour-video lightbox. Kept from the export, minus its upload picker:
2705         if the MP4 is missing the player reports it and offers the consult
2706         path instead of failing silently. -->
2707    <div class="ch-modal" id="ch-modal" role="dialog" aria-modal="true"
2708        aria-label="See Smart Agents in Action" aria-hidden="true">
2709        <div class="ch-modal-panel" id="ch-modal-panel">
2710            <div class="ch-modal-stage">
2711                <video class="ch-tour" id="ch-tour" controls playsinline preload="none">
2712                    <source src="/static/video/hero-popup.mp4" type="video/mp4">
2713                </video>
2714                <div class="ch-tour-fallback" id="ch-tour-fallback" hidden>
2715                    <span class="ch-tour-badge" aria-hidden="true">&#9654;</span>
2716                    <p>The walkthrough isn't available just yet.</p>
2717                    <a class="trigger-contact-sales ch-modal-cta" href="/lp/schedule" rel="nofollow">Book a consult instead</a>
2718                </div>
2719            </div>
2720            <div class="ch-modal-foot">
2721                <span>Want it walked through with your own hiring numbers?</span>
2722                <a class="trigger-contact-sales ch-modal-cta" href="/lp/schedule" rel="nofollow">Talk to an Expert</a>
2723            </div>
2724            <button type="button" class="ch-modal-close" id="ch-modal-close" aria-label="Close video">×</button>
2725        </div>
2726    </div>
2727
2728    
2728<script>
2729        (function () {
2730            var hero = document.getElementById('ch-video');
2731            var modal = document.getElementById('ch-modal');
2732            var panel = document.getElementById('ch-modal-panel');
2733            var tour = document.getElementById('ch-tour');
2734            var fallback = document.getElementById('ch-tour-fallback');
2735            var openBtn = document.getElementById('ch-play');
2736            var closeBtn = document.getElementById('ch-modal-close');
2737            var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
2738            var lastFocus = null;
2739
2740            // Hold on a still frame rather than looping motion behind the copy.
2741            if (hero && reduce.matches) {
2742                hero.removeAttribute('autoplay');
2743                hero.addEventListener('loadeddata', function () { try { hero.pause(); } catch (e) { } });
2744            }
2745
2746            // The autoplay attribute alone is unreliable — Chrome defers it when
2747            // the tab isn't focused or media-engagement heuristics say no, which
2748            // leaves a frozen first frame. Kick playback once the file is ready,
2749            // and retry on the first interaction if the browser still refuses.
2750            if (hero && !reduce.matches) {
2751                var kick = function () { var p = hero.play(); if (p && p.catch) p.catch(function () { }); };
2752                if (hero.readyState >= 2) kick();
2753                hero.addEventListener('canplay', kick, { once: true });
2754                var onFirstInput = function () {
2755                    if (hero.paused) kick();
2756                    window.removeEventListener('pointerdown', onFirstInput);
2757                    window.removeEventListener('keydown', onFirstInput);
2758                };
2759                window.addEventListener('pointerdown', onFirstInput, { passive: true });
2760                window.addEventListener('keydown', onFirstInput);
2761
2762                // Don't burn CPU decoding video that's scrolled out of view.
2763                if ('IntersectionObserver' in window) {
2764                    new IntersectionObserver(function (es) {
2765                        es.forEach(function (e) {
2766                            if (e.isIntersecting) kick();
2767                            else if (!hero.paused) { try { hero.pause(); } catch (err) { } }
2768                        });
2769                    }, { threshold: 0.01 }).observe(hero);
2770                }
2771            }
2772
2773            // A missing or unplayable file falls back to the consult path instead
2774            // of leaving a dead player behind the play button.
2775            function showFallback() {
2776                if (tour) tour.style.display = 'none';
2777                if (fallback) fallback.hidden = false;
2778            }
2779            if (tour) {
2780                tour.addEventListener('error', showFallback);
2781                var src = tour.querySelector('source');
2782                if (src) src.addEventListener('error', showFallback);
2783            }
2784
2785            function open() {
2786                if (!modal) return;
2787                lastFocus = document.activeElement;
2788                modal.classList.add('is-open');
2789                modal.setAttribute('aria-hidden', 'false');
2790                document.body.style.overflow = 'hidden';
2791                if (hero) { try { hero.pause(); } catch (e) { } }   // don't run two videos at once
2792                if (tour && fallback && fallback.hidden) { try { tour.play(); } catch (e) { } }
2793                if (closeBtn) closeBtn.focus();
2794            }
2795
2796            function close() {
2797                if (!modal) return;
2798                modal.classList.remove('is-open');
2799                modal.setAttribute('aria-hidden', 'true');
2800                document.body.style.overflow = '';
2801                if (tour) { try { tour.pause(); tour.currentTime = 0; } catch (e) { } }
2802                if (hero && !reduce.matches) { try { hero.play(); } catch (e) { } }
2803                if (lastFocus && lastFocus.focus) lastFocus.focus();
2804            }
2805
2806            if (openBtn) openBtn.addEventListener('click', open);
2807            if (closeBtn) closeBtn.addEventListener('click', close);
2808            if (modal) modal.addEventListener('click', function (e) { if (e.target === modal) close(); });
2809            if (panel) panel.addEventListener('click', function (e) { e.stopPropagation(); });
2810            document.addEventListener('keydown', function (e) {
2811                if (e.key === 'Escape' && modal && modal.classList.contains('is-open')) close();
2812            });
2813        })();
2814    </script>
2814<div class="cd-band">
2815        <div class="cd-wrap">
2816            <div class="cd-head">
2817                <p class="cd-head-title">Trusted by:</p>
2818                <p class="cd-head-sub">100k+ hourly roles filled a year across retail, grocery, healthcare and staffing</p>
2819            </div><div class="cd-track-wrap" id="cd-track-wrap">
2820                <div class="cd-marquee" id="cd-marquee">
2821                <div class="cd-track" id="cd-track">
2822                    <div class="cd-card"><img src="/static/images/clients/petsmart.webp" alt="PetSmart" loading="eager"
2823                            fetchpriority="low" decoding="async" class="cd-logo"
2824                            style="height:32px">
2825                    </div>
2826                    <div class="cd-card"><img src="/static/images/clients/costco.webp" alt="Costco Wholesale" loading="eager"
2827                            fetchpriority="low" decoding="async" class="cd-logo"
2828                            style="height:35px">
2829                    </div>
2830                    <div class="cd-card"><img src="/static/images/clients/big-y.webp" alt="Big Y" loading="eager"
2831                            fetchpriority="low" decoding="async" class="cd-logo"
2832                            style="height:55px">
2833                    </div>
2834                    <div class="cd-card"><img src="/static/images/clients/genesco.webp" alt="Genesco" loading="eager"
2835                            fetchpriority="low" decoding="async" class="cd-logo"
2836                            style="height:32px">
2837                    </div>
2838                    <div class="cd-card"><img src="/static/images/clients/mlk-community-hospital.webp" alt="MLK Community Hospital" loading="eager"
2839                            fetchpriority="low" decoding="async" class="cd-logo"
2840                            style="height:48px">
2841                    </div>
2842                    <div class="cd-card"><img src="/static/images/clients/trident-seafoods.webp" alt="Trident Seafoods" loading="eager"
2843                            fetchpriority="low" decoding="async" class="cd-logo"
2844                            style="height:39px">
2845                    </div>
2846                    <div class="cd-card"><img src="/static/images/clients/securitas.webp" alt="Securitas" loading="eager"
2847                            fetchpriority="low" decoding="async" class="cd-logo"
2848                            style="height:42px">
2849                    </div>
2850                    <div class="cd-card"><img src="/static/images/clients/town-fair-tire.webp" alt="Town Fair Tire" loading="eager"
2851                            fetchpriority="low" decoding="async" class="cd-logo"
2852                            style="height:58px">
2853                    </div>
2854                    <div class="cd-card"><img src="/static/images/clients/rhp-staffing.webp" alt="RHP Staffing" loading="eager"
2855                            fetchpriority="low" decoding="async" class="cd-logo"
2856                            style="height:35px">
2857                    </div>
2858                    <div class="cd-card"><img src="/static/images/clients/arc-mid-hudson.webp" alt="The Arc Mid-Hudson" loading="eager"
2859                            fetchpriority="low" decoding="async" class="cd-logo"
2860                            style="height:46px">
2861                    </div>
2862                    <div class="cd-card"><img src="/static/images/clients/citizens-medical.webp" alt="Citizens Medical Center" loading="eager"
2863                            fetchpriority="low" decoding="async" class="cd-logo"
2864                            style="height:41px">
2865                    </div>
2866                    <div class="cd-card"><img src="/static/images/clients/mount-rogers.webp" alt="Mount Rogers Community Services" loading="eager"
2867                            fetchpriority="low" decoding="async" class="cd-logo"
2868                            style="height:41px">
2869                    </div>
2870                    <div class="cd-card"><img src="/static/images/clients/passaic-valley.webp" alt="Passaic Valley Sewerage Commission" loading="eager"
2871                            fetchpriority="low" decoding="async" class="cd-logo"
2872                            style="height:58px">
2873                    </div>
2874                    <div class="cd-card"><img src="/static/images/clients/mhmr-tarrant.webp" alt="MHMR of Tarrant County" loading="eager"
2875                            fetchpriority="low" decoding="async" class="cd-logo"
2876                            style="height:32px">
2877                    </div>
2878                    <div class="cd-card"><img src="/static/images/clients/arctic-storm.webp" alt="Arctic Storm" loading="eager"
2879                            fetchpriority="low" decoding="async" class="cd-logo"
2880                            style="height:58px">
2881                    </div>
2882                    <div class="cd-card"><img src="/static/images/clients/wegmann-automotive.webp" alt="Wegmann Automotive" loading="eager"
2883                            fetchpriority="low" decoding="async" class="cd-logo"
2884                            style="height:32px">
2885                    </div>
2886                    <div class="cd-card"><img src="/static/images/clients/sullivan-county.webp" alt="Sullivan County Sheriff&#39;s Office" loading="eager"
2887                            fetchpriority="low" decoding="async" class="cd-logo"
2888                            style="height:58px">
2889                    </div>
2890                    <div class="cd-card"><img src="/static/images/clients/journey.webp" alt="Journeys" loading="eager"
2891                            fetchpriority="low" decoding="async" class="cd-logo"
2892                            style="height:55px">
2893                    </div>
2894                    <div class="cd-card"><img src="/static/images/clients/hirenow.webp" alt="HireNow Staffing" loading="eager"
2895                            fetchpriority="low" decoding="async" class="cd-logo"
2896                            style="height:55px">
2897                    </div>
2898                    <div class="cd-card"><img src="/static/images/clients/camh.webp" alt="CAMH" loading="eager"
2899                            fetchpriority="low" decoding="async" class="cd-logo"
2900                            style="height:44px">
2901                    </div>
2902                </div>
2903                <!-- Duplicate set — fills the gap mid-loop. Marquee only. -->
2904                <div class="cd-track cd-dup" aria-hidden="true">
2905                    <div class="cd-card"><img src="/static/images/clients/petsmart.webp" alt="" loading="eager"
2906                            fetchpriority="low" decoding="async" class="cd-logo"
2907                            style="height:32px">
2908                    </div>
2909                    <div class="cd-card"><img src="/static/images/clients/costco.webp" alt="" loading="eager"
2910                            fetchpriority="low" decoding="async" class="cd-logo"
2911                            style="height:35px">
2912                    </div>
2913                    <div class="cd-card"><img src="/static/images/clients/big-y.webp" alt="" loading="eager"
2914                            fetchpriority="low" decoding="async" class="cd-logo"
2915                            style="height:55px">
2916                    </div>
2917                    <div class="cd-card"><img src="/static/images/clients/genesco.webp" alt="" loading="eager"
2918                            fetchpriority="low" decoding="async" class="cd-logo"
2919                            style="height:32px">
2920                    </div>
2921                    <div class="cd-card"><img src="/static/images/clients/mlk-community-hospital.webp" alt="" loading="eager"
2922                            fetchpriority="low" decoding="async" class="cd-logo"
2923                            style="height:48px">
2924                    </div>
2925                    <div class="cd-card"><img src="/static/images/clients/trident-seafoods.webp" alt="" loading="eager"
2926                            fetchpriority="low" decoding="async" class="cd-logo"
2927                            style="height:39px">
2928                    </div>
2929                    <div class="cd-card"><img src="/static/images/clients/securitas.webp" alt="" loading="eager"
2930                            fetchpriority="low" decoding="async" class="cd-logo"
2931                            style="height:42px">
2932                    </div>
2933                    <div class="cd-card">
2933<img src="/static/images/clients/town-fair-tire.webp" alt="" loading="eager"
2934                            fetchpriority="low" decoding="async" class="cd-logo"
2935                            style="height:58px">
2936                    </div>
2937                    <div class="cd-card"><img src="/static/images/clients/rhp-staffing.webp" alt="" loading="eager"
2938                            fetchpriority="low" decoding="async" class="cd-logo"
2939                            style="height:35px">
2940                    </div>
2941                    <div class="cd-card"><img src="/static/images/clients/arc-mid-hudson.webp" alt="" loading="eager"
2942                            fetchpriority="low" decoding="async" class="cd-logo"
2943                            style="height:46px">
2944                    </div>
2945                    <div class="cd-card"><img src="/static/images/clients/citizens-medical.webp" alt="" loading="eager"
2946                            fetchpriority="low" decoding="async" class="cd-logo"
2947                            style="height:41px">
2948                    </div>
2949                    <div class="cd-card"><img src="/static/images/clients/mount-rogers.webp" alt="" loading="eager"
2950                            fetchpriority="low" decoding="async" class="cd-logo"
2951                            style="height:41px">
2952                    </div>
2953                    <div class="cd-card"><img src="/static/images/clients/passaic-valley.webp" alt="" loading="eager"
2954                            fetchpriority="low" decoding="async" class="cd-logo"
2955                            style="height:58px">
2956                    </div>
2957                    <div class="cd-card"><img src="/static/images/clients/mhmr-tarrant.webp" alt="" loading="eager"
2958                            fetchpriority="low" decoding="async" class="cd-logo"
2959                            style="height:32px">
2960                    </div>
2961                    <div class="cd-card"><img src="/static/images/clients/arctic-storm.webp" alt="" loading="eager"
2962                            fetchpriority="low" decoding="async" class="cd-logo"
2963                            style="height:58px">
2964                    </div>
2965                    <div class="cd-card"><img src="/static/images/clients/wegmann-automotive.webp" alt="" loading="eager"
2966                            fetchpriority="low" decoding="async" class="cd-logo"
2967                            style="height:32px">
2968                    </div>
2969                    <div class="cd-card"><img src="/static/images/clients/sullivan-county.webp" alt="" loading="eager"
2970                            fetchpriority="low" decoding="async" class="cd-logo"
2971                            style="height:58px">
2972                    </div>
2973                    <div class="cd-card"><img src="/static/images/clients/journey.webp" alt="" loading="eager"
2974                            fetchpriority="low" decoding="async" class="cd-logo"
2975                            style="height:55px">
2976                    </div>
2977                    <div class="cd-card"><img src="/static/images/clients/hirenow.webp" alt="" loading="eager"
2978                            fetchpriority="low" decoding="async" class="cd-logo"
2979                            style="height:55px">
2980                    </div>
2981                    <div class="cd-card"><img src="/static/images/clients/camh.webp" alt="" loading="eager"
2982                            fetchpriority="low" decoding="async" class="cd-logo"
2983                            style="height:44px">
2984                    </div>
2985                </div>
2986                </div>
2987            </div>
2988
2989            <div class="cd-metrics">
2990                <div class="cd-metric">
2991                    <div class="cd-metric-value">25 years in production</div>
2992                    <div class="cd-metric-label">Enough real hiring cycles to know what actually works — not a theory, a track record</div>
2993                </div>
2994                <div class="cd-metric is-accent">
2995                    <div class="cd-metric-value">Agents work with any ATS</div>
2996                    <div class="cd-metric-label">Workday, ADP, SAP SuccessFactors, iCIMS — no migration</div>
2997                </div>
2998                <div class="cd-metric">
2999                    <div class="cd-metric-value">850M+ applications</div>
3000                    <div class="cd-metric-label">More real outcomes than any AI hiring tool has ever seen</div>
3001                </div>
3002                <div class="cd-metric is-accent">
3003                    <div class="cd-metric-value">Agents live since 2023</div>
3004                    <div class="cd-metric-label">Screening real candidates today, not on a roadmap</div>
3005                </div>
3006            </div>
3007
3008            <div class="cd-timeline">
3009                <span class="cd-tl-item">
3010                    <span class="cd-tl-label">Est. 2002</span><span class="cd-tl-sep" aria-hidden="true">◆</span>
3011                </span>
3012                <span class="cd-tl-item">
3013                    <span class="cd-tl-label">Powered hiring at Kronos scale</span><span class="cd-tl-sep" aria-hidden="true">◆</span>
3014                </span>
3015                <span class="cd-tl-item">
3016                    <span class="cd-tl-label">Independent since 2019</span><span class="cd-tl-sep" aria-hidden="true">◆</span>
3017                </span>
3018                <span class="cd-tl-item">
3019                    <span class="cd-tl-label is-now">Agentic since 2023</span>
3020                </span>
3021            </div>
3022        </div>
3023    </div>
3024
3025    
3025<script>
3026        (function () {
3027            var wrap = document.getElementById('cd-track-wrap');
3028            var track = document.getElementById('cd-track');
3029            if (!wrap || !track) return;
3030
3031            var cards = [].slice.call(track.children);
3032            // `hold` is the hover pause, read by stepOnce() and startRotate().
3033            var GAP = 12, slide = 0, rotT = null, hold = false;
3034            var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
3035
3036            // ── Carousel ──────────────────────────────────────────────
3037            // Cards are measured to fit N-per-view exactly so the track always
3038            // lands on a whole card, never mid-card.
3039            function perView() {
3040                var w = window.innerWidth;
3041                return w < 560 ? 1 : w < 860 ? 2 : w < 1100 ? 3 : 4;
3042            }
3043
3044            // The CSS marquee now owns the motion at EVERY width (it used to be
3045            // ≤860px only), so the stepped carousel always stands down. Left in
3046            // place rather than deleted because the hover-reveal, keyboard and
3047            // resize wiring below is shared; returning true here is what keeps the
3048            // carousel from fighting the animation and overwriting the inline card
3049            // widths the marquee depends on.
3050            function isMarquee() { return true; }
3051
3052            // ── Stepped marquee ───────────────────────────────────────
3053            // Advances the duplicated track one card at a time: the CSS
3054            // transition eases each move, the interval gap is the dwell. A
3055            // continuous linear keyframe scroll was what read as stuttering.
3056            //
3057            // The wrap is what makes it loop seamlessly. Position N (N = one full
3058            // set) shows the duplicate's first card in exactly the spot the
3059            // original's first card occupied at position 0, so resetting the
3060            // index to 0 there is invisible — provided the transition is
3061            // suppressed for that one frame, hence .no-anim + a forced reflow.
3062            var mqEl = document.getElementById('cd-marquee');
3063            var stepT = null, stepIdx = 0;
3064            var STEP_MS = 1800;          // dwell + move; the move itself is .52s
3065
3066            function cardStep() {
3067                if (!cards.length) return 0;
3068                var r = cards[0].getBoundingClientRect();
3069                return r.width + GAP;
3070            }
3071
3072            function stepOnce() {
3073                if (!mqEl || hold || document.hidden) return;
3074                var setLen = cards.length;
3075                stepIdx += 1;
3076                if (stepIdx >= setLen) {
3077                    // Snap back without animating, then continue from 0.
3078                    mqEl.classList.add('no-anim');
3079                    stepIdx = 0;
3080                    mqEl.style.transform = 'translateX(0px)';
3081                    void mqEl.offsetWidth;                 // force the reflow now
3082                    mqEl.classList.remove('no-anim');
3083                    return;
3084                }
3085                mqEl.style.transform = 'translateX(-' + (stepIdx * cardStep()) + 'px)';
3086            }
3087
3088            function startStepping() {
3089                if (stepT || reduce.matches || !mqEl) return;
3090                stepT = setInterval(stepOnce, STEP_MS);
3091            }
3092            function stopStepping() { if (stepT) { clearInterval(stepT); stepT = null; } }
3093
3094            function sync() {
3095                if (isMarquee()) {
3096                    stopRotate();
3097                    slide = 0;
3098                    track.style.transform = '';
3099                    cards.forEach(function (c) { c.style.flex = ''; c.style.width = ''; });
3100                    // Re-anchor after a resize: the card width changes at the
3101                    // 860px breakpoint, so a stale pixel offset would land
3102                    // mid-card.
3103                    if (mqEl) {
3104                        mqEl.classList.add('no-anim');
3105                        mqEl.style.transform = 'translateX(-' + (stepIdx * cardStep()) + 'px)';
3106                        void mqEl.offsetWidth;
3107                        mqEl.classList.remove('no-anim');
3108                    }
3109                    startStepping();
3110                    return;
3111                }
3112                var per = Math.min(perView(), cards.length);
3113                var cardW = (wrap.clientWidth - GAP * (per - 1)) / per;
3114                cards.forEach(function (c) { c.style.flex = '0 0 ' + cardW + 'px'; c.style.width = cardW + 'px'; });
3115                if (per >= cards.length) {
3116                    stopRotate(); slide = 0; track.style.transform = 'none'; return;
3117                }
3118                var steps = cards.length - per + 1;
3119                slide = ((slide % steps) + steps) % steps;
3120                track.style.transform = 'translateX(-' + (slide * (cardW + GAP)) + 'px)';
3121                startRotate(steps);
3122            }
3123
3124            function startRotate(steps) {
3125                if (rotT || reduce.matches) return;
3126                rotT = setInterval(function () {
3127                    if (hold || document.hidden) return;   // don't advance under the cursor or in a background tab
3128                    slide = (slide + 1) % steps;
3129                    sync();
3130                }, 2400);
3131            }
3132            function stopRotate() { if (rotT) { clearInterval(rotT); rotT = null; } }
3133
3134            sync();
3135            var rs; window.addEventListener('resize', function () { clearTimeout(rs); rs = setTimeout(sync, 150); });
3136            document.addEventListener('visibilitychange', function () { if (!document.hidden) sync(); });
3137
3138            // ── Hover pause ───────────────────────────────────────────
3139            // All that remains of the old reveal. Hovering any card stops the
3140            // marquee advancing; the CSS lift is the visual response. A step
3141            // already in flight finishes easing rather than being frozen
3142            // mid-move, which reads as settling rather than snapping.
3143            cards.forEach(function (card) {
3144                card.addEventListener('mouseenter', function () { hold = true; });
3145                card.addEventListener('mouseleave', function () { hold = false; });
3146            });
3147        })();
3148    </script>
3148
3149</section>
3150
3151<script>
3152/* Live odometer — shows the 850M baseline, then sweeps up to the current
3153   simulated value (BASE + elapsed × RATE) when scrolled into view.
3154   Swap EPOCH/BASE/RATE for a real volume feed when wiring production. */
3155(function(){
3156    var el = document.getElementById('agh-odometer');
3157    if (!el) return;
3158    var EPOCH   = Date.UTC(2026, 6, 1);
3159    var BASE    = 850000000;
3160    var RATE    = 2.1;   // apps/sec ≈ 66M/yr
3161    var SPIN_MS = 2400;  // sweep duration
3162    var TICK_MS = 480;   // live re-render cadence after the sweep
3163    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
3164    var ticker  = null, started = false;
3165
3166    function currentCount(){ return Math.floor(BASE + (Date.now() - EPOCH) / 1000 * RATE); }
3167    function render(n){
3168        var parts = Math.floor(n).toLocaleString('en-US').split(',');
3169        el.innerHTML = parts.map(function(p, i){
3170            var cls = i >= parts.length - 2 ? 'agh-grp agh-tail' : 'agh-grp';
3171            return '<span class="' + cls + '">' + p + '</span>' + (i < parts.length - 1 ? '<span class="agh-sep">,</span>' : '');
3172        }).join('');
3173    }
3174    function startTicker(){ if (!ticker) ticker = setInterval(function(){ render(currentCount()); }, TICK_MS); }
3175    function stopTicker(){ if (ticker){ clearInterval(ticker); ticker = null; } }
3176
3177    function spin(){
3178        if (started) return;
3179        started = true;
3180        if (reduced){ render(currentCount()); startTicker(); return; }
3181        var t0 = performance.now();
3182        function frame(t){
3183            var p = Math.min((t - t0) / SPIN_MS, 1), ease = 1 - Math.pow(1 - p, 4);
3184            render(BASE + (currentCount() - BASE) * ease);
3185            if (p < 1) requestAnimationFrame(frame);
3186            else startTicker();
3187        }
3188        requestAnimationFrame(frame);
3189    }
3190
3191    render(BASE); // hold at 850,000,000 until the counter is seen
3192
3193    if ('IntersectionObserver' in window){
3194        var io = new IntersectionObserver(function(entries){
3195            if (entries[0].isIntersecting){ spin(); io.disconnect(); }
3196        }, { threshold: 0.4 });
3197        io.observe(el);
3198    } else {
3199        spin();
3200    }
3201
3202    // Don't burn frames in background tabs; value self-corrects on return.
3203    document.addEventListener('visibilitychange', function(){
3204        if (document.hidden){ stopTicker(); }
3205        else if (started){ render(currentCount()); startTicker(); }
3206    });
3207})();
3208</script>
3208
3209
3210
3211<!-- ══════════════════════════════════════════════════════════
3212     SECTION 1b — Solutions Lab brief box
3213     Sits directly under the proof band (metrics + timeline) and above the
3214     problem selector.
3215
3216     The box only CAPTURES here. On submit the text is handed to
3217     /solutions-lab, which owns the single implementation of the whole funnel
3218     — sketch, email ask, blueprint send, scheduler modal. Duplicating that
3219     inline would mean two copies of the same flow drifting apart.
3220     ══════════════════════════════════════════════════════════ -->
3221<section class="slab" aria-labelledby="slab-heading">
3222    <div class="slab-inner">
3223        <p class="slab-kicker">Cadient Solutions Lab</p>
3224        <h2 id="slab-heading" class="slab-h2">
3225            What&rsquo;s breaking in <span class="slab-em">your hiring?</span>
3226        </h2>
3227        <p class="slab-sub">
3228            Describe it below. Our agent sketches a solution instantly — no email needed.
3229            A human engineer follows up with the full blueprint.
3230        </p><div class="slab-agent" aria-hidden="true">
3231            <div class="slab-av">
3232                <span class="slab-av-ring"></span>
3233                <div class="slab-av-face">
3234                    <img class="slab-av-img" src="/static/img/logo-mark.webp"
3235                        alt="" width="23" height="23" decoding="async">
3236                </div>
3237                <span class="slab-av-live"></span>
3238            </div>
3239            <div class="slab-status">
3240                <span class="slab-status-name">Solutions Engineer AI</span>
3241                <span class="slab-status-sep"></span>
3242                <span class="slab-status-txt" id="slab-status">online · sketched solutions in seconds</span>
3243                <span class="slab-status-dots"><i></i><i></i><i></i></span><span class="slab-status-sub" id="slab-status-sub">sketched solutions in seconds</span>
3244            </div>
3245        </div>
3246
3247        <div class="slab-card">
3248            <label for="slab-text" class="sr-only">Describe your hiring problem</label>
3249            <div class="slab-ta-wrap" id="slab-ta-wrap"><div class="slab-ghost" aria-hidden="true"><span id="slab-ghost"></span><span class="slab-caret"></span></div>
3250                <textarea id="slab-text" class="slab-ta" rows="3" maxlength="1200" spellcheck="false"
3251                    placeholder="We hire 4,000 seasonal workers across 300 locations and lose half of them before the interview…"></textarea>
3252            </div>
3253
3254            <div class="slab-chips" id="slab-chips"><span class="slab-templates-label">Templates</span>
3255                <button type="button" class="slab-chip slab-mono"
3256                    data-fill="We hire thousands of seasonal workers across hundreds of locations and lose half our applicants before the interview stage.">Seasonal surge</button>
3257                <button type="button" class="slab-chip slab-mono"
3258                    data-fill="We want AI sourcing like SmartSource, but wired into our homegrown ATS with our own scoring rules.">Custom integration</button>
3259                <button type="button" class="slab-chip slab-mono"
3260                    data-fill="Frontline turnover eats our margin and we never see it coming until the two-weeks notice.">Turnover blindspot</button>
3261            </div>
3262
3263            <div class="slab-hair" aria-hidden="true"></div>
3264            <div class="slab-foot">
3265                <button type="button" id="slab-go" class="slab-btn">
3266                    Sketch a solution <span aria-hidden="true">→</span>
3267                </button>
3268            </div>
3269            <p id="slab-err" class="slab-err" hidden></p>
3270        </div></div>
3271</section>
3272
3273<script>
3274(function () {
3275    var ta   = document.getElementById('slab-text');
3276    var go   = document.getElementById('slab-go');
3277    var err  = document.getElementById('slab-err');
3278    if (!ta || !go) return;
3279
3280    /* ── Agent cues, ported from the Solutions Lab design ─────────────────
3281       Ghost placeholder in a positioned <div> rather than the native
3282       placeholder, which can't carry a caret. Same four sample prompts and the
3283       same status copy as the Lab page, so the two surfaces read as one system. */
3284    var taWrap    = document.getElementById('slab-ta-wrap');
3285    var ghostEl   = document.getElementById('slab-ghost');
3286    var statusEl  = document.getElementById('slab-status');
3287    var chipsEl   = document.getElementById('slab-chips');
3288    var samples = [
3289        "We hire 4,000 seasonal workers across 300 locations and lose half of them before the interview…",
3290        "Our recruiters spend 15 hours a week rescheduling interview no-shows…",
3291        "We need AI sourcing, but wired into our homegrown ATS with our scoring rules…",
3292        "Nursing turnover eats 8% of our margin and we never see it coming…"
3293    ];
3294    var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
3295    var twStop = false, si = 0, ci = 0, deleting = false;
3296
3297    // Short idle phrase on phones: the full one wraps the pill and breaks the
3298    // agent name mid-word; the descriptor moves to .slab-status-sub. Mirrors the
3299    // Lab page, including re-evaluating on change rather than once at load —
3300    // rotating a phone crosses this same 640px breakpoint (390 → 844), which
3301    // would hide the descriptor line while the status kept the short form.
3302    var mqPhone = window.matchMedia && window.matchMedia('(max-width:640px)');
3303    var IDLE;
3304    function applyIdlePhrase() {
3305        IDLE = (mqPhone && mqPhone.matches) ? 'online'
3306                                            : 'online · sketched solutions in seconds';
3307        if (statusEl && document.activeElement !== ta) statusEl.textContent = IDLE;
3308    }
3309    applyIdlePhrase();
3310    if (mqPhone && mqPhone.addEventListener) mqPhone.addEventListener('change', applyIdlePhrase);
3311    else if (mqPhone && mqPhone.addListener) mqPhone.addListener(applyIdlePhrase);
3312
3313    function sync() {
3314        var v = (ta.value || '').trim();
3315        // Any real text ends the ghost for good. Without this a value that
3316        // arrives without a keystroke — a browser restoring the field on a back
3317        // navigation — left tw() animating sample text underneath it.
3318        if (v) twStop = true;
3319        if (taWrap) taWrap.classList.toggle('is-live', !!v || document.activeElement === ta);
3320    }
3321
3322    function tw() {
3323        if (twStop || reduced) return;
3324        var s = samples[si];
3325        ci += deleting ? -3 : 1;
3326        if (ci >= s.length + 30) deleting = true;
3327        if (ci <= 0) { deleting = false; ci = 0; si = (si + 1) % samples.length; }
3328        if (ghostEl) ghostEl.textContent = s.slice(0, Math.max(0, Math.min(ci, s.length)));
3329        setTimeout(tw, deleting ? 12 : (ci > s.length ? 60 : 28));
3330    }
3331    // Marks that JS owns the hint now, which is what hides the native
3332    // placeholder. Set before the first paint of ghost text so the two can never
3333    // both be visible.
3334    if (taWrap) taWrap.classList.add('has-ghost');
3335    if (reduced) { if (ghostEl) ghostEl.textContent = samples[0]; } else { tw(); }
3336
3337    if (taWrap) taWrap.addEventListener('click', function () { ta.focus(); });
3338    var statusSubEl = document.getElementById('slab-status-sub');
3339    function setStatus(listening) {
3340        if (statusEl) statusEl.textContent = listening ? 'listening…' : IDLE;
3341        // The descriptor describes the idle state, so it goes while listening.
3342        if (statusSubEl) statusSubEl.hidden = listening;
3343    }
3344
3345    ta.addEventListener('focus', function () {
3346        twStop = true;
3347        setStatus(true);
3348        // Left open once revealed: re-hiding on blur would pull a chip out from
3349        // under a pointer already travelling towards it.
3350        if (chipsEl) chipsEl.classList.add('is-open');
3351        sync();
3352    });
3353    ta.addEventListener('blur', function () {
3354        setStatus(false);
3355        sync();
3356    });
3357    ta.addEventListener('input', sync);
3358    sync();
3359
3360    // Back-navigation restore. Browsers refill inputs AFTER this 
3360script has run
3361    // and without firing `input`, so the sync() above had already concluded the
3362    // field was empty and left the ghost showing over the restored brief — the
3363    // placeholder and the visitor's own text on top of each other.
3364    //
3365    // pageshow covers both cases: a bfcache resume (fires with persisted=true,
3366    // no re-parse) and an ordinary reload where restoration lands after parse.
3367    // The extra rAF is for the ordinary case, where the value can be written a
3368    // frame later than pageshow itself.
3369    window.addEventListener('pageshow', function () {
3370        // The back-forward cache restores this page exactly as it was left — and
3371        // it was left mid-handoff, with the CTA disabled and relabelled "Opening
3372        // the Lab…". So a visitor pressing Back met a dead button wearing the
3373        // wrong label. Neither state survives a restore now.
3374        go.disabled = false;
3375        go.innerHTML = goRestingHTML;
3376        if (err) err.hidden = true;
3377        // The pill says "listening…" on focus and IDLE on blur. A restore can land
3378        // with it claiming to listen while nothing is focused, so derive it from
3379        // the real focus state rather than trusting what was left behind.
3380        setStatus(document.activeElement === ta);
3381        sync();
3382        requestAnimationFrame(sync);
3383    });
3384
3385    // Resting markup of the CTA, captured before anything can overwrite it.
3386    // innerHTML rather than textContent because the label contains the arrow
3387    // span — handoff() sets textContent and would otherwise destroy it.
3388    var goRestingHTML = go.innerHTML;
3389
3390    // Same floor the /solutions-lab/sketch endpoint enforces (20 chars). Checked
3391    // here too so a too-short brief fails on this page instead of bouncing the
3392    // visitor to the Lab and erroring there.
3393    var MIN = 20;
3394
3395    // sessionStorage, not a query string: the brief is the visitor's own
3396    // description of what's broken in their company, and query strings end up in
3397    // nginx access logs, Referer headers and analytics. Same-origin, so the Lab
3398    // page can read it; cleared as soon as it does.
3399    var KEY = 'cadient.slab.brief';
3400
3401    document.querySelectorAll('.slab-chip').forEach(function (chip) {
3402        chip.addEventListener('click', function () {
3403            twStop = true;
3404            ta.value = chip.getAttribute('data-fill') || '';
3405            ta.focus();
3406            err.hidden = true;
3407            sync();
3408        });
3409    });
3410
3411    function handoff() {
3412        var text = (ta.value || '').trim();
3413        if (text.length < MIN) {
3414            err.textContent = 'Give us a little more than that — a sentence or tw
3414o.';
3415            err.hidden = false;
3416            ta.focus();
3417            return;
3418        }
3419        try { sessionStorage.setItem(KEY, text); } catch (e) { /* private mode */ }
3420        go.disabled = true;
3421        go.textContent = 'Opening the Lab…';
3422        // ?brief=1 tells the Lab page to look for the handoff. Without the flag it
3423        // would have to probe sessionStorage on every visit, which would also
3424        // resurrect a stale brief for someone who came back later.
3425        window.location.href = '/solutions-lab?brief=1';
3426    }
3427
3428    go.addEventListener('click', handoff);
3429    // Cmd/Ctrl+Enter submits, matching the Lab page's textarea.
3430    ta.addEventListener('keydown', function (e) {
3431        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); handoff(); }
3432    });
3433    ta.addEventListener('input', function () { if (!err.hidden) err.hidden = true; });
3434})();
3435</script>
3435
3436
3437
3438<!-- ══════════════════════════════════════════════════════════
3439     SECTION 2 — Problem Selector
3440     ══════════════════════════════════════════════════════════ -->
3441<section id="agh-problems" class="bg-white py-20 px-4">
3442<div class="max-w-5xl mx-auto">
3443
3444    <!-- Heading -->
3445    <div class="text-center mb-10">
3446        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">Start with what you need to solve</h2>
3447        <p class="text-gray-500 text-base leading-relaxed max-w-2xl mx-auto">
3448            Choose a challenge to see the business risk, the relevant Playbook guidance, and the SmartSuite tools that help address it.
3449        </p>
3450    </div>
3451
3452    <!-- Tab strip -->
3453    <div class="flex justify-center mb-8">
3454
3455        <!-- ── Mobile: single-line collapsed pill ── -->
3456        <div class="sm:hidden w-full px-4">
3457            <div class="flex items-center border border-gray-200 rounded-full p-1 bg-white">
3458                <span id="nh-mob-label"
3459                      class="flex-1 text-center px-4 py-2 rounded-full text-sm font-semibold text-white whitespace-nowrap"
3460                      style="background-color:#fe4a23;">Compliance Risk</span>
3461                <button onclick="nhMobToggle()"
3462                        class="flex items-center gap-1.5 pr-3 pl-2 py-2 text-sm font-medium text-gray-500 whitespace-nowrap flex-shrink-0">
3463                    <span id="nh-mob-more">+5 More</span>
3464                    <i id="nh-mob-chev" class="fa-solid fa-chevron-down text-xs" style="transition:transform .2s;"></i>
3465                </button>
3466            </div>
3467            <!-- Expanded dropdown (flex toggled by JS) -->
3468            <div id="nh-mob-dropdown" style="display:none;"
3469                 class="mt-2 border border-gray-200 rounded-2xl p-2 bg-white flex flex-wrap gap-2">
3470                <button onclick="nhShowProblem(0)" class="nh-mob-tab px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap" style="background-color:#fe4a23;color:#fff;">Compliance Risk</button>
3471                <button onclick="nhShowProblem(1)" class="nh-mob-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 whitespace-nowrap">Turnover</button>
3472                <button onclick="nhShowProblem(2)" class="nh-mob-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 whitespace-nowrap">Slow Hiring</button>
3473                <button onclick="nhShowProblem(3)" class="nh-mob-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 whitespace-nowrap">Bad Hires</button>
3474                <button onclick="nhShowProblem(4)" class="nh-mob-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 whitespace-nowrap">Low Engagement</button>
3475                <button onclick="nhShowProblem(5)" class="nh-mob-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 whitespace-nowrap">Pipeline Gaps</button>
3476            </div>
3477        </div>
3478
3479        <!-- ── Desktop: full pill strip ── -->
3480        <div class="hidden sm:inline-flex items-center border border-gray-200 rounded-full p-1 gap-0.5 bg-white">
3481            <button onclick="nhShowProblem(0)" id="nh-tab-0"
3482                class="nh-tab px-5 py-2.5 rounded-full text-sm font-semibold transition-all whitespace-nowrap"
3483                style="background-color:#fe4a23; color:#fff;">Compliance Risk</button>
3484            <button onclick="nhShowProblem(1)" id="nh-tab-1"
3485                class="nh-tab px-5 py-2.5 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all whitespace-nowrap">Turnover</button>
3486            <button onclick="nhShowProblem(2)" id="nh-tab-2"
3487                class="nh-tab px-5 py-2.5 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all whitespace-nowrap">Slow Hiring</button>
3488            <button onclick="nhShowProblem(3)" id="nh-tab-3"
3489                class="nh-tab px-5 py-2.5 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all whitespace-nowrap">Bad Hires</button>
3490            <button onclick="nhShowProblem(4)" id="nh-tab-4"
3491                class="nh-tab px-5 py-2.5 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all whitespace-nowrap">Low Engagement</button>
3492            <button onclick="nhShowProblem(5)" id="nh-tab-5"
3493                class="nh-tab px-5 py-2.5 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all whitespace-nowrap">Pipeline Gaps</button>
3494        </div>
3495
3496    </div>
3497
3498    <!-- Panels container -->
3499    <div class="border border-gray-200 rounded-2xl p-8 md:p-10 bg-white">
3500
3501        <!-- ── Panel 0: Compliance Risk ── -->
3502        <div id="nh-panel-0" class="nh-panel grid grid-cols-1 md:grid-cols-2 gap-10">
3503            <div>
3504                <div class="flex items-center gap-2 mb-4">
3505                    <i class="fa-solid fa-shield-halved text-sm" style="color:#fe4a23;"></i>
3506                    <span class="text-[11px] font-bold uppercase tracking-widest" style="color:#fe4a23;">Compliance &amp; Legal Risk</span>
3507                </div>
3508                <h3 class="text-2xl font-bold text-gray-900 mb-4 leading-snug">One FCRA misstep can cost you $100,000</h3>
3509                <p class="text-sm font-semibold mb-4 flex items-start gap-2"><i class="fa-solid fa-location-dot text-xs mt-1" style="color:#fe4a23;"></i><span style="color:#1f2937;">Built for multi-location employers tracking Ban-the-Box, EEOC and I-9 rules across every state you hire in.</span></p>
3510                <p class="text-gray-500 text-sm leading-relaxed mb-6">
3511                    Ban the Box, EEOC documentation, I-9 deadlines, ADA accommodations, pay transparency — the regulatory landscape is a minefield. Most employers don't know they're non-compliant until the lawsuit lands.
3512                </p>
3513                <div class="flex items-stretch gap-6 mb-6">
3514                    <div><p class="text-2xl font-bold text-gray-900">$100K+</p><p class="text-xs text-gray-500 mt-0.5">Per FCRA violation</p></div>
3515                    <div class="w-px bg-gray-200"></div>
3516                    <div><p class="text-2xl font-bold text-gray-900">19</p><p class="text-xs text-gray-500 mt-0.5">Compliance playbooks</p></div>
3517                </div>
3518                <!-- <p class="text-sm mb-4 flex items-start gap-2"><i class="fa-solid fa-pen text-xs mt-1 text-gray-300"></i><span class="italic text-gray-400 pb-ph">[Add client proof — e.g. "A 40-state retailer cleared its OFCCP audit with zero findings on SmartShield"]</span></p> -->
3519                <div class="flex flex-wrap items-center gap-4">
3520                    <a href="/smart-shield" class="inline-flex items-center gap-1.5 text-white text-sm font-semibold px-4 py-2 rounded-lg transition" style="background-color:#fe4a23;" onmouseover="this.style.backgroundColor='#d93d1a'" onmouseout="this.style.backgroundColor='#fe4a23'">See the tool →</a>
3521                    <a href="/playbooks/recruitment-compliance" class="text-sm font-semibold" style="color:#fe4a23;">See the framework →</a>
3522                </div>
3523            </div>
3524            <div>
3525                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">From the Playbook</p>
3526                <h4 class="font-bold text-gray-900 mb-4">Related Compliance Guidance</h4>
3527                <div class="agh-guide space-y-1.5" style="--agh-guide-accent:#fe4a23;--agh-guide-tint:#FFFBFA;">
3528                    <a href="/article/the-fcra-adverse-action-workflow-a-two-step-process-to-protect-against-class-action-exposure" class="agh-guide-row is-current flex items-center gap-3 px-3 py-3 rounded-xl border group" style="border-color:#fee2d5; background:#fff7f5;">
3529                        <span class="w-6 h-5 rounded flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:#fe4a23;">01</span>
3530                        <span class="text-sm font-medium text-gray-900 flex-1">FCRA Adverse Action Workflow</span>
3531                        <i class="fa-solid fa-arrow-right text-xs" style="color:#fe4a23;"></i>
3532                    </a>
3533                    <a href="/article/documenting-rejection-reasons-the-foundation-of-eeoc-defense" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3534                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">02</span>
3535                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">EEOC Structured Interview Requirements</span>
3536                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3537                    </a>
3538                    <a href="/article/the-3-business-day-completion-deadline-for-form-i-9-section-2" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3539                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">03</span>
3540                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">I-9 Three-Day Completion Deadline</span>
3541                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3542                    </a>
3543                    <a href="/article/criminal-history-inquiry-post-offer-timing-process-and-legal-compliance" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3544                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">04</span>
3545                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Ban The Box: Post-Offer Criminal Inquiry</span>
3546                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3547                    </a>
3548                    <a href="/article/ensuring-career-sites-and-online-application-systems-meet-ada-wcag-accessibility-standards" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3549                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">05</span>
3550                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">ADA WCAG Career Site Accessibility</span>
3551                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3552                    </a>
3553                </div>
3554            </div>
3555        </div>
3556
3557        <!-- ── Panel 1: Turnover ── -->
3558        <div id="nh-panel-1" class="nh-panel hidden grid grid-cols-1 md:grid-cols-2 gap-10">
3559            <div>
3560                <div class="flex items-center gap-2 mb-4">
3561                    <i class="fa-solid fa-arrow-right-from-bracket text-sm" style="color:#fe4a23;"></i>
3562                    <span class="text-[11px] font-bold uppercase tracking-widest" style="color:#fe4a23;">Retention &amp; Performance</span>
3563                </div>
3564                <h3 class="text-2xl font-bold text-gray-900 mb-4 leading-snug">30% of new hires leave in 90 days. Each one costs $12,876.</h3>
3565                <p class="text-sm font-semibold mb-4 flex items-start gap-2"><i class="fa-solid fa-location-dot text-xs mt-1" style="color:#fe4a23;"></i><span style="color:#1f2937;">Built for teams hiring hundreds of hourly workers across locations.</span></p>
3566                <p class="text-gray-500 text-sm leading-relaxed mb-6">
3567                    Early attrition is a hiring problem, not just a management one. Poor onboarding, misaligned expectations, and weak manager relationships drive most 90-day exits — and each one costs you more than you think.
3568                </p>
3569                <div class="flex items-stretch gap-6 mb-6">
3570                    <div><p class="text-2xl font-bold text-gray-900">$12,876</p><p class="text-xs text-gray-500 mt-0.5">Cost per 90-day exit</p></div>
3571                    <div class="w-px bg-gray-200"></div>
3572                    <div><p class="text-2xl font-bold text-gray-900">39</p><p class="text-xs text-gray-500 mt-0.5">Retention playbooks</p></div>
3573                </div>
3574                <p class="text-sm text-gray-600 mb-4 flex items-start gap-2"><i class="fa-solid fa-circle-check text-sm mt-0.5" style="color:#fe4a23;"></i><span>A national services leader cut turnover <strong class="text-gray-900">32%</strong> — and saved <strong class="text-gray-900">$20M+</strong> a year — with SmartTenure. <a href="/resources/case-studies/how-cadients-smarttenure-transformed-hiring-for-a-service-industry-leader/" class="font-semibold whitespace-nowrap" style="color:#fe4a23;">Case study →</a></span></p>
3575                <div class="flex flex-wrap items-center gap-4">
3576                    <a href="/smartsuite/smarttenure/" class="inline-flex items-center gap-1.5 text-white text-sm font-semibold px-4 py-2 rounded-lg transition" style="background-color:#fe4a23;" onmouseover="this.style.backgroundColor='#d93d1a'" onmouseout="this.style.backgroundColor='#fe4a23'">See the tool →</a>
3577                    <a href="/playbooks/retention-and-performance" class="text-sm font-semibold" style="color:#fe4a23;">See the framework →</a>
3578                </div>
3579            </div>
3580            <div>
3581                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">From the Playbook</p>
3582                <h4 class="font-bold text-gray-900 mb-4">Related Retention Guidance</h4>
3583                <div class="agh-guide space-y-1.5" style="--agh-guide-accent:#fe4a23;--agh-guide-tint:#FFFBFA;">
3584                    <a href="/article/the-full-funnel-cost-of-a-bad-hire" class="agh-guide-row is-current flex items-center gap-3 px-3 py-3 rounded-xl border group" style="border-color:#fee2d5; background:#fff7f5;">
3585                        <span class="w-6 h-5 rounded flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:#fe4a23;">01</span>
3586                        <span class="text-sm font-medium text-gray-900 flex-1">The Full-Funnel Cost of a Bad Hire</span>
3587                        <i class="fa-solid fa-arrow-right text-xs" style="color:#fe4a23;"></i>
3588                    </a>
3589                    <a href="/article/the-first-90-days-your-real-retention-battleground" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3590                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">02</span>
3591                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">The First 90 Days: Your Real Retention Battleground</span>
3592                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3593                    </a>
3594                    <a href="/article/frontline-feedback-loops-how-to-reduce-new-hire-turnover-by-36" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3595                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">03</span>
3596                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Frontline Feedback Loops: Reduce New-Hire Turnover by 36%</span>
3597                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3598                    </a>
3599                    <a href="/article/why-your-managers-are-your-biggest-retention-risk-and-your-biggest-opportunity" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3600                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">04</span>
3601                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Why Your Managers Are Your Biggest Retention Risk</span>
3602                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3603                    </a>
3604                    <a href="/article/nearly-30-of-new-employees-leave-in-the-first-90-days-heres-how-to-fix-it" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3605                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">05</span>
3606                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Nearly 30% of New Employees Leave in the First 90 Days</span>
3607                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3608                    </a>
3609                </div>
3610            </div>
3611        </div>
3612
3613        <!-- ── Panel 2: Slow Hiring ── -->
3614        <div id="nh-panel-2" class="nh-panel hidden grid grid-cols-1 md:grid-cols-2 gap-10">
3615            <div>
3616                <div class="flex items-center gap-2 mb-4">
3617                    <i class="fa-solid fa-clock text-sm" style="color:#fe4a23;"></i>
3618                    <span class="text-[11px] font-bold uppercase tracking-widest" style="color:#fe4a23;">Hiring Efficiency</span>
3619                </div>
3620                <h3 class="text-2xl font-bold text-gray-900 mb-4 leading-snug">38% of recruiter time is wasted on scheduling alone.</h3>
3621                <p class="text-sm font-semibold mb-4 flex items-start gap-2"><i class="fa-solid fa-location-dot text-xs mt-1" style="color:#fe4a23;"></i><span style="color:#1f2937;">Built for high-volume hourly hiring, where a three-day delay loses the candidate.</span></p>
3622                <p class="text-gray-500 text-sm leading-relaxed mb-6">
3623                    Your recruiters spend more than a third of their week just coordinating calendars. Add in multi-round interview processes and clunky applications, and you're letting the best candidates slip away to faster-moving competitors.
3624                </p>
3625                <div class="flex items-stretch gap-6 mb-6">
3626                    <div><p class="text-2xl font-bold text-gray-900">38%</p><p class="text-xs text-gray-500 mt-0.5">Of recruiter time on scheduling</p></div>
3627                    <div class="w-px bg-gray-200"></div>
3628                    <div><p class="text-2xl font-bold text-gray-900">60%</p><p class="text-xs text-gray-500 mt-0.5">Application drop-off rate</p></div>
3629                </div>
3630                <p class="text-sm text-gray-600 mb-4 flex items-start gap-2"><i class="fa-solid fa-circle-check text-sm mt-0.5" style="color:#fe4a23;"></i><span>A regional grocery chain hired <strong class="text-gray-900">41% faster</strong> after rolling out SmartTexting. <a href="/resources/case-studies/how-cadients-smarttexting-helped-a-large-regional-grocery-store-reduce-hiring-time-by-41/" class="font-semibold whitespace-nowrap" style="color:#fe4a23;">Case study →</a></span></p>
3631                <div class="flex flex-wrap items-center gap-4">
3632                    <a href="/smartsuite/smarttexting/" class="inline-flex items-center gap-1.5 text-white text-sm font-semibold px-4 py-2 rounded-lg transition" style="background-color:#fe4a23;" onmouseover="this.style.backgroundColor='#d93d1a'" onmouseout="this.style.backgroundColor='#fe4a23'">See the tool →</a>
3633                    <a href="/playbooks/screening" class="text-sm font-semibold" style="color:#fe4a23;">See the framework →</a>
3634                </div>
3635            </div>
3636            <div>
3637                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">From the Playbook</p>
3638                <h4 class="font-bold text-gray-900 mb-4">Related Speed-to-Hire Guidance</h4>
3639                <div class="agh-guide space-y-1.5" style="--agh-guide-accent:#fe4a23;--agh-guide-tint:#FFFBFA;">
3640                    <a href="/article/38-percent-of-your-recruiters-day-is-wasted-on-scheduling" class="agh-guide-row is-current flex items-center gap-3 px-3 py-3 rounded-xl border group" style="border-color:#fee2d5; background:#fff7f5;">
3641                        <span class="w-6 h-5 rounded flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:#fe4a23;">01</span>
3642                        <span class="text-sm font-medium text-gray-900 flex-1">38% of Your Recruiter's Day Is Wasted on Scheduling</span>
3643                        <i class="fa-solid fa-arrow-right text-xs" style="color:#fe4a23;"></i>
3644                    </a>
3645                    <a href="/article/respond-to-candidates-within-10-minutes-the-speed-advantage" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3646                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">02</span>
3647                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Respond to Candidates Within 10 Minutes</span>
3648                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3649                    </a>
3650                    <a href="/article/60-percent-of-applicants-quit-your-application-before-finishing-it" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3651                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">03</span>
3652                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">60% of Applicants Quit Your Application Before Finishing</span>
3653                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3654                    </a>
3655                    <a href="/article/automated-interview-reminders-the-simplest-way-to-cut-no-shows-by-60" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3656                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">04</span>
3657                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Automated Interview Reminders: Cut No-Shows</span>
3658                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3659                    </a>
3660                    <a href="/article/keep-it-short-why-1-2-interview-rounds-is-the-winning-formula" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3661                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">05</span>
3662                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Why 1–2 Interview Rounds Win</span>
3663                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3664                    </a>
3665                </div>
3666            </div>
3667        </div>
3668
3669        <!-- ── Panel 3: Bad Hires ── -->
3670        <div id="nh-panel-3" class="nh-panel hidden grid grid-cols-1 md:grid-cols-2 gap-10">
3671            <div>
3672                <div class="flex items-center gap-2 mb-4">
3673                    <i class="fa-solid fa-user-xmark text-sm" style="color:#fe4a23;"></i>
3674                    <span class="text-[11px] font-bold uppercase tracking-widest" style="color:#fe4a23;">Candidate Quality</span>
3675                </div>
3676                <h3 class="text-2xl font-bold text-gray-900 mb-4 leading-snug">Gut-feel hiring is expensive guessing.</h3>
3677                <p class="text-sm font-semibold mb-4 flex items-start gap-2"><i class="fa-solid fa-location-dot text-xs mt-1" style="color:#fe4a23;"></i><span style="color:#1f2937;">Built for frontline roles where one wrong hire disrupts the whole shift.</span></p>
3678                <p class="text-gray-500 text-sm leading-relaxed mb-6">
3679                    72% of employers have made a hiring decision they later regretted. Without structured screening, validated assessments, and knockout questions, your process is a coin flip — and every wrong call costs you weeks of productivity.
3680                </p>
3681                <div class="flex items-stretch gap-6 mb-6">
3682                    <div><p class="text-2xl font-bold text-gray-900">72%</p><p class="text-xs text-gray-500 mt-0.5">Made a hire they regretted</p></div>
3683                    <div class="w-px bg-gray-200"></div>
3684                    <div><p class="text-2xl font-bold text-gray-900">5</p><p class="text-xs text-gray-500 mt-0.5">Quality playbooks</p></div>
3685                </div>
3686                <!-- <p class="text-sm mb-4 flex items-start gap-2"><i class="fa-solid fa-pen text-xs mt-1 text-gray-300"></i><span class="italic text-gray-400 pb-ph">[Add client proof — e.g. "A regional grocer lifted 90-day retention 18% by screening with SmartMatch"]</span></p> -->
3687                <div class="flex flex-wrap items-center gap-4">
3688                    <a href="/smartsuite/smartmatch/" class="inline-flex items-center gap-1.5 text-white text-sm font-semibold px-4 py-2 rounded-lg transition" style="background-color:#fe4a23;" onmouseover="this.style.backgroundColor='#d93d1a'" onmouseout="this.style.backgroundColor='#fe4a23'">See the tool →</a>
3689                    <a href="/playbooks/interviewing" class="text-sm font-semibold" style="color:#fe4a23;">See the framework →</a>
3690                </div>
3691            </div>
3692            <div>
3693                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">From the Playbook</p>
3694                <h4 class="font-bold text-gray-900 mb-4">
3694Related Quality Guidance</h4>
3695                <div class="agh-guide space-y-1.5" style="--agh-guide-accent:#fe4a23;--agh-guide-tint:#FFFBFA;">
3696                    <a href="/article/ai-generated-resumes-are-flooding-your-ats-heres-how-to-respond" class="agh-guide-row is-current flex items-center gap-3 px-3 py-3 rounded-xl border group" style="border-color:#fee2d5; background:#fff7f5;">
3697                        <span class="w-6 h-5 rounded flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:#fe4a23;">01</span>
3698                        <span class="text-sm font-medium text-gray-900 flex-1">AI-Generated Resumes Are Flooding Your ATS</span>
3699                        <i class="fa-solid fa-arrow-right text-xs" style="color:#fe4a23;"></i>
3700                    </a>
3701                    <a href="/article/why-structured-interviews-outperform-gut-feel-every-time" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3702                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">02</span>
3703                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Why Structured Interviews Outperform Gut-Feel</span>
3704                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3705                    </a>
3706                    <a href="/article/why-resumes-are-becoming-unreliable-and-what-to-do-instead" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3707                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">03</span>
3708                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Why Resumes Are Becoming Unreliable</span>
3709                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3710                    </a>
3711                    <a href="/article/pre-employment-tests-cut-turnover-by-65-percent" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3712                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">04</span>
3713                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Pre-Employment Tests Cut Turnover by 65%</span>
3714                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3715                    </a>
3716                    <a href="/article/knockout-questions-how-to-filter-50-percent-of-unqualified-applicants-automatically" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3717                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">05</span>
3718                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Knockout Questions: Filter 50% of Unqualified Applicants</span>
3719                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3720                    </a>
3721                </div>
3722            </div>
3723        </div>
3724
3725        <!-- ── Panel 4: Low Engagement ── -->
3726        <div id="nh-panel-4" class="nh-panel hidden grid grid-cols-1 md:grid-cols-2 gap-10">
3727            <div>
3728                <div class="flex items-center gap-2 mb-4">
3729                    <i class="fa-solid fa-chart-line text-sm" style="color:#fe4a23;"></i>
3730                    <span class="text-[11px] font-bold uppercase tracking-widest" style="color:#fe4a23;">Retention &amp; Engagement</span>
3731                </div>
3732                <h3 class="text-2xl font-bold text-gray-900 mb-4 leading-snug">Only 33% of US employees are engaged. Are yours?</h3>
3733                <p class="text-sm font-semibold mb-4 flex items-start gap-2"><i class="fa-solid fa-location-dot text-xs mt-1" style="color:#fe4a23;"></i><span style="color:#1f2937;">Built for distributed hourly teams you rarely get in one room.</span></p>
3734                <p class="text-gray-500 text-sm leading-relaxed mb-6">
3735                    Most disengagement happens quietly — through unpredictable schedules, invisible career paths, and managers who don't check in. By the time someone puts in their notice, the warning signs have been present for months.
3736                </p>
3737                <div class="flex items-stretch gap-6 mb-6">
3738                    <div><p class="text-2xl font-bold text-gray-900">33%</p><p class="text-xs text-gray-500 mt-0.5">US employees engaged at work</p></div>
3739                    <div class="w-px bg-gray-200"></div>
3740                    <div><p class="text-2xl font-bold text-gray-900">5</p><p class="text-xs text-gray-500 mt-0.5">Engagement playbooks</p></div>
3741                </div>
3742                <!-- <p class="text-sm mb-4 flex items-start gap-2"><i class="fa-solid fa-pen text-xs mt-1 text-gray-300"></i><span class="italic text-gray-400 pb-ph">[Add client proof — e.g. "A multi-site employer tripled survey response with SmartCommunicate"]</span></p> -->
3743                <div class="flex flex-wrap items-center gap-4">
3744                    <a href="/smart-communicate/" class="inline-flex items-center gap-1.5 text-white text-sm font-semibold px-4 py-2 rounded-lg transition" style="background-color:#fe4a23;" onmouseover="this.style.backgroundColor='#d93d1a'" onmouseout="this.style.backgroundColor='#fe4a23'">See the tool →</a>
3745                    <a href="/playbooks/retention-and-performance" class="text-sm font-semibold" style="color:#fe4a23;">See the framework →</a>
3746                </div>
3747            </div>
3748            <div>
3749                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">From the Playbook</p>
3750                <h4 class="font-bold text-gray-900 mb-4">Related Engagement Guidance</h4>
3751                <div class="agh-guide space-y-1.5" style="--agh-guide-accent:#fe4a23;--agh-guide-tint:#FFFBFA;">
3752                    <a href="/article/only-33-percent-of-us-employees-are-engaged-at-work-what-that-means-for-hourly-teams" class="agh-guide-row is-current flex items-center gap-3 px-3 py-3 rounded-xl border group" style="border-color:#fee2d5; background:#fff7f5;">
3753                        <span class="w-6 h-5 rounded flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:#fe4a23;">01</span>
3754                        <span class="text-sm font-medium text-gray-900 flex-1">Only 33% of US Employees Are Engaged at Work</span>
3755                        <i class="fa-solid fa-arrow-right text-xs" style="color:#fe4a23;"></i>
3756                    </a>
3757                    <a href="/article/stop-waiting-for-the-exit-interview-start-doing-stay-interviews" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3758                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">02</span>
3759                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Stop Waiting for the Exit Interview: Do Stay Interviews</span>
3760                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3761                    </a>
3762                    <a href="/article/94-percent-of-employees-would-stay-longer-if-you-invested-in-their-career" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3763                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">03</span>
3764                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">94% of Employees Would Stay Longer With Career Investment</span>
3765                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3766                    </a>
3767                    <a href="/article/managers-drive-70-percent-of-engagement-variance-what-are-yours-doing" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3768                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">04</span>
3769                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Managers Drive 70% of Engagement Variance</span>
3770                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3771                    </a>
3772                    <a href="/article/unpredictable-schedules-are-driving-35-percent-higher-turnover-heres-the-fix" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3773                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">05</span>
3774                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Unpredictable Schedules Are Driving 35% Higher Turnover</span>
3775                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3776                    </a>
3777                </div>
3778            </div>
3779        </div>
3780
3781        <!-- ── Panel 5: Pipeline Gaps ── -->
3782        <div id="nh-panel-5" class="nh-panel hidden grid grid-cols-1 md:grid-cols-2 gap-10">
3783            <div>
3784                <div class="flex items-center gap-2 mb-4">
3785                    <i class="fa-solid fa-sitemap text-sm" style="color:#fe4a23;"></i>
3786                    <span class="text-[11px] font-bold uppercase tracking-widest" style="color:#fe4a23;">Talent Pipeline Gaps</span>
3787                </div>
3788                <h3 class="text-2xl font-bold text-gray-900 mb-4 leading-snug">You need 180 applicants to make one great hire.</h3>
3789                <p class="text-sm font-semibold mb-4 flex items-start gap-2"><i class="fa-solid fa-location-dot text-xs mt-1" style="color:#fe4a23;"></i><span style="color:#1f2937;">Built for employers who need 100 hires by Friday — not someday.</span></p>
3790                <p class="text-gray-500 text-sm leading-relaxed mb-6">
3791                    One job board isn't enough. Your employer brand is invisible. Employee referrals are untapped. Google for Jobs is free and you're ignoring it.
3792                </p>
3793                <div class="flex items-stretch gap-6 mb-6">
3794                    <div><p class="text-2xl font-bold text-gray-900">180:1</p><p class="text-xs text-gray-500 mt-0.5">Applicant-to-hire ratio</p></div>
3795                    <div class="w-px bg-gray-200"></div>
3796                    <div><p class="text-2xl font-bold text-gray-900">10</p><p class="text-xs text-gray-500 mt-0.5">Expert articles</p></div>
3797                </div>
3798                <!-- <p class="text-sm mb-4 flex items-start gap-2"><i class="fa-solid fa-pen text-xs mt-1 text-gray-300"></i><span class="italic text-gray-400 pb-ph">[Add client proof — e.g. "A 200-location brand doubled qualified applicants with SmartSource"]</span></p> -->
3799                <div class="flex flex-wrap items-center gap-4">
3800                    <a href="/smart-source" class="inline-flex items-center gap-1.5 text-white text-sm font-semibold px-4 py-2 rounded-lg transition" style="background-color:#fe4a23;" onmouseover="this.style.backgroundColor='#d93d1a'" onmouseout="this.style.backgroundColor='#fe4a23'">See the tool →</a>
3801                    <a href="/playbooks/awareness" class="text-sm font-semibold" style="color:#fe4a23;">See how we solve this →</a>
3802                </div>
3803            </div>
3804            <div>
3805                <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-3">From the Playbook</p>
3806                <h4 class="font-bold text-gray-900 mb-4">Related Pipeline Guidance</h4>
3807                <div class="agh-guide space-y-1.5" style="--agh-guide-accent:#fe4a23;--agh-guide-tint:#FFFBFA;">
3808                    <a href="/article/why-you-need-180-applicants-to-make-one-great-hire" class="agh-guide-row is-current flex items-center gap-3 px-3 py-3 rounded-xl border group" style="border-color:#fee2d5; background:#fff7f5;">
3809                        <span class="w-6 h-5 rounded flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background:#fe4a23;">01</span>
3810                        <span class="text-sm font-medium text-gray-900 flex-1">Why You Need 180 Applicants Per Hire</span>
3811                        <i class="fa-solid fa-arrow-right text-xs" style="color:#fe4a23;"></i>
3812                    </a>
3813                    <a href="/article/one-job-board-is-not-enough-the-case-for-multi-channel-sourcing" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3814                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">02</span>
3815                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">One Job Board Is Not Enough</span>
3816                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3817                    </a>
3818                    <a href="/article/your-employer-brand-is-your-recruiting-conversion-rate" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3819                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">03</span>
3820                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Your Employer Brand Is Your Conversion Rate</span>
3821                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3822                    </a>
3823                    <a href="/article/the-free-recruiting-channel-youre-probably-ignoring-google-for-jobs" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3824                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">04</span>
3825                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Google for Jobs: The Free Channel You're Ignoring</span>
3826                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3827                    </a>
3828                    <a href="/article/employee-referrals-the-highest-roi-sourcing-channel-youre-underusing" class="agh-guide-row flex items-center gap-3 px-3 py-3 rounded-xl transition group">
3829                        <span class="text-xs font-bold text-gray-300 w-6 text-center flex-shrink-0">05</span>
3830                        <span class="text-sm text-gray-600 flex-1 group-hover:text-gray-900">Employee Referrals: The Highest-ROI Channel</span>
3831                        <i class="fa-solid fa-arrow-right text-xs text-gray-300 group-hover:text-[#fe4a23] transition"></i>
3832                    </a>
3833                </div>
3834            </div>
3835        </div>
3836
3837    </div><!-- /panels container -->
3838</div><!-- /max-w -->
3839</section>
3840
3841<script>
3842var _nhLabels = ['Compliance Risk','Turnover','Slow Hiring','Bad Hires','Low Engagement','Pipeline Gaps'];
3843
3844function nhShowProblem(index) {
3845    // Panels
3846    document.querySelectorAll('.nh-panel').forEach(p => p.classList.add('hidden'));
3847    document.getElementById('nh-panel-' + index).classList.remove('hidden');
3848
3849    // Desktop tabs
3850    document.querySelectorAll('.nh-tab').forEach(t => {
3851        t.style.backgroundColor = '';
3852        t.style.color = '';
3853        t.classList.remove('font-semibold');
3854        t.classList.add('font-medium', 'text-gray-600');
3855    });
3856    var tab = document.getElementById('nh-tab-' + index);
3857    if (tab) {
3858        tab.style.backgroundColor = '#fe4a23';
3859        tab.style.color = '#fff';
3860        tab.classList.add('font-semibold');
3861        tab.classList.remove('font-medium', 'text-gray-600');
3862    }
3863
3864    // Mobile label
3865    var mobLabel = document.getElementById('nh-mob-label');
3866    if (mobLabel) mobLabel.textContent = _nhLabels[index];
3867
3868    // Mobile dropdown active states
3869    document.querySelectorAll('.nh-mob-tab').forEach(function(t, i) {
3870        if (i === index) {
3871            t.style.backgroundColor = '#fe4a23';
3872            t.style.color = '#fff';
3873            t.classList.add('font-semibold');
3874            t.classList.remove('font-medium', 'border', 'border-gray-200', 'text-gray-600');
3875        } else {
3876            t.style.backgroundColor = '';
3877            t.style.color = '';
3878            t.classList.remove('font-semibold');
3879            t.classList.add('font-medium', 'border', 'border-gray-200', 'text-gray-600');
3880        }
3881    });
3882
3883    // Close mobile dropdown
3884    var dd = document.getElementById('nh-mob-dropdown');
3885    if (dd && dd.style.display === 'flex') {
3886        dd.style.display = 'none';
3887        document.getElementById('nh-mob-chev').style.transform = '';
3888    }
3889}
3890
3891function nhMobToggle() {
3892    var dd = document.getElementById('nh-mob-dropdown');
3893    var chev = document.getElementById('nh-mob-chev');
3894    var isOpen = dd.style.display === 'flex';
3895    dd.style.display = isOpen ? 'none' : 'flex';
3896    chev.style.transform = isOpen ? '' : 'rotate(180deg)';
3897}
3898</script>
3898
3899
3900
3901<!-- ══════════════════════════════════════════════════════════
3902     SECTION 3 — Expert guidance for modern hiring (with article filter)
3903     ══════════════════════════════════════════════════════════ -->
3904<section class="band-tint py-20 px-8 md:px-40">
3905<div class="max-w-7xl mx-auto"><!-- Filter tabs — dynamic from DB -->
3906    <div class="pb-tabstrip flex flex-wrap gap-2 mb-8">
3907        <button onclick="pbFilter('all')" id="pb-tab-all"
3908            class="pb-ftab pb-ftab-active px-4 py-2 rounded-full text-sm font-semibold bg-gray-900 text-white transition">
3909            All <span class="ml-0.5 opacity-60 font-normal">112</span>
3910        </button>
3911        
3912        <button onclick="pbFilter('recruitment-compliance')" id="pb-tab-recruitment-compliance"
3913            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3914            Compliance <span class="ml-0.5 text-gray-400 font-normal">19</span>
3915        </button>
3916        
3917        <button onclick="pbFilter('awareness')" id="pb-tab-awareness"
3918            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3919            Awareness <span class="ml-0.5 text-gray-400 font-normal">10</span>
3920        </button>
3921        
3922        <button onclick="pbFilter('engagement')" id="pb-tab-engagement"
3923            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3924            Engagement <span class="ml-0.5 text-gray-400 font-normal">5</span>
3925        </button>
3926        
3927        <button onclick="pbFilter('screening')" id="pb-tab-screening"
3928            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3929            Screening <span class="ml-0.5 text-gray-400 font-normal">8</span>
3930        </button>
3931        
3932        <button onclick="pbFilter('interviewing')" id="pb-tab-interviewing"
3933            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3934            Interviewing <span class="ml-0.5 text-gray-400 font-normal">5</span>
3935        </button>
3936        
3937        <button onclick="pbFilter('offer-and-negotiation')" id="pb-tab-offer-and-negotiation"
3938            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3939            Offer <span class="ml-0.5 text-gray-400 font-normal">4</span>
3940        </button>
3941        
3942        <button onclick="pbFilter('onboarding')" id="pb-tab-onboarding"
3943            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3944            Onboarding <span class="ml-0.5 text-gray-400 font-normal">15</span>
3945        </button>
3946        
3947        <button onclick="pbFilter('retention-and-performance')" id="pb-tab-retention-and-performance"
3948            class="pb-ftab px-4 py-2 rounded-full text-sm font-medium border border-gray-300 bg-white text-gray-600 transition">
3949            Retention <span class="ml-0.5 text-gray-400 font-normal">39</span>
3950        </button>
3951        
3952    </div>
3953
3954
3955<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
3956    <!-- ── LEFT: sticky info ── -->
3957    <div class="lg:sticky lg:top-24">
3958        <p class="text-xs font-bold uppercase tracking-widest text-gray-500 mb-5">The Playbook</p>
3959        <h2 class="font-extrabold text-gray-900 leading-[1.08] mb-5" style="font-size:clamp(2.4rem,4vw,3.5rem);">
3960            Expert<br>guidance for<br><span style="color:#fe4a23;">modern hiring</span>
3961        </h2>
3962        <p class="text-gray-500 text-sm leading-relaxed mb-6 max-w-xs">
3963            Real-world guidance from hiring, compliance, and talent leaders so you can make better decisions and reduce risk
3964        </p>
3965        <ul class="space-y-3 mb-8">
3966            <li class="flex items-center gap-2.5 text-sm text-gray-700">
3967                <i class="fa-solid fa-circle-check flex-shrink-0" style="color:#fe4a23;"></i> 112 articles and guides
3968            </li>
3969            <li class="flex items-center gap-2.5 text-sm text-gray-700">
3970                <i class="fa-solid fa-circle-check flex-shrink-0" style="color:#fe4a23;"></i> Built by experts, backed by data
3971            </li>
3972            <li class="flex items-center gap-2.5 text-sm text-gray-700">
3973                <i class="fa-solid fa-circle-check flex-shrink-0" style="color:#fe4a23;"></i> Updated regularly to reflect what's working now
3974            </li>
3975        </ul>
3976        <a href="/playbooks/"
3977           class="inline-flex items-center gap-2 bg-gray-900 text-white font-semibold px-6 py-3.5 rounded-xl text-sm hover:bg-gray-700 transition">
3978            Explore The Playbook <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
3979        </a>
3980    </div>
3981
3982    <!-- ── RIGHT: filter tabs + article cards ── -->
3983    <div>
3984
3985        <!-- Article cards — dynamic from DB, 3 per tab --><div class="space-y-3">
3986            
3987            
3988            
3989            <a href="/article/the-compliance-checklist-for-high-volume-hiring"
3990               class="pb-article flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
3991               data-cats="all recruitment-compliance">
3992                
3993                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
3994                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/ce32f7ab-9e72-4f4d-86b8-81bf55790735-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/ce32f7ab-9e72-4f4d-86b8-81bf55790735-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/ce32f7ab-9e72-4f4d-86b8-81bf55790735-960.webp 960w" sizes="(max-width: 640px) 100v
3994w, 33vw" alt="The Compliance Checklist for High-Volume Hiring"
3995                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
3996                </div>
3997                
3998                <div class="flex-1 min-w-0 py-4 pr-4">
3999                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Compliance</span>
4000                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4001                        The Compliance Checklist for High-Volume Hiring
4002                    </h3>
4003                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4004                </div>
4005            </a>
4006            
4007            
4008            <a href="/article/recordkeeping-requirements-for-job-postings-under-pay-transparency-laws"
4009               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4010               data-cats="recruitment-compliance">
4011                
4012                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4013                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8474b132-aabf-49a6-a506-d6c9805613f3-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8474b132-aabf-49a6-a506-d6c9805613f3-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8474b132-aabf-49a6-a506-d6c9805613f3-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Recordkeeping Requirements for Job Postings Under Pay Transparency Laws"
4014                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4015                </div>
4016                
4017                <div class="flex-1 min-w-0 py-4 pr-4">
4018                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Compliance</span>
4019                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4020                        Recordkeeping Requirements for Job Postings Under Pay Transparency Laws
4021                    </h3>
4022                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4023                </div>
4024            </a>
4025            
4026            
4027            <a href="/article/mandatory-pay-range-disclosure-requirements-in-job-postings"
4028               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4029               data-cats="recruitment-compliance">
4030                
4031                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4032                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/ae1d2b47-d185-43dd-b3ab-879b43588312-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/ae1d2b47-d185-43dd-b3ab-879b43588312-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/ae1d2b47-d185-43dd-b3ab-879b43588312-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Mandatory Pay Range Disclosure Requirements in Job Postings"
4033                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4034                </div>
4035                
4036                <div class="flex-1 min-w-0 py-4 pr-4">
4037                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Compliance</span>
4038                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4039                        Mandatory Pay Range Disclosure Requirements in Job Postings
4040                    </h3>
4041                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4042                </div>
4043            </a>
4044            
4045            <a href="/playbooks/recruitment-compliance"
4046               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4047               data-cats="recruitment-compliance">
4048                <span class="text-sm text-gray-500">
4049                    Showing 3 of 19 in Compliance
4050                </span>
4051                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4052                    View all 19 <span aria-hidden="true">→</span>
4053                </span>
4054            </a>
4055            
4056            
4057            
4058            <a href="/article/your-employer-brand-is-your-recruiting-conversion-rate"
4059               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4060               data-cats="awareness">
4061                
4062                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4063                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/706c198a-4aba-4a9a-995a-f968af844e90-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/706c198a-4aba-4a9a-995a-f968af844e90-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/706c198a-4aba-4a9a-995a-f968af844e90-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Your Employer Brand Is Your Recruiting Conversion Rate"
4064                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4065                </div>
4066                
4067                <div class="flex-1 min-w-0 py-4 pr-4">
4068                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Awareness</span>
4069                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4070                        Your Employer Brand Is Your Recruiting Conversion Rate
4071                    </h3>
4072                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4073                </div>
4074            </a>
4075            
4076            
4077            <a href="/article/why-hiding-pay-in-your-job-posting-is-costing-you-candidates"
4078               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4079               data-cats="awareness">
4080                
4081                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4082                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4e6ad066-4aed-482f-aeb2-a636501b6a7b.webp" srcset="" sizes="(max-width: 640px) 100vw, 33vw" alt="Why Hiding Pay in Your Job Posting Is Costing You Candidates"
4083                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4084                </div>
4085                
4086                <div class="flex-1 min-w-0 py-4 pr-4">
4087                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Awareness</span>
4088                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4089                        Why Hiding Pay in Your Job Posting Is Costing You Candidates
4090                    </h3>
4091                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4092                </div>
4093            </a>
4094            
4095            
4096            <a href="/article/one-job-board-is-not-enough-the-case-for-multi-channel-sourcing"
4097               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4098               data-cats="awareness">
4099                
4100                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4101                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/2660cafd-560f-4b9d-9e93-aff9e896d9af-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/2660cafd-560f-4b9d-9e93-aff9e896d9af-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/2660cafd-560f-4b9d-9e93-aff9e896d9af-960.webp 960w" sizes="(max-width: 640px) 100v
4101w, 33vw" alt="One Job Board Is Not Enough: The Case for Multi-Channel Sourcing"
4102                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4103                </div>
4104                
4105                <div class="flex-1 min-w-0 py-4 pr-4">
4106                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Awareness</span>
4107                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4108                        One Job Board Is Not Enough: The Case for Multi-Channel Sourcing
4109                    </h3>
4110                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4111                </div>
4112            </a>
4113            
4114            <a href="/playbooks/awareness"
4115               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4116               data-cats="awareness">
4117                <span class="text-sm text-gray-500">
4118                    Showing 3 of 10 in Awareness
4119                </span>
4120                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4121                    View all 10 <span aria-hidden="true">→</span>
4122                </span>
4123            </a>
4124            
4125            
4126            
4127            <a href="/article/how-to-stop-candidate-ghosting-before-it-starts"
4128               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4129               data-cats="engagement">
4130                
4131                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4132                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8fcc2c88-5fbf-4903-9edd-21245a9fd400-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8fcc2c88-5fbf-4903-9edd-21245a9fd400-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8fcc2c88-5fbf-4903-9edd-21245a9fd400-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="How to Stop Candidate Ghosting Before It Starts"
4133                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4134                </div>
4135                
4136                <div class="flex-1 min-w-0 py-4 pr-4">
4137                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Engagement</span>
4138                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4139                        How to Stop Candidate Ghosting Before It Starts
4140                    </h3>
4141                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4142                </div>
4143            </a>
4144            
4145            
4146            <a href="/article/the-hidden-gold-in-your-ats-re-engaging-existing-candidates"
4147               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4148               data-cats="engagement">
4149                
4150                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4151                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4689334b-b420-4e89-a8e8-bd608ab2a354-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4689334b-b420-4e89-a8e8-bd608ab2a354-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4689334b-b420-4e89-a8e8-bd608ab2a354-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="The Hidden Gold in Your ATS: Re-Engaging Existing Candidates"
4152                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4153                </div>
4154                
4155                <div class="flex-1 min-w-0 py-4 pr-4">
4156                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Engagement</span>
4157                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4158                        The Hidden Gold in Your ATS: Re-Engaging Existing Candidates
4159                    </h3>
4160                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4161                </div>
4162            </a>
4163            
4164            
4165            <a href="/article/the-shorter-your-application-the-more-completed-applications-you-get"
4166               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4167               data-cats="engagement">
4168                
4169                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4170                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/dff0f466-3cff-413e-a360-b2dfc01889cc-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/dff0f466-3cff-413e-a360-b2dfc01889cc-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/dff0f466-3cff-413e-a360-b2dfc01889cc-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="The Shorter Your Application The More Completed Applications You Get"
4171                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4172                </div>
4173                
4174                <div class="flex-1 min-w-0 py-4 pr-4">
4175                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Engagement</span>
4176                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4177                        The Shorter Your Application The More Completed Applications You Get
4178                    </h3>
4179                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4180                </div>
4181            </a>
4182            
4183            <a href="/playbooks/engagement"
4184               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4185               data-cats="engagement">
4186                <span class="text-sm text-gray-500">
4187                    Showing 3 of 5 in Engagement
4188                </span>
4189                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4190                    View all 5 <span aria-hidden="true">→</span>
4191                </span>
4192            </a>
4193            
4194            
4195            
4196            <a href="/article/pre-employment-tests-cut-turnover-by-65-percent"
4197               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4198               data-cats="screening">
4199                
4200                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4201                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/04ad5f44-ec41-4e2f-a213-17f3d62049f5-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/04ad5f44-ec41-4e2f-a213-17f3d62049f5-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/04ad5f44-ec41-4e2f-a213-17f3d62049f5-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Pre-Employment Tests Cut Turnover by 65 Percent"
4202                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4203                </div>
4204                
4205                <div class="flex-1 min-w-0 py-4 pr-4">
4206                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Screening</span>
4207                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4208                        Pre-Employment Tests Cut Turnover by 65 Percent
4209                    </h3>
4210                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4211                </div>
4212            </a>
4213            
4214            
4215            <a href="/article/using-ai-to-detect-fraudulent-candidates-before-they-cost-you"
4216               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4217               data-cats="screening">
4218                
4219                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4220                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/983d2e0e-3c8e-4a79-9fc1-1d14b5fb64e3-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/983d2e0e-3c8e-4a79-9fc1-1d14b5fb64e3-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/983d2e0e-3c8e-4a79-9fc1-1d14b5fb64e3-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Using AI to Detect Fraudulent Candidates Before They Cost You"
4221                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4222                </div>
4223                
4224                <div class="flex-1 min-w-0 py-4 pr-4">
4225                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Screening</span>
4226                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4227                        Using AI to Detect Fraudulent Candidates Before They Cost You
4228                    </h3>
4229                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4230                </div>
4231            </a>
4232            
4233            
4234            <a href="/article/knockout-questions-how-to-filter-50-percent-of-unqualified-applicants-automatically"
4235               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4236               data-cats="screening">
4237                
4238                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4239                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8498783a-7a51-40b8-afc8-4a346d083dd4-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8498783a-7a51-40b8-afc8-4a346d083dd4-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8498783a-7a51-40b8-afc8-4a346d083dd4-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Knockout Questions How to Filter 50 Percent of Unqualified Applicants Automatically"
4240                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4241                </div>
4242                
4243                <div class="flex-1 min-w-0 py-4 pr-4">
4244                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Screening</span>
4245                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4246                        Knockout Questions How to Filter 50 Percent of Unqualified Applicants Automatically
4247                    </h3>
4248                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4249                </div>
4250            </a>
4251            
4252            <a href="/playbooks/screening"
4253               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4254               data-cats="screening">
4255                <span class="text-sm text-gray-500">
4256                    Showing 3 of 8 in Screening
4257                </span>
4258                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4259                    View all 8 <span aria-hidden="true">→</span>
4260                </span>
4261            </a>
4262            
4263            
4264            
4265            <a href="/article/the-scorecard-every-frontline-hiring-manager-needs"
4266               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4267               data-cats="interviewing">
4268                
4269                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4270                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/adc9d6b7-6e4d-4ca1-9577-f3987585265e-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/adc9d6b7-6e4d-4ca1-9577-f3987585265e-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/adc9d6b7-6e4d-4ca1-9577-f3987585265e-960.webp 960w" sizes="(max-width: 640px) 100v
4270w, 33vw" alt="The Scorecard Every Frontline Hiring Manager Needs"
4271                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4272                </div>
4273                
4274                <div class="flex-1 min-w-0 py-4 pr-4">
4275                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Interviewing</span>
4276                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4277                        The Scorecard Every Frontline Hiring Manager Needs
4278                    </h3>
4279                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4280                </div>
4281            </a>
4282            
4283            
4284            <a href="/article/keep-it-short-why-1-2-interview-rounds-is-the-winning-formula"
4285               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4286               data-cats="interviewing">
4287                
4288                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4289                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/add318e5-373e-484a-8f83-9789370add02-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/add318e5-373e-484a-8f83-9789370add02-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/add318e5-373e-484a-8f83-9789370add02-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Keep It Short: Why 1-2 Interview Rounds Is the Winning Formula"
4290                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4291                </div>
4292                
4293                <div class="flex-1 min-w-0 py-4 pr-4">
4294                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Interviewing</span>
4295                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4296                        Keep It Short: Why 1-2 Interview Rounds Is the Winning Formula
4297                    </h3>
4298                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4299                </div>
4300            </a>
4301            
4302            
4303            <a href="/article/two-way-texting-the-upgrade-your-interview-process-needs"
4304               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4305               data-cats="interviewing">
4306                
4307                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4308                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/0ec79d41-f354-4e51-bab5-bc44f350207d-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/0ec79d41-f354-4e51-bab5-bc44f350207d-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/0ec79d41-f354-4e51-bab5-bc44f350207d-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Two-Way Texting: The Upgrade Your Interview Process Needs"
4309                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4310                </div>
4311                
4312                <div class="flex-1 min-w-0 py-4 pr-4">
4313                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Interviewing</span>
4314                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4315                        Two-Way Texting: The Upgrade Your Interview Process Needs
4316                    </h3>
4317                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4318                </div>
4319            </a>
4320            
4321            <a href="/playbooks/interviewing"
4322               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4323               data-cats="interviewing">
4324                <span class="text-sm text-gray-500">
4325                    Showing 3 of 5 in Interviewing
4326                </span>
4327                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4328                    View all 5 <span aria-hidden="true">→</span>
4329                </span>
4330            </a>
4331            
4332            
4333            
4334            <a href="/article/you-cant-fix-what-you-dont-measure-tracking-offer-decline-reasons"
4335               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4336               data-cats="offer-and-negotiation">
4337                
4338                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4339                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/f70cf32e-a55b-47e5-937f-10e077754733-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/f70cf32e-a55b-47e5-937f-10e077754733-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/f70cf32e-a55b-47e5-937f-10e077754733-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="You Can&#39;t Fix What You Don&#39;t Measure: Tracking Offer Decline Reasons"
4340                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4341                </div>
4342                
4343                <div class="flex-1 min-w-0 py-4 pr-4">
4344                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Offer</span>
4345                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4346                        You Can&#39;t Fix What You Don&#39;t Measure: Tracking Offer Decline Reasons
4347                    </h3>
4348                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4349                </div>
4350            </a>
4351            
4352            
4353            <a href="/article/benchmarking-your-offer-acceptance-rate-what-good-looks-like"
4354               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4355               data-cats="offer-and-negotiation">
4356                
4357                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4358                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/08fde07e-b48c-4bfb-9bb1-f9ce4896f2a9-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/08fde07e-b48c-4bfb-9bb1-f9ce4896f2a9-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/08fde07e-b48c-4bfb-9bb1-f9ce4896f2a9-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Benchmarking Your Offer Acceptance Rate: What Good Looks Like"
4359                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4360                </div>
4361                
4362                <div class="flex-1 min-w-0 py-4 pr-4">
4363                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Offer</span>
4364                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4365                        Benchmarking Your Offer Acceptance Rate: What Good Looks Like
4366                    </h3>
4367                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4368                </div>
4369            </a>
4370            
4371            
4372            <a href="/article/offer-approval-delays-are-quietly-killing-your-acceptance-rate"
4373               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4374               data-cats="offer-and-negotiation">
4375                
4376                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4377                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/83785d3e-67eb-4e9a-845a-35d0d07c61d6-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/83785d3e-67eb-4e9a-845a-35d0d07c61d6-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/83785d3e-67eb-4e9a-845a-35d0d07c61d6-960.webp 960w" sizes="(max-width: 640px) 100v
4377w, 33vw" alt="Offer Approval Delays Are Quietly Killing Your Acceptance Rate"
4378                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4379                </div>
4380                
4381                <div class="flex-1 min-w-0 py-4 pr-4">
4382                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Offer</span>
4383                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4384                        Offer Approval Delays Are Quietly Killing Your Acceptance Rate
4385                    </h3>
4386                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4387                </div>
4388            </a>
4389            
4390            <a href="/playbooks/offer-and-negotiation"
4391               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4392               data-cats="offer-and-negotiation">
4393                <span class="text-sm text-gray-500">
4394                    Showing 3 of 4 in Offer
4395                </span>
4396                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4397                    View all 4 <span aria-hidden="true">→</span>
4398                </span>
4399            </a>
4400            
4401            
4402            
4403            <a href="/article/the-funnel-doesnt-end-at-the-offer-tracking-offer-to-start-conversion"
4404               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4405               data-cats="onboarding">
4406                
4407                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4408                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8c8fd2e1-674a-406d-a608-80e16abdb975-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8c8fd2e1-674a-406d-a608-80e16abdb975-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8c8fd2e1-674a-406d-a608-80e16abdb975-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="The Funnel Doesn&#39;t End at the Offer: Tracking Offer-to-Start Conversion"
4409                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4410                </div>
4411                
4412                <div class="flex-1 min-w-0 py-4 pr-4">
4413                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Onboarding</span>
4414                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4415                        The Funnel Doesn&#39;t End at the Offer: Tracking Offer-to-Start Conversion
4416                    </h3>
4417                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4418                </div>
4419            </a>
4420            
4421            
4422            <a href="/article/time-to-productivity-is-the-onboarding-metric-that-actually-matters"
4423               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4424               data-cats="onboarding">
4425                
4426                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4427                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4ab97e63-106e-4656-807f-1bf56ea89659-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4ab97e63-106e-4656-807f-1bf56ea89659-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/4ab97e63-106e-4656-807f-1bf56ea89659-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Time-to-Productivity Is the Onboarding Metric That Actually Matters"
4428                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4429                </div>
4430                
4431                <div class="flex-1 min-w-0 py-4 pr-4">
4432                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Onboarding</span>
4433                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4434                        Time-to-Productivity Is the Onboarding Metric That Actually Matters
4435                    </h3>
4436                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4437                </div>
4438            </a>
4439            
4440            
4441            <a href="/article/nearly-30-of-new-employees-leave-in-the-first-90-days-heres-how-to-fix-it"
4442               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4443               data-cats="onboarding">
4444                
4445                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4446                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/26af65eb-cdb8-448a-86b3-a1bbb45bc4c1-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/26af65eb-cdb8-448a-86b3-a1bbb45bc4c1-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/26af65eb-cdb8-448a-86b3-a1bbb45bc4c1-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Nearly 30% of New Employees Leave in the First 90 Days: Here&#39;s How to Fix It"
4447                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4448                </div>
4449                
4450                <div class="flex-1 min-w-0 py-4 pr-4">
4451                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Onboarding</span>
4452                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4453                        Nearly 30% of New Employees Leave in the First 90 Days: Here&#39;s How to Fix It
4454                    </h3>
4455                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4456                </div>
4457            </a>
4458            
4459            <a href="/playbooks/onboarding"
4460               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4461               data-cats="onboarding">
4462                <span class="text-sm text-gray-500">
4463                    Showing 3 of 15 in Onboarding
4464                </span>
4465                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4466                    View all 15 <span aria-hidden="true">→</span>
4467                </span>
4468            </a>
4469            
4470            
4471            
4472            <a href="/article/reducing-time-to-fill-without-sacrificing-quality"
4473               class="pb-article flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4474               data-cats="all retention-and-performance">
4475                
4476                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4477                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/24651b56-eab4-44db-aa3e-85dd09f9e816-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/24651b56-eab4-44db-aa3e-85dd09f9e816-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/24651b56-eab4-44db-aa3e-85dd09f9e816-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Reducing Time-to-Fill Without Sacrificing Quality"
4478                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4479                </div>
4480                
4481                <div class="flex-1 min-w-0 py-4 pr-4">
4482                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Retention</span>
4483                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4484                        Reducing Time-to-Fill Without Sacrificing Quality
4485                    </h3>
4486                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4487                </div>
4488            </a>
4489            
4490            
4491            <a href="/article/how-to-benchmark-your-hiring"
4492               class="pb-article flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4493               data-cats="all retention-and-performance">
4494                
4495                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4496                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8a8734f5-b721-4138-a56a-bc6eab2e18e8-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8a8734f5-b721-4138-a56a-bc6eab2e18e8-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/8a8734f5-b721-4138-a56a-bc6eab2e18e8-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="How to Benchmark Your Hiring"
4497                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4498                </div>
4499                
4500                <div class="flex-1 min-w-0 py-4 pr-4">
4501                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Retention</span>
4502                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4503                        How to Benchmark Your Hiring
4504                    </h3>
4505                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4506                </div>
4507            </a>
4508            
4509            
4510            <a href="/article/recruiting-is-operations"
4511               class="pb-article hidden flex gap-5 bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-sm transition group"
4512               data-cats="retention-and-performance">
4513                
4514                <div class="w-40 self-stretch flex-shrink-0 overflow-hidden bg-gray-100" style="min-height:7rem;">
4515                    <img src="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/35cfd612-0628-4232-a2e1-16e91dd411c1-960.webp" srcset="https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/35cfd612-0628-4232-a2e1-16e91dd411c1-480.webp 480w, https://cadient-ai.s3.us-east-1.amazonaws.com/blog-images/35cfd612-0628-4232-a2e1-16e91dd411c1-960.webp 960w" sizes="(max-width: 640px) 100vw, 33vw" alt="Recruiting Is Operations"
4516                         class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
4517                </div>
4518                
4519                <div class="flex-1 min-w-0 py-4 pr-4">
4520                    <span class="inline-block text-[9px] font-bold uppercase tracking-widest border border-gray-200 text-gray-400 px-2 py-0.5 rounded-full mb-2">Retention</span>
4521                    <h3 class="font-bold text-gray-900 text-sm leading-snug mb-3 group-hover:text-[#fe4a23] transition line-clamp-2">
4522                        Recruiting Is Operations
4523                    </h3>
4524                    <span class="text-sm font-semibold" style="color:#fe4a23;">Read article →</span>
4525                </div>
4526            </a>
4527            
4528            <a href="/playbooks/retention-and-performance"
4529               class="pb-article pb-viewall hidden items-center justify-between gap-3 bg-white rounded-2xl border border-gray-100 px-5 py-3.5 hover:shadow-sm transition group"
4530               data-cats="retention-and-performance">
4531                <span class="text-sm text-gray-500">
4532                    Showing 3 of 39 in Retention
4533                </span>
4534                <span class="text-sm font-semibold whitespace-nowrap" style="color:#fe4a23;">
4535                    View all 39 <span aria-hidden="true">→</span>
4536                </span>
4537            </a>
4538            
4539        </div><!-- /articles -->
4540    </div><!-- /right -->
4541
4542</div><!-- /grid -->
4543</div><!-- /max-w -->
4544</section>
4545
4546<script>
4547function pbFilter(cat) {
4548    // Update tab styles
4549    document.querySelectorAll('.pb-ftab').forEach(function(t) {
4550        t.classList.remove('pb-ftab-active','bg-gray-900','text-white','font-semibold');
4551        t.classList.add('border','border-gray-300','bg-white','text-gray-600','font-medium');
4552    });
4553    var activeTab = document.getElementById('pb-tab-' + cat);
4554    activeTab.classList.add('pb-ftab-active','bg-gray-900','text-white','font-semibold');
4555    activeTab.classList.remove('border','border-gray-300','bg-white','text-gray-600','font-medium');
4556
4557    // Show/hide cards
4558    document.querySelectorAll('.pb-article').forEach(function(card) {
4559        var cats = card.getAttribute('data-cats').split(' ');
4560        if (cats.indexOf(cat) !== -1) {
4561            card.classList.remove('hidden');
4562            card.classList.add('flex');
4563        } else {
4564            card.classList.add('hidden');
4565            card.classList.remove('flex');
4566        }
4567    });
4568}
4569</script>
4569
4570
4571
4572<!-- ══════════════════════════════════════════════════════════
4573     SECTION 4 — Every problem has a SmartSuite™ solution
4574     ══════════════════════════════════════════════════════════ -->
4575<section class="bg-white py-20 px-8 md:px-40">
4576    <div class="max-w-7xl mx-auto">
4577
4578        <!-- Heading -->
4579        <div class="text-center max-w-2xl mx-auto mb-14">
4580            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">
4581                Every problem has a SmartSuite™ solution
4582            </h2>
4583            <p class="text-gray-500 text-base leading-relaxed">
4584                Purpose-built modules that map to your pain — not generic features.
4585            </p>
4586        </div>
4587
4588        <!-- Top row: 3 cards -->
4589        <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-5">
4590
4591            <!-- SmartSource™ --><a href="/smart-source" class="bg-white rounded-2xl border border-gray-200 p-6 flex flex-col hover:shadow-md transition group">
4592                <p class="text-xl font-bold text-gray-900 mb-1">SmartSource™</p>
4593                <p class="text-[11px] font-bold uppercase tracking-widest mb-2" style="color:#fe4a23;">Solves: Pipeline Gaps</p>
4594                <p class="text-sm text-gray-500 mb-5">AI-optimized multi-channel job distribution</p>
4595                <!-- UI Mockup -->
4596                <div class="flex-1 relative overflow-hidden bg-gray-50 rounded-xl p-4 border border-gray-100">
4597                    <div class="flex items-center justify-between mb-3">
4598                        <p class="text-xs font-bold text-gray-800">Channel Performance</p>
4599                        <span class="text-[10px] text-gray-400 border border-gray-200 rounded px-2 py-0.5">Last 30 days ∨</span>
4600                    </div>
4601                    <div class="space-y-2">
4602                        <div class="flex items-center gap-2">
4603                            <span class="text-[10px] text-gray-500 w-14 flex-shrink-0">Indeed</span>
4604                            <div class="flex-1 bg-gray-200 rounded-full h-1.5 overflow-hidden">
4605                                <div class="h-full rounded-full" style="width:82%; background:#fe4a23;"></div>
4606                            </div>
4607                            <span class="text-[10px] font-semibold text-gray-700 w-10 text-right">1,243</span>
4608                        </div>
4609                        <div class="flex items-center gap-2">
4610                            <span class="text-[10px] text-gray-500 w-14 flex-shrink-0">LinkedIn</span>
4611                            <div class="flex-1 bg-gray-200 rounded-full h-1.5 overflow-hidden">
4612                                <div class="h-full rounded-full" style="width:56%; background:#fe4a23;"></div>
4613                            </div>
4614                            <span class="text-[10px] font-semibold text-gray-700 w-10 text-right">842</span>
4615                        </div>
4616                        <div class="flex items-center gap-2">
4617                            <span class="text-[10px] text-gray-500 w-14 flex-shrink-0">Referral</span>
4618                            <div class="flex-1 bg-gray-200 rounded-full h-1.5 overflow-hidden">
4619                                <div class="h-full rounded-full" style="width:40%; background:#fe4a23;"></div>
4620                            </div>
4621                            <span class="text-[10px] font-semibold text-gray-700 w-10 text-right">612</span>
4622                        </div>
4623                        <div class="flex items-center gap-2">
4624                            <span class="text-[10px] text-gray-500 w-14 flex-shrink-0">Glassdoor</span>
4625                            <div class="flex-1 bg-gray-200 rounded-full h-1.5 overflow-hidden">
4626                                <div class="h-full rounded-full" style="width:22%; background:#fe4a23;"></div>
4627                            </div>
4628                            <span class="text-[10px] font-semibold text-gray-700 w-10 text-right">342</span>
4629                        </div>
4630                        <div class="flex items-center gap-2">
4631                            <span class="text-[10px] text-gray-500 w-14 flex-shrink-0">Other</span>
4632                            <div class="flex-1 bg-gray-200 rounded-full h-1.5 overflow-hidden">
4633                                <div class="h-full rounded-full" style="width:8%; background:#fe4a23;"></div>
4634                            </div>
4635                            <span class="text-[10px] font-semibold text-gray-700 w-10 text-right">119</span>
4636                        </div>
4637                    </div>
4638                    <!-- Bottom fade -->
4639                    <div class="absolute bottom-0 left-0 right-0 h-10 rounded-b-xl pointer-events-none" style="background:linear-gradient(to bottom, transparent, #f9fafb);"></div>
4640                </div>
4641            </a>
4642
4643            <!-- SmartMatch™ -->
4644            <a href="/smartsuite/smartmatch/" class="bg-white rounded-2xl border border-gray-200 p-6 flex flex-col hover:shadow-md transition group">
4645                <p class="text-xl font-bold text-gray-900 mb-1">SmartMatch™</p>
4646                <p class="text-[11px] font-bold uppercase tracking-widest mb-2" style="color:#fe4a23;">Solves: Bad Hires</p>
4647                <p class="text-sm text-gray-500 mb-5">Skills-based candidate matching</p>
4648                <!-- UI Mockup -->
4649                <div class="flex-1 relative overflow-hidden bg-gray-50 rounded-xl p-4 border border-gray-100">
4650                    <p class="text-xs font-bold text-gray-800 mb-3">Top Matches</p>
4651                    <div class="space-y-3">
4652                        <div class="flex items-center gap-3">
4653                            <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0 text-[11px] font-bold text-amber-700">TM</div>
4654                            <div class="flex-1 min-w-0">
4655                                <p class="text-xs font-semibold text-gray-900 leading-none">Taylor Morgan</p>
4656                                <p class="text-[10px] text-gray-400 mt-0.5">Senior Buyer</p>
4657                            </div>
4658                            <span class="text-sm font-bold" style="color:#fe4a23;">98%</span>
4659                        </div>
4660                        <div class="flex items-center gap-3">
4661                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 text-[11px] font-bold text-blue-700">AC</div>
4662                            <div class="flex-1 min-w-0">
4663                                <p class="text-xs font-semibold text-gray-900 leading-none">Alex Chen</p>
4664                                <p class="text-[10px] text-gray-400 mt-0.5">Procurement Lead</p>
4665                            </div>
4666                            <span class="text-sm font-bold" style="color:#fe4a23;">94%</span>
4667                        </div>
4668                        <div class="flex items-center gap-3">
4669                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 text-[11px] font-bold text-green-700">MJ</div>
4670                            <div class="flex-1 min-w-0">
4671                                <p class="text-xs font-semibold text-gray-900 leading-none">Marcus Johnson</p>
4672                                <p class="text-[10px] text-gray-400 mt-0.5">Strategic Sourcing Manager</p>
4673                            </div>
4674                            <span class="text-sm font-bold" style="color:#fe4a23;">91%</span>
4675                        </div>
4676                    </div>
4677                    <!-- Bottom fade -->
4678                    <div class="absolute bottom-0 left-0 right-0 h-10 rounded-b-xl pointer-events-none" style="background:linear-gradient(to bottom, transparent, #f9fafb);"></div>
4679                </div>
4680            </a>
4681
4682            <!-- SmartScreen™ -->
4683            <a href="/smartsuite/smartscreen/" class="bg-white rounded-2xl border border-gray-200 p-6 flex flex-col hover:shadow-md transition group">
4684                <p class="text-xl font-bold text-gray-900 mb-1">SmartScreen™</p>
4685                <p class="text-[11px] font-bold uppercase tracking-widest mb-2" style="color:#fe4a23;">Solves: Quality of Hire</p>
4686                <p class="text-sm text-gray-500 mb-5">Structured AI-scored interviews</p>
4687                <!-- UI Mockup -->
4688                <div class="flex-1 relative overflow-hidden bg-gray-50 rounded-xl p-4 border border-gray-100">
4689                    <div class="flex items-center gap-1.5 mb-3">
4690                        <i class="fa-solid fa-wand-magic-sparkles text-[10px]" style="color:#fe4a23;"></i>
4691                        <p class="text-xs font-bold text-gray-800">AI Interview Scorecard</p>
4692                    </div>
4693                    <div class="space-y-2 mb-3">
4694                        <div class="flex items-center gap-2">
4695                            <i class="fa-regular fa-comment-dots text-[9px] text-gray-400 w-3"></i>
4696                            <span class="text-[10px] text-gray-600 flex-1">Communication</span>
4697                            <div class="flex gap-0.5">
4698                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4699                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4700                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4701                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4702                                <span class="w-2.5 h-2.5 rounded-full bg-gray-200"></span>
4703                            </div>
4704                        </div>
4705                        <div class="flex items-center gap-2">
4706                            <i class="fa-regular fa-lightbulb text-[9px] text-gray-400 w-3"></i>
4707                            <span class="text-[10px] text-gray-600 flex-1">Problem Solving</span>
4708                            <div class="flex gap-0.5">
4709                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4710                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4711                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4712                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4713                                <span class="w-2.5 h-2.5 rounded-full bg-gray-200"></span>
4714                            </div>
4715                        </div>
4716                        <div class="flex items-center gap-2">
4717                            <i class="fa-regular fa-book-open text-[9px] text-gray-400 w-3"></i>
4718                            <span class="text-[10px] text-gray-600 flex-1">Job Knowledge</span>
4719                            <div class="flex gap-0.5">
4720                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4721                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4722                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4723                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4724                                <span class="w-2.5 h-2.5 rounded-full bg-gray-200"></span>
4725                            </div>
4726                        </div>
4727                        <div class="flex items-center gap-2">
4728                            <i class="fa-regular fa-handshake text-[9px] text-gray-400 w-3"></i>
4729                            <span class="text-[10px] text-gray-600 flex-1">Culture Add</span>
4730                            <div class="flex gap-0.5">
4731                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4732                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4733                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4734                                <span class="w-2.5 h-2.5 rounded-full" style="background:#fe4a23;"></span>
4735                                <span class="w-2.5 h-2.5 rounded-full bg-gray-200"></span>
4736                            </div>
4737                        </div>
4738                    </div>
4739                    <div class="border-t border-gray-200 pt-2.5 flex items-center gap-2">
4740                        <i class="fa-solid fa-chart-bar text-[9px] text-gray-400 w-3"></i>
4741                        <span class="text-[10px] text-gray-600 flex-1">Overall Score</span>
4742                        <span class="text-xs font-bold text-white px-2 py-0.5 rounded" style="background:#111;">92</span>
4743                        <span class="text-[10px] font-semibold text-green-600 bg-green-50 px-2 py-0.5 rounded">Strong Hire</span>
4744                    </div>
4745                    <!-- Bottom fade -->
4746                    <div class="absolute bottom-0 left-0 right-0 h-10 rounded-b-xl pointer-events-none" style="background:linear-gradient(to bottom, transparent, #f9fafb);"></div>
4747                </div>
4748            </a>
4749
4750        </div>
4751
4752        <!-- Bottom row: SmartTenure 60% + SmartInterview 40% -->
4753        <div class="flex flex-col md:flex-row gap-5">
4754
4755            <!-- SmartTenure™ — 60% -->
4756            <a href="/smart-tenure" class="bg-white rounded-2xl border border-gray-200 p-6 flex flex-col hover:shadow-md transition group md:w-[60%]">
4757                <p class="text-xl font-bold text-gray-900 mb-1">SmartTenure™</p>
4758                <p class="text-[11px] font-bold uppercase tracking-widest mb-2" style="color:#fe4a23;">Solves: Turnover</p>
4759                <p class="text-sm text-gray-500 mb-5">Predictive retention scoring</p>
4760                <!-- UI Mockup -->
4761                <div class="relative overflow-hidden bg-gray-50 rounded-xl p-4 border border-gray-100">
4762                    <div class="flex items-center gap-2 mb-1">
4763                        <p class="text-xs font-bold text-gray-800">Retention watchlist</p>
4764                    </div>
4765                    <p class="text-[10px] text-gray-400 mb-3 flex items-center gap-1">Updated this week <span class="w-1.5 h-1.5 rounded-full bg-orange-400 inline-block"></span></p>
4766                    <div class="grid grid-cols-4 gap-2 text-[9px] font-bold uppercase tracking-wide text-gray-400 border-b border-gray-200 pb-2 mb-2">
4767                        <span>Employee</span><span>Role</span><span>Risk Level</span><span><span class="rec-action-full">Recommended Action</span><span class="rec-action-short">Action</span></span>
4768                    </div>
4769                    <div class="space-y-2.5">
4770                        <div class="grid grid-cols-4 gap-2 items-center">
4771                            <div class="flex items-center gap-1.5">
4772                                <div class="w-5 h-5 rounded-full bg-pink-100 flex items-center justify-center text-[8px] font-bold text-pink-600 flex-shrink-0">MC</div>
4773                                <span class="text-[10px] text-gray-700 font-medium">Maya Chen</span>
4774                            </div>
4775                            <span class="text-[10px] text-gray-500">Shift Lead</span>
4776                            <span class="text-[10px] font-semibold text-green-600 flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span>Low</span>
4777                            <span class="text-[10px] text-gray-500">Keep current schedule <i class="fa-solid fa-chevron-right text-[8px] text-gray-300 ml-1"></i></span>
4778                        </div>
4779                        <div class="grid grid-cols-4 gap-2 items-center">
4780                            <div class="flex items-center gap-1.5">
4781                                <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center text-[8px] font-bold text-blue-600 flex-shrink-0">JL</div>
4782                                <span class="text-[10px] text-gray-700 font-medium">Jordan Lee</span>
4783                            </div>
4784                            <span class="text-[10px] text-gray-500">Customer Service</span>
4785                            <span class="text-[10px] font-semibold text-amber-600 flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block"></span>Medium</span>
4786                            <span class="text-[10px] text-gray-500">Review workload <i class="fa-solid fa-chevron-right text-[8px] text-gray-300 ml-1"></i></span>
4787                        </div>
4788                        <div class="grid grid-cols-4 gap-2 items-center">
4789                            <div class="flex items-center gap-1.5">
4790                                <div class="w-5 h-5 rounded-full bg-purple-100 flex items-center justify-center text-[8px] font-bold text-purple-600 flex-shrink-0">SR</div>
4791                                <span class="text-[10px] text-gray-700 font-medium">Sam Rivera</span>
4792                            </div>
4793                            <span class="text-[10px] text-gray-500">Team Lead</span>
4794                            <span class="text-[10px] font-semibold text-red-500 flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span>High</span>
4795                            <span class="text-[10px] text-gray-500">Schedule 1:1 <i class="fa-solid fa-chevron-right text-[8px] text-gray-300 ml-1"></i></span>
4796                        </div>
4797                    </div>
4798                    <!-- Bottom fade -->
4799                    <div class="absolute bottom-0 left-0 right-0 h-10 rounded-b-xl pointer-events-none" style="background:linear-gradient(to bottom, transparent, #f9fafb);"></div>
4800                </div>
4801            </a>
4802
4803            <!-- SmartInterview™ — 40% -->
4804            <a href="/smartsuite/smartinterview/" class="bg-white rounded-2xl border border-gray-200 p-6 flex flex-col hover:shadow-md transition group md:w-[40%]">
4805                <p class="text-xl font-bold text-gray-900 mb-1">SmartInterview™</p>
4806                <p class="text-[11px] font-bold uppercase tracking-widest mb-2" style="color:#fe4a23;">Solves: Slow Hiring</p>
4807                <p class="text-sm text-gray-500 mb-5">Automated scheduling &amp; texting</p>
4808                <!-- UI Mockup: SMS chat -->
4809                <div class="relative overflow-hidden bg-gray-50 rounded-xl p-4 border border-gray-100 flex flex-col gap-3">
4810                    <p class="text-[10px] font-semibold text-gray-400 text-center">May 6</p>
4811                    <!-- Incoming -->
4812                    <div class="flex items-end gap-2">
4813                        <div class="w-6 h-6 rounded-full bg-gray-200 flex-shrink-0 flex items-center justify-center">
4814                            <i class="fa-solid fa-robot text-[9px] text-gray-500"></i>
4815                        </div>
4816                        <div class="bg-white rounded-2xl rounded-bl-sm px-3 py-2 text-[11px] text-gray-700 border border-gray-200 max-w-[75%] leading-relaxed shadow-sm">
4817                            hi jordan, can we schedule your interview for tomorrow at 10:00 am?
4818                        </div>
4819                    </div>
4820                    <!-- Outgoing -->
4821                    <div class="flex justify-end">
4822                        <div class="px-3 py-2 rounded-2xl rounded-br-sm text-[11px] text-white max-w-[60%] leading-relaxed" style="background:#fe4a23;">
4823                            10:00 am works!
4824                        </div>
4825                    </div>
4826                    <!-- Incoming -->
4827                    <div class="flex items-end gap-2">
4828                        <div class="w-6 h-6 rounded-full bg-gray-200 flex-shrink-0 flex items-center justify-center">
4829                            <i class="fa-solid fa-robot text-[9px] text-gray-500"></i>
4830                        </div>
4831                        <div class="bg-white rounded-2xl rounded-bl-sm px-3 py-2 text-[11px] text-gray-700 border border-gray-200 max-w-[75%] leading-relaxed shadow-sm">
4832                            great! you're confirmed. see you then.
4833                        </div>
4834                    </div>
4835                    <!-- Bottom fade -->
4836                    <div class="absolute bottom-0 left-0 right-0 h-10 rounded-b-xl pointer-events-none" style="background:linear-gradient(to bottom, transparent, #f9fafb);"></div>
4837                </div>
4838            </a>
4839
4840        </div>
4841    </div>
4842</section>
4843
4844
4845<!-- ══════════════════════════════════════════════════════════
4846     SECTION 5c — Our Partners
4847     ══════════════════════════════════════════════════════════ -->
4848<section class="band-tint py-20 px-8 md:px-40">
4849    <div class="max-w-7xl mx-auto">
4850
4851        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-12">Our Partners</h2>
4852
4853        <div class="flex flex-wrap items-center justify-center gap-x-14 gap-y-10 mb-10">
4854            <img src="/static/img/partners-home/linkedin.png" alt="LinkedIn" class="h-8 md:h-9 w-auto object-contain">
4855            <img src="/static/img/partners-home/indeed.png" alt="Indeed" class="h-8 md:h-9 w-auto object-contain">
4856            <img src="/static/img/partners-home/talent-com.png" alt="talent.com" class="h-7 md:h-8 w-auto object-contain">
4857            <img src="/static/img/partners-home/spark-hire.png" alt="Spark Hire" class="h-6 md:h-7 w-auto object-contain">
4858            <img src="/static/img/partners-home/rsi.png" alt="Reference Services Inc." class="h-10 md:h-12 w-auto object-contain">
4859            <img src="/static/img/partners-home/shield-screening.png" alt="Shield Screening" class="h-9 md:h-10 w-auto object-contain">
4860            <img src="/static/img/partners-home/accusourcehr.png" alt="AccuSourceHR" class="h-6 md:h-7 w-auto object-contain">
4861        </div>
4862
4863        <div class="text-center mb-16">
4864            <a href="/partners" class="inline-flex items-center gap-2 text-white font-semibold px-6 py-3 rounded-full text-xs uppercase tracking-widest transition"
4865               style="background-color:#141414;"
4866               onmouseover="this.style.backgroundColor='#000000'"
4867               onmouseout="this.style.backgroundColor='#141414'">
4868                See All
4869                <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
4870            </a>
4871        </div>
4872
4873        <!-- Award -->
4874        <div class="text-center">
4875            <div class="flex items-center justify-center gap-4 md:gap-8 mb-10">
4876                <svg class="hidden sm:block flex-shrink-0" width="22" height="53" viewBox="0 0 30 72" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4877                    <path d="M29.281 69.2629C27.8734 68.9521 26.4734 68.499 25.0004 67.878C24.9827 67.8697 24.939 67.8203 24.9253 67.776C24.7785 67.2754 24.7293 66.7712 24.7746 66.2344C25.063 62.8069 23.022 59.1954 19.9221 57.6471C19.8562 57.6136 19.7875 57.5847 19.7083 57.5522L19.6348 57.5218C19.5649 57.492 19.4799 57.5044 19.4236 57.5496C19.3626 57.5966 19.3324 57.6732 19.3448 57.75L19.4296 58.2755C19.5049 58.7406 19.5786 59.1956 19.6493 59.6511L19.6672 59.7703C19.8662 61.0648 20.072 62.4034 20.4729 63.6894C20.8346 64.8496 21.3928 65.7652 22.1691 66.4667C20.529 65.4996 19.0007 64.3374 17.6127 63.0007C17.5835 62.9727 17.549 62.8983 17.544 62.8369L17.5068 61.9196C17.5065 61.887 17.5061 61.8004 17.5246 61.7576C18.2083 60.1649 18.3834 58.3721 18.0603 56.2771C17.7489 54.2566 16.8862 52.3985 15.496 50.7543C15.3333 50.5618 15.1897 50.4643 15.0692 50.4643C15.0399 50.4643 15.0133 50.4702 14.9924 50.4811C14.9285 50.5128 14.8852 50.5744 14.8767 50.6455L14.8395 50.9655C14.8108 51.203 14.7832 51.4362 14.7584 51.6698C14.7155 52.0814 14.6685 52.4923 14.6213 52.9034L14.6146 52.9628C14.4971 53.9893 14.3753 55.0508 14.3109 56.1136C14.2361 57.3534 14.2583 58.8015 14.9911 60.141C14.995 60.1477 14.9985 60.1549 15.0024 60.1616C13.9838 58.8878 13.0539 57.517 12.2243 56.0644C12.151 55.9352 12.1446 55.8219 12.1583 55.6574C12.2173 54.962 12.5405 54.3969 12.881 53.8901C13.5385 52.9086 13.9366 51.7486 14.1717 50.1285C14.5004 47.8628 14.1685 45.5899 13.1857 43.3725C13.1587 43.3114 13.1272 43.2524 13.0935 43.1891L13.0167 43.0442C12.9799 42.9735 12.9014 42.927 12.8185 42.9307C12.7359 42.935 12.663 42.9875 12.633 43.0636C12.3946 43.6648 12.164 44.2441 11.935 44.819L11.7886 45.1864C11.3 46.4134 10.7521 47.846 10.4336 49.3241C10.2091 50.3671 10.1954 51.3738 10.3923 52.3322C9.62836 50.5139 9.00038 48.5926 8.51944 46.6003C8.514 46.5781 8.51226 46.5207 8.5599 46.3882C8.78481 45.7726 9.19441 45.2144 9.71341 44.8166C10.8495 43.9452 11.494 42.7341 11.9745 41.6643
4877C12.9584 39.4765 13.2253 37.1522 12.7902 34.5583C12.7857 34.5311 12.7774 34.5041 12.7676 34.4748L12.7598 34.4513C12.7409 34.3932 12.6978 34.3462 12.6408 34.3216C12.5851 34.2984 12.5151 34.3027 12.4718 34.324C12.4283 34.3399 12.3624 34.3641 12.3195 34.4269C12.0733 34.7558 11.8234 35.0878 11.5732 35.4195L11.5312 35.4754C10.9004 36.313 10.2481 37.1788 9.62118 38.0413C8.89488 39.0377 8.38196 40.0063 8.05285 41.0026C7.89406 41.4837 7.79031 41.9468 7.74136 42.3967C7.53233 40.7803 7.41378 39.1299 7.38789 37.4659C7.3818 37.0687 7.43227 36.7531 7.70352 36.4075C7.99064 36.039 8.25885 35.8332 8.62863 35.6975C10.148 35.1424 11.1227 33.9693 11.802 33.0093C12.8994 31.4565 13.5431 29.6495 13.7697 27.4852C13.7939 27.2624 13.8076 27.0371 13.8217 26.7987L13.8252 26.7445C13.832 26.6286 13.8391 26.5079 13.8483 26.3799C13.8539 26.2951 13.8085 26.2155 13.7325 26.177C13.659 26.14 13.5648 26.1509 13.5009 26.2051L13.3206 26.3595C13.2527 26.4174 13.1946 26.467 13.1344 26.5152C12.8448 26.7478 12.5542 26.9779 12.263 27.2087L12.2325 27.2326C11.5932 27.739 10.932 28.2626 10.3005 28.8034C9.0752 29.8483 8.28625 30.8885 7.8175 32.0773C7.74006 32.2732 7.67219 32.4671 7.6139 32.6589C7.80662 30.77 8.11963 28.9097 8.54946 27.1049C8.60166 26.8842 8.63081 26.8193 8.73805 26.7841C8.80548 26.7613 8.86834 26.7173 8.91424 26.6629C9.22595 26.3086 9.63641 26.2525 10.034 26.2444C11.3609 26.2133 12.4133 25.5514 13.2675 24.908C15.362 23.3305 16.8042 19.3281 16.8042 19.1924C16.8042 19.1217 16.7689 19.0558 16.7091 19.016C16.6502 18.9771 16.5705 18.9716 16.5105 18.9984C16.0742 19.1835 15.6378 19.3638 15.186 19.5507C14.192 19.9629 13.1642 20.3888 12.1771 20.8545C11.1836 21.3245 10.3986 21.9532 9.8374 22.7267C10.3723 21.2069 10.9924 19.7168 11.6868 18.2849C11.7666 18.1305 12.1416 17.9664 12.6793 17.9664C12.8542 17.9664 13.0236 17.9852 13.17 18.0204C14.4334 18.3232 15.6861 18.1396 17.0726 17.4468C18.491 16.7377 19.6678 15.5783 20.6702 13.9014C20.6893 13.869 20.7269 13.77 20.7472 13.7146C20.7726 13.6467 20.7624 13.5719 20.7202 13.5151C20.681 13.4612 20.6184 13.429 20.5386 13.429C20.5379 13.429 20.5375 13.429 20.5368 
487713.429L20.0361 13.4605C19.7292 13.4799 19.4312 13.4988 19.1332 13.514L18.8149 13.5301C17.8648 13.578 16.882 13.6271 15.9206 13.8562C14.8241 14.1198 14.019 14.5246 13.4017 15.125C14.1324 13.9088 14.9148 12.7516 15.739 11.6677C15.7611 11.639 15.8675 11.595 15.9547 11.5805C15.9982 11.5702 16.1566 11.537 16.3672 11.537C16.6465 11.537 16.891 11.5937 17.0983 11.7077C18.4153 12.3518 19.8945 12.3996 21.5004 11.848C22.8178 11.398 23.9334 10.562 24.9114 9.29323C24.9431 9.25234 24.9719 9.20774 24.998 9.16076C25.0278 9.1066 25.0297 9.047 25.0036 8.99262C24.9279 8.83383 24.6003 8.75921 24.4624 8.73442C24.124 8.67525 23.7405 8.60782 23.3603 8.55627C23.186 8.53191 23.0116 8.50646 22.8367 8.48057L22.8143 8.47709C22.2217 8.38965 21.6092 8.29916 20.9921 8.26805C19.8645 8.21041 18.8632 8.44055 18.0438 8.94998C18.5948 8.36355 19.1577 7.80713 19.7294 7.28442C19.9101 7.11954 20.1146 6.95336 20.3933 6.74475C20.4148 6.72822 20.4696 6.70886 20.5368 6.70495C22.5117 6.62773 24.1551 5.7559 25.5603 4.04009C26.3257 3.10606 26.9126 1.92796 27.3548 0.43838L27.37 0.387263C27.4172 0.230647 27.4433 0.144509 27.3348 0.0435788C27.2511 -0.0342937 27.1036 -0.0112359 26.7203 0.140594C26.3723 0.274369 26.0221 0.40423 25.6625 0.53757C24.9401 0.805339 24.1929 1.08224 23.4718 1.39504C22.2668 1.91883 21.3045 2.71278 20.6121 3.75449C20.0848 4.54714 19.8764 5.34348 19.9745 6.18485C19.9739 6.19421 19.9656 6.21661 19.9643 6.21922C18.7064 7.3053 17.5039 8.52799 16.2693 9.98321C17.0926 8.72441 17.6292 7.27507 17.8985 5.59494C18.17 3.9011 18.1872 2.39346 17.9514 0.986098C17.9364 0.898002 17.9161 0.809906 17.8902 0.699623L17.8517 0.529739C17.8343 0.456869 17.7795 0.397921 17.7075 0.375299C17.6355 0.353982 17.5548 0.372906 17.5011 0.424023C17.415 0.505159 17.3306 0.581726 17.2481 0.656119L17.19 0.708542C16.9791 0.898655 16.7798 1.07811 16.5995 1.28106C14.8473 3.25767 13.8254 5.34544 13.4754 7.66378C13.316 8.71158 13.3821 9.60363 13.6777 10.3902C13.7756 10.6508 13.9283 10.8835 14.0804 11.1145C14.15 11.22 14.2196 11.326 14.2833 11.4347C14.3303 11.5128 14.3342 11.533 14.334 11.5293C14.3051 11.8393 14.2635 12.1847 14.2074 12.5993C14.205 12.6046 14.1972 12.6167 14.1722 12.6498L14.1519 12.6779C13.1937 14.0097 12.3097 15.4138 11.5143 16.8671C11.8271 15.7817 12.0761 14.4078 12.0585 12.8114C12.0372 10.8966 11.5963 9.18882 10.7101 7.58982C10.6751 7.52761 10.6116 7.48715 10.5226 7.48106C10.458 7.48106 10.3958 7.51304 10.3551 7.56763C10.3286 7.60461 10.3016 7.63942 10.2759 7.67248C10.2187 7.74644 10.1652 7.81648 10.1173 7.89131C9.41171 8.99784 9.03322 10.2179 8.78199 11.1574C8.3228 12.8804 8.1118 14.3191 8.11789 15.6853C8.12137 16.8467 8.33302 17.7394 8.78416 18.4948C8.92446 18.7299 9.10109 18.9357 9.27859 19.1428C9.37277 19.2527 9.46957 19.3655 9.55723 19.4813C9.61857 19.5618 9.64816 19.6438 9.64989 19.6894C9.66142 19.9648 9.65533 20.2448 9.64946 20.5154L9.64533 20.7024C9.64467 20.7346 9.63728 20.7716 9.62619 20.7999C9.05976 22.1722 8.56185 23.5985 8.13725 25.0633C8.19968 24.5645 8.23492 24.0816 8.24384 23.6105C8.29517 20.9363 7.4749 18.5481 5.80521 16.5115L5.45718 16.0875C5.41693 16.0377 5.35733 16.0094 5.29382 16.0094L5.25901 16.0125C5.18462 16.0249 5.12197 16.0764 5.09609 16.1467C5.06433 16.2313 5.03323 16.3111 5.00299 16.3883C4.9447 16.5376 4.88966 16.6789 4.84311 16.8227C4.48486 17.9449 4.3091 19.1709 4.27343 20.7971L4.27277 20.8288C4.24602 22.0119 4.20926 23.6327 4.6952 25.1836C5.17353 26.7104 6.01707 27.4819 6.18065 27.6205L6.19805 27.6361C6.64332 28.0335 6.93327 28.397 6.99331 28.633C7.01745 28.7283 7.04203 28.8238 7.07075 28.9182C7.19778 29.3382 7.11838 29.7385 7.03268 30.1707C6.99005 30.3889 6.94567 30.6142 6.93023 30.8454C6.86889 31.7708 6.79362 32.7118 6.72076 33.6217L6.71423 33.7058C6.69552 33.9379 6.67682 34.17 6.65833 34.4021C6.47256 32.32 5.78302 30.4274 4.59666 28.7535C3.87014 27.7295 3.00397 26.8533 2.02165 26.1487C1.97923 26.1183 1.93464 26.0911 1.87504 26.0556C1.84611 26.0389 1.81261 26.0189 1.77193 25.9934C1.71059 25.9567 1.63185 25.9534 1.56855 25.9843C1.50373 26.0158 1.45914 26.08 1.45174 26.1526C1.43847 26.2842 1.42303 26.4117 1.40671 26.544C1.37387 26.8148 1.34276 27.0706 1.34146 27.3333C1.32688 30.0571 1.9031 32.6095 3.05465 34.9187C3.3755 35.563 3.79945 36.1203 4.31519 36.5758C4.82658 37.025 5.37843 37.2899 6.0012 37.3852C6.
48770149 37.3876 6.04753 37.4074 6.05253 37.4113C6.08625 37.479 6.12127 37.5468 6.15629 37.6149C6.28071 37.8553 6.40927 38.1039 6.47322 38.3532C6.52651 38.564 6.52651 38.7943 6.52651 39.0384C6.52651 39.1278 6.52651 39.2178 6.52934 39.3061C6.58916 41.4161 6.66768 42.1509 7.00527 44.0361C6.79928 43.4756 6.54065 42.9135 6.20675 42.3728C4.85464 40.1843 3.13688 38.6988 0.955359 37.832C0.81658 37.7761 0.677367 37.7359 0.515966 37.6889L0.483773 37.6793C0.418299 37.6602 0.34891 37.6397 0.274735 37.6171C0.207739 37.5951 0.131389 37.6101 0.0767908 37.6554C0.0224105 37.7004 -0.00608472 37.7694 0.00109348 37.8411C0.01719 37.9908 0.0282836 38.1363 0.0385071 38.2784C0.0609118 38.5898 0.0820113 38.8839 0.157491 39.175C0.861389 41.8938 2.02643 44.0592 3.71896 45.7952C4.44266 46.5374 5.20529 46.9629 6.05036 47.0962C6.26353 47.1295 6.52412 47.1336 6.96525 47.1062L7.09228 47.0986C7.11164 47.0975 7.12861 47.0964 7.14405 47.0964C7.17886 47.0964 7.18168 47.0964 7.20583 47.1321L7.79683 47.9437C7.80445 47.9543 7.81554 47.9928 7.82315 48.0194L7.83185 48.0485C8.44526 50.128 9.20637 52.131 10.1039 54.0319C9.69992 53.4744 9.25727 52.9654 8.76393 52.4866C6.49519 50.2853 2.61635 50.2216 2.18152 50.2216L2.12736 50.222L2.09321 50.2283C1.98663 50.2662 1.92898 50.3801 1.96183 50.4874C1.99206 50.5885 2.02034 50.6908 2.05275 50.8108C2.11475 51.0364 2.17913 51.2694 2.2694 51.4947C2.69923 52.5688 3.39595 53.6021 4.46245 54.7475C5.19528 55.5328 6.02143 56.3291 7.09576 56.8327C8.27233 57.3852 9.33471 57.5201 10.3912 57.2495C10.5709 57.2023 10.7775 57.1424 10.9552 57.0271C11.0818 56.946 11.1164 56.9486 11.2408 57.0413C11.3883 57.1509 11.5452 57.2429 11.6974 57.3321C11.7816 57.3815 11.8664 57.4313 11.9456 57.4813C11.9582 57.492 11.9852 57.5362 11.9952 57.5525C12.9432 59.0986 13.9875 60.5355 15.1151 61.8463C14.5052 61.4026 13.8789 61.0815 13.2138 60.8677C11.181 60.2127 9.05041 60.2961 6.94023 61.112C6.62526 61.234 6.28006 61.4189 6.257 61.4319C6.20871 61.4637 6.17543 61.515 6.16499 61.574C6.15585 61.6319 6.17086 61.691 6.2061 61.7363C6.27201 61.822 6.33574 61.9081 6.39882 61.9936L6.41274 62.0123C6.55522 62.2063 6.71662 62.4258 6.8976 62.6203C7.71265 63.4941 8.71782 64.0798 9.68274 64.5827C11.0096 65.2712 12.3665 65.6421 13.716 65.6856C13.7795 65.6878 13.843 65.6891 13.9063 65.6891C15.1477 65.6891 16.1168 65.2799 16.8638 64.4431C16.8729 64.4366 16.9053 64.4242 16.9231 64.424C17.2085 64.4444 17.4798 64.4859 17.6825 64.5197C17.7145 64.5253 17.7539 64.5445 17.7784 64.5667C19.0264 65.6714 20.348 66.6412 21.7286 67.4664C21.5194 67.4044 21.3038 67.3505 21.0832 67.3072C19.6078 67.0236 18.1021 67.2015 16.4487 67.8584C15.3333 68.303 14.2959 68.9562 13.2773 69.8552C13.1933 69.929 13.1816 70.0558 13.2507 70.1437C13.6112 70.6024 14.0801 70.8593 14.4915 71.0499C15.4947 71.516 16.6271 71.8145 17.9546 71.9628C17.9585 71.963 18.3851 72 18.9833 72C19.4151 72 19.8168 71.9806 20.1768 71.9426C20.5209 71.9065 20.8642 71.8475 21.1972 71.7675C22.7268 71.3951 23.7633 70.6294 24.3571 69.4407C24.3678 69.4304 24.4135 69.4039 24.4713 69.3897C24.7474 69.3212 24.9958 69.2729 25.232 69.2414C25.2877 69.2325 25.3571 69.2475 25.4445 69.2827C26.5008 69.6897 27.6187 70.0288 28.7648 70.2903C28.7809 70.2942 28.7976 70.2962 28.8144 70.2962C28.8914 70.2962 28.9623 70.2537 28.9997 70.1846C29.1091 69.981 29.2425 69.7856 29.3958 69.604C29.4439 69.5468 29.4582 69.4707 29.4345 69.4002C29.4119 69.3319 29.3545 69.2801 29.281 69.2629Z" fill="#374151"></path>
4878                </svg>
4879                <h3 class="text-2xl md:text-3xl font-bold text-gray-900">2025 Global Recognition Award Winner</h3>
4880                <svg class="hidden sm:block flex-shrink-0 scale-x-[-1]" width="22" height="53" viewBox="0 0 30 72" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
4881                    <path d="M29.281 69.2629C27.8734 68.9521 26.4734 68.499 25.0004 67.878C24.9827 67.8697 24.939 67.8203 24.9253 67.776C24.7785 67.2754 24.7293 66.7712 24.7746 66.2344C25.063 62.8069 23.022 59.1954 19.9221 57.6471C19.8562 57.6136 19.7875 57.5847 19.7083 57.5522L19.6348 57.5218C19.5649 57.492 19.4799 57.5044 19.4236 57.5496C19.3626 57.5966 19.3324 57.6732 19.3448 57.75L19.4296 58.2755C19.5049 58.7406 19.5786 59.1956 19.6493 59.6511L19.6672 59.7703C19.8662 61.0648 20.072 62.4034 20.4729 63.6894C20.8346 64.8496 21.3928 65.7652 22.1691 66.4667C20.529 65.4996 19.0007 64.3374 17.6127 63.0007C17.5835 62.9727 17.549 62.8983 17.544 62.8369L17.5068 61.9196C17.5065 61.887 17.5061 61.8004 17.5246 61.7576C18.2083 60.1649 18.3834 58.3721 18.0603 56.2771C17.7489 54.2566 16.8862 52.3985 15.496 50.7543C15.3333 50.5618 15.1897 50.4643 15.0692 50.4643C15.0399 50.4643 15.0133 50.4702 14.9924 50.4811C14.9285 50.5128 14.8852 50.5744 14.8767 50.6455L14.8395 50.9655C14.8108 51.203 14.7832 51.4362 14.7584 51.6698C14.7155 52.0814 14.6685 52.4923 14.6213 52.9034L14.6146 52.9628C14.4971 53.9893 14.3753 55.0508 14.3109 56.1136C14.2361 57.3534 14.2583 58.8015 14.9911 60.141C14.995 60.1477 14.9985 60.1549 15.0024 60.1616C13.9838 58.8878 13.0539 57.517 12.2243 56.0644C12.151 55.9352 12.1446 55.8219 12.1583 55.6574C12.2173 54.962 12.5405 54.3969 12.881 53.8901C13.5385 52.9086 13.9366 51.7486 14.1717 50.1285C14.5004 47.8628 14.1685 45.5899 13.1857 43.3725C13.1587 43.3114 13.1272 43.2524 13.0935 43.1891L13.0167 43.0442C12.9799 42.9735 12.9014 42.927 12.8185 42.9307C12.7359 42.935 12.663 42.9875 12.633 43.0636C12.3946 43.6648 12.164 44.2441 11.935 44.819L11.7886 45.1864C11.3 46.4134 10.7521 47.846 10.4336 49.3241C10.2091 50.3671 10.1954 51.3738 10.3923 52.3322C9.62836 50.5139 9.00038 48.5926 8.51944 46.6003C8.514 46.5781 8.51226 46.5207 8.5599 46.3882C8.78481 45.7726 9.19441 45.2144 9.71341 44.8166C10.8495 43.9452 11.494 42.7341 11.9745 41.6643
4881C12.9584 39.4765 13.2253 37.1522 12.7902 34.5583C12.7857 34.5311 12.7774 34.5041 12.7676 34.4748L12.7598 34.4513C12.7409 34.3932 12.6978 34.3462 12.6408 34.3216C12.5851 34.2984 12.5151 34.3027 12.4718 34.324C12.4283 34.3399 12.3624 34.3641 12.3195 34.4269C12.0733 34.7558 11.8234 35.0878 11.5732 35.4195L11.5312 35.4754C10.9004 36.313 10.2481 37.1788 9.62118 38.0413C8.89488 39.0377 8.38196 40.0063 8.05285 41.0026C7.89406 41.4837 7.79031 41.9468 7.74136 42.3967C7.53233 40.7803 7.41378 39.1299 7.38789 37.4659C7.3818 37.0687 7.43227 36.7531 7.70352 36.4075C7.99064 36.039 8.25885 35.8332 8.62863 35.6975C10.148 35.1424 11.1227 33.9693 11.802 33.0093C12.8994 31.4565 13.5431 29.6495 13.7697 27.4852C13.7939 27.2624 13.8076 27.0371 13.8217 26.7987L13.8252 26.7445C13.832 26.6286 13.8391 26.5079 13.8483 26.3799C13.8539 26.2951 13.8085 26.2155 13.7325 26.177C13.659 26.14 13.5648 26.1509 13.5009 26.2051L13.3206 26.3595C13.2527 26.4174 13.1946 26.467 13.1344 26.5152C12.8448 26.7478 12.5542 26.9779 12.263 27.2087L12.2325 27.2326C11.5932 27.739 10.932 28.2626 10.3005 28.8034C9.0752 29.8483 8.28625 30.8885 7.8175 32.0773C7.74006 32.2732 7.67219 32.4671 7.6139 32.6589C7.80662 30.77 8.11963 28.9097 8.54946 27.1049C8.60166 26.8842 8.63081 26.8193 8.73805 26.7841C8.80548 26.7613 8.86834 26.7173 8.91424 26.6629C9.22595 26.3086 9.63641 26.2525 10.034 26.2444C11.3609 26.2133 12.4133 25.5514 13.2675 24.908C15.362 23.3305 16.8042 19.3281 16.8042 19.1924C16.8042 19.1217 16.7689 19.0558 16.7091 19.016C16.6502 18.9771 16.5705 18.9716 16.5105 18.9984C16.0742 19.1835 15.6378 19.3638 15.186 19.5507C14.192 19.9629 13.1642 20.3888 12.1771 20.8545C11.1836 21.3245 10.3986 21.9532 9.8374 22.7267C10.3723 21.2069 10.9924 19.7168 11.6868 18.2849C11.7666 18.1305 12.1416 17.9664 12.6793 17.9664C12.8542 17.9664 13.0236 17.9852 13.17 18.0204C14.4334 18.3232 15.6861 18.1396 17.0726 17.4468C18.491 16.7377 19.6678 15.5783 20.6702 13.9014C20.6893 13.869 20.7269 13.77 20.7472 13.7146C20.7726 13.6467 20.7624 13.5719 20.7202 13.5151C20.681 13.4612 20.6184 13.429 20.5386 13.429C20.5379 13.429 20.5375 13.429 20.5368 
488113.429L20.0361 13.4605C19.7292 13.4799 19.4312 13.4988 19.1332 13.514L18.8149 13.5301C17.8648 13.578 16.882 13.6271 15.9206 13.8562C14.8241 14.1198 14.019 14.5246 13.4017 15.125C14.1324 13.9088 14.9148 12.7516 15.739 11.6677C15.7611 11.639 15.8675 11.595 15.9547 11.5805C15.9982 11.5702 16.1566 11.537 16.3672 11.537C16.6465 11.537 16.891 11.5937 17.0983 11.7077C18.4153 12.3518 19.8945 12.3996 21.5004 11.848C22.8178 11.398 23.9334 10.562 24.9114 9.29323C24.9431 9.25234 24.9719 9.20774 24.998 9.16076C25.0278 9.1066 25.0297 9.047 25.0036 8.99262C24.9279 8.83383 24.6003 8.75921 24.4624 8.73442C24.124 8.67525 23.7405 8.60782 23.3603 8.55627C23.186 8.53191 23.0116 8.50646 22.8367 8.48057L22.8143 8.47709C22.2217 8.38965 21.6092 8.29916 20.9921 8.26805C19.8645 8.21041 18.8632 8.44055 18.0438 8.94998C18.5948 8.36355 19.1577 7.80713 19.7294 7.28442C19.9101 7.11954 20.1146 6.95336 20.3933 6.74475C20.4148 6.72822 20.4696 6.70886 20.5368 6.70495C22.5117 6.62773 24.1551 5.7559 25.5603 4.04009C26.3257 3.10606 26.9126 1.92796 27.3548 0.43838L27.37 0.387263C27.4172 0.230647 27.4433 0.144509 27.3348 0.0435788C27.2511 -0.0342937 27.1036 -0.0112359 26.7203 0.140594C26.3723 0.274369 26.0221 0.40423 25.6625 0.53757C24.9401 0.805339 24.1929 1.08224 23.4718 1.39504C22.2668 1.91883 21.3045 2.71278 20.6121 3.75449C20.0848 4.54714 19.8764 5.34348 19.9745 6.18485C19.9739 6.19421 19.9656 6.21661 19.9643 6.21922C18.7064 7.3053 17.5039 8.52799 16.2693 9.98321C17.0926 8.72441 17.6292 7.27507 17.8985 5.59494C18.17 3.9011 18.1872 2.39346 17.9514 0.986098C17.9364 0.898002 17.9161 0.809906 17.8902 0.699623L17.8517 0.529739C17.8343 0.456869 17.7795 0.397921 17.7075 0.375299C17.6355 0.353982 17.5548 0.372906 17.5011 0.424023C17.415 0.505159 17.3306 0.581726 17.2481 0.656119L17.19 0.708542C16.9791 0.898655 16.7798 1.07811 16.5995 1.28106C14.8473 3.25767 13.8254 5.34544 13.4754 7.66378C13.316 8.71158 13.3821 9.60363 13.6777 10.3902C13.7756 10.6508 13.9283 10.8835 14.0804 11.1145C14.15 11.22 14.2196 11.326 14.2833 11.4347C14.3303 11.5128 14.3342 11.533 14.334 11.5293C14.3051 11.8393 14.2635 12.1847 14.2074 12.5993C14.205 12.6046 14.1972 12.6167 14.1722 12.6498L14.1519 12.6779C13.1937 14.0097 12.3097 15.4138 11.5143 16.8671C11.8271 15.7817 12.0761 14.4078 12.0585 12.8114C12.0372 10.8966 11.5963 9.18882 10.7101 7.58982C10.6751 7.52761 10.6116 7.48715 10.5226 7.48106C10.458 7.48106 10.3958 7.51304 10.3551 7.56763C10.3286 7.60461 10.3016 7.63942 10.2759 7.67248C10.2187 7.74644 10.1652 7.81648 10.1173 7.89131C9.41171 8.99784 9.03322 10.2179 8.78199 11.1574C8.3228 12.8804 8.1118 14.3191 8.11789 15.6853C8.12137 16.8467 8.33302 17.7394 8.78416 18.4948C8.92446 18.7299 9.10109 18.9357 9.27859 19.1428C9.37277 19.2527 9.46957 19.3655 9.55723 19.4813C9.61857 19.5618 9.64816 19.6438 9.64989 19.6894C9.66142 19.9648 9.65533 20.2448 9.64946 20.5154L9.64533 20.7024C9.64467 20.7346 9.63728 20.7716 9.62619 20.7999C9.05976 22.1722 8.56185 23.5985 8.13725 25.0633C8.19968 24.5645 8.23492 24.0816 8.24384 23.6105C8.29517 20.9363 7.4749 18.5481 5.80521 16.5115L5.45718 16.0875C5.41693 16.0377 5.35733 16.0094 5.29382 16.0094L5.25901 16.0125C5.18462 16.0249 5.12197 16.0764 5.09609 16.1467C5.06433 16.2313 5.03323 16.3111 5.00299 16.3883C4.9447 16.5376 4.88966 16.6789 4.84311 16.8227C4.48486 17.9449 4.3091 19.1709 4.27343 20.7971L4.27277 20.8288C4.24602 22.0119 4.20926 23.6327 4.6952 25.1836C5.17353 26.7104 6.01707 27.4819 6.18065 27.6205L6.19805 27.6361C6.64332 28.0335 6.93327 28.397 6.99331 28.633C7.01745 28.7283 7.04203 28.8238 7.07075 28.9182C7.19778 29.3382 7.11838 29.7385 7.03268 30.1707C6.99005 30.3889 6.94567 30.6142 6.93023 30.8454C6.86889 31.7708 6.79362 32.7118 6.72076 33.6217L6.71423 33.7058C6.69552 33.9379 6.67682 34.17 6.65833 34.4021C6.47256 32.32 5.78302 30.4274 4.59666 28.7535C3.87014 27.7295 3.00397 26.8533 2.02165 26.1487C1.97923 26.1183 1.93464 26.0911 1.87504 26.0556C1.84611 26.0389 1.81261 26.0189 1.77193 25.9934C1.71059 25.9567 1.63185 25.9534 1.56855 25.9843C1.50373 26.0158 1.45914 26.08 1.45174 26.1526C1.43847 26.2842 1.42303 26.4117 1.40671 26.544C1.37387 26.8148 1.34276 27.0706 1.34146 27.3333C1.32688 30.0571 1.9031 32.6095 3.05465 34.9187C3.3755 35.563 3.79945 36.1203 4.31519 36.5758C4.82658 37.025 5.37843 37.2899 6.0012 37.3852C6.
48810149 37.3876 6.04753 37.4074 6.05253 37.4113C6.08625 37.479 6.12127 37.5468 6.15629 37.6149C6.28071 37.8553 6.40927 38.1039 6.47322 38.3532C6.52651 38.564 6.52651 38.7943 6.52651 39.0384C6.52651 39.1278 6.52651 39.2178 6.52934 39.3061C6.58916 41.4161 6.66768 42.1509 7.00527 44.0361C6.79928 43.4756 6.54065 42.9135 6.20675 42.3728C4.85464 40.1843 3.13688 38.6988 0.955359 37.832C0.81658 37.7761 0.677367 37.7359 0.515966 37.6889L0.483773 37.6793C0.418299 37.6602 0.34891 37.6397 0.274735 37.6171C0.207739 37.5951 0.131389 37.6101 0.0767908 37.6554C0.0224105 37.7004 -0.00608472 37.7694 0.00109348 37.8411C0.01719 37.9908 0.0282836 38.1363 0.0385071 38.2784C0.0609118 38.5898 0.0820113 38.8839 0.157491 39.175C0.861389 41.8938 2.02643 44.0592 3.71896 45.7952C4.44266 46.5374 5.20529 46.9629 6.05036 47.0962C6.26353 47.1295 6.52412 47.1336 6.96525 47.1062L7.09228 47.0986C7.11164 47.0975 7.12861 47.0964 7.14405 47.0964C7.17886 47.0964 7.18168 47.0964 7.20583 47.1321L7.79683 47.9437C7.80445 47.9543 7.81554 47.9928 7.82315 48.0194L7.83185 48.0485C8.44526 50.128 9.20637 52.131 10.1039 54.0319C9.69992 53.4744 9.25727 52.9654 8.76393 52.4866C6.49519 50.2853 2.61635 50.2216 2.18152 50.2216L2.12736 50.222L2.09321 50.2283C1.98663 50.2662 1.92898 50.3801 1.96183 50.4874C1.99206 50.5885 2.02034 50.6908 2.05275 50.8108C2.11475 51.0364 2.17913 51.2694 2.2694 51.4947C2.69923 52.5688 3.39595 53.6021 4.46245 54.7475C5.19528 55.5328 6.02143 56.3291 7.09576 56.8327C8.27233 57.3852 9.33471 57.5201 10.3912 57.2495C10.5709 57.2023 10.7775 57.1424 10.9552 57.0271C11.0818 56.946 11.1164 56.9486 11.2408 57.0413C11.3883 57.1509 11.5452 57.2429 11.6974 57.3321C11.7816 57.3815 11.8664 57.4313 11.9456 57.4813C11.9582 57.492 11.9852 57.5362 11.9952 57.5525C12.9432 59.0986 13.9875 60.5355 15.1151 61.8463C14.5052 61.4026 13.8789 61.0815 13.2138 60.8677C11.181 60.2127 9.05041 60.2961 6.94023 61.112C6.62526 61.234 6.28006 61.4189 6.257 61.4319C6.20871 61.4637 6.17543 61.515 6.16499 61.574C6.15585 61.6319 6.17086 61.691 6.2061 61.7363C6.27201 61.822 6.33574 61.9081 6.39882 61.9936L6.41274 62.0123C6.55522 62.2063 6.71662 62.4258 6.8976 62.6203C7.71265 63.4941 8.71782 64.0798 9.68274 64.5827C11.0096 65.2712 12.3665 65.6421 13.716 65.6856C13.7795 65.6878 13.843 65.6891 13.9063 65.6891C15.1477 65.6891 16.1168 65.2799 16.8638 64.4431C16.8729 64.4366 16.9053 64.4242 16.9231 64.424C17.2085 64.4444 17.4798 64.4859 17.6825 64.5197C17.7145 64.5253 17.7539 64.5445 17.7784 64.5667C19.0264 65.6714 20.348 66.6412 21.7286 67.4664C21.5194 67.4044 21.3038 67.3505 21.0832 67.3072C19.6078 67.0236 18.1021 67.2015 16.4487 67.8584C15.3333 68.303 14.2959 68.9562 13.2773 69.8552C13.1933 69.929 13.1816 70.0558 13.2507 70.1437C13.6112 70.6024 14.0801 70.8593 14.4915 71.0499C15.4947 71.516 16.6271 71.8145 17.9546 71.9628C17.9585 71.963 18.3851 72 18.9833 72C19.4151 72 19.8168 71.9806 20.1768 71.9426C20.5209 71.9065 20.8642 71.8475 21.1972 71.7675C22.7268 71.3951 23.7633 70.6294 24.3571 69.4407C24.3678 69.4304 24.4135 69.4039 24.4713 69.3897C24.7474 69.3212 24.9958 69.2729 25.232 69.2414C25.2877 69.2325 25.3571 69.2475 25.4445 69.2827C26.5008 69.6897 27.6187 70.0288 28.7648 70.2903C28.7809 70.2942 28.7976 70.2962 28.8144 70.2962C28.8914 70.2962 28.9623 70.2537 28.9997 70.1846C29.1091 69.981 29.2425 69.7856 29.3958 69.604C29.4439 69.5468 29.4582 69.4707 29.4345 69.4002C29.4119 69.3319 29.3545 69.2801 29.281 69.2629Z" fill="#374151"></path>
4882                </svg>
4883            </div>
4884            <div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-10 max-w-2xl mx-auto text-center md:text-left">
4885                <img src="/static/img/awards/global-recognition-award-2025.png"
4886                     alt="2025 Global Recognition Award Winner badge"
4887                     class="w-32 md:w-36 flex-shrink-0">
4888                <div>
4889                    <p class="text-gray-600 leading-relaxed mb-2">Honored for innovation and measurable impact in predictive, high-volume hiring.</p>
4890                    <a href="https://www.linkedin.com/posts/cadient-talent_globalrecognitionawards-smartsuite-aiinhr-activity-7384576611788054529-UaCg"
4891                       target="_blank" rel="noopener" class="text-sm font-semibold hover:underline" style="color:#fe4a23;">
4892                        See the full Cadient Post &rarr;
4893                    </a>
4894                </div>
4895            </div>
4896        </div>
4897
4898    </div>
4899</section>
4900
4901<!-- ══════════════════════════════════════════════════════════
4902     SECTION 4b — Start with one problem (modular value)
4903     ══════════════════════════════════════════════════════════ -->
4904<section class="bg-white py-20 px-8 md:px-40">
4905    <div class="max-w-7xl mx-auto">
4906
4907        <!-- Heading -->
4908        <div class="text-center max-w-2xl mx-auto mb-12">
4909            <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-3">Modular by design</p>
4910            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">Start with one problem. Scale when ready.</h2>
4911            <p class="text-gray-500 text-base leading-relaxed">
4912                Start with the one problem that's costing you most. Add modules as you grow. No forced bundle, no paying for tools your team will never open.
4913            </p>
4914        </div>
4915
4916        <!-- 3 value props -->
4917        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
4918            <div class="bg-white rounded-2xl border border-gray-200 p-6">
4919                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#fff7f5;"><i class="fa-solid fa-crosshairs" style="color:#fe4a23;"></i></div>
4920                <p class="font-bold text-gray-900 mb-1.5">Pick by problem</p>
4921                <p class="text-sm text-gray-500 leading-relaxed">Choose the modules that solve your actual pain — turnover, slow hiring, compliance — not a one-size-fits-all bundle.</p>
4922            </div>
4923            <div class="bg-white rounded-2xl border border-gray-200 p-6">
4924                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#fff7f5;"><i class="fa-solid fa-receipt" style="color:#fe4a23;"></i></div>
4925                <p class="font-bold text-gray-900 mb-1.5">Pay per module</p>
4926                <p class="text-sm text-gray-500 leading-relaxed">Your budget goes to the tools you'll actually use. When finance asks "why are we paying for this?", the answer is obvious.</p>
4927            </div>
4928            <div class="bg-white rounded-2xl border border-gray-200 p-6">
4929                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#fff7f5;"><i class="fa-solid fa-layer-group" style="color:#fe4a23;"></i></div>
4930                <p class="font-bold text-gray-900 mb-1.5">Add as you grow</p>
4931                <p class="text-sm text-gray-500 leading-relaxed">Everything works together on one platform, so you can bolt on the next module the day you need it — no re-implementation.</p>
4932            </div>
4933        </div>
4934
4935    </div>
4936</section>
4937
4938
4939<!-- ══════════════════════════════════════════════════════════
4940     SECTION 5b — Testimonial + Stats
4941     ══════════════════════════════════════════════════════════ -->
4942<section class="band-tint py-10 px-8 md:px-40">
4943    <div class="max-w-7xl mx-auto">
4944        <div class="rounded-2xl px-10 py-12 md:px-14 md:py-14 flex flex-col md:flex-row items-center gap-10 md:gap-16" style="background-color:#4a4a4a;">
4945
4946            <!-- Left: testimonial carousel -->
4947            <div class="flex-1 min-w-0" id="tCarousel">
4948                <p class="text-3xl text-white leading-none mb-4" style="font-family:Georgia, serif;">&ldquo;</p>
4949
4950                <!-- slides -->
4951                <div class="relative">
4952                    <div class="t-slide" data-i="0">
4953                        <blockquote class="text-white text-xl md:text-2xl font-semibold leading-snug mb-6" style="min-height:8rem;">
4954                            Turnover was our single biggest cost, and we were guessing at who&rsquo;d stay. SmartTenure flagged the risk before we ever made an offer, so we stopped losing people we&rsquo;d just spent months hiring. A year in, the savings are real and they show up on the P&amp;L.
4955                        </blockquote>
4956                        <!-- <p class="text-white font-bold text-sm mb-0.5 pb-ph">[Name] <span class="font-normal text-gray-500">[placeholder]</span></p>
4957                        <p class="text-gray-400 text-sm pb-ph">VP of Talent Acquisition, [National services employer]</p> -->
4958                    </div>
4959                    <div class="t-slide hidden" data-i="1">
4960                        <blockquote class="text-white text-xl md:text-2xl font-semibold leading-snug mb-6" style="min-height:8rem;">
4961                            We&rsquo;re hiring across dozens of stores and every open shift is a manager on my phone. SmartSource and SmartCommunicate got roles in front of the right people faster and actually got them to reply, we&rsquo;re filling positions in a fraction of the time it used to take.
4962                        </blockquote>
4963                        <!-- <p class="text-white font-bold text-sm mb-0.5 pb-ph">[Name] <span class="font-normal text-gray-500">[placeholder]</span></p>
4964                        <p class="text-gray-400 text-sm pb-ph">Director of Recruiting, [Regional grocery chain]</p> -->
4965                    </div>
4966                    <div class="t-slide hidden" data-i="2">
4967                        <blockquote class="text-white text-xl md:text-2xl font-semibold leading-snug mb-6" style="min-height:8rem;">
4968                            Hiring across every state means a compliance minefield: one wrong I-9 or background-check step and legal is in my office. SmartShield keeps Ban-the-Box, EEOC, and FCRA steps buttoned up automatically, so I&rsquo;m not lying awake worrying about the next audit.
4969                        </blockquote>
4970                        <!-- <p class="text-white font-bold text-sm mb-0.5 pb-ph">[Name] <span class="font-normal text-gray-500">[placeholder]</span></p>
4971                        <p class="text-gray-400 text-sm pb-ph">HR Compliance Manager, [Multi-location employer]</p> -->
4972                    </div>
4973                    <div class="t-slide hidden" data-i="3">
4974                        <blockquote class="text-white text-xl md:text-2xl font-semibold leading-snug mb-6" style="min-height:8rem;">
4975                            We were drowning in it, hundreds of applications and no time to work them, and the good ones ghosting before we could call. Cadient scores and surfaces the strongest candidates up front, so my recruiters spend their time on people who actually get hired and stick.
4976                        </blockquote>
4977                        <!-- <p class="text-white font-bold text-sm mb-0.5 pb-ph">[Name] <span class="font-normal text-gray-500">[placeholder]</span></p>
4978                        <p class="text-gray-400 text-sm pb-ph">Head of Talent, [High-volume employer]</p> -->
4979                    </div>
4980                    <div class="t-slide hidden" data-i="4">
4981                        <blockquote class="text-white text-xl md:text-2xl font-semibold leading-snug mb-6" style="min-height:8rem;">
4982                            What sold me was that I didn&rsquo;t have to buy a giant suite of stuff we&rsquo;d never touch. We started with the one problem costing us most and added modules as we grew. When finance asks why we&rsquo;re paying for it, the answer&rsquo;s easy.
4983                        </blockquote>
4984                        <!-- <p class="text-white font-bold text-sm mb-0.5 pb-ph">[Name] <span class="font-normal text-gray-500">[placeholder]</span></p>
4985                        <p class="text-gray-400 text-sm pb-ph">[Title], [Employer]</p> -->
4986                    </div>
4987                </div>
4988
4989                <!-- controls -->
4990                <div class="flex items-center gap-4 mt-10">
4991                    <button type="button" id="tPrev" aria-label="Previous testimonial"
4992                        class="w-9 h-9 flex items-center justify-center rounded-full border border-gray-500 text-gray-300 text-lg leading-none hover:text-white hover:border-white transition">&lsaquo;</button>
4993                    <div class="flex items-center gap-2" id="tDots">
4994                        <button type="button" class="t-dot w-2.5 h-2.5 rounded-full bg-white transition" data-i="0" aria-label="Go to testimonial 1"></button>
4995                        <button type="button" class="t-dot w-2.5 h-2.5 rounded-full bg-gray-300 transition" data-i="1" aria-label="Go to testimonial 2"></button>
4996                        <button type="button" class="t-dot w-2.5 h-2.5 rounded-full bg-gray-300 transition" data-i="2" aria-label="Go to testimonial 3"></button>
4997                        <button type="button" class="t-dot w-2.5 h-2.5 rounded-full bg-gray-300 transition" data-i="3" aria-label="Go to testimonial 4"></button>
4998                        <button type="button" class="t-dot w-2.5 h-2.5 rounded-full bg-gray-300 transition" data-i="4" aria-label="Go to testimonial 5"></button>
4999                    </div>
5000                    <button type="button" id="tNext" aria-label="Next testimonial"
5001                        class="w-9 h-9 flex items-center justify-center rounded-full border border-gray-500 text-gray-300 text-lg leading-none hover:text-white hover:border-white transition">&rsaquo;</button>
5002                </div>
5003            </div>
5004
5005            <!-- Right: 2×2 stats — each tied to a published case study -->
5006            <div class="stat-grid flex-shrink-0 grid grid-cols-2 gap-x-10 gap-y-6">
5007                <a href="/resources/case-studies/how-cadients-smarttenure-transformed-hiring-for-a-service-industry-leader/"
5008                   class="block border-l-2 border-gray-500 pl-4 group">
5009                    <p class="text-3xl font-extrabold leading-none mb-1" style="color:#fe4a23;">32%</p>
5010                    <p class="text-gray-300 text-sm">Reduction in turnover</p>
5011                    <p class="text-gray-400 text-xs mt-1.5 group-hover:text-white transition">National services leader · Case study &rarr;</p>
5012                </a>
5013                <a href="/resources/case-studies/how-cadients-smarttenure-transformed-hiring-for-a-service-industry-leader/"
5014                   class="block border-l-2 border-gray-500 pl-4 group">
5015                    <p class="text-3xl font-extrabold leading-none mb-1" style="color:#fe4a23;">$20M+</p>
5016                    <p class="text-gray-300 text-sm">Saved in annual hiring costs</p>
5017                    <p class="text-gray-400 text-xs mt-1.5 group-hover:text-white transition">National services leader · Case study &rarr;</p>
5018                </a>
5019                <a href="/resources/case-studies/how-cadients-smarttexting-helped-a-large-regional-grocery-store-reduce-hiring-time-by-41/"
5020                   class="block border-l-2 border-gray-500 pl-4 group">
5021                    <p class="text-3xl font-extrabold leading-none mb-1" style="color:#fe4a23;">41%</p>
5022                    <p class="text-gray-300 text-sm">Faster time-to-hire</p>
5023                    <p class="text-gray-400 text-xs mt-1.5 group-hover:text-white transition">Regional grocery chain · Case study &rarr;</p>
5024                </a>
5025                <a href="/resources/case-studies/how-cadients-smarttexting-helped-a-large-regional-grocery-store-reduce-hiring-time-by-41/"
5026                   class="block border-l-2 border-gray-500 pl-4 group">
5027                    <p class="text-3xl font-extrabold leading-none mb-1" style="color:#fe4a23;">64%</p>
5028                    <p class="text-gray-300 text-sm">Higher response rate</p>
5029                    <p class="text-gray-400 text-xs mt-1.5 group-hover:text-white transition">Regional grocery chain · Case study &rarr;</p>
5030                </a>
5031            </div>
5032
5033        </div>
5034    </div>
5035</section>
5036
5037<!--
5037 Testimonial carousel script -->
5038<script>
5039(function () {
5040    var root = document.getElementById('tCarousel');
5041    if (!root) return;
5042    var slides = root.querySelectorAll('.t-slide');
5043    var dots = root.querySelectorAll('.t-dot');
5044    var n = slides.length, i = 0, timer;
5045    function show(k) {
5046        i = (k + n) % n;
5047        slides.forEach(function (s, idx) { s.classList.toggle('hidden', idx !== i); });
5048        dots.forEach(function (d, idx) {
5049            d.classList.toggle('bg-white', idx === i);
5050            d.classList.toggle('bg-gray-300', idx !== i);
5051        });
5052    }
5053    function next() { show(i + 1); }
5054    function reset() { clearInterval(timer); timer = setInterval(next, 6000); }
5055    document.getElementById('tNext').addEventListener('click', function () { next(); reset(); });
5056    document.getElementById('tPrev').addEventListener('click', function () { show(i - 1); reset(); });
5057    dots.forEach(function (d) {
5058        d.addEventListener('click', function () { show(parseInt(d.dataset.i, 10)); reset(); });
5059    });
5060    root.addEventListener('mouseenter', function () { clearInterval(timer); });
5061    root.addEventListener('mouseleave', reset);
5062    reset();
5063})();
5064</script>
5064
5065
5066
5067<!-- ══════════════════════════════════════════════════════════
5068     SECTION 5d — Watch Our Latest Webinar
5069     ══════════════════════════════════════════════════════════ -->
5070<section class="bg-white py-20 px-8 md:px-40">
5071    <div class="max-w-7xl mx-auto">
5072        <div class="rounded-2xl p-8 md:p-12" style="background:#fff7f5;">
5073            <div class="nhw-grid">
5074
5075                <div class="nhw-area-heading">
5076                    <span class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-5"
5077                          style="background:#fff7f5;color:#fe4a23;">
5078                        <i class="fa-solid fa-circle-play"></i> Watch Our Latest Webinar
5079                    </span>
5080                    <h2 class="webinar-heading text-3xl md:text-4xl font-bold text-gray-900 leading-tight mb-3">Scaling Hiring? Start Here.</h2>
5081                    <p class="text-gray-500">Most breakdowns aren&rsquo;t strategic. They&rsquo;re operational.</p>
5082                </div>
5083
5084                <div class="nhw-area-video">
5085                    <div class="relative rounded-2xl overflow-hidden cursor-pointer group shadow-lg" onclick="nhwOpenModal()">
5086                        <img src="/static/img/webinar/webinar-thumbnail.png"
5087                             alt="Webinar: Rethinking Employee Referrals &amp; HR Communication"
5088                             class="w-full h-auto block transition-transform duration-500 group-hover:scale-105">
5089                    </div>
5090                </div>
5091
5092                <div class="nhw-area-body">
5093                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5 sm:gap-0 mb-6">
5094                        <div class="flex items-start gap-3">
5095                            <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-white">
5096                                <img src="/static/img/webinar/icon-referrals.png" alt="" class="w-5 h-5 object-contain">
5097                            </div>
5098                            <p class="text-sm text-gray-600 leading-snug">Turn referrals into a measurable performance channel</p>
5099                        </div>
5100                        <div class="flex items-start gap-3 sm:pl-5 sm:border-l sm:border-gray-200">
5101                            <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-white">
5102                                <img src="/static/img/webinar/icon-workload.png" alt="" class="w-5 h-5 object-contain">
5103                            </div>
5104                            <p class="text-sm text-gray-600 leading-snug">Reduce repetitive HR workload instantly</p>
5105                        </div>
5106                        <div class="flex items-start gap-3 sm:pl-5 sm:border-l sm:border-gray-200">
5107                            <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-white">
5108                                <img src="/static/img/webinar/icon-speed.png" alt="" class="w-5 h-5 object-contain">
5109                            </div>
5110                            <p class="text-sm text-gray-600 leading-snug">Improve speed, clarity, and employee experience</p>
5111                        </div>
5112                    </div>
5113
5114                    <p class="text-sm text-gray-400 italic mb-8">Featuring live demos of SmartRefer&trade; and SmartCommunicate&trade;.</p>
5115
5116                    <div class="webinar-cta">
5117                        <button type="button" onclick="nhwOpenModal()"
5118                            class="inline-flex items-center gap-2 text-white font-semibold px-7 py-3.5 rounded-xl text-sm transition"
5119                            style="background-color:#fe4a23;"
5120                            onmouseover="this.style.backgroundColor='#d93d1a'"
5121                            onmouseout="this.style.backgroundColor='#fe4a23'">
5122                            Watch Now <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
5123                        </button>
5124                        <a href="/resources/webinars/rethinking-employee-referrals-hr-communications/"
5125                           class="inline-flex items-center gap-2 font-semibold px-7 py-3.5 rounded-xl border text-sm transition"
5126                           style="border-color:#fe4a23;color:#fe4a23;">
5127                            Learn More <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
5128                        </a>
5129                    </div>
5130                </div>
5131
5132            </div>
5133        </div>
5134    </div>
5135</section>
5136
5137<style>
5138    /* nhw-grid: named-area layout so the video sits right after the heading
5139       on mobile (stacked) while keeping the original two-column look on
5140       desktop — a plain flex-col/flex-row pair can't reorder just the video
5141       without also moving the icons/buttons block with it. */
5142    .nhw-grid {
5143        display: grid;
5144        grid-template-columns: 1fr;
5145        grid-template-areas: "heading" "video" "body";
5146        row-gap: 1.75rem;
5147    }
5148    .nhw-area-heading { grid-area: heading; }
5149    .nhw-area-video { grid-area: video; }
5150    .nhw-area-body { grid-area: body; }
5151    @media (min-width: 1024px) {
5152        .nhw-grid {
5153            grid-template-columns: 1fr 480px;
5154            grid-template-areas: "heading video" "body video";
5155            column-gap: 4rem;
5156            row-gap: 1.5rem;
5157            align-items: center;
5158        }
5159    }
5160</style>
5161
5162
5163<style>
5164    @media (max-width: 639.98px) {
5165
5166        /* !important is load-bearing here: .border-l-2 and .pl-4 are utilities
5167           of equal specificity (0,1,0) to `.stat-grid > *`, and the compiled
5168           Tailwind sheet is linked after this inline block on both pages, so
5169           without it the utilities win on source order. */
5170        .stat-grid>* {
5171            border-left: 0 !important;
5172            padding-left: 0 !important;
5173            text-align: center;
5174        }
5175
5176        /* The 2.5rem column gap was sized for rules that are no longer there. */
5177        .stat-grid {
5178            column-gap: 1.5625rem;
5179        }
5180    }
5181</style>
5182
5183<style>
5184    /* "Scaling Hiring? Start Here." wrapped as "Scaling Hiring? Start" /
5185       "Here." at phone widths — the sentence split mid-phrase, stranding one
5186       word on its own line. `balance` evens the two lines out and breaks at
5187       the sentence instead, giving "Scaling Hiring?" / "Start Here.", which is
5188       also how the standalone webinar page sets it.
5189
5190       Preferred over a hard <br class="..."> for two reasons: a fixed break
5191       would still be wrong at some widths, and the responsive variant needed
5192       to hide it is absent from the purged Tailwind build these pages load.
5193       Browsers without text-wrap support simply wrap as they do today. */
5194    .webinar-heading {
5195        text-wrap: balance;
5196    }
5197
5198    .webinar-cta {
5199        display: flex;
5200        flex-wrap: wrap;
5201        gap: 1rem;
5202    }
5203
5204    @media (max-width: 639.98px) {
5205        .webinar-cta {
5206            flex-wrap: nowrap;
5207            gap: 0.625rem;
5208        }
5209
5210        /* `flex: 1 1 0` so the two share the row evenly and neither's content
5211           width can force a wrap, and trimmed side padding so both labels
5212           still fit at 375px. The selector is `> a, > button` (0,1,1) so it
5213           outranks the .px-7 utility (0,1,0) on the children whichever order
5214           the stylesheets land in. */
5215        .webinar-cta>a,
5216        .webinar-cta>button {
5217            flex: 1 1 0;
5218            justify-content: center;
5219            padding-left: 0.75rem;
5220            padding-right: 0.75rem;
5221            white-space: nowrap;
5222        }
5223    }
5224</style>
5225
5226
5227
5228
5229
5230<style>
5231    .vm-overlay {
5232        position: fixed;
5233        inset: 0;
5234        z-index: 9999;
5235        display: flex;
5236        align-items: center;
5237        justify-content: center;
5238        padding: 1rem;
5239        background: rgba(9, 9, 11, 0.82);
5240        -webkit-backdrop-filter: blur(6px);
5241        backdrop-filter: blur(6px);
5242        opacity: 0;
5243        transition: opacity 0.22s ease;
5244    }
5245
5246    .vm-overlay[hidden] {
5247        display: none;
5248    }
5249
5250    .vm-overlay.vm-open {
5251        opacity: 1;
5252    }
5253
5254    .vm-panel {
5255        position: relative;
5256        width: 100%;
5257        max-width: 60rem;
5258        background: #0b0b0d;
5259        border: 1px solid rgba(255, 255, 255, 0.1);
5260        border-radius: 1rem;
5261        overflow: hidden;
5262        box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
5263        transform: translateY(10px) scale(0.985);
5264        opacity: 0;
5265        transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.24s ease;
5266    }
5267
5268    .vm-overlay.vm-open .vm-panel {
5269        transform: none;
5270        opacity: 1;
5271    }
5272
5273    /* Title bar. The old version put a bare Font Awesome glyph above the
5274       video at -top-10, which sat off-screen on short viewports and depended
5275       on a stylesheet loaded from a CDN. This keeps the control inside the
5276       panel and draws it inline. */
5277    .vm-bar {
5278        display: flex;
5279        align-items: center;
5280        gap: 0.9rem;
5281        padding: 0.85rem 0.9rem 0.85rem 1.15rem;
5282        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
5283    }
5284
5285    .vm-text {
5286        min-width: 0;
5287        flex: 1 1 auto;
5288    }
5289
5290    .vm-eyebrow {
5291        margin: 0;
5292        font-size: 0.65rem;
5293        font-weight: 700;
5294        letter-spacing: 0.16em;
5295        text-transform: uppercase;
5296        color: #fe4a23;
5297    }
5298
5299    .vm-title {
5300        margin: 0.15rem 0 0;
5301        font-size: 0.95rem;
5302        font-weight: 600;
5303        line-height: 1.35;
5304        color: #f4f4f5;
5305        overflow: hidden;
5306        text-overflow: ellipsis;
5307        white-space: nowrap;
5308    }
5309
5310    .vm-close {
5311        flex: 0 0 auto;
5312        display: inline-flex;
5313        align-items: center;
5314        justify-content: center;
5315        width: 2.35rem;
5316        height: 2.35rem;
5317        border: 0;
5318        border-radius: 50%;
5319        background: rgba(255, 255, 255, 0.08);
5320        color: #d4d4d8;
5321        cursor: pointer;
5322        transition: background 0.15s ease, color 0.15s ease;
5323    }
5324
5325    .vm-close:hover {
5326        background: rgba(255, 255, 255, 0.16);
5327        color: #fff;
5328    }
5329
5330    .vm-close:focus-visible {
5331        outline: 2px solid #fe4a23;
5332        outline-offset: 2px;
5333    }
5334
5335    .vm-frame {
5336        position: relative;
5337        width: 100%;
5338        padding-top: 56.25%;
5339        background: #000;
5340    }
5341
5342    .vm-frame iframe {
5343        position: absolute;
5344        inset: 0;
5345        width: 100%;
5346        height: 100%;
5347        border: 0;
5348    }
5349
5350    @media (max-width: 640px) {
5351        .vm-overlay {
5352            padding: 0.75rem;
5353        }
5354
5355        .vm-title {
5356            font-size: 0.875rem;
5357        }
5358    }
5359
5360    @media (prefers-reduced-motion: reduce) {
5361
5362        .vm-overlay,
5363        .vm-panel {
5364            transition: none;
5365        }
5366    }
5367</style>
5368
5369<div id="nhw-modal" class="vm-overlay" hidden role="dialog" aria-modal="true"
5370     aria-labelledby="nhw-modal-title">
5371    <div class="vm-panel">
5372        <div class="vm-bar">
5373            <div class="vm-text">
5374                <p class="vm-eyebrow">Webinar</p>
5375                <p class="vm-title" id="nhw-modal-title">Webinar: Scaling Hiring? Start Here.</p>
5376            </div>
5377            <button type="button" class="vm-close" id="nhw-close" aria-label="Close video">
5378                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
5379                     stroke-width="2.2" stroke-linecap="round" aria-hidden="true" focusable="false">
5380                    <path d="M6 6l12 12M18 6L6 18"></path>
5381                </svg>
5382            </button>
5383        </div>
5384        <div class="vm-frame">
5385            
5386            <iframe id="nhw-iframe" title="Webinar: Scaling Hiring? Start Here." src=""
5387                    data-src="https://www.youtube-nocookie.com/embed/4QWa_RvYV_w?autoplay=1&amp;rel=0&amp;modestbranding=1&amp;playsinline=1&amp;color=white"
5388                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
5389                    allowfullscreen></iframe>
5390        </div>
5391    </div>
5392</div>
5393
5394<script>
5395    (function () {
5396        var modal = document.getElementById('nhw-modal');
5397        var iframe = document.getElementById('nhw-iframe');
5398        var closeBtn = document.getElementById('nhw-close');
5399        if (!modal || !iframe || !closeBtn) return;
5400
5401        var panel = modal.querySelector('.vm-panel');
5402        var lastFocused = null;
5403
5404        window.nhwOpenModal = function () {
5405            lastFocused = document.activeElement;
5406            iframe.src = iframe.getAttribute('data-src');
5407            modal.hidden = false;
5408            // Force a reflow so the transition has a start state to animate
5409            // from. requestAnimationFrame would also work, but it is throttled
5410            // when the tab is not visible — and an overlay left at opacity:0
5411            // with hidden already false is an invisible click-blocker over the
5412            // whole page. This is synchronous and cannot be deferred.
5413            void modal.offsetWidth;
5414            modal.classList.add('vm-open');
5415            document.body.style.overflow = 'hidden';
5416            closeBtn.focus();
5417        };
5418
5419        window.nhwCloseModal = function () {
5420            modal.classList.remove('vm-open');
5421            document.body.style.overflow = '';
5422            // Cut the video immediately; hide once the fade has finished so the
5423            // panel does not vanish mid-transition.
5424            iframe.src = '';
5425            window.setTimeout(function () { modal.hidden = true; }, 220);
5426            if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus();
5427            lastFocused = null;
5428        };
5429
5430        closeBtn.addEventListener('click', nhwCloseModal);
5431
5432        // Backdrop click. Checking the target is the overlay itself means a
5433        // click inside the panel never closes it.
5434        modal.addEventListener('click', function (e) {
5435            if (e.target === modal) nhwCloseModal();
5436        });
5437
5438        document.addEventListener('keydown', function (e) {
5439            if (modal.hidden) return;
5440
5441            if (e.key === 'Escape') {
5442                nhwCloseModal();
5443                return;
5444            }
5445
5446            // Keep Tab inside the dialog. Without this, focus walks into the
5447            // page behind the overlay, which a keyboard or screen-reader user
5448            // cannot see and cannot get back from.
5449            if (e.key !== 'Tab') return;
5450            var focusable = panel.querySelectorAll(
5451                'button, [href], iframe, input, select, textarea, [tabindex]:not([tabindex="-1"])');
5452            if (!focusable.length) return;
5453            var first = focusable[0];
5454            var last = focusable[focusable.length - 1];
5455            if (e.shiftKey && document.activeElement === first) {
5456                e.preventDefault();
5457                last.focus();
5458            } else if (!e.shiftKey && document.activeElement === last) {
5459                e.preventDefault();
5460                first.focus();
5461            }
5462        });
5463    })();
5464</script>
5464
5465
5466
5467<!-- ══════════════════════════════════════════════════════════
5468     SECTION 6 — Stop guessing. Start solving. (black CTA)
5469     ══════════════════════════════════════════════════════════ -->
5470<section class="bg-black py-20 px-8 md:px-40">
5471    <div class="max-w-3xl mx-auto text-center">
5472        <h2 class="text-3xl md:text-4xl font-bold text-white leading-snug mb-4">
5473            Stop guessing. Start solving.
5474        </h2>
5475        <p class="text-gray-400 text-sm leading-relaxed mb-8 max-w-xl mx-auto">
5476            All of Hiring Intelligence, powered by Artificial Intelligence. Cadient gives your team the tools,
5477            data, and guidance to make better hiring decisions — every time.
5478        </p>
5479        <div class="flex flex-wrap gap-4 justify-center">
5480            <a href="/roi-calculator/"
5481               class="inline-block text-white font-semibold px-7 py-3.5 rounded-xl text-sm transition"
5482               style="background-color:#fe4a23;"
5483               onmouseover="this.style.backgroundColor='#d93d1a'"
5484               onmouseout="this.style.backgroundColor='#fe4a23'">
5485                ROI CALCULATOR
5486            </a>
5487            <a href="/playbooks/"
5488               class="inline-block text-white font-semibold px-7 py-3.5 rounded-xl border border-gray-600 hover:border-gray-300 text-sm transition">
5489                Find Your Playbook
5490            </a>
5491        </div>
5492    </div>
5493</section>
5494
5495</main><!-- FOOTER -->
5496<style>.text-cadient-blue{color:#0077b6}.hover\:text-cadient-blue:hover{color:#0077b6}footer summary::-webkit-details-marker{display:none}footer summary{list-style:none}.ftr-more-chev{transition:transform .2s ease}footer details[open] .ftr-more-chev{transform:rotate(90deg)}</style>
5497<footer class="bg-slate-900 text-slate-300 py-16">
5498    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
5499        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-y-12 gap-x-16">
5500
5501            <!-- Brand — page-specific when a product context is set, generic Cadient brand otherwise -->
5502            <div class="space-y-4">
5503                
5504                <a href="/"><img src="/static/img/logo.webp" width="300" height="93"
5505                        class="w-32 brightness-0 invert opacity-90 hover:opacity-100 transition-opacity"
5506                        alt="Cadient"></a>
5507                <p class="text-sm text-slate-400 leading-relaxed">Transforming the way businesses hire with precision,
5508                    speed, and intelligence.</p>
5509                
5510                <div class="flex space-x-4 pt-2">
5511                    <a href="https://www.linkedin.com/company/cadient-talent/" aria-label="Cadient on LinkedIn"
5512                        class="text-slate-400 hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg></a>
5513                    <a href="https://x.com/CadientTalent" aria-label="Cadient on X (Twitter)" class="text-slate-400 hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
5514                    <a href="https://www.facebook.com/cadienttalent/" aria-label="Cadient on Facebook"
5515                        class="text-slate-400 hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.
551501 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8v8.44C19.61 23.08 24 18.09 24 12.07z"/></svg></a>
5516                </div>
5517            </div>
5518
5519            <!-- Solutions — mirrors the header mega-menu (Recruit / Hire / Retain) -->
5520            <div class="lg:col-span-3">
5521                <h2 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Solutions</h2>
5522                <div class="grid grid-cols-2 sm:grid-cols-3 gap-x-8 gap-y-8">
5523                    <!-- Recruit -->
5524                    <div>
5525                        <p class="text-[11px] font-semibold uppercase tracking-widest text-slate-500 mb-3">Recruit</p>
5526                        <ul class="space-y-2.5 text-[13px] text-slate-400">
5527                            <li><a href="/smart-automation" class="hover:text-cadient-blue transition-colors">SmartAutomation</a></li>
5528                            <li><a href="/smart-refer/" class="hover:text-cadient-blue transition-colors">SmartRefer</a></li>
5529                            <li><a href="/smart-source" class="hover:text-cadient-blue transition-colors">SmartSource</a></li>
5530                            <li><a href="/smart-registry" class="hover:text-cadient-blue transition-colors">SmartRegistry</a></li>
5531                            <li><a href="/smartsuite/smartmatch/" class="hover:text-cadient-blue transition-colors">SmartMatch</a></li>
5532                            <li><a href="/smartsuite/smartscreen/" class="hover:text-cadient-blue transition-colors">SmartScreen</a></li>
5533                            <li><a href="/smartsuite/smarttexting/" class="hover:text-cadient-blue transition-colors">SmartTexting</a></li>
5534                        </ul>
5535                    </div>
5536                    <!-- Hire -->
5537                    <div>
5538                        <p class="text-[11px] font-semibold uppercase tracking-widest text-slate-500 mb-3">Hire</p>
5539                        <ul class="space-y-2.5 text-[13px] text-slate-400">
5540                            <li><a href="/smart-shield" class="hover:text-cadient-blue transition-colors">SmartShield</a></li>
5541                            <li><a href="/smartsuite/smarthire/" class="hover:text-cadient-blue transition-colors">SmartHire</a></li>
5542                            <li><a href="/smartsuite/smartinterview/" class="hover:text-cadient-blue transition-colors">SmartInterview</a></li>
5543                            <li><a href="/smartsuite/smarttexting/" class="hover:text-cadient-blue transition-colors">SmartTexting</a></li>
5544                            <li><a href="/smartsuite/smartoffer/" class="hover:text-cadient-blue transition-colors">SmartOffer</a></li>
5545                        </ul>
5546                    </div>
5547                    <!-- Retain -->
5548                    <div>
5549                        <p class="text-[11px] font-semibold uppercase tracking-widest text-slate-500 mb-3">Retain</p>
5550                        <ul class="space-y-2.5 text-[13px] text-slate-400">
5551                            <li><a href="/smart-communicate/" class="hover:text-cadient-blue transition-colors">SmartCommunicate</a></li>
5552                            <li><a href="/smartsuite/smarttenure/" class="hover:text-cadient-blue transition-colors">SmartTenure</a></li>
5553                            <li><a href="/smartsuite/smartfeedback/" class="hover:text-cadient-blue transition-colors">SmartFeedback</a></li>
5554                            <li><a href="/smartsuite/smarttexting/" class="hover:text-cadient-blue transition-colors">SmartTexting</a></li>
5555                        </ul>
5556                    </div>
5557                </div>
5558            </div>
5559
5560            <!-- Company -->
5561            <div>
5562                <h2 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Company</h2>
5563                <ul class="space-y-3 text-sm">
5564                    <li><a href="/about"
5565                            class="hover:text-cadient-blue transition-colors">About Us</a></li>
5566                    <li><a href="/lp/schedule" rel="nofollow"
5567                            class="trigger-contact-sales hover:text-cadient-blue transition-colors">Contact</a></li>
5568                    <li><a href="/article" class="hover:text-cadient-blue transition-colors">Blog</a></li>
5569                </ul>
5570            </div>
5571
5572        </div>
5573
5574        <div
5575            class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-slate-500">
5576            <p>&copy; 2026 Cadient Talent. All rights reserved.</p>
5577            <a href="/privacy-policy" class="hover:text-white mt-4 md:mt-0">Privacy Policy</a>
5578        </div>
5579    </div>
5580</footer>
5581
5582<!-- Contact Sales Modal Partial -->
5583<style>
5584    /* Explicit sizing so the modal renders correctly regardless of whether the
5585       host page ships full Tailwind (smart-refer/CDN) or purged Tailwind (blog).
5586       Without this, the card has no width below the sm: breakpoint and collapses
5587       to the iframe's 300px intrinsic width, cutting off the scheduler. */
5588    #contactSalesModal .csm-card {
5589        width: 100%;
5590        max-width: 42rem;
5591    }
5592
5593    #contactSalesModal .csm-frame {
5594        display: block;
5595        width: 100%;
5596        height: 650px;
5597    }
5598
5599    @media (max-width: 640px) {
5600        #contactSalesModal .csm-wrap {
5601            padding: 0.5rem;
5602        }
5603
5604        /* Fill the phone viewport instead of shrinking to the iframe default. */
5605        #contactSalesModal .csm-card {
5606            max-width: 100%;
5607        }
5608    }
5609</style>
5610<div id="contactSalesModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
5611    <!-- Backdrop -->
5612    <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity" id="modalBackdrop"></div>
5613
5614    <!-- Modal Content -->
5615    <div class="csm-wrap flex min-h-full items-center justify-center p-4 text-center sm:p-0">
5616        <div
5617            class="csm-card relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all sm:my-8">
5618            <div class="bg-white">
5619                <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
5620                    <h3 class="text-xl font-bold text-slate-900">Schedule a Demo</h3>
5621                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors"
5622                        id="closeModalBtn" aria-label="Close">
5623                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
5624                    </button>
5625                </div>
5626
5627                <div class="p-0">
5628                    <iframe id="schedulerIframe" src="" title="Schedule a demo with Cadient" class="csm-frame border-none"></iframe>
5629                </div>
5630            </div>
5631        </div>
5632    </div>
5633</div>
5634
5635<script>
5636    (function () {
5637        const modal = document.getElementById('contactSalesModal');
5638        const closeBtn = document.getElementById('closeModalBtn');
5639        const backdrop = document.getElementById('modalBackdrop');
5640        const iframe = document.getElementById('schedulerIframe');
5641
5642        function openContactSalesModal() {
5643            modal.classList.remove('hidden');
5644            document.body.style.overflow = 'hidden';
5645            iframe.src = '/lp/schedule';
5646        }
5647
5648        function closeContactSalesModal() {
5649            modal.classList.add('hidden');
5650            document.body.style.overflow = '';
5651            iframe.src = '';
5652        }
5653
5654        // Event listeners
5655        if (closeBtn) {
5656            closeBtn.addEventListener('click', closeContactSalesModal);
5657        }
5658
5659        if (backdrop) {
5660            backdrop.addEventListener('click', closeContactSalesModal);
5661        }
5662
5663        // Expose globally for other scripts to call
5664        window.openContactSalesModal = openContactSalesModal;
5665        window.closeContactSalesModal = closeContactSalesModal;
5666
5667        // Support for elements with trigger class
5668        document.addEventListener('click', function (e) {
5669            if (e.target.matches('.trigger-contact-sales') || e.target.closest('.trigger-contact-sales')) {
5670                e.preventDefault();
5671                openContactSalesModal();
5672            }
5673        });
5674    })();
5675</script>
5675
5676
5677</body>
5678</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.