PageSourceSearch

https://homeoftraining.com/courses/alcohol-server-training

html homeoftraining.com collected 2026-09-29 13:12:08 UTC 328,135 bytes, 6,259 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="preconnect" href="https://fonts.googleapis.com">
7    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
9    <style>
10/* HOT Landing Pages — Shared Styles */
11/* Font loaded via <link> in template, not @import */
12
13*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
14html { scroll-behavior: smooth; overflow-x: clip; }
15html body { overflow-x: clip; }
16body.single-hot_course,
17body.single-hot_product,
18body.post-type-archive-hot_course,
19body.post-type-archive-hot_product { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: #444; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
20body.single-hot_course img,
21body.single-hot_product img,
22body.post-type-archive-hot_course img,
23body.post-type-archive-hot_product img { max-width: 100%; height: auto; display: block; }
24body.single-hot_course a,
25body.single-hot_product a,
26body.post-type-archive-hot_course a,
27body.post-type-archive-hot_product a { text-decoration: none; color: inherit; }
28body.single-hot_course ul,
29body.single-hot_product ul,
30body.post-type-archive-hot_course ul,
31body.post-type-archive-hot_product ul { list-style: none; }
32/* Container widths — !important needed because Bootstrap 5.3 is hardcoded in
33   wp_head on prod (can't be dequeued) and sets smaller max-widths at every
34   breakpoint, which would narrow the hero content to ~960px on wide screens
35   and visually push the centered hero-inner off the viewport center. */
36body.single-hot_course .container,
37body.single-hot_product .container,
38body.post-type-archive-hot_product .container,
39body.post-type-archive-hot_course .container {
40    width: 92% !important;
41    max-width: 1200px !important;
42    margin-left: auto !important;
43    margin-right: auto !important;
44    padding-left: 0 !important;
45    padding-right: 0 !important;
46}
47@media (max-width: 768px) {
48    body.single-hot_course .container,
49    body.single-hot_product .container,
50    body.post-type-archive-hot_course .container,
51    body.post-type-archive-hot_product .container {
52        width: 94% !important;
53    }
54}
55
56/* ===== ANIMATIONS ===== */
57.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
58.reveal.visible { opacity: 1; transform: none; }
59.reveal-item { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
60.reveal-item.visible { opacity: 1; transform: none; }
61.reveal-item.visible:nth-child(2) { transition-delay: 0.1s; }
62.reveal-item.visible:nth-child(3) { transition-delay: 0.2s; }
63.reveal-item.visible:nth-child(4) { transition-delay: 0.3s; }
64.reveal-item.visible:nth-child(5) { transition-delay: 0.35s; }
65.reveal-item.visible:nth-child(6) { transition-delay: 0.4s; }
66
67/* ===== TOP BAR ===== */
68/* Phase 11.3 (5/8 owner): the bestseller offer now lives INSIDE the
69   top-bar (left slot) alongside contact + social — one consolidated
70   black row, no second stacked strip below. The .top-bar-deal slot is
71   empty on non-landing surfaces (archives etc.) and the layout still
72   flexes correctly. */
73.top-bar { background: #1a1a1a; color: #fff; font-size: 14px; padding: 8px 0; font-weight: 500; }
74.top-bar-inner {
75    display: flex;
76    align-items: center;
77    justify-content: space-between;
78    gap: 24px;
79    flex-wrap: wrap;
80}
81.top-bar a { color: #fff; transition: opacity 0.2s; }
82.top-bar a:hover { opacity: 0.85; }
83.top-bar-deal {
84    display: flex;
85    align-items: center;
86    flex-wrap: wrap;
87    gap: 8px;
88    flex: 1 1 auto;
89    min-width: 0;
90}
91.top-bar-deal:empty { display: none; }
92.top-bar-contact { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
93.top-bar-item { display: flex; align-items: center; gap: 8px; }
94.top-bar-social { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
95.top-bar-social a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(255,255,255,0.12); border-radius: 50%; transition: background 0.2s; }
96.top-bar-social a:hover { background: rgba(255,255,255,0.28); }
97@media (max-width: 900px) {
98    .top-bar-inner { gap: 14px; }
99    .top-bar-contact { gap: 16px; font-size: 13px; }
100}
101@media (max-width: 640px) {
102    .top-bar-contact .top-bar-item:first-child { display: none; } /* drop email — keep phone */
103    .top-bar-social { display: none; }
104}
105@media (max-width: 480px) {
106    .top-bar-contact { display: none; } /* deal carries the row alone */
107}
108
109/* ===== NAV ===== */
110.site-nav { background: #fff; border-bottom: 1px solid #e7e7e7; position: sticky; top: 0; z-index: 1000; }
111.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
112.nav-logo img { height: 40px; width: auto; }
113.nav-links { display: flex; align-items: center; gap: 22px; }
114.nav-link,
115.nav-links a { font-size: 15px; font-weight: 500; color: #333; transition: color 0.2s; background: transparent; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
116.nav-link:hover,
117.nav-link--active,
118.nav-links a:hover { color: #E8590C; }
119.nav-link--active { font-weight: 600; }
120/* Phase 11.7 (5/10 owner): nav CTA picks up the home-demo .hlh-btn
121   shape — 12px rounded rect, gradient, 14px 800 weight. Tighter
122   padding so it still fits the 72px nav row. */
123.nav-links .nav-cta,
124.nav-cta {
125    display: inline-flex;
126    align-items: center;
127    gap: 6px;
128    background-image: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
129    background-size: 200% 100%;
130    background-position: 0% 50%;
131    color: #fff !important;
132    padding: 9px 18px;
133    border-radius: 12px;
134    font-weight: 800;
135    font-size: 14px;
136    letter-spacing: 0.01em;
137    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
138    transition: background-position 0.35s ease, transform 0.15s ease;
139}
140.nav-links .nav-cta:hover { background-position: 100% 50%; color: #fff !important; transform: translateY(-1px); }
141.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
142.nav-toggle span { display: block; width: 24px; height: 2px; background: #333; margin: 5px 0; transition: 0.3s; }
143.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
144.nav-toggle.active span:nth-child(2) { opacity: 0; }
145.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
146
147/* Services megamenu — mirrors the live homeoftraining.com nav structure.
148   Hover-open on desktop, tap-to-expand on mobile (handled in landing-page.js).
149   Three-column grid: Compliance Training / Licensing / Guidebooks-SCORM. */
150.nav-item { position: relative; }
151.nav-item--has-mega .nav-link--mega { display: inline-flex; align-items: center; gap: 6px; }
152.nav-caret { transition: transform 0.18s ease; }
153.nav-item--has-mega.is-open .nav-link--mega .nav-caret,
154.nav-item--has-mega:hover .nav-link--mega .nav-caret { transform: rotate(180deg); color: #E8590C; }
155.nav-mega {
156    position: absolute;
157    top: calc(100% + 14px);
158    left: 50%;
159    transform: translateX(-50%) translateY(-6px);
160    min-width: 720px;
161    background: #fff;
162    border: 1px solid #eee;
163    border-radius: 12px;
164    box-shadow: 0 18px 48px rgba(0,0,0,0.12);
165    padding: 24px 28px;
166    opacity: 0;
167    visibility: hidden;
168    pointer-events: none;
169    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
170    z-index: 1001;
171}
172/* Invisible hover bridge — covers the gap between nav button and panel
173   so the hover doesn't drop when the cursor crosses it. */
174.nav-mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
175.nav-item--has-mega:hover .nav-mega,
176.nav-item--has-mega:focus-within .nav-mega,
177.nav-item--has-mega.is-open .nav-mega {
178    opacity: 1;
179    visibility: visible;
180    pointer-events: auto;
181    transform: translateX(-50%) translateY(0);
182}
183.nav-mega-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
184.nav-mega-col h4.nav-mega-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin: 0 0 12px; padding-bottom: 8px;
184 border-bottom: 1px solid #f0f0f0; }
185.nav-mega-col h4.nav-mega-heading a { color: inherit; }
186.nav-mega-col h4.nav-mega-heading a:hover { color: #E8590C; }
187.nav-mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
188.nav-mega-col ul li a { display: block; font-size: 14px; font-weight: 500; color: #333; padding: 6px 8px; border-radius: 6px; transition: background-color 0.15s, color 0.15s; }
189.nav-mega-col ul li a:hover { background: #fff5ec; color: #E8590C; }
190
191@media (max-width: 1024px) {
192    .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 16px 20px 24px; gap: 4px; border-top: 1px solid #e7e7e7; box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-height: calc(100vh - 72px); overflow-y: auto; }
193    .nav-links.open { display: flex; }
194    .nav-toggle { display: block; }
195
196    /* Top-level rows — Services toggle + flat links share one size/weight. */
197    .nav-link,
198    .nav-links > a,
199    .nav-item--has-mega .nav-link--mega {
200        padding: 12px 4px;
201        font-size: 16px;
202        font-weight: 600;
203        line-height: 1.35;
204        border-bottom: 1px solid #f4f4f4;
205    }
206    .nav-links .nav-cta {
207        margin-top: 12px;
208        padding: 13px 22px;
209        font-size: 15px;
210        font-weight: 800;
211        text-align: center;
212        border: 0;
213        border-radius: 12px;
214        justify-content: center;
215    }
216
217    /* Mobile: collapse mega into an accordion under the Services row */
218    .nav-item--has-mega .nav-link--mega { width: 100%; justify-content: space-between; }
219    .nav-mega {
220        position: static;
221        left: auto;
222        transform: none;
223        min-width: 0;
224        width: 100%;
225        opacity: 1;
226        visibility: hidden;
227        pointer-events: none;
228        max-height: 0;
229        padding: 0;
230        border: 0;
231        box-shadow: none;
232        border-radius: 0;
233        overflow: hidden;
234        transition: max-height 0.25s ease, padding 0.2s ease, visibility 0s linear 0.25s;
235    }
236    .nav-mega::before { display: none; }
237    .nav-item--has-mega.is-open .nav-mega,
238    .nav-item--has-mega:hover .nav-mega,
239    .nav-item--has-mega:focus-within .nav-mega {
240        transform: none;
241        left: auto;
242    }
243    .nav-item--has-mega.is-open .nav-mega {
244        visibility: visible;
245        pointer-events: auto;
246        max-height: 1200px;
247        padding: 4px 0 12px;
248        transition: max-height 0.3s ease, padding 0.2s ease, visibility 0s linear 0s;
249    }
250    .nav-mega-inner { grid-template-columns: 1fr; gap: 0; width: 100%; }
251    .nav-mega-col { width: 100%; min-width: 0; padding: 0; }
252
253    /* Section labels — smaller uppercase captions, clearly not links. */
254    .nav-mega-col h4.nav-mega-heading {
255        margin: 16px 0 2px;
256        padding: 0 4px 8px;
257        font-size: 12px;
258        font-weight: 700;
259        letter-spacing: 0.08em;
260        line-height: 1.25;
261        text-transform: uppercase;
262        color: #888;
263        border-bottom: 1px solid #f0f0f0;
264    }
265    .nav-mega-col:first-child h4.nav-mega-heading { margin-top: 6px; }
266    .nav-mega-col h4.nav-mega-heading a {
267        font-size: inherit;
268        font-weight: inherit;
269        letter-spacing: inherit;
270        text-transform: inherit;
271        color: inherit;
272        padding: 0;
273        border-bottom: 0;
274    }
275    .nav-mega-col h4.nav-mega-heading a:hover { color: #E8590C; background: transparent; }
276
277    /* Submenu links — same 16px as top-level rows, indented + lighter weight. */
278    .nav-mega-col ul { gap: 0; }
279    .nav-mega-col ul li a {
280        display: block;
281        padding: 10px 4px 10px 14px;
282        font-size: 16px;
283        font-weight: 500;
284        line-height: 1.35;
285        color: #333;
286        border-bottom: 0;
287        border-radius: 6px;
288    }
289    .nav-mega-col ul li a:hover { background: #fff5ec; color: #E8590C; }
290}
291
292/* ===== HERO BASE ===== */
293/* Embedded homepage left panel inside landing-page hero grid. */
294.hero-content--left-hero {
295    min-width: 0;
296    position: relative;
297    z-index: 2;
298    overflow: visible;
299}
300.hero-content--left-hero .hot-left-hero--embed {
301    max-width: 100%;
302}
303.hero-inner .hero-content--left-hero {
304    max-width: 640px;
305    margin: 0 auto;
306    text-align: left;
307}
308.hero--grid-dark .hero-content--left-hero .hot-left-hero--embed,
309.hero--certified-dark .hero-content--left-hero .hot-left-hero--embed {
310    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08);
311}
312.hero--certified-dark .hero-grid { text-align: left; }
313.hero--certified-dark .hero-mini-compliance-label { color: rgba(255,255,255,0.45); }
314.hero--certified-dark .hero-mini-compliance-row img { opacity: 0.92; filter: none; }
315.hero--certified-dark .hero-mini-compliance-row img:hover { opacity: 1; filter: none; }
316
317/* Phase 11.8 (5/10 owner): hero padding tightened so the CTA stays
318   above the fold on common laptop viewports (1366×768, 1440×900).
319   Was 32/44 on the base, 64/72 on grid variants, 96/120 on product —
320   collapsed to a uniform tighter scale. The short-viewport media
321   query below trims further for cramped laptop heights. */
322.hero { padding: 20px 0 28px; position: relative; overflow: hidden; }
323.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
324.hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
325.hero-inner .subtext { margin-left: auto; margin-right: auto; max-width: 640px; font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
326/* Length-aware subtext sizing — applied by template based on char count.
327   Longer copy shrinks so the CTA always clears the fold. */
328.subtext--md { font-size: 17px !important; line-height: 1.55 !important; }
329.subtext--sm { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
330.subtext--xs { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
331.hero-inner h1 { font-size: clamp(1.7rem, 3.6vw, 2.25rem); margin-bottom: 8px; }
332.hero-inner .hero-icon { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 14px; }
333.hero-inner .hero-icon img { max-width: 100%; max-height: 100%; }
334.hero-inner .hero-badge { margin-bottom: 8px; }
335.hero-inner .hero-price-row { justify-content: center; margin-bottom: 12px; }
336.hero-inner .hero-price { font-size: 40px; }
337.hero-inner .hero-ctas { justify-content: center; }
338.hero-inner .hero-trust { justify-content: center; margin-top: 18px; }
339.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
340.hero-icon { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
341.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 60px; margin-bottom: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
342.hero-badge svg { flex-shrink: 0; }
343.hero h1 { font-size: clamp(1.85rem, 3.8vw, 2.45rem); font-weight: 800; line-height: 1.12; margin-bottom: 10px; letter-spacing: -0.02em; }
344.hero h1 span { font-style: normal; }
345.hero .subtext { font-size: 16px; margin-bottom: 14px; line-height: 1.5; max-width: 520px; }
346.hero-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
347.hero-price { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
348.hero-price-info { font-size: 15px; }
349.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
350/* !important needed: body.single-hot_course a { color: inherit } has higher
351   specificity (0,2,1) than .btn-primary (0,1,0), so inherit wins and button
352   text renders dark gray. Force white here. Same pattern for .btn-white. */
353/* Phase 11.6 (5/9 owner): CTAs picked up the home-demo treatment —
354   diagonal gradient that slides on hover, slightly bolder text, and
355   an arrow icon that nudges right on hover. Pill radius preserved
356   (it's the brand) but background is now a 200%-wide gradient so the
357   hover-slide reads as warm fire energy instead of a flat color flip. */
358/* Phase 11.7 (5/10 owner): "use the home-demo CTA design and use the
359   same." Ported directly from home-demo `.hlh-btn` — 12px rounded
360   rectangle (NOT the old pill), 14.5px 800 weight, tighter 13px 22px
361   padding, same 3-color warm gradient that slides on hover. The fire
362   halo (rules below) attaches to this same selector list so every
363   glowing CTA gets the matching home-demo treatment. */
364.btn-primary {
365    display: inline-flex;
366    align-items: center;
367    justify-content: center;
368    gap: 8px;
369    background-image: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
370    background-size: 200% 100%;
371    background-position: 0% 50%;
372    color: #fff !important;
373    font-size: 14.5px;
374    font-weight: 800;
375    letter-spacing: 0.01em;
376    padding: 13px 22px;
377    border-radius: 12px;
378    border: 0;
379    transition: background-position 0.35s ease, transform 0.15s ease;
380    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
381    text-decoration: none;
382}
383.btn-primary:hover {
384    background-position: 100% 50%;
385    transform: translateY(-1px);
386    color: #fff !important;
387}
388.btn-primary:active { transform: translateY(0); }
389.btn-primary svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
390.btn-primary:hover svg { transform: translateX(3px); }
391.btn-ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 14px 24px; border: 2px solid #ddd; border-radius: 12px; transition: all 0.2s; }
392.hero-trust { display: flex; align-items: center; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
393.hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
394/* Accent stripe for dark variants */
395.accent-stripe { height: 4px; }
396
397/* Hero visual elements */
398.hero-visual { position: relative; }
399.hero-card { border-radius: 20px; padding: 40px 32px; text-align: center; transform: rotate(-1.5deg); }
400.hero-card .card-icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
401.hero-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
402.hero-card p { font-size: 13px; font-weight: 600; }
403.hero-card .card-detail { margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
404.cert-mockup { background: #fff; border-radius: 16px; padding: 40px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #eee; text-align: center; position: relative; transform: rotate(2deg); }
405.cert-mockup::before { content: ''; position: absolute; inset: 6px; border: 2px solid #e8ddd5; border-radius: 12px; pointer-events: none; }
406.cert-seal { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #E8590C; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 16px; background: linear-gradient(135deg, #fff9f5, #fff); box-shadow: 0 4px 12px rgba(232,89,12,0.15), inset 0 0 0 2px rgba(232,89,12,0.08); }
407.cert-seal svg { color: #E8590C; }
408.cert-seal-text { font-size: 8px; text-transform: uppercase; letter-spacing: 1.5px; color: #E8590C; font-weight: 700; margin-top: 2px; }
409.cert-title { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #999; font-weight: 600; margin-bottom: 8px; }
410.cert-name { font-size: 22px; font-weight: 800; color: #111; margin-bottom: 4px; }
411.cert-course { font-size: 14px; color: #E8590C; font-weight: 600; margin-bottom: 16px; }
412.cert-details { font-size: 12px; color: #999; }
413.cert-float-badge { position: absolute; background: #fff; border-radius: 10px; padding: 7px 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #333; white-space: nowrap; }
414.cert-float-1 { top: 2%; left: -52px; transform: rotate(-2deg); z-index: 3; }
415.cert-float-2 { top: 38%; right: -56px; transform: rotate(2deg); z-index: 3; }
416.cert-float-3 { top: 74%; left: -44px; transform: rotate(-1deg); z-index: 3; }
417.cert-float-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
418.cert-float-icon.green { background: #e6f9ee; }
419.cert-float-icon.blue { background: #e8f0fe; }
420.cert-float-icon.orange { background: #fef2e8; }
421
422/* Mini compliance strip — lives under the hero video on grid variants */
423.hero-mini-compliance { margin: 20px auto 0; max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
424.hero-mini-compliance-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
425.hero--grid-light .hero-mini-compliance-label { color: rgba(0,0,0,0.42); }
426.hero--product .hero-mini-compliance-label { color: rgba(0,0,0,0.42); }
427.hero-mini-compliance-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; width: 100%; }
428/* Phase 11 (5/6 UAT): bumped size +30% and reduced transparency so
429   compliance/security badges read as confident trust signals — owner
430   said the prior 38px @ 0.78 opacity was easy to miss in the hero. */
431.hero-mini-compliance-row img {
432    height: 50px !important;
433    width: auto !important;
434    max-width: 114px !important;
435    object-fit: contain;
436    opacity: 0.95;
437    filter: none;
438    transition: opacity 0.25s;
439}
440.hero-mini-compliance-row img:hover { opacity: 1; }
441.hero--grid-light .hero-mini-compliance-row img,
442.hero--grid-dark .hero-mini-compliance-row img,
443.hero--product .hero-mini-compliance-row img { opacity: 0.92; filter: none; }
444.hero--grid-light .hero-mini-compliance-row img:hover,
445.hero--grid-dark .hero-mini-compliance-row img:hover,
446.hero--product .hero-mini-compliance-row img:hover { opacity: 1; filter: none; }
447@media (max-width: 900px) {
448    .hero-mini-compliance-row { gap: 18px; }
449    .hero-mini-compliance-row img { height: 40px !important; max-width: 92px !important; }
450}
451@media (max-width: 560px) {
452    .hero-mini-compliance-row { gap: 14px; }
453    .hero-mini-compliance-row img { height: 34px !important; max-width: 78px !important; }
454}
455
456/* ===== NEW DETERMINISTIC HERO VARIANTS (v1.1.0) =====
457   Three variants selected per-slug (not random):
458   - certified-dark: dark centered hero, accreditation badge on top (ANSI PNG or category SVG)
459   - grid-light:     light warm grid, video + pills on right
460   - grid-dark:      dark grid, video + pills on right
461*/
462
463/* — Certified Dark (food manager, florida/texas/national food handler) — */
464.hero--certified-dark { background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 40%, #111 100%); text-align: center; }
465.hero--certified-dark::before { background: radial-gradient(ellipse at 50% 20%, rgba(232,89,12,0.14), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(232,89,12,0.07), transparent 50%); }
466.hero--certified-dark .accent-stripe { background: linear-gradient(90deg, #E8590C, rgba(232,89,12,0.5), #E8590C); }
467.hero--certified-dark .hero-icon { width: 120px; height: 120px; border-radius: 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 16px; color: #fff; }
468.hero--certified-dark .hero-icon--png { background: #fff; padding: 10px; }
469.hero--certified-dark .hero-icon img { width: 100%; height: 100%; object-fit: contain; }
470.hero--certified-dark .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(232,89,12,0.3); }
471.hero--certified-dark h1 { color: #fff; }
472.hero--certified-dark h1 span { color: #E8590C; }
473.hero--certified-dark .subtext { color: rgba(255,255,255,0.7); }
474.hero--certified-dark .hero-price { color: #fff; }
475.hero--certified-dark .hero-price-info { color: rgba(255,255,255,0.5); }
476.hero--certified-dark .btn-ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
477.hero--certified-dark .btn-ghost:hover { border-color: #E8590C; color: #E8590C; }
478.hero--certified-dark .hero-trust-item { color: rgba(255,255,255,0.5); }
479
480/* — Grid Light (most courses) — */
481.hero--grid-light { padding: 28px 0 36px; background: linear-gradient(160deg, #fafafa 0%, #f4f0ed 40%, #fff7f0 100%); }
482.hero--grid-light::before { background: radial-gradient(ellipse at 78% 28%, rgba(232,89,12,0.08), transparent 60%); }
483.hero--grid-light .hero-badge { background: #E8590C; color: #fff; }
484.hero--grid-light h1 { color: #111; }
485.hero--grid-light h1 span { color: #E8590C; }
486.hero--grid-light .subtext { color: #555; }
487.hero--grid-light .hero-price { color: #E8590C; }
488.hero--grid-light .hero-price-info { color: #888; }
489.hero--grid-light .btn-ghost { color: #555; border-color: #ddd; }
490.hero--grid-light .btn-ghost:hover { border-color: #E8590C; color: #E8590C; }
491.hero--grid-light .hero-trust-item { color: #777; }
492
493/* — Grid Dark (alcohol, security, serious compliance) — */
494.hero--grid-dark { padding: 28px 0 36px; background: linear-gradient(160deg, #111 0%, #1a1a1a 50%, #0f0f0f 100%); }
495.hero--grid-dark::before { background: radial-gradient(ellipse at 25% 40%, rgba(204,34,0,0.12), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(232,89,12,0.08), transparent 50%); }
496.hero--grid-dark .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(232,89,12,0.35); }
497.hero--grid-dark h1 { color: #fff; }
498.hero--grid-dark h1 span { color: #E8590C; }
499.hero--grid-dark .subtext { color: rgba(255,255,255,0.7); }
500.hero--grid-dark .hero-price { color: #fff; }
501.hero--grid-dark .hero-price-info { color: rgba(255,255,255,0.5); }
502.hero--grid-dark .btn-ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
503.hero--grid-dark .btn-ghost:hover { border-color: #E8590C; color: #E8590C; }
504.hero--grid-dark .hero-trust-item { color: rgba(255,255,255,0.5); }
505
506/* — Shared grid hero video treatment — */
507.hero-video-wrap { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.08); background: #111; aspect-ratio: 16 / 9; width: 100%; max-width: 680px; margin: 0 auto; }
508.hero-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #111; }
509.hero-video--vimeo { position: absolute; inset: 0; border: 0; pointer-events: none; object-fit: cover; }
510.hero--grid-dark .hero-video-wrap { box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
511
512
513/* ===== HERO VARIANT 1: Light warm + grid + cert mockup (original Florida Food Handler style) ===== */
514.hero--v1 { background: linear-gradient(160deg, #fafafa 0%, #f4f0ed 40%, #faf7f5 100%); }
515.hero--v1::before { background: radial-gradient(ellipse at 70% 30%, rgba(232,89,12,0.06), transparent 60%); }
516.hero--v1 .hero-badge { background: #E8590C; color: #fff; }
517.hero--v1 h1 { color: #111; }
518.hero--v1 h1 span { color: #E8590C; }
519.hero--v1 .subtext { color: #555; }
520.hero--v1 .hero-price { color: #E8590C; }
521.hero--v1 .hero-price-info { color: #888; }
522.hero--v1 .btn-ghost { color: #555; border-color: #ddd; }
523.hero--v1 .btn-ghost:hover { border-color: #E8590C; color: #E8590C; }
524.hero--v1 .hero-trust-item { color: #777; }
525
526/* ===== HERO VARIANT 2: Dark charcoal + centered + HOT orange accent ===== */
527.hero--v2 { background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 40%, #111 100%); text-align: center; }
528.hero--v2::before { background: radial-gradient(ellipse at 70% 20%, rgba(232,89,12,0.12), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(232,89,12,0.08), transparent 50%); }
529.hero--v2 .accent-stripe { background: linear-gradient(90deg, #E8590C, rgba(232,89,12,0.5), #E8590C); }
530.hero--v2 .hero-icon { background: rgba(255,255,255,0.08); }
531.hero--v2 .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(232,89,12,0.3); }
532.hero--v2 h1 { color: #fff; }
533.hero--v2 h1 span { color: #E8590C; }
534.hero--v2 .subtext { color: rgba(255,255,255,0.65); }
535.hero--v2 .hero-price { color: #fff; }
536.hero--v2 .hero-price-info { color: rgba(255,255,255,0.45); }
537.hero--v2 .hero-ctas { justify-content: center; }
538.hero--v2 .hero-price-row { justify-content: center; }
539.hero--v2 .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }
540.hero--v2 .btn-ghost:hover { border-color: #E8590C; color: #E8590C; }
541.hero--v2 .hero-trust { justify-content: center; }
542.hero--v2 .hero-trust-item { color: rgba(255,255,255,0.45); }
543
544/* ===== HERO VARIANT 3: Light orange + grid + card visual (Customer Service style) ===== */
545.hero--v3 { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 25%, #fff 60%); }
546.hero--v3::before { background: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(249,115,22,0.04) 14px, rgba(249,115,22,0.04) 15px); }
547.hero--v3 .hero-badge { background: #f97316; color: #fff; }
548.hero--v3 h1 { color: #111; }
549.hero--v3 h1 span { color: #f97316; }
550.hero--v3 .subtext { color: #555; }
551.hero--v3 .hero-price { color: #f97316; }
552.hero--v3 .hero-price-info { color: #777; }
553.hero--v3 .hero-card { background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.08); border: 2px solid rgba(249,115,22,0.27); border-top: 4px solid #f97316; }
554.hero--v3 .hero-card .card-icon { background: linear-gradient(135deg, #f97316, rgba(249,115,22,0.8)); box-shadow: 0 8px 24px rgba(249,115,22,0.2); }
555.hero--v3 .hero-card h4 { color: #111; }
556.hero--v3 .hero-card p { color: #f97316; }
557.hero--v3 .hero-card .card-detail { color: #999; }
558.hero--v3 .btn-ghost { color: #555; border-color: #ddd; }
559.hero--v3 .btn-ghost:hover { border-color: #f97316; color: #f97316; }
560.hero--v3 .hero-trust-item { color: #777; }
561
562/* ===== HERO VARIANT 4: Dark crimson + centered ===== */
563.hero--v4 { background: linear-gradient(170deg, #1a0000 0%, #2d0a0a 40%, #1a1a1a 100%); text-align: center; }
564.hero--v4::before { background: radial-gradient(ellipse at 60% 30%, rgba(204,34,0,0.15), transparent 50%); }
565.hero--v4 .accent-stripe { background: linear-gradient(90deg, #CC2200, rgba(204,34,0,0.5), #CC2200); }
566.hero--v4 .hero-icon { background: rgba(255,255,255,0.08); }
567.hero--v4 .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(204,34,0,0.4); }
568.hero--v4 h1 { color: #fff; }
569.hero--v4 h1 span { color: #ef4444; }
570.hero--v4 .subtext { color: rgba(255,255,255,0.65); }
571.hero--v4 .hero-price { color: #fff; }
572.hero--v4 .hero-price-info { color: rgba(255,255,255,0.45); }
573.hero--v4 .hero-ctas { justify-content: center; }
574.hero--v4 .hero-price-row { justify-content: center; }
575.hero--v4 .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }
576.hero--v4 .btn-ghost:hover { border-color: #ef4444; color: #ef4444; }
577.hero--v4 .hero-trust { justify-content: center; }
578.hero--v4 .hero-trust-item { color: rgba(255,255,255,0.45); }
579
580/* ===== HERO VARIANT 5: Light copper/warm + centered ===== */
581.hero--v5 { background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 15%, #fff 40%); text-align: center; }
582.hero--v5::before { background: radial-gradient(ellipse at 50% 20%, rgba(220,38,38,0.06), transparent 60%); }
583.hero--v5 .hero-icon { background: rgba(220,38,38,0.07); border-radius: 50%; }
584.hero--v5 .hero-badge { background: #dc2626; color: #fff; }
585.hero--v5 h1 { color: #111; }
586.hero--v5 h1 span { color: #dc2626; }
587.hero--v5 .subtext { color: #555; }
588.hero--v5 .hero-price { color: #dc2626; }
589.hero--v5 .hero-price-info { color: #888; }
590.hero--v5 .hero-ctas { justify-content: center; }
591.hero--v5 .hero-price-row { justify-content: center; }
592.hero--v5 .btn-primary { background: #dc2626; color: #fff !important; box-shadow: 0 6px 24px rgba(220,38,38,0.3); }
593.hero--v5 .btn-primary:hover { background: #b91c1c; color: #fff !important; box-shadow: 0 10px 32px rgba(220,38,38,0.35); }
594.hero--v5 .btn-ghost { color: #555; border-color: #ddd; }
595.hero--v5 .btn-ghost:hover { border-color: #dc2626; color: #dc2626; }
596.hero--v5 .hero-trust { justify-content: center; }
597.hero--v5 .hero-trust-item { color: #777; }
598
599/* ===== HERO VARIANT 6: Dark slate + grid + card + HOT red accent ===== */
600.hero--v6 { background: linear-gradient(160deg, #111 0%, #1a1a1a 50%, #0f0f0f 100%); }
601.hero--v6::before { background: radial-gradient(ellipse at 30% 40%, rgba(204,34,0,0.1), transparent 50%); }
602.hero--v6 .hero-badge { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(204,34,0,0.35); }
603.hero--v6 h1 { color: #fff; }
604.hero--v6 h1 span { color: #f97316; }
605.hero--v6 .subtext { color: rgba(255,255,255,0.6); }
606.hero--v6 .hero-price { color: #fff; }
607.hero--v6 .hero-price-info { color: rgba(255,255,255,0.4); }
608.hero--v6 .hero-card { background: rgba(255,255,255,0.05); box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-left: 4px solid #CC2200; }
609.hero--v6 .hero-card .card-icon { background: linear-gradient(135deg, #E8590C, #CC2200); box-shadow: 0 8px 24px rgba(232,89,12,0.25); }
610.hero--v6 .hero-card h4 { color: #fff; }
611.hero--v6 .hero-card p { color: #f97316; }
612.hero--v6 .hero-card .card-detail { color: rgba(255,255,255,0.4); }
613.hero--v6 .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }
614.hero--v6 .btn-ghost:hover { border-color: #f97316; color: #f97316; }
615.hero--v6 .hero-trust-item { color: rgba(255,255,255,0.45); }
616
617/* ===== HERO — PRODUCT VARIANT (hot_product CPT) ===== */
618.hero--product { background: linear-gradient(160deg, #fff 0%, #fff8f3 45%, #fefefe 100%); position: relative; overflow: hidden; padding: 32px 0 44px; }
619.hero--product::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 80% 20%, rgba(232,89,12,0.10), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(232,89,12,0.06), transparent 50%); pointer-events: none; }
620.hero--product .hero-badge { background: #E8590C; color: #fff; }
621.hero--product h1 { color: #111; }
622.hero--product h1 span { color: #E8590C; }
623.hero--product .subtext { color: #555; }
624.hero--product .hero-price { color: #E8590C; }
625.hero--product .hero-price-info { color: #888; }
626.hero--product .btn-ghost { color: #555; border-color: #ddd; }
627.hero--product .btn-ghost:hover { border-color: #E8590C; color: #E8590C; }
628.hero--product .hero-trust-item { color: #777; }
629
630/* Quick Start dropdown extends below the embed card — do not clip it inside
631   the hero, and stack above the logos / trust sections that follow. */
632.hero:has(.hot-left-hero) {
633    overflow: visible;
634    z-index: 5;
635}
636.hero:has(.hot-left-hero) .hero-grid,
637.hero:has(.hot-left-hero) .hero-inner {
638    overflow: visible;
639}
640body.hlh-qs-dropdown-open .hero:has(.hot-left-hero) {
641    z-index: 999997;
642}
643body.hlh-qs-dropdown-open .logos-bar,
644body.hlh-qs-dropdown-open .trust-row {
645    z-index: 0;
646    position: relative;
647}
648
649/* Dashboard Mockup (product hero visual) */
650.dashboard-mockup { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #eee; overflow: hidden; transform: rotate(-1.2deg); position: relative; z-index: 2; }
651.dashboard-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #f8f7f5; border-bottom: 1px solid #efeeec; }
652.dashboard-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
653.dashboard-dot.red { background: #ff6157; }
654.dashboard-dot.yellow { background: #ffc130; }
655.dashboard-dot.green { background: #28cd41; }
656.dashboard-title { margin-left: 14px; font-size: 11px; color: #999; font-weight: 600; letter-spacing: 0.3px; }
657.dashboard-body { padding: 28px 24px 24px; }
658.dashboard-org { margin-bottom: 22px; }
659.dashboard-org-name { font-size: 17px; font-weight: 800; color: #111; margin-bottom: 3px; letter-spacing: -0.01em; }
660.dashboard-org-sub { font-size: 12px; color: #888; font-weight: 500; }
661.dashboard-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 24px; padding: 18px 14px; background: linear-gradient(135deg, #fff6ef 0%, #fdede0 100%); border-radius: 12px; }
662.dash-stat { text-align: center; }
663.dash-stat-num { font-size: 24px; font-weight: 800; color: #E8590C; line-height: 1; margin-bottom: 5px; letter-spacing: -0.02em; }
664.dash-stat-pct { font-size: 14px; font-weight: 700; }
665.dash-stat-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
666.dashboard-courses { display: flex; flex-direction: column; gap: 13px; }
667.dash-course { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; gap: 12px; align-items: center; }
668.dash-course-name { color: #333; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
669.dash-course-bar { height: 7px; background: #f0efec; border-radius: 10px; overflow: hidden; }
670.dash-course-bar > div { height: 100%; background: linear-gradient(90deg, #E8590C, #f97316); border-radius: 10px; }
671.dash-course-pct { font-size: 11px; color: #E8590C; font-weight: 700; text-align: right; }
672
673@media (max-width: 900px) {
674    .hero--product { padding: 24px 0 32px; }
675    .dashboard-mockup { transform: none; max-width: 480px; margin: 0 auto; }
676}
677
678@media (max-width: 900px) {
679    .hero { padding: 48px 0 40px; }
680    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
681    .hero-visual { max-width: 380px; margin: 0 auto; }
682    .cert-mockup { transform: none; }
683    .hero-card { transform: none; }
684    .hero-video-wrap { max-width: 400px; aspect-ratio: 16 / 9; }
685    .cert-float-1 { left: -36px; top: 4%; }
686    .cert-float-2 { right: -40px; top: 40%; }
687    .cert-float-3 { left: -30px; top: 74%; bottom: auto; }
688    .hero--certified-dark .hero-icon { width: 88px; height: 88px; }
689}
690@media (max-width: 560px) {
691    .cert-float-1 { left: -14px; top: 4%; font-size: 10px; padding: 5px 10px; }
692    .cert-float-2 { right: -16px; top: 42%; font-size: 10px; padding: 5px 10px; }
693    .cert-float-3 { left: -10px; top: 76%; bottom: auto; font-size: 10px; padding: 5px 10px; }
694    .cert-float-icon { width: 18px; height: 18px; }
695}
696
697/* ===== DASHBOARD SHOWCASE (product page, relocated from hero) ===== */
698.dashboard-showcase { background: linear-gradient(180deg, #fff 0%, #fff8f2 100%); padding: 96px 0; border-top: 1px solid #f2ece4; border-bottom: 1px solid #f2ece4; }
699.dashboard-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
700.dashboard-showcase-copy .section-title { margin-bottom: 18px; }
701.dashboard-showcase-lead { font-size: 18px; color: #555; line-height: 1.7; margin-bottom: 28px; }
702.dashboard-showcase-features { list-style: none; padding: 0; margin: 0; }
703.dashboard-showcase-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: #333; }
704.dashboard-showcase-features li .pricing-check { margin-top: 4px; }
705.dashboard-showcase-visual .dashboard-mockup { transform: rotate(1deg); max-width: 480px; margin: 0 auto; }
706@media (max-width: 900px) {
707    .dashboard-showcase { padding: 64px 0; }
708    .dashboard-showcase-grid { grid-template-columns: 1fr; gap: 40px; }
709    .dashboard-showcase-copy .section-title { text-align: center !important; }
710    .dashboard-showcase-lead { text-align: center; }
711    .dashboard-showcase-features li { justify-content: flex-start; }
712    .dashboard-showcase-visual .dashboard-mockup { transform: none; }
713}
714
715/* ===== COMPLIANCE CERTIFICATIONS CAROUSEL (full-width, every landing page) ===== */
716.compliance-bar { background: linear-gradient(180deg, #fafafa 0%, #fff 100%); padding: 72px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
717.compliance-eyebrow { display: block; text-align: center; font-size: 12px; font-weight: 700; color: #E8590C; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; }
718.compliance-label { text-align: center; font-size: 30px; font-weight: 800; color: #111; letter-spacing: -0.02em; margin: 0 0 12px; }
719.compliance-sublabel { text-align: center; font-size: 15px; color: #666; margin: 0 auto 40px; max-width: 560px; line-height: 1.55; }
720.compliance-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; max-width: 1160px; margin: 0 auto; padding: 0 24px; align-items: center; }
721.compliance-tile { display: flex; align-items: center; justify-content: center; padding: 28px 18px; background: #fff; border: 1px solid #eee; border-radius: 16px; min-height: 180px; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
722.compliance-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); border-color: #e0e0e0; }
723.compliance-tile img {
724    height: 130px !important;
725    width: auto !important;
726    max-width: 100% !important;
727    object-fit: contain;
728    opacity: 1;
729}
730@media (max-width: 900px) {
731    .compliance-bar { padding: 56px 0; }
732    .compliance-label { font-size: 26px; }
733    .compliance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
734    .compliance-tile { min-height: 140px; padding: 20px 12px; }
735    .compliance-tile img { height: 92px !important; }
736}
737@media (max-width: 560px) {
738    .compliance-bar { padding: 44px 0; }
739    .compliance-label { font-size: 22px; }
740    .compliance-sublabel { font-size: 14px; margin-bottom: 28px; }
741    .compliance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px; }
742    .compliance-tile { min-height: 120px; padding: 16px 10px; border-radius: 12px; }
743    .compliance-tile img { height: 76px !important; }
744}
745
746/* ===== ANAB/ANSI ACCREDITATION BAR (food-safety courses only) ===== */
747.anab-bar { background: #fff; padding: 48px 0; border-bottom: 1px solid #eee; }
748.anab-inner { display: flex; align-items: center; justify-content: center; gap: 36px; max-width: 820px; margin: 0 auto; padding: 0 24px; }
749.anab-logo { flex-shrink: 0; width: 150px; height: auto; max-width: 150px; }
750.anab-copy { flex: 1; }
751.anab-eyebrow { display: inline-block; background: #fff4ed; color: #E8590C; font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 60px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
752.anab-text { font-size: 15px; line-height: 1.65; color: #444; margin: 0; }
753.anab-text strong { color: #111; font-weight: 700; }
754.anab-text--link { margin-top: 10px; }
755.anab-text--link a { color: #E8590C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
756.anab-text--link a:hover { color: #CC2200; }
757.fh-disclosures-notice { background: #fff9f5; border: 1px solid #f0d8c8; border-left: 4px solid #E8590C; padding: 20px 24px; margin: 0 auto 32px; max-width: 820px; border-radius: 12px; }
758.fh-disclosures-notice p { margin: 0; font-size: 14px; line-height: 1.65; color: #444; }
759.fh-disclosures-notice a { color: #E8590C; font-weight: 700; }
760.fh-disclosures-notice a:hover { color: #CC2200; }
761@media (max-width: 640px) { .anab-inner { flex-direction: column; gap: 20px; text-align: center; } .anab-logo { width: 120px; } .fh-disclosures-notice { margin-left: 16px; margin-right: 16px; } }
762
763/* ===== LOGOS BAR ===== */
764/* Phase 11.1 (5/8 owner): logos bar gets more breathing room above + below
765   so the trust-row doesn't kiss it. */
766.logos-bar { background: #fff; padding: 72px 0 64px; border-bottom: 1px solid #eee; overflow: hidden; }
767.logos-label { text-align: center; font-size: 13px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 32px; }
768.logos-viewport { position: relative; overflow: hidden; width: 100%; max-width: 1080px; margin: 0 auto; mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
769.logos-track { display: flex !important; align-items: center; gap: 80px; width: max-content; animation: logos-scroll 28s linear infinite; }
770.logos-track img { height: 70px !important; width: auto !important; max-width: none !important; object-fit: contain; flex-shrink: 0; opacity: 0.95; }
771@keyframes logos-scroll {
772    from { transform: translateX(0); }
773    to { transform: translateX(calc(-50% - 40px)); }
774}
775@media (max-width: 900px) {
776    .logos-track { gap: 56px; animation-duration: 22s; }
777    .logos-track img { height: 52px !important; }
778}
779@media (max-width: 560px) {
780    .logos-track { gap: 40px; animation-duration: 18s; }
781    .logos-track img { height: 40px !important; }
782}
783
784/* ===== SECTIONS ===== */
785section { padding: 88px 0; }
786/* Embedded left-hero tab panels are <section> — exclude from content spacing. */
787section.hlh-panel { padding: 0; }
788@media (max-width: 768px) {
789    section { padding: 64px 0; }
790    section.hlh-panel { padding: 0; }
791    .section-subtitle { margin-bottom: 40px; }
792}
793
794/* Phase 11.1 (5/8 owner): more space ABOVE the eyebrow so it doesn't kiss
795   the preceding trust-row / logos-bar. */
796.section-label { display: inline-block; background: #fff4ed; color: #E8590C; font-size: 11px; font-weight: 700; padding: 6px 16px; border-radius: 60px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; margin-bottom: 16px; }
797.hot-gutenberg-content { padding-top: 48px; }
798.section-title { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; color: #111; text-align: center; margin-bottom: 14px; letter-spacing: -0.01em; }
799.section-subtitle { font-size: 17px; color: #777; text-align: center; max-width: 560px; margin: 0 auto 56px; line-height: 1.7; }
800
801/* ===== WHAT YOU'LL LEARN ===== */
802.learn-section { background: #fff; }
803.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
804.learn-item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid #ebe8e5; border-radius: 14px; transition: all 0.3s; }
805.learn-item:hover { border-color: #E8590C; box-shadow: 0 8px 24px rgba(232,89,12,0.08); transform: translateY(-3px); }
806.learn-icon { flex-shrink: 0; width: 48px; height: 48px; background: linear-gradient(135deg, #fff4ed, #ffe8d6); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
807.learn-item h3 { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 4px; }
808.learn-item p { font-size: 14px; color: #777; line-height: 1.55; }
809@media (max-width: 640px) { .learn-grid { grid-template-columns: 1fr; } }
810
811/* ===== WAVE DIVIDERS ===== */
812.wave-divider { height: 60px; width: 100%; position: relative; overflow: hidden; }
813.wave-divider.gray-to-white { background: #f7f7f7; }
814.wave-divider.gray-to-white::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
815.wave-divider.white-to-gray { background: #fff; }
816.wave-divider.white-to-gray::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #f7f7f7; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
817
818/* ===== HOW IT WORKS ===== */
819.steps-section { background: #f7f7f7; }
820.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; position: relative; }
821.steps-row::before { content: ''; position: absolute; top: 52px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, #ddd 0, #ddd 8px, transparent 8px, transparent 16px); z-index: 0; }
822.step { text-align: center; padding: 40px 24px; background: #fff; border-radius: 20px; border: 1px solid #eee; transition: all 0.3s; position: relative; z-index: 1; }
823.step:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.07); transform: translateY(-4px); }
824.step-number { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: linear-gradient(135deg, #E8590C, #CC2200); color: #fff; font-size: 22px; font-weight: 800; border-radius: 50%; margin-bottom: 20px; box-shadow: 0 6px 16px rgba(232,89,12,0.25); }
825.step h3 { font-size: 19px; font-weight: 700; color: #111; margin-bottom: 10px; }
826.step p { font-size: 14px; color: #777; line-height: 1.65; }
827@media (max-width: 640px) { .steps-row { grid-template-columns: 1fr; } .steps-row::before { display: none; } }
828
829/* ===== PRICING CARD ===== */
830.pricing-section { background: #fff; }
831.pricing-card { max-width: 520px; margin: 0 auto; background: #fff; border: 2px solid #E8590C; border-radius: 20px; padding: 0; overflow: hidden; box-shadow: 0 12px 40px rgba(232,89,12,0.1); position: relative; }
832.pricing-header { background: linear-gradient(135deg, #E8590C, #CC2200); padding: 32px; text-align: center; color: #fff; }
833.pricing-header h3 { font-size: 18px; font-weight: 600; opacity: 0.9; margin-bottom: 8px; }
834.pricing-amount { font-size: 56px; font-weight: 800; line-height: 1; }
835.pricing-amount sup { font-size: 28px; vertical-align: super; }
836.pricing-period { font-size: 15px; opacity: 0.8; margin-top: 4px; }
837.pricing-body { padding: 32px; }
838.pricing-features { margin-bottom: 28px; }
839.pricing-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: #444; border-bottom: 1px solid #f5f3f1; }
840.pricing-features li:last-child { border-bottom: none; }
841.pricing-check { flex-shrink: 0; width: 22px; height: 22px; background: #28a745; border-radius: 50%; display: flex; align-items: center; justify-content: center;
841 margin-top: 1px; }
842.pricing-cta { text-align: center; }
843.pricing-cta .btn-primary { width: 100%; justify-content: center; padding: 18px; font-size: 18px; }
844.pricing-guarantee { text-align: center; margin-top: 16px; font-size: 13px; color: #999; display: flex; align-items: center; justify-content: center; gap: 6px; }
845.pricing-popular { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.2); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 60px; text-transform: uppercase; letter-spacing: 0.05em; }
846
847/* ===== WHY HOT ===== */
848.why-section { background: #f7f7f7; }
849.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
850.why-item { text-align: center; padding: 40px 24px; background: #fff; border-radius: 20px; border: 1px solid #eee; transition: all 0.3s; }
851.why-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-3px); }
852.why-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #E8590C, #CC2200); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 6px 16px rgba(232,89,12,0.2); }
853.why-item h3 { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 8px; }
854.why-item p { font-size: 14px; color: #777; line-height: 1.65; }
855@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
856
857/* ===== TESTIMONIALS ===== */
858.testimonials-section { background: #fff; }
859.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
860.testimonial-card { background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 32px; transition: all 0.3s; position: relative; }
861.testimonial-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
862.testimonial-card::before { content: '\201C'; font-size: 5rem; color: rgba(232,89,12,0.08); position: absolute; top: 8px; left: 24px; line-height: 1; font-family: Georgia, serif; }
863.testimonial-stars { color: #f59e0b; font-size: 16px; margin-bottom: 16px; letter-spacing: 2px; }
864.testimonial-text { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 24px; position: relative; z-index: 1; }
865.testimonial-author-row { display: flex; align-items: center; gap: 12px; }
866.testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #E8590C, #CC2200); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
867.testimonial-name { font-size: 14px; font-weight: 700; color: #111; }
868.testimonial-role { font-size: 13px; color: #999; }
869@media (max-width: 640px) { .testimonials-grid { grid-template-columns: 1fr; } }
870
871/* ===== FAQ ===== */
872.faq-section { background: #f7f7f7; }
873.faq-list { max-width: 720px; margin: 0 auto; }
874.faq-item { border: 1px solid #e5e2df; border-radius: 14px; margin-bottom: 12px; background: #fff; overflow: hidden; transition: all 0.2s; }
875.faq-item:hover { border-color: #ccc; }
876.faq-item.open { border-color: #E8590C; box-shadow: 0 4px 16px rgba(232,89,12,0.06); }
877.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: 16px; font-weight: 600; color: #222; background: none; border: none; width: 100%; text-align: left; font-family: inherit; transition: color 0.2s; }
878.faq-question:hover { color: #E8590C; }
879.faq-chevron { transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; width: 28px; height: 28px; background: #f5f3f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
880.faq-item.open .faq-chevron { transform: rotate(180deg); background: #fff4ed; }
881.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
882.faq-answer-inner { padding: 0 24px 20px; font-size: 15px; color: #666; line-height: 1.7; }
883
884/* ===== FINAL CTA ===== */
885.final-cta { background: linear-gradient(135deg, #E8590C 0%, #CC2200 50%, #a01b00 100%); padding: 88px 0; text-align: center; color: #fff; position: relative; overflow: hidden; }
886.final-cta::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); top: -200px; right: -150px; }
887.final-cta::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%); bottom: -150px; left: -100px; }
888.final-cta .container { position: relative; z-index: 1; }
889.final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 24px; }
890.final-cta p { font-size: 18px; opacity: 0.9; margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.7; }
891.btn-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #E8590C !important; font-size: 18px; font-weight: 700; padding: 18px 48px; border-radius: 60px; transition: all 0.25s; box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
892.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.2); color: #E8590C !important; }
893.final-secondary { display: block; margin-top: 16px; font-size: 15px; opacity: 0.8; }
894.final-secondary a { color: #fff; text-decoration: underline; }
895
896/* ===== FOOTER ===== */
897.site-footer { background: #fff; color: #444; padding: 64px 0 0; border-top: 1px solid #eee; }
898.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
899.footer-brand p { font-size: 14px; line-height: 1.7; color: #777; margin-top: 16px; }
900.footer-logo { height: 36px; width: auto; }
901.footer-col h4 { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.08em; }
902.footer-col ul li { margin-bottom: 12px; }
903.footer-col a { font-size: 14px; color: #888; transition: color 0.2s; }
904.footer-col a:hover { color: #E8590C; }
905.footer-bottom { background: #111; padding: 20px 0; }
906.footer-bottom p { font-size: 13px; color: #999; }
907.footer-bottom-links { display: flex; gap: 24px; }
908.footer-bottom-links a { font-size: 13px; color: #999; transition: color 0.2s; }
909.footer-bottom-links a:hover { color: #ccc; }
910@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
911@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom .container { flex-direction: column; text-align: center; } }
912
913/* ===== HIDE MAIN SITE CHAT WIDGET ON LANDING PAGES =====
914   The LandPress theme injects .chat-btn (floating button), .chat-comment,
915   #chat, plus various .chatbox-* elements. Hide them all on every
916   hot_course + hot_product page. */
917body.single-hot_course .chatbox,
918body.single-hot_course .chatbox-first,
919body.single-hot_course .chatbox-form,
920body.single-hot_course .offline-chat,
921body.single-hot_course .chatcomment-box,
922body.single-hot_course .chat-comment,
923body.single-hot_course .chat-btn,
924body.single-hot_course #chat,
925body.single-hot_product .chatbox,
926body.single-hot_product .chatbox-first,
927body.single-hot_product .chatbox-form,
928body.single-hot_product .offline-chat,
929body.single-hot_product .chatcomment-box,
930body.single-hot_product .chat-comment,
931body.single-hot_product .chat-btn,
932body.single-hot_product #chat,
933body.post-type-archive-hot_course .chatbox,
934body.post-type-archive-hot_course .chatbox-first,
935body.post-type-archive-hot_course .chatbox-form,
936body.post-type-archive-hot_course .offline-chat,
937body.post-type-archive-hot_course .chatcomment-box,
938body.post-type-archive-hot_course .chat-comment,
939body.post-type-archive-hot_course .chat-btn,
940body.post-type-archive-hot_course #chat,
941body.post-type-archive-hot_product .chatbox,
942body.post-type-archive-hot_product .chatbox-first,
943body.post-type-archive-hot_product .chatbox-form,
944body.post-type-archive-hot_product .offline-chat,
945body.post-type-archive-hot_product .chatcomment-box,
946body.post-type-archive-hot_product .chat-comment,
947body.post-type-archive-hot_product .chat-btn,
948body.post-type-archive-hot_product #chat { display: none !important; }
949
950/* ===== STICKY MOBILE CTA ===== */
951.mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 999999; }
952.mobile-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; }
953.mobile-sticky-price { font-size: 24px; font-weight: 800; color: #E8590C; }
954.mobile-sticky .btn-primary { padding: 14px 28px; font-size: 15px; flex-shrink: 0; }
955@media (max-width: 768px) { .mobile-sticky { display: block; } body.single-hot_course { padding-bottom: 140px; } }
956
957/* ─── Phase 3+4 (Track B): Trust badges + price prefix ──────────────── */
958
959/* Trust badges (hero) — owner-locked: Mobile Friendly · 100,000+ learners ·
960   Start in 60s · Instant certificate (conditional). Subtle pill pattern;
961   no fire-glow (Phase 7 reserves that treatment for primary CTAs only). */
962.hot-trust-badges {
963    list-style: none;
964    margin: 0.85rem 0 1.25rem;
965    padding: 0;
966    display: flex;
967    flex-wrap: wrap;
968    gap: 0.6rem;
969    align-items: center;
970}
971
972.hot-trust-badge {
973    display: inline-flex;
974    align-items: center;
975    gap: 0.4rem;
976    padding: 0.4rem 0.85rem;
977    font-size: 0.875rem;
978    font-weight: 500;
979    line-height: 1.2;
980    color: #2d3748;
981    background: rgba(255, 255, 255, 0.9);
982    border: 1px solid rgba(204, 34, 0, 0.18);
983    border-radius: 999px;
984    -webkit-backdrop-filter: blur(4px);
985    backdrop-filter: blur(4px);
986    white-space: nowrap;
987}
988
989/* Dark hero variants need lighter pill chrome so badges read on dark bg */
990.hero--certified-dark .hot-trust-badge,
991.hero--grid-dark .hot-trust-badge {
992    color: #f7fafc;
993    background: rgba(255, 255, 255, 0.08);
994    border-color: rgba(255, 255, 255, 0.18);
995}
996
997.hot-trust-icon {
998    font-size: 1rem;
999    line-height: 1;
1000    display: inline-block;
1001}
1002
1003/* Tablet — slightly tighter gap so 4 badges still fit on one line */
1004@media (max-width: 768px) {
1005    .hot-trust-badges {
1006        gap: 0.5rem;
1007        margin: 0.75rem 0 1rem;
1008    }
1009    .hot-trust-badge {
1010        font-size: 0.8125rem;
1011        padding: 0.35rem 0.75rem;
1012    }
1013}
1014
1015/* Mobile (≤600px) — wrap cleanly; no horizontal overflow at 320px */
1016@media (max-width: 600px) {
1017    .hot-trust-badges {
1018        gap: 0.4rem;
1019        justify-content: flex-start;
1020    }
1021    .hot-trust-badge {
1022        font-size: 0.78125rem;
1023        padding: 0.3rem 0.65rem;
1024        white-space: normal;
1025    }
1026    .hot-trust-icon {
1027        font-size: 0.9rem;
1028    }
1029}
1030
1031/* Narrow mobile (≤360px) — last guard for 320px viewports */
1032@media (max-width: 360px) {
1033    .hot-trust-badge {
1034        font-size: 0.75rem;
1035        padding: 0.28rem 0.6rem;
1036    }
1037}
1038
1039/* Phase 4 — "Starting at" price prefix.
1040   Used inline before the dollar amount in section titles so the prefix
1041   reads as a softer modifier rather than competing with the price color. */
1042.hot-price-prefix {
1043    font-weight: 600;
1044    color: #4a5568;
1045    margin-right: 0.25rem;
1046}
1047
1048/* ─── End of Phase 3+4 (Track B) additions ──────────────────────────── */
1049
1050/* ─── Phase 11.3 (5/8 owner): Bestseller, inline inside .top-bar ─────
1051   The standalone .hot-bestseller-strip <aside> is gone. The pieces below
1052   are the same span/CTA primitives the renderer always emitted, but they
1053   sit in the .top-bar-deal slot now, so they inherit the topbar's
1054   background, padding, and breakpoints rather than carrying their own.
1055   Legacy `.hot-bestseller-strip` selectors were removed; the renderer
1056   no longer emits that wrapper. */
1057
1058/* No-op shim so any stray `.hot-bestseller-strip` markup left in cached
1059   prod assets renders harmlessly until cache refresh. */
1060.hot-bestseller-strip { display: contents; }
1061
1062.hot-bestseller-flame {
1063    font-size: 0.98rem;
1064    line-height: 1;
1065}
1066.hot-bestseller-headline {
1067    font-weight: 700;
1068    color: #ffaa55;
1069    text-transform: uppercase;
1070    letter-spacing: 0.05em;
1071    font-size: 0.78rem;
1072    white-space: nowrap;
1073}
1074.hot-bestseller-course {
1075    font-weight: 600;
1076    color: #fff;
1077    white-space: nowrap;
1078}
1079.hot-bestseller-price {
1080    color: #ffaa55;
1081    font-weight: 700;
1082    white-space: nowrap;
1083}
1084/* Phase 11.7 (5/10 owner): bestseller pill restyled to match the
1085   home-demo CTA shape — 8px rounded rect (smaller radius for compact
1086   inline use), gradient, 800 weight. Sized down vs the main .btn-primary
1087   because it lives inside the top-bar slot and can't dominate the row. */
1088.hot-bestseller-cta {
1089    display: inline-block;
1090    padding: 5px 12px;
1091    margin-left: 4px;
1092    font-size: 0.78rem;
1093    font-weight: 800;
1094    line-height: 1.2;
1095    letter-spacing: 0.01em;
1096    text-decoration: none;
1097    white-space: nowrap;
1098    color: #fff;
1099    background-image: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
1100    background-size: 200% 100%;
1101    background-position: 0% 50%;
1102    border-radius: 8px;
1103    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
1104    transition: background-position 0.35s ease, transform 0.15s ease;
1105}
1106.hot-bestseller-cta:hover,
1107.hot-bestseller-cta:focus {
1108    background-position: 100% 50%;
1109    color: #fff;
1110    text-decoration: none;
1111    transform: translateY(-1px);
1112}
1113
1114@media (max-width: 768px) {
1115    .hot-bestseller-headline { font-size: 0.72rem; }
1116    .hot-bestseller-cta { padding: 3px 10px; font-size: 0.74rem; }
1117}
1118@media (max-width: 480px) {
1119    /* On tight viewports, shed the long course-name copy so the price +
1120       CTA stay readable. */
1121    .hot-bestseller-course { display: none; }
1122    .hot-bestseller-headline { font-size: 0.7rem; }
1123}
1124
1125/* ─── End of Phase 5 (Track C) additions ────────────────────────────── */
1126
1127/* ─── Phase 6 (Track D): Quickbuy shortcode ─────────────────────────── */
1128
1129/* Section frame */
1130.hot-quickbuy {
1131    padding: 3rem 1rem;
1132    background: linear-gradient(180deg, #ffffff 0%, #fff5f0 100%);
1133}
1134.hot-quickbuy-inner {
1135    max-width: 1200px;
1136    margin: 0 auto;
1137    text-align: center;
1138}
1139.hot-quickbuy-title {
1140    font-size: clamp(1.5rem, 4vw, 2.25rem);
1141    font-weight: 800;
1142    color: #1a1a1a;
1143    margin: 0 0 0.5rem;
1144    line-height: 1.15;
1145}
1146.hot-quickbuy-subtitle {
1147    color: #555;
1148    font-size: 1.05rem;
1149    line-height: 1.5;
1150    margin: 0 auto 2rem;
1151    max-width: 620px;
1152}
1153
1154/* Grid — mobile-first: 1 col @ 320px, 2 col @ 375px+, 3 col @ 768px+ */
1155.hot-quickbuy-grid {
1156    display: grid;
1157    grid-template-columns: 1fr;
1158    gap: 1rem;
1159}
1160@media (min-width: 375px) {
1161    .hot-quickbuy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
1162}
1163@media (min-width: 768px) {
1164    .hot-quickbuy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
1165}
1166
1167/* Tile */
1168.hot-quickbuy-tile {
1169    position: relative;
1170    background: #ffffff;
1171    border: 1px solid rgba(204, 34, 0, 0.12);
1172    border-radius: 14px;
1173    padding: 1.5rem 1.25rem 1.25rem;
1174    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
1175    display: flex;
1176    flex-direction: column;
1177    text-align: left;
1178    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
1179    min-height: 100%;
1180}
1181.hot-quickbuy-tile:hover {
1182    transform: translateY(-2px);
1183    box-shadow: 0 6px 20px rgba(204, 34, 0, 0.10);
1184    border-color: rgba(204, 34, 0, 0.28);
1185}
1186.hot-quickbuy-tile:focus-within {
1187    outline: 2px solid #cc2200;
1188    outline-offset: 2px;
1189}
1190
1191/* Badge */
1192.hot-quickbuy-tile-badge {
1193    position: absolute;
1194    top: -10px;
1195    right: 16px;
1196    background: linear-gradient(180deg, #ff6b1a, #cc2200);
1197    color: #ffffff;
1198    font-size: 0.7rem;
1199    font-weight: 700;
1200    padding: 0.25rem 0.65rem;
1201    border-radius: 4px;
1202    text-transform: uppercase;
1203    letter-spacing: 0.05em;
1204    box-shadow: 0 2px 6px rgba(204, 34, 0, 0.25);
1205}
1206
1207/* Body */
1208.hot-quickbuy-tile-body { flex: 1; }
1209.hot-quickbuy-tile-name {
1210    font-size: 1.15rem;
1211    font-weight: 700;
1212    line-height: 1.3;
1213    margin: 0 0 0.5rem;
1214    color: #1a1a1a;
1215}
1216.hot-quickbuy-tile-meta {
1217    display: flex;
1218    align-items: center;
1219    gap: 0.4rem;
1220    color: #555;
1221    font-size: 0.9rem;
1222    margin-bottom: 1rem;
1223}
1224.hot-quickbuy-tile-icon {
1225    font-size: 1rem;
1226    line-height: 1;
1227}
1228.hot-quickbuy-tile-price {
1229    font-size: 1.85rem;
1230    font-weight: 800;
1231    line-height: 1;
1232    color: #cc2200;
1233    margin: 0 0 1rem;
1234}
1235
1236/* CTA — keeps .btn-primary base styles (Phase 7 fire-glow target) */
1237.hot-quickbuy-tile-cta {
1238    display: inline-flex;
1239    align-items: center;
1240    justify-content: center;
1241    text-align: center;
1242    width: 100%;
1243    padding: 0.75rem 1rem;
1244    text-decoration: none;
1245    font-weight: 700;
1246    border-radius: 8px;
1247}
1248
1249/* ─── Phase 11.6 (5/9 owner) — multi-select Quick Start ──────────────
1250   Replaces the per-tile single-CTA layout with a selectable card list +
1251   persistent footer CTA. Owner saw the home-demo's quick-start flow,
1252   liked the concept, asked for the obvious UX win: don't make me close
1253   a dropdown then click a separate button. Cards are always visible,
1254   tap-anywhere toggles selection, footer count + total update live,
1255   the Start Training Now CTA stays in view at the bottom of the
1256   section. JS in includes/quickbuy-shortcode.php handles the click
1257   wiring and the single-vs-multi handoff (single → /go/?course=…
1258   single-course flow; multi → LMS pricing with comma-joined ?courses=). */
1259
1260.hot-quickbuy-header { text-align: center; margin-bottom: 1.6rem; }
1261.hot-quickbuy-list {
1262    list-style: none;
1263    margin: 0 auto 1.4rem;
1264    padding: 0;
1265    max-width: 760px;
1266    display: flex;
1267    flex-direction: column;
1268    gap: 0.55rem;
1269}
1270.hot-quickbuy-row { margin: 0; }
1271
1272.hot-quickbuy-card {
1273    display: flex;
1274    align-items: center;
1275    gap: 0.9rem;
1276    width: 100%;
1277    background: #ffffff;
1278    border: 1.5px solid #ececec;
1279    border-radius: 14px;
1280    padding: 0.95rem 1.1rem;
1281    text-align: left;
1282    cursor: pointer;
1283    font: inherit;
1284    color: inherit;
1285    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
1286}
1287.hot-quickbuy-card:hover {
1288    border-color: rgba(232, 89, 12, 0.35);
1289    box-shadow: 0 6px 18px rgba(232, 89, 12, 0.08);
1290    transform: translateY(-1px);
1291}
1292.hot-quickbuy-card:focus-visible {
1293    outline: 2px solid #E8590C;
1294    outline-offset: 2px;
1295}
1296.hot-quickbuy-card.is-selected {
1297    border-color: #E8590C;
1298    background: linear-gradient(180deg, #fff7f0 0%, #ffffff 100%);
1299    box-shadow: 0 4px 14px rgba(232, 89, 12, 0.15);
1300}
1301
1302.hot-quickbuy-check {
1303    flex-shrink: 0;
1304    width: 24px;
1305    height: 24px;
1306    border-radius: 7px;
1307    border: 2px solid #d1d5db;
1308    background: #fff;
1309    color: #fff;
1310    display: inline-flex;
1311    align-items: center;
1312    justify-content: center;
1313    transition: background-color 0.18s ease, border-color 0.18s ease;
1314}
1315.hot-quickbuy-check svg { opacity: 0; transition: opacity 0.15s ease; }
1316.hot-quickbuy-card.is-selected .hot-quickbuy-check {
1317    background: #E8590C;
1318    border-color: #E8590C;
1319}
1320.hot-quickbuy-card.is-selected .hot-quickbuy-check svg { opacity: 1; }
1321
1322.hot-quickbuy-card-main {
1323    flex: 1;
1324    display: flex;
1325    flex-direction: column;
1326    gap: 0.25rem;
1327    min-width: 0;
1328}
1329.hot-quickbuy-card-name {
1330    font-size: 1.02rem;
1331    font-weight: 700;
1332    color: #1a1a1a;
1333    line-height: 1.25;
1334}
1335.hot-quickbuy-card-meta {
1336    display: flex;
1337    align-items: center;
1338    flex-wrap: wrap;
1339    gap: 0.5rem 0.85rem;
1340    font-size: 0.83rem;
1341    color: #6b7280;
1342}
1343.hot-quickbuy-meta-item {
1344    display: inline-flex;
1345    align-items: center;
1346    gap: 0.3rem;
1347    line-height: 1;
1348}
1349.hot-quickbuy-meta-item svg { color: #9ca3af; flex-shrink: 0; }
1350.hot-quickbuy-meta-badge {
1351    display: inline-flex;
1352    align-items: center;
1353    background: #fff5ec;
1354    color: #b54708;
1355    font-size: 0.7rem;
1356    font-weight: 700;
1357    padding: 0.2rem 0.55rem;
1358    border-radius: 999px;
1359    text-transform: uppercase;
1360    letter-spacing: 0.04em;
1361}
1362.hot-quickbuy-card-price {
1363    flex-shrink: 0;
1364    font-size: 1.15rem;
1365    font-weight: 800;
1366    color: #111827;
1367    line-height: 1;
1368    margin-left: 0.5rem;
1369}
1370
1371/* Persistent footer — count + total + Start Training Now */
1372.hot-quickbuy-footer {
1373    max-width: 760px;
1374    margin: 1rem auto 0;
1375    padding: 1rem 1.1rem;
1376    background: #ffffff;
1377    border: 1.5px solid #ececec;
1378    border-radius: 14px;
1379    display: flex;
1380    align-items: center;
1381    justify-content: space-between;
1382    gap: 1rem;
1383    flex-wrap: wrap;
1384    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
1385}
1386.hot-quickbuy-footer.is-active {
1387    border-color: rgba(232, 89, 12, 0.4);
1388    background: #fff9f5;
1389    box-shadow: 0 8px 24px rgba(232, 89, 12, 0.10);
1390}
1391.hot-quickbuy-summary {
1392    display: flex;
1393    align-items: baseline;
1394    gap: 0.85rem;
1395    color: #4b5563;
1396    font-size: 0.95rem;
1397}
1398.hot-quickbuy-count { font-weight: 600; }
1399.hot-quickbuy-total {
1400    font-size: 1.4rem;
1401    font-weight: 800;
1402    color: #111827;
1403    letter-spacing: -0.01em;
1404}
1405/* Inherits btn-primary geometry (12px, gradient, 14.5px 800) — only
1406   override what's specific to the footer slot (gap + transition). */
1407.hot-quickbuy-cta {
1408    display: inline-flex;
1409    align-items: center;
1410    gap: 0.5rem;
1411    text-decoration: none;
1412}
1413.hot-quickbuy-cta.is-disabled {
1414    pointer-events: none;
1415    opacity: 0.45;
1416    filter: grayscale(0.5);
1417    /* No fire-glow / hover energy when there's nothing to start. The
1418       animation pulses, the box-shadow flashes — both read as bait
1419       when the button can't actually be pressed. */
1420    animation: none !important;
1421    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
1422    transform: none !important;
1423}
1424.hot-quickbuy-fineprint {
1425    max-width: 760px;
1426    margin: 0.85rem auto 0;
1427    text-align: center;
1428    color: #6b7280;
1429    font-size: 0.82rem;
1430}
1431
1432@media (max-width: 560px) {
1433    .hot-quickbuy-card { padding: 0.8rem 0.9rem; gap: 0.7rem; }
1434    .hot-quickbuy-card-name { font-size: 0.96rem; }
1435    .hot-quickbuy-card-price { font-size: 1.02rem; }
1436    .hot-quickbuy-footer { padding: 0.85rem 0.95rem; }
1437    .hot-quickbuy-cta { width: 100%; justify-content: center; padding: 0.95rem 1rem; }
1438    .hot-quickbuy-summary { width: 100%; justify-content: space-between; }
1439}
1440
1441/* ─── End of Phase 6 (Track D) additions ────────────────────────────── */
1442
1443/* ─── Phase 7 (Track E): Fire CTA effect ─────────────────────────────
1444   Phase 11.6 (5/9 owner): asymmetric "heat rises" box-shadow stack
1445   reads as too punchy / too literal next to the home-demo's softer
1446   atmospheric halo. Rebuilt to mirror the home-demo `.hlh-btn--fire`
1447   approach — gentle pulsing box-shadow on the button itself, plus two
1448   blurred pseudo-elements behind it (::before with the warm gradient
1449   blurred 14px, ::after a radial flame-orange falloff blurred 16px).
1450   The pseudos sit at z-index -1 so they create a real halo around the
1451   button instead of just shadow underneath. Pill radius preserved
1452   (it's the brand) — the pseudo-elements inherit the radius so the
1453   halo follows the button shape. */
1454
1455@keyframes hot-fire-glow {
1456    0%, 100% {
1457        box-shadow:
1458            0 0 0 0     rgba(234, 42, 41, 0.22),
1459            0 6px 18px  rgba(229, 145, 57, 0.22),
1460            0 10px 28px rgba(234, 102, 41, 0.18);
1461    }
1462    50% {
1463        box-shadow:
1464            0 0 0 2px   rgba(234, 42, 41, 0.30),
1465            0 8px 24px  rgba(229, 145, 57, 0.34),
1466            0 14px 38px rgba(234, 102, 41, 0.32);
1467    }
1468}
1469
1470@keyframes hot-fire-flicker {
1471    0%, 100% { opacity: 0.35; transform: scale(1); }
1472    40%      { opacity: 0.55; transform: scale(1.02); }
1473    60%      { opacity: 0.42; transform: scale(0.99); }
1474}
1475
1476.btn-primary,
1477.nav-cta,
1478.hero-cta-primary,
1479.hot-bestseller-cta,
1480.hot-quickbuy-cta,
1481.hot-quickbuy-tile-cta {
1482    position: relative;
1483    animation: hot-fire-glow 2.6s ease-in-out infinite;
1484    will-change: box-shadow;
1485    isolation: isolate;
1486}
1487
1488/* The actual halo — two blurred layers sit behind the button (z-index
1489   -1) to create soft warm light bleeding past the edges. Inherits
1490   border-radius so a pill button gets a pill-shaped halo. */
1491.btn-primary::before,
1492.nav-cta::before,
1493.hero-cta-primary::before,
1494.hot-bestseller-cta::before,
1495.hot-quickbuy-cta::before,
1496.hot-quickbuy-tile-cta::before,
1497.btn-primary::after,
1498.nav-cta::after,
1499.hero-cta-primary::after,
1500.hot-bestseller-cta::after,
1501.hot-quickbuy-cta::after,
1502.hot-quickbuy-tile-cta::after {
1503    content: "";
1504    position: absolute;
1505    border-radius: inherit;
1506    pointer-events: none;
1507    z-index: -1;
1508}
1509.btn-primary::before,
1510.nav-cta::before,
1511.hero-cta-primary::before,
1512.hot-bestseller-cta::before,
1513.hot-quickbuy-cta::before,
1514.hot-quickbuy-tile-cta::before {
1515    inset: -2px;
1516    background: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
1517    filter: blur(14px);
1518    opacity: 0.55;
1519    animation: hot-fire-flicker 3.2s ease-in-out infinite;
1520}
1521.btn-primary::after,
1522.nav-cta::after,
1523.hero-cta-primary::after,
1524.hot-bestseller-cta::after,
1525.hot-quickbuy-cta::after,
1526.hot-quickbuy-tile-cta::after {
1527    inset: -6px;
1528    background: radial-gradient(closest-side, rgba(234, 102, 41, 0.45), transparent 70%);
1529    filter: blur(16px);
1530    opacity: 0.35;
1531    animation: hot-fire-flicker 4.5s ease-in-out infinite reverse;
1532}
1533
1534.btn-primary:hover,
1535.nav-cta:hover,
1536.hero-cta-primary:hover,
1537.hot-bestseller-cta:hover,
1538.hot-quickbuy-cta:not(.is-disabled):hover,
1539.hot-quickbuy-tile-cta:hover {
1540    box-shadow:
1541        0 0 0 2px   rgba(234, 42, 41, 0.40),
1542        0 10px 28px rgba(229, 145, 57, 0.42),
1543        0 18px 44px rgba(234, 102, 41, 0.40);
1544}
1545.btn-primary:hover::before,
1546.nav-cta:hover::before,
1547.hero-cta-primary:hover::before,
1548.hot-bestseller-cta:hover::before,
1549.hot-quickbuy-cta:not(.is-disabled):hover::before,
1550.hot-quickbuy-tile-cta:hover::before { opacity: 0.78; }
1551.btn-primary:hover::after,
1552.nav-cta:hover::after,
1553.hero-cta-primary:hover::after,
1554.hot-bestseller-cta:hover::after,
1555.hot-quickbuy-cta:not(.is-disabled):hover::after,
1556.hot-quickbuy-tile-cta:hover::after { opacity: 0.55; }
1557
1558/* The disabled multi-select CTA still sits in the layout — kill the
1559   halo + flicker so the page doesn't pulse a button the user can't use. */
1560.hot-quickbuy-cta.is-disabled::before,
1561.hot-quickbuy-cta.is-disabled::after { display: none; }
1562
1563@media (prefers-reduced-motion: reduce) {
1564    .btn-primary,
1565    .nav-cta,
1566    .hero-cta-primary,
1567    .hot-bestseller-cta,
1568    .hot-quickbuy-cta,
1569    .hot-quickbuy-tile-cta {
1570        animation: none;
1571        box-shadow:
1572            0 6px 18px rgba(229, 145, 57, 0.22),
1573            0 10px 28px rgba(234, 102, 41, 0.18);
1574    }
1575    .btn-primary::before,
1576    .btn-primary::after,
1577    .nav-cta::before,
1578    .nav-cta::after,
1579    .hero-cta-primary::before,
1580    .hero-cta-primary::after,
1581    .hot-bestseller-cta::before,
1582    .hot-bestseller-cta::after,
1583    .hot-quickbuy-cta::before,
1584    .hot-quickbuy-cta::after,
1585    .hot-quickbuy-tile-cta::before,
1586    .hot-quickbuy-tile-cta::after { animation: none; }
1587}
1588
1589/* ─── End of Phase 7 (Track E) additions ────────────────────────────── */
1590
1591/* ─── Phase 10 (Block C) — archive page polish ──────────────────────── */
1592
1593/* Bestseller "Most Popular" corner badge on the archive course card.
1594   Reuses the visual language of the singular-page .hot-bestseller-headline
1595   pill — tomato-red gradient, uppercase, letterspaced — so the bestseller
1596   identity reads consistently across surfaces. Positioned absolute inside
1597   the .course-card (which is already position: relative). */
1598.course-card.hot-archive-card--bestseller {
1599    /* Tomato-tint ring so the bestseller card is recognizable even
1600       before the eye lands on the badge. Border thickens on hover via
1601       the base .course-card:hover rule (no override needed). */
1602    border-color: rgba(232, 89, 12, 0.45);
1603    box-shadow: 0 4px 18px rgba(232, 89, 12, 0.08);
1604}
1605
1606.hot-archive-bestseller-badge {
1607    position: absolute;
1608    top: 12px;
1609    right: 12px;
1610    z-index: 2;
1611    display: inline-flex;
1612    align-items: center;
1613    gap: 4px;
1614    padding: 4px 9px;
1615    border-radius: 100px;
1616    background: linear-gradient(135deg, #E8590C 0%, #CC2200 100%);
1617    color: #fff;
1618    text-transform: uppercase;
1619    letter-spacing: 0.06em;
1620    font-size: 0.7rem;
1621    font-weight: 800;
1622    line-height: 1;
1623    box-shadow: 0 2px 8px rgba(204, 34, 0, 0.3);
1624    pointer-events: none;
1625}
1626
1627.hot-archive-bestseller-badge-flame {
1628    font-size: 0.85rem;
1629    line-height: 1;
1630}
1631
1632.hot-archive-bestseller-badge-text {
1633    white-space: nowrap;
1634}
1635
1636/* Mobile: 480px-and-down — slightly smaller pill so it doesn't
1637   collide with the green .course-card-badge on narrow cards. */
1638@media (max-width: 480px) {
1639    .hot-archive-bestseller-badge {
1640        top: 10px;
1641        right: 10px;
1642        padding: 3px 8px;
1643        font-size: 0.65rem;
1644        letter-spacing: 0.05em;
1645    }
1646    .hot-archive-bestseller-badge-flame {
1647        font-size: 0.78rem;
1648    }
1649}
1650
1651/* Tiny phone: 380px-and-down — drop the flame to keep the pill tight. */
1652@media (max-width: 380px) {
1653    .hot-archive-bestseller-badge-flame {
1654        display: none;
1655    }
1656}
1657
1658/* ─── End of Phase 10 (Block C) additions ──────── */
1659
1660/* ─── Phase 10 (Block D) — variant picker modal ───────────────────────
1661   Lightweight modal shown when a user clicks a parent-slug CTA whose
1662   course param matches a registered variant group. Mobile-first, uses
1663   .btn-primary on the option buttons so the fire-glow animation applies
1664   for free. Namespaced .hot-variant-* — collision-safe.
1665   ───────────────────────────────────────────────────────────────────── */
1666
1667.hot-variant-picker[hidden] {
1668    display: none;
1669}
1670
1671.hot-variant-picker {
1672    position: fixed;
1673    inset: 0;
1674    z-index: 100000; /* above WP admin bar (~99999) and theme nav */
1675    display: flex;
1676    align-items: center;
1677    justify-content: center;
1678    padding: 16px;
1679    box-sizing: border-box;
1680}
1681
1682.hot-variant-picker-backdrop {
1683    position: absolute;
1684    inset: 0;
1685    background: rgba(12, 12, 14, 0.72);
1686    backdrop-filter: blur(2px);
1687    -webkit-backdrop-filter: blur(2px);
1688    cursor: pointer;
1689}
1690
1691.hot-variant-picker-card {
1692    position: relative;
1693    z-index: 1;
1694    width: 100%;
1695    max-width: 440px;
1696    background: #ffffff;
1697    color: #1a1a1a;
1698    border-radius: 14px;
1699    box-shadow:
1700        0 16px 48px rgba(0, 0, 0, 0.32),
1701        0 4px 12px rgba(0, 0, 0, 0.18);
1702    padding: 26px 22px 22px;
1703    box-sizing: border-box;
1704    /* No transform/transition — sub-200ms instant open per spec. */
1705}
1706
1707.hot-variant-picker-close {
1708    position: absolute;
1709    top: 8px;
1710    right: 10px;
1711    width: 36px;
1712    height: 36px;
1713    border: 0;
1714    background: transparent;
1715    color: #666;
1716    font-size: 26px;
1717    line-height: 1;
1718    cursor: pointer;
1719    border-radius: 8px;
1720    padding: 0;
1721}
1722.hot-variant-picker-close:hover,
1723.hot-variant-picker-close:focus-visible {
1724    color: #111;
1725    background: rgba(0, 0, 0, 0.06);
1726    outline: none;
1727}
1728
1729.hot-variant-picker-title {
1730    margin: 0 32px 6px 0;
1731    font-size: 1.25rem;
1732    line-height: 1.25;
1733    font-weight: 700;
1734    color: #111;
1735}
1736
1737.hot-variant-picker-sub {
1738    margin: 0 0 18px;
1739    font-size: 0.92rem;
1740    line-height: 1.45;
1741    color: #555;
1742}
1743
1744.hot-variant-picker-options {
1745    display: flex;
1746    flex-direction: column;
1747    gap: 10px;
1748}
1749
1750/* Phase 11.1 (5/8 owner): variant-picker rows ported to the /pricing
1751   black-and-white aesthetic (hot-fix VariantPickerModal.vue.phd-variant-row).
1752   Default-pick shows a subtle warm aura without a "Recommended" badge —
1753   highlight does the same job. The .btn-primary class still rides on
1754   each row for keyboard / focus parity, but every brand-red surface is
1755   overridden so the modal reads neutral. */
1756/* Phase 11.7 (5/10 owner): variant-picker rows MUST stay black-and-
1757   white like the /pricing modal — even though they ride on .btn-primary
1758   for keyboard parity. After the v1.5.7/1.5.8 .btn-primary rebuild
1759   (warm gradient, white text, fire halo, text-shadow), each !important
1760   on btn-primary started bleeding through here and the rows turned
1761   orange-glowy. Override every brand-red surface explicitly:
1762   background-image, gradient, color, text-shadow, and the ::before /
1763   ::after fire-halo pseudos. */
1764.hot-variant-picker .hot-variant-option {
1765    width: 100%;
1766    display: grid;
1767    grid-template-columns: 1fr auto;
1768    align-items: center;
1769    gap: 14px;
1770    padding: 12px 14px;
1771    font-size: 0.95rem;
1772    font-weight: 600;
1773    letter-spacing: normal;
1774    text-align: left;
1775    border: 1px solid rgba(37, 37, 37, 0.10);
1776    border-radius: 10px;
1777    background: #ffffff !important;
1778    background-image: none !important;
1779    color: #1a1a1a !important;
1780    text-shadow: none !important;
1781    cursor: pointer;
1782    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
1783    box-shadow: none !important;
1784    animation: none !important;
1785    transform: none !important;
1786}
1787.hot-variant-picker .hot-variant-option::before,
1788.hot-variant-picker .hot-variant-option::after {
1789    /* No fire halo on the modal options — they're a neutral chooser,
1790       not a CTA. Keeps the modal reading like the pricing-page picker. */
1791    display: none !important;
1792}
1793.hot-variant-picker .hot-variant-option:hover {
1794    border-color: rgba(37, 37, 37, 0.28);
1795    background: #fafafa !important;
1796    color: #1a1a1a !important;
1797    box-shadow: none !important;
1798}
1799.hot-variant-picker .hot-variant-option.is-recommended {
1800    border-color: rgba(254, 103, 44, 0.55);
1801    background: linear-gradient(180deg, #fff8f4 0%, #ffffff 100%);
1802    box-shadow: 0 0 0 3px rgba(254, 103, 44, 0.10), 0 4px 10px rgba(254, 103, 44, 0.18);
1803}
1804
1805.hot-variant-picker .hot-variant-option-label {
1806    flex: 1 1 auto;
1807    min-width: 0;
1808    font-weight: 700;
1809    font-size: 0.95rem;
1810    line-height: 1.2;
1811    color: #1a1a1a;
1812}
1813
1814/* Badge slot is hidden — the warm aura on .is-recommended carries the
1815   same signal without any editorial label. Kept the rule available for
1816   per-variant meta lines (state, jurisdiction). */
1817.hot-variant-picker .hot-variant-option-badge {
1818    display: inline-block;
1819    padding: 0;
1820    margin: 0;
1821    background: transparent;
1822    border: 0;
1823    border-radius: 0;
1824    font-size: 0.78rem;
1825    font-weight: 600;
1826    text-transform: none;
1827    letter-spacing: 0;
1828    color: #777;
1829    white-space: nowrap;
1830}
1831
1832/* Lock background scroll while modal is open. */
1833body.hot-variant-picker-open {
1834    overflow: hidden;
1835}
1836
1837/* Tablet+: a hair more breathing room. */
1838@media (min-width: 480px) {
1839    .hot-variant-picker-card {
1840        padding: 30px 28px 26px;
1841    }
1842    .hot-variant-picker-title {
1843        font-size: 1.4rem;
1844    }
1845}
1846
1847/* Reduced motion: card already has no entry animation, but disable
1848   any inherited fire-glow flicker on the options for users who opted
1849   out. They still see the recommendation badge + brand color. */
1850@media (prefers-reduced-motion: reduce) {
1851    .hot-variant-picker .hot-variant-option {
1852        animation: none;
1853    }
1854}
1855
1856/* ─── End of Phase 10 (Block D) additions ──────── */
1857
1858
1859/* ─── Phase 11 (5/4 + 5/6 UAT) additions ──────────────────────────────
1860   - .trust-row: relocated trust badges to live below the logos bar
1861     instead of inside the hero. Keeps social proof intact but clears
1862     the hero CTA so it lands above the fold on common laptop sizes.
1863   - .hot-trust-badge--lang: globe-emoji multilingual line owner asked
1864     for. Same pill styling so it sits naturally with the rest of the
1865     row.
1866   - .hot-account-toggle: Individual / Company segmented control that
1867     mirrors the /pricing tab pattern. Drives data-account on <body>
1868     so price prefix + CTA URL params react without a server round-trip.
1869   - .hero-price-row.is-company: shows the bulk-tier "Starting at"
1870     price; .is-individual: drops the prefix and shows fixed price. */
1871
1872/* Phase 11.1 (5/8 owner): trust-row was too tight at 22px; owner asked
1873   for proper section margin/padding so it reads as its own band. */
1874.trust-row {
1875    background: #f8f9fa;
1876    padding: 56px 0;
1877    border-bottom: 1px solid #eee;
1878}
1879.trust-row .container { display: flex; justify-content: center; }
1880.trust-row-badges {
1881    margin: 0 !important;
1882    flex-wrap: wrap;
1883    justify-content: center;
1884    gap: 10px 14px;
1885}
1886.hot-trust-badge--lang {
1887    background: rgba(232, 89, 12, 0.08) !important;
1888    border-color: rgba(232, 89, 12, 0.30) !important;
1889    color: #b34812 !important;
1890    font-weight: 600 !important;
1891}
1892@media (max-width: 560px) {
1893    .trust-row { padding: 16px 0; }
1894    .trust-row-badges { gap: 8px 10px; }
1895    .trust-row-badges .hot-trust-badge { font-size: 0.78rem; padding: 0.32rem 0.7rem; }
1896}
1897
1898/* Account toggle (Individual / Company) ─────────────────────────────── */
1899/* Phase 11.8 (5/10 owner): toggle pulled INTO the hero — the standalone
1900   band below the nav was eating ~44px of above-the-fold space and
1901   reading as a separate section. Now the toggle sits as the first
1902   element inside the hero content (mirrors the home-demo .hlh-switch
1903   placement above the H1) so the CTA stays above the fold on common
1904   laptop sizes. The .hero-toggle-wrap controls placement; the
1905   .hot-account-toggle pill itself keeps its v1.5.6 dark-sliding-
1906   indicator design. The legacy .hot-account-toggle-band selector is
1907   retained as display:none so old caches that still emit the band
1908   markup collapse silently. */
1909.hot-account-toggle-band,
1910.hot-account-toggle-band-inner,
1911.hot-account-toggle-prefix { display: none !important; }
1912
1913.hero-toggle-wrap {
1914    margin: 0 0 14px;
1915    display: flex;
1916    align-items: center;
1917}
1918.hero--certified-dark .hero-toggle-wrap,
1919.hero-inner .hero-toggle-wrap { justify-content: center; }
1920/* Color the toggle rail for the dark hero so it doesn't read white-on-
1921   black bonded onto the wrong palette. */
1922.hero--certified-dark .hot-account-toggle,
1923.hero--grid-dark .hot-account-toggle {
1924    background: rgba(255, 255, 255, 0.08);
1925    border-color: rgba(255, 255, 255, 0.16);
1926}
1927.hero--certified-dark .hot-account-toggle-btn,
1928.hero--grid-dark .hot-account-toggle-btn { color: rgba(255, 255, 255, 0.65); }
1929.hero--certified-dark .hot-account-toggle-btn:hover,
1930.hero--grid-dark .hot-account-toggle-btn:hover { color: #fff; }
1931/* Phase 11.6 (5/9 owner): toggle restyled to match the home-demo
1932   .hlh-switch — dark sliding indicator on a light gray pill rail.
1933   Reads as a deliberate segmented control instead of an active-button
1934   highlight; matches the visual weight of the rest of the home-demo
1935   page so landing-page hero feels in-family with the new homepage. */
1936.hot-account-toggle {
1937    position: relative;
1938    display: inline-flex;
1939    background: #f3f4f6;
1940    border: 1px solid #e5e7eb;
1941    border-radius: 999px;
1942    padding: 4px;
1943    gap: 0;
1944    isolation: isolate;
1945}
1946.hot-account-toggle::before {
1947    content: "";
1948    position: absolute;
1949    top: 4px;
1950    bottom: 4px;
1951    left: 4px;
1952    width: calc(50% - 4px);
1953    background: #0f1115;
1954    border-radius: 999px;
1955    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
1956    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
1957    z-index: 0;
1958}
1959body[data-account="company"] .hot-account-toggle::before {
1960    transform: translateX(100%);
1961}
1962.hot-account-toggle-btn {
1963    position: relative;
1964    z-index: 1;
1965    appearance: none;
1966    border: 0;
1967    background: transparent;
1968    cursor: pointer;
1969    font: inherit;
1970    font-weight: 700;
1971    font-size: 0.8125rem;
1972    color: #525866;
1973    padding: 0.5rem 1.1rem;
1974    border-radius: 999px;
1975    transition: color 0.18s ease;
1976    line-height: 1.1;
1977    min-width: 96px;
1978    text-align: center;
1979}
1980.hot-account-toggle-btn:hover { color: #111; }
1981.hot-account-toggle-btn[aria-pressed="true"] {
1982    color: #fff;
1983}
1984.hot-account-toggle-btn:focus-visible {
1985    outline: 2px solid #E8590C;
1986    outline-offset: 4px;
1987}
1988@media (max-width: 560px) {
1989    .hero-toggle-wrap { margin-bottom: 10px; }
1990    .hot-account-toggle-btn { font-size: 0.78rem; padding: 0.45rem 0.85rem; min-width: 84px; }
1991}
1992
1993/* Hide the company-only price prefix until JS flips data-account.
1994   Default state mirrors what the server rendered (Individual = fixed). */
1995body[data-account="individual"] .hot-price-prefix { display: none; }
1996body[data-account="company"] .hot-price-prefix { display: inline; }
1997body[data-account="company"] .hero-price::before { content: "Starting at "; font-size: 0.55em; font-weight: 600; opacity: 0.72; margin-right: 0.35rem; vertical-align: 0.2em; }
1998
1999/* Per-toggle H1 copy (Phase 11.1, 5/8 owner). Both spans render server-
2000   side; CSS hides the inactive one. JS toggle handler updates the
2001   aria-hidden attribute alongside the data-account flip so screen
2002   readers only ever announce the active variant. */
2003.hero-h1-individual,
2004.hero-h1-company { display: inline; }
2005body[data-account="individual"] .hero-h1-company { display: none; }
2006body[data-account="company"]    .hero-h1-individual { display: none; }
2007
2008/* ─── End of Phase 11 additions ──────────────────────────────────── */
2009
2010/* ─── Phase 12 — audience-aware hero copy ────────────────────────────
2011   Eric feedback 2026-05-11 pt.2. Hero pill, subtext, CTA label, and
2012   price all swap with the Individual / Company toggle. Both spans
2013   render server-side; CSS hides the inactive variant via
2014   body[data-account]. Toggle JS updates aria-hidden in lockstep so
2015   screen readers only announce the active variant.
2016
2017   The hero pill is also the "secondary breadcrumb" Eric called out — it
2018   no longer surfaces stale state-approval labels like NY ATAP APPROVED.
2019   Instead, defaults to a duration + instant-cert pill for individuals
2020   and an audit-ready oversight pill for companies. */
2021
2022/* Pill */
2023.hero-badge-individual,
2024.hero-badge-company { display: inline-flex; align-items: center; gap: 8px; }
2025body[data-account="individual"] .hero-badge-company { display: none; }
2026body[data-account="company"]    .hero-badge-individual { display: none; }
2027
2028/* Subtext */
2029.subtext-individual,
2030.subtext-company { display: inline; }
2031body[data-account="individual"] .subtext-company { display: none; }
2032body[data-account="company"]    .subtext-individual { display: none; }
2033
2034/* CTA label */
2035.cta-label-individual,
2036.cta-label-company { display: inline; }
2037body[data-account="individual"] .cta-label-company { display: none; }
2038body[data-account="company"]    .cta-label-individual { display: none; }
2039
2040/* Price — only swap if the page actually rendered a company price span.
2041   Courses without a company price keep showing the individual figure on
2042   both modes (safe fallback). */
2043.hero-price-individual,
2044.hero-price-company { display: inline; }
2045body[data-account="individual"] .hero-price-company { display: none; }
2046body[data-account="company"]    .hero-price-individual { display: none; }
2047/* Company-mode "Starting at " prefix (existing behaviour from Phase 11)
2048   still applies via .hero-price::before — see the rule earlier in this
2049   file. The /mo suffix sits next to the dollar value. */
2050.hero-price-company-suffix {
2051    font-size: 0.4em;
2052    font-weight: 600;
2053    opacity: 0.72;
2054    margin-left: 0.25rem;
2055    vertical-align: 0.2em;
2056}
2057
2058/* ─── Phase 12 — pre-checkout modal (both modes) ─────────────────────
2059   Fires on any primary /go/ CTA click. Company mode shows all three
2060   sections (employees + locations, LMS or license-our-content,
2061   this-course-only or 1-of-3 bundles). Individual mode shows only the
2062   bundle section — others are hidden via [data-precheckout-mode="company"]
2063   below. Modal posts choices to /go/?... so the LMS pricing page can
2064   auto-fill. */
2065body[data-account="individual"] .hot-precheckout-section[data-precheckout-mode="company"] { display: none; }
2066body[data-account="individual"] .hot-precheckout-title-company,
2067body[data-account="individual"] .hot-precheckout-lead-company,
2068body[data-account="individual"] .hot-precheckout-section-title-company { display: none; }
2069body[data-account="company"] .hot-precheckout-title-individual,
2070body[data-account="company"] .hot-precheckout-lead-individual,
2071body[data-account="company"] .hot-precheckout-section-title-individual { display: none; }
2072
2073.hot-precheckout-backdrop {
2074    position: fixed; inset: 0;
2075    background: rgba(15, 15, 20, 0.72);
2076    z-index: 9000;
2077    display: none;
2078    align-items: center; justify-content: center;
2079    padding: 16px;
2080}
2081.hot-precheckout-backdrop.is-open { display: flex; }
2082.hot-precheckout-modal {
2083    background: #fff;
2084    border-radius: 16px;
2085    box-shadow: 0 24px 64px rgba(0,0,0,0.32);
2086    width: 100%; max-width: 560px;
2087    max-height: calc(100vh - 32px);
2088    overflow-y: auto;
2089    padding: 28px 28px 22px;
2090    position: relative;
2091}
2092.hot-precheckout-modal h2 {
2093    margin: 0 0 6px;
2094    font-size: 1.35rem;
2095    font-weight: 700;
2096    color: #111;
2097}
2098.hot-precheckout-modal p.hot-precheckout-lead {
2099    margin: 0 0 18px;
2100    color: #555;
2101    font-size: 0.92rem;
2102}
2103.hot-precheckout-close {
2104    position: absolute; top: 14px; right: 14px;
2105    background: transparent; border: 0; cursor: pointer;
2106    width: 32px; height: 32px;
2107    display: inline-flex; align-items: center; justify-content: center;
2108    border-radius: 50%;
2109    color: #666;
2110}
2111.hot-precheckout-close:hover { background: rgba(0,0,0,0.06); color: #111; }
2112
2113.hot-precheckout-section {
2114    margin: 18px 0;
2115    padding: 0 0 16px;
2116    border-bottom: 1px solid #eee;
2117}
2118.hot-precheckout-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
2119.hot-precheckout-section-title {
2120    font-size: 0.78rem;
2121    font-weight: 700;
2122    letter-spacing: 0.06em;
2123    text-transform: uppercase;
2124    color: #666;
2125    margin: 0 0 10px;
2126}
2127
2128.hot-precheckout-fields {
2129    display: grid;
2130    grid-template-columns: 1fr 1fr;
2131    gap: 10px;
2132}
2133.hot-precheckout-field label {
2134    display: block;
2135    font-size: 0.78rem;
2136    color: #444;
2137    margin-bottom: 4px;
2138}
2139.hot-precheckout-field input[type="number"] {
2140    width: 100%;
2141    padding: 10px 12px;
2142    border: 1px solid #d8d8d8;
2143    border-radius: 8px;
2144    font-size: 0.95rem;
2145    font-family: inherit;
2146}
2147.hot-precheckout-field input[type="number"]:focus {
2148    outline: none;
2149    border-color: #CC2200;
2150    box-shadow: 0 0 0 3px rgba(204,34,0,0.12);
2151}
2152
2153.hot-precheckout-choices {
2154    display: grid; gap: 8px;
2155}
2156.hot-precheckout-choice {
2157    border: 1.5px solid #e5e5e5;
2158    border-radius: 10px;
2159    padding: 12px 14px;
2160    cursor: pointer;
2161    transition: border-color 0.12s, background 0.12s;
2162    display: flex; align-items: center; gap: 10px;
2163    background: #fff;
2164}
2165.hot-precheckout-choice:hover { border-color: #bbb; }
2166.hot-precheckout-choice input { margin: 0; accent-color: #CC2200; }
2167.hot-precheckout-choice.is-selected {
2168    border-color: #CC2200;
2169    background: rgba(204,34,0,0.04);
2170}
2171.hot-precheckout-choice-label { font-weight: 600; color: #222; font-size: 0.92rem; }
2172.hot-precheckout-choice-desc  { font-size: 0.78rem; color: #666; margin-top: 2px; }
2173.hot-precheckout-choice-body  { flex: 1; }
2174
2175.hot-precheckout-footer {
2176    margin-top: 18px;
2177    display: flex; gap: 10px; justify-content: flex-end;
2178    flex-wrap: wrap;
2179}
2180.hot-precheckout-footer .btn-primary,
2181.hot-precheckout-footer .btn-ghost {
2182    /* Inherit existing button styles — no overrides needed. */
2183}
2184
2185@media (max-width: 600px) {
2186    .hot-precheckout-fields { grid-template-columns: 1fr; }
2187    .hot-precheckout-modal  { padding: 22px 18px 16px; border-radius: 12px; }
2188}
2189/* ─── End of Phase 12 additions ──────────────────────────────────── */
2190
2191    </style>
2192    <!-- Google Ads (gtag.js) -->
vendor: 68 bytes, lines 2192-2193
2192
2193    <script async src="https://www.googletagmanager.com/gtag/js?id=
2193AW-754017760
vendor: 16 bytes, lines 2193-2194
2193"></script>
2194    
2194<script>
vendor: 118 bytes, line 2194
2194window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','
2194AW-754017760
vendor: 3 bytes, line 2194
2194');
2194</script>
2194
2195<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
2196
2197	<!-- This site is optimized with the Yoast SEO plugin v28.5 - https://yoast.com/product/yoast-seo-wordpress/ -->
2198	<title>Alcohol Server Training - Home of Training</title>
2199	<meta name="description" content="Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques." />
2200	<link rel="canonical" href="https://homeoftraining.com/courses/alcohol-server-training" />
2201	<meta property="og:locale" content="en_US" />
2202	<meta property="og:type" content="article" />
2203	<meta property="og:title" content="Alcohol Server Training - Home of Training" />
2204	<meta property="og:description" content="Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques." />
2205	<meta property="og:url" content="https://homeoftraining.com/courses/alcohol-server-training" />
2206	<meta property="og:site_name" content="Home of Training" />
2207	<meta property="article:modified_time" content="2026-05-08T11:37:12+00:00" />
2208	<meta name="twitter:card" content="summary_large_image" />
2209	<meta name="twitter:description" content="Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques." />
2210	<meta name="twitter:image" content="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/hot-logo.png" />
2211	<meta name="twitter:label1" content="Est. reading time" />
2212	<meta name="twitter:data1" content="2 minutes" />
2213	
2213<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training","url":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training","name":"Alcohol Server Training - Home of Training","isPartOf":{"@id":"https:\/\/homeoftraining.com\/#website"},"datePublished":"2026-04-15T19:26:02+00:00","dateModified":"2026-05-08T11:37:12+00:00","breadcrumb":{"@id":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homeoftraining.com\/courses\/alcohol-server-training"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/homeoftraining.com\/"},{"@type":"ListItem","position":2,"name":"Courses","item":"https:\/\/homeoftraining.com\/courses"},{"@type":"ListItem","position":3,"name":"Alcohol Server Training"}]},{"@type":"WebSite","@id":"https:\/\/homeoftraining.com\/#website","url":"https:\/\/homeoftraining.com\/","name":"Home of Training","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/homeoftraining.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}</script>
2213
2214	<!-- / Yoast SEO plugin. -->
2215
2216
2217<link rel="alternate" type="application/rss+xml" title="Home of Training &raquo; Feed" href="https://homeoftraining.com/feed" />
2218<link rel="alternate" type="application/rss+xml" title="Home of Training &raquo; Comments Feed" href="https://homeoftraining.com/comments/feed" />
2219<link rel='stylesheet' id='hot-landing-page-css' href='https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/css/landing-page.css?ver=1.7.3' media='all' />
2220<link rel='stylesheet' id='elementor-gf-plusjakartasans-css' href='https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&#038;display=swap' media='all' />
2221<link rel='stylesheet' id='elementor-gf-inter-css' href='https://fonts.googleapis.com/css?family=Inter:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&#038;display=swap' media='all' />
2222<link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://homeoftraining.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' media='all' />
2223<link rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://homeoftraining.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=5.15.3' media='all' />
2224<link rel='stylesheet' id='elementor-icons-ekiticons-css' href='https://homeoftraining.com/wp-content/plugins/elementskit-lite/modules/elementskit-icon-pack/assets/css/ekiticons.css?ver=4.0.6' media='all' />
2225 <!-- Google Ads (gtag.js) -->
vendor: 67 bytes, lines 2225-2226
2225
2226  <script async src="https://www.googletagmanager.com/gtag/js?id=
2226AW-754017760
vendor: 15 bytes, lines 2226-2227
2226"></script>
2227  
2227<script>
2228    
vendor: 142 bytes, lines 2228-2231
2228window.dataLayer = window.dataLayer || [];
2229    function gtag(){dataLayer.push(arguments);}
2230    gtag('js', new Date());
2231    gtag('config', '
2231AW-754017760
vendor: 7 bytes, lines 2231-2232
2231');
2232  
2232</script>
2232<script type="text/javascript">
2233_linkedin_partner_id = "6620370";
2234window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
2235window._linkedin_data_partner_ids.push(_linkedin_partner_id);
2236</script>
2236<script type="text/javascript">
2237(function(l) {
2238if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
2239window.lintrk.q=[]}
2240var s = document.getElementsByTagName("script")[0];
2241var b = document.createElement("script");
2242b.type = "text/javascript";b.async = true;
2243b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
2244s.parentNode.insertBefore(b, s);})(window.lintrk);
2245</script>
2245
2246<noscript>
2247<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=6620370&fmt=gif" />
2248</noscript>
2249
2250
2251<!-- Google tag (gtag.js) -->
vendor: 64 bytes, line 2251
2251 <script async src="https://www.googletagmanager.com/gtag/js?id=
2251AW-16741931865
vendor: 12 bytes, line 2251
2251"></script> 
2251<script> 
vendor: 127 bytes, line 2251
2251window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '
2251AW-16741931865
vendor: 4 bytes, line 2251
2251'); 
2251</script>
2251<!-- start Simple Custom CSS and JS -->
2252<script>
vendor: 340 bytes, lines 2252-2257
2252
2253 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
2254  new Date().getTime(),event:'gtm.js'});var
2255  f=d.getElementsByTagName(s)[0],
2256  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
2257  })(window,document,'script','dataLayer','
2257GTM-WKTP8H9V
vendor: 3 bytes, line 2257
2257');
2257</script>
2257
2258<!-- end Simple Custom CSS and JS -->
2259
2260<link rel='stylesheet' id='26189-css' href='//homeoftraining.com/wp-content/uploads/custom-css-js/26189.css?v=5076' media='all' />
2261<!-- start Simple Custom CSS and JS -->
2262<style>
2263ul.course-list {
2264            list-style: none;
2265            padding: 0;
2266            margin: 0;
2267	display: grid;
2268    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
2269    gap: 10px;
2270        }
2271
2272.search-bar {
2273    margin: 20px 0px;
2274}
2275
2276.no-results-section {
2277	display:none;
2278}
2279.course-section .course-list li {
2280    display: flex;
2281    align-items: center;
2282    gap: 10px;
2283}
2284        .searchable-course-div {
2285               display: flex;
2286    flex-direction: column;
2287    gap: 25px;
2288        }
2289
2290        @media (max-width: 768px) {
2291            .searchable-course-div {
2292                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
2293            }
2294        }
2295
2296        @media (max-width: 480px) {
2297            .searchable-course-div {
2298                grid-template-columns: 1fr; /* 1 item per row on mobile */
2299            }
2300        }
2301
2302 .single-list-grid-css {
2303                display: grid;
2304    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
2305    gap: 10px;
2306        }</style>
2307<!-- end Simple Custom CSS and JS -->
2308<!-- start Simple Custom CSS and JS -->
2309<style>
2310li#menu-item-25788, li#menu-item-25789 {
2311    display: none;
2312}
2313
2314@media only screen and (max-width: 1000px) {
2315li#menu-item-25788, li#menu-item-25789 {
2316    display: inline-block;
2317        background: black;
2318        border-radius: 5px;
2319        width: max-content;
2320        color: white;
2321        padding-left: 20px;
2322        padding-right: 20px;
2323        padding-top: 5px;
2324        padding-bottom: 5px;
2325}
2326	
2327	li#menu-item-25788 a, li#menu-item-25789 a {
2328		color:white;
2329	}
2330}
2331
2332.low-opacity-animation {
2333	opacity:0.3;
2334}
2335
2336.top-bar-animation {
2337    background: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
2338    background-size: 600% 600%;
2339
2340    -webkit-animation: topbaranimation 11s ease infinite;
2341    -moz-animation: topbaranimation 11s ease infinite;
2342    -o-animation: topbaranimation 11s ease infinite;
2343    animation: topbaranimation 11s ease infinite;
2344}
2345
2346@-webkit-keyframes topbaranimation {
2347    0%{background-position:0% 50%}
2348    50%{background-position:100% 50%}
2349    100%{background-position:0% 50%}
2350}
2351@-moz-keyframes topbaranimation {
2352    0%{background-position:0% 50%}
2353    50%{background-position:100% 50%}
2354    100%{background-position:0% 50%}
2355}
2356@-o-keyframes topbaranimation {
2357    0%{background-position:0% 50%}
2358    50%{background-position:100% 50%}
2359    100%{background-position:0% 50%}
2360}
2361@keyframes topbaranimation {
2362    0%{background-position:0% 50%}
2363    50%{background-position:100% 50%}
2364    100%{background-position:0% 50%}
2365}
2366
2367
2368.wpcf7-response-output {
2369    background-color: white !important;
2370}
2371
2372div#demo-videos {
2373    display: grid;
2374    grid-template-columns: repeat(3, 1fr);
2375    gap: 20px;
2376}
2377
2378@media (max-width: 768px) {
2379  /* For tablets */
2380  div#demo-videos {
2381    grid-template-columns: repeat(2, 1fr); /* 2 items in a row */
2382  }
2383}
2384
2385@media (max-width: 480px) {
2386  /* For mobile phones */
2387  div#demo-videos {
2388    grid-template-columns: 1fr; /* 1 item in a row */
2389  }
2390}
2391
2392.demo-video-box {
2393    background: white;
2394    padding: 10px;
2395    border-radius: 15px;
2396    text-align: center;
2397}
2398
2399.demo-video-box h5 {
2400    margin: 0px;
2401}
2402
2403.grecaptcha-badge {
2404  display:none;
2405}
2406
2407
2408/* --- Compliance Certifications carousel (widget a0bfa80): render full, uncropped
2409       logos at a uniform height. Pairs with the widget Image Size = Medium.
2410       Added 2026-08-20. --- */
2411.elementor-element-a0bfa80 .elementor-image-carousel-wrapper .swiper-slide {
2412    display: flex;
2413    align-items: center;
2414    justify-content: center;
2415}
2416.elementor-element-a0bfa80 .elementor-image-carousel-wrapper .swiper-slide img {
2417    height: 130px;
2418    width: auto;
2419    max-width: 100%;
2420    object-fit: contain;
2421    margin: 0 auto;
2422}
2423</style>
2424<!-- end Simple Custom CSS and JS -->
2425<script type="application/ld+json">{
2426    "@context": "https://schema.org",
2427    "@type": "Course",
2428    "name": "Alcohol Server Training",
2429    "description": "Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques.",
2430    "provider": {
2431        "@type": "Organization",
2432        "name": "Home of Training, Inc.",
2433        "url": "https://homeoftraining.com"
2434    },
2435    "url": "https://homeoftraining.com/courses/alcohol-server-training",
2436    "courseMode": "online",
2437    "offers": {
2438        "@type": "Offer",
2439        "price": 9.95,
2440        "priceCurrency": "USD",
2441        "availability": "https://schema.org/InStock",
2442        "url": "https://homeoftraining.com/courses/alcohol-server-training",
2443        "seller": {
2444            "@type": "Organization",
2445            "name": "Home of Training, Inc."
2446        }
2447    }
2448}</script>
2448
2449	
2449<script type="text/javascript">
2450		var stm_wpcfto_ajaxurl = 'https://homeoftraining.com/wp-admin/admin-ajax.php';
2451	</script>
2451
2452
2453	<style>
2454		.vue_is_disabled {
2455			display: none;
2456		}
2457	</style>
2458		
2458<script>
2459		var stm_wpcfto_nonces = {"wpcfto_save_settings":"e4a6826ba5","get_image_url":"ebcd62323e","wpcfto_upload_file":"a3dee282ea","wpcfto_search_posts":"915d225b0c"};
2460	</script>
2460
2461	<meta name="generator" content="Elementor 4.2.4; features: additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-swap">
2462<script type="text/javascript">var elementskit_module_parallax_url = "https://homeoftraining.com/wp-content/plugins/elementskit/modules/parallax/";</script>
2462			<style>
2463				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
2464				.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
2465					background-image: none !important;
2466				}
2467				@media screen and (max-height: 1024px) {
2468					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
2469					.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
2470						background-image: none !important;
2471					}
2472				}
2473				@media screen and (max-height: 640px) {
2474					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
2475					.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
2476						background-image: none !important;
2477					}
2478				}
2479			</style>
2480			<link rel="icon" href="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-150x150.png" sizes="32x32" />
2481<link rel="icon" href="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-300x300.png" sizes="192x192" />
2482<link rel="apple-touch-icon" href="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-300x300.png" />
2483<meta name="msapplication-TileImage" content="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-300x300.png" />
2484</head>
2485<body class="wp-singular hot_course-template-default single single-hot_course postid-26938 wp-theme-landpress  underline-link-effect flip-button-effect keydesign-elementor-library elementor-default elementor-kit-24414" data-account="individual">
2486
2487    <!-- Top Bar (Phase 11.3: now hosts the bestseller offer alongside
2488         contact + social — one consolidated black row instead of two
2489         stacked utility rows). The .top-bar-deal wrapper renders only
2490         when the bestseller renderer would emit content; on archives /
2491         non-landing pages the slot is omitted so the layout collapses
2492         to contact + social. -->
2493    <div class="top-bar"><div class="container top-bar-inner">
2494                <div class="top-bar-deal">
2495            	<span class="hot-bestseller-flame" aria-hidden="true">&#128293;</span>
2496	<span class="hot-bestseller-headline">Most Popular:</span>
2497	<span class="hot-bestseller-course">Food Handler Certificate Program</span>
2498	<span class="hot-bestseller-price">$10</span>
2499	<a class="hot-bestseller-cta"
2500		href="https://homeoftraining.com/go/?course=food-handler-certificate&#038;autocheckout=1"
2501		data-bestseller-course="food-handler-certificate">
2502		Start Now &rarr;
2503	</a>
2504	        </div>
2505                <div class="top-bar-contact">
2506            <a href="mailto:[email protected]" class="top-bar-item"><svg width="15" height="15" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> [email protected]</a>
2507            <a href="tel:9546767900" class="top-bar-item"><svg width="15" height="15" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.11 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> 954.676.7900</a>
2508        </div>
2509        <div class="top-bar-social">
2510            <a href="https://www.youtube.com/@homeoftraining" aria-label="YouTube"><svg width="15" height="15" fill="#fff" viewBox="0 0 24 24"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.43z"/><polygon fill="#E8590C" points="9.75,15.02 15.5,11.75 9.75,8.48"/></svg></a>
2511            <a href="https://www.instagram.com/homeoftraining/" aria-label="Instagram"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" stroke="#fff" stroke-width="2"/><circle cx="12" cy="12" r="5" stroke="#fff" stroke-width="2"/><circle cx="17.5" cy="6.5" r="1.5" fill="#fff"/></svg></a>
2512            <a href="https://www.linkedin.com/company/barwize" aria-label="LinkedIn"><svg width="15" height="15" fill="#fff" viewBox="0 0 24 24">
2512<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
2513        </div>
2514    </div></div>
2515
2516    <!-- Nav: full site nav restored — Services megamenu + Course Library /
2517         Pricing / Demos / FAQ / Contact / Login matching homeoftraining.com.
2518         Single source in includes/site-nav.php so all landing-page templates
2519         stay in sync. Create-Account CTA prefills the current course slug so
2520         the LMS pricing page lands on it for this slug. -->
2521        <nav class="site-nav"><div class="container nav-inner">
2522        <a href="https://homeoftraining.com" class="nav-logo"><img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/hot-logo.png" alt="Home of Training" style="height:40px;width:auto;max-height:40px;"></a>
2523        <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false"><span></span><span></span><span></span></button>
2524        <div class="nav-links">
2525            <div class="nav-item nav-item--has-mega">
2526                <button type="button" class="nav-link nav-link--mega" aria-haspopup="true" aria-expanded="false">Services <svg class="nav-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1,1 5,5 9,1"/></svg></button>
2527                <div class="nav-mega" role="menu">
2528                    <div class="nav-mega-inner">
2529                        <div class="nav-mega-col">
2530                            <h4 class="nav-mega-heading">Compliance Training</h4>
2531                            <ul>
2532                                                                    <li><a href="https://homeoftraining.com/courses/alcohol-server-training/">Alcohol Server Training</a></li>
2533                                                                    <li><a href="https://homeoftraining.com/courses/food-handler-certificate/">Food Handler Certificate</a></li>
2534                                                                    <li><a href="https://homeoftraining.com/courses/food-manager-certification/">Food Manager Certification</a></li>
2535                                                                    <li><a href="https://homeoftraining.com/courses/a-plus-security-host/">A+ Security Host</a></li>
2536                                                                    <li><a href="https://homeoftraining.com/courses/human-trafficking-training/">Human Trafficking</a></li>
2537                                                                    <li><a href="https://homeoftraining.com/courses/sexual-harassment-training/">Sexual Harassment</a></li>
2538                                                            </ul>
2539                        </div>
2540                        <div class="nav-mega-col">
2541                            <h4 class="nav-mega-heading"><a href="https://homeoftraining.com/licensing/">Licensing</a></h4>
2542                            <ul>
2543                                                                    <li><a href="https://homeoftraining.com/human-resources-courses/">Human Resources Courses</a></li>
2544                                                                    <li><a href="https://homeoftraining.com/white-labeling/">White Labeling</a></li>
2545                                                                    <li><a href="https://homeoftraining.com/upload-your-own-training/">Upload Your Own Training</a></li>
2546                                                                    <li><a href="https://homeoftraining.com/live-filming/">Live Filming</a></li>
2547                                                                    <li><a href="https://homeoftraining.com/content-creation/">Content Creation</a></li>
2548                                                            </ul>
2549                        </div>
2550                        <div class="nav-mega-col">
2551                            <h4 class="nav-mega-heading">Guidebooks / SCORM</h4>
2552                            <ul>
2553                                                                    <li><a href="https://homeoftraining.com/scorm-training/">SCORM Training</a></li>
2554                                                                    <li><a href="https://homeoftraining.com/guidebook-training/">Guidebook Training</a></li>
2555                                                                    <li><a href="https://homeoftraining.com/your-training-dept/">We&#039;ll Be Your Training Dept</a></li>
2556                                                            </ul>
2557                        </div>
2558                    </div>
2559                </div>
2560            </div>
2561            <a href="https://homeoftraining.com/courses" class="nav-link">Course Library</a>
2562            <a href="https://lms.homeoftraining.com/#/pricing" class="nav-link">Pricing</a>
2563            <a href="https://homeoftraining.com/video-demos/" class="nav-link">Demos</a>
2564            <a href="https://homeoftraining.com/faqs/" class="nav-link">FAQ</a>
2565            <a href="https://homeoftraining.com/contact/" class="nav-link">Contact</a>
2566            <a href="https://lms.homeoftraining.com/#/login" class="nav-link">Login</a>
2567            <a href="https://homeoftraining.com/go/?course=alcohol
2567-server-training" class="nav-cta">Create Account</a>
2568        </div>
2569    </div></nav>
2570    
2571    <!-- Hero — left column: homepage Quick Start panel; right: course video -->
2572        <section class="hero hero--grid-dark">
2573        <div class="container">
2574                    <div class="hero-grid">
2575                <div class="hero-content hero-content--left-hero">
2576                                                    <div
2577            class="hot-left-hero hot-left-hero--embed"
2578            id="hot-left-hero-98141"
2579            data-default-mode="individual"
2580                                        data-sync-account="1"
2581                    >
2582
2583            <div class="hlh-switch" role="tablist" aria-label="Training audience switch" data-active="individual">
2584                <span class="hlh-switch__indicator" aria-hidden="true"></span>
2585                <button type="button" class="hlh-switch__btn is-active" role="tab" data-mode="individual">Individual</button>
2586                                    <button type="button" class="hlh-switch__btn" role="tab" data-mode="company">Company</button>
2587                            </div>
2588
2589            <section class="hlh-panel is-active" data-panel="individual" role="tabpanel">
2590                <h2 class="hlh-title">Complete Your Training Today!</h2>
2591
2592                <div class="hlh-ticker" aria-live="polite">
2593                    <span class="hlh-ticker__label">Train in:</span>
2594                    <span class="hlh-ticker__track">
2595                                                    <span class="hlh-ticker__item is-active">Food Manager Certification</span>
2596                                                    <span class="hlh-ticker__item">Food Handler Certificate Program</span>
2597                                                    <span class="hlh-ticker__item">Alcohol Server Certification</span>
2598                                                    <span class="hlh-ticker__item">Human Trafficking Awareness</span>
2599                                                    <span class="hlh-ticker__item">Security / Host Training</span>
2600                                                    <span class="hlh-ticker__item">OSHA Workplace Safety</span>
2601                                                    <span class="hlh-ticker__item">Sexual Harassment Prevention</span>
2602                                                    <span class="hlh-ticker__item">Bloodborne Pathogens</span>
2603                                            </span>
2604                </div>
2605
2606                <div class="hlh-testimonial" aria-live="polite">
2607                    <span class="hlh-stars" aria-hidden="true">
2608                        <svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg>                    </span>
2609                    <span class="hlh-testimonial__track">
2610                        <span class="hlh-testimonial__item is-active">&ldquo;Completed in 15 mins on my phone.&rdquo;</span>
2611                        <span class="hlh-testimonial__item">&ldquo;Got my certificate on lunch break.&rdquo;</span>
2612                        <span class="hlh-testimonial__item">&ldquo;Spanish version is perfect!&rdquo;</span>
2613                    </span>
2614                </div>
2615
2616                <ul class="hlh-feature-row">
2617                    <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Instant access</li>
2618                    <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Certificate included</li>
2619                    <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Courses from $5</li>
2620                </ul>
2621
2622                <form class="hlh-quick-start" method="post" action="">
2623                    <div class="hlh-dropdown" data-open="false">
2624                        <button type="button" class="hlh-dropdown__trigger" aria-haspopup="listbox" aria-expanded="false">
2625                            <span class="hlh-dropdown__icon" aria-hidden="true">
2626                                <svg viewBox="0 0 20 20" fill="none"><path d="M5 4l11 6-11 6V4z" fill="currentColor"/></svg>
2627                            </span>
2628                            <span class="hlh-dropdown__lead">
2629                                <span class="hlh-dropdown__title">Quick Start</span>
2630                                <span class="hlh-dropdown__sublabel">Live within a minute &middot; Pick one or more</span>
2631                            </span>
2632                            <span class="hlh-dropdown__count" data-empty="true">0 selected</span>
2633                            <span class="hlh-dropdown__chevron" aria-hidden="true">
2634                                <svg viewBox="0 0 20 20" fill="none"><path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
2635                            </span>
2636                        </button>
2637
2638                        <div class="hlh-dropdown__panel" role="listbox" aria-multiselectable="true">
2639                            <ul class="hlh-dropdown__list">
2640                                                                                                        <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-2">
2641                                        <label for="hot-left-hero-98141-c-0" class="hlh-dropdown__row">
2642                                            <input
2643                                                id="hot-left-hero-98141-c-0"
2644                                                type="checkbox"
2645                                                name="course_lms_ids[]"
2646                                                value=""
2647                                                data-type="versioned"
2648                                                data-family-key="family-2"
2649                                                data-family-name="Alcohol Safety"
2650                                                data-lms-id=""
2651                                                data-slug=""
2652                                                data-price="0"
2653                                                data-name="Alcohol Safety"
2654                                                data-version-label=""
2655                                                                                                    data-versions="[{&quot;id&quot;:904,&quot;label&quot;:&quot;California \u2014 RBS&quot;,&quot;name&quot;:&quot;California Responsible Beverage Service (RBS) Training&quot;,&quot;time&quot;:&quot;4 hr&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95},{&quot;id&quot;:93,&quot;label&quot;:&quot;Florida \u2014 Employee&quot;,&quot;name&quot;:&quot;Alcohol Safety Training - Florida\/Employee&quot;,&quot;time&quot;:&quot;45 min&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95},{&quot;id&quot;:23,&quot;label&quot;:&quot;Nationwide \u2014 Employee&quot;,&quot;name&quot;:&quot;Alcohol Safety Training - Nationwide&quot;,&quot;time&quot;:&quot;45 min&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95},{&quot;id&quot;:92,&quot;label&quot;:&quot;Florida \u2014 Manager&quot;,&quot;name&quot;:&quot;Alcohol Safety Training - Florida \/ Manager&quot;,&quot;time&quot;:&quot;20 min&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95},{&quot;id&quot;:26,&quot;label&quot;:&quot;Nationwide \u2014 Manager&quot;,&quot;name&quot;:&quot;Alcohol Safety Training Nationwide - Manager&quot;,&quot;time&quot;:&quot;20 min&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95}]"
2656                                                                                            />
2657                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2658                                            <span class="hlh-dropdown__meta">
2659                                                <span class="hlh-dropdown__name">Alcohol Safety</span>
2660                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2661                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version                                                                                                    </span>
2662                                            </span>
2663                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">—</span>
2664                                        </label>
2665                                    </li>
2666                                                                                                        <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-1">
2667                                        <label for="hot-left-hero-98141-c-1" class="hlh-dropdown__row">
2668                                            <input
2669                                                id="hot-left-hero-98141-c-1"
2670                                                type="checkbox"
2671                                                name="course_lms_ids[]"
2672                                                value=""
2673                                                data-type="versioned"
2674                                                data-family-key="family-1"
2675                                                data-family-name="Food Handler"
2676                                                data-lms-id=""
2677                                                data-slug=""
2678                                                data-price="0"
2679                                                data-name="Food Handler"
2680                                                data-version-label=""
2681                                                                                                    data-versions="[{&quot;id&quot;:70,&quot;label&quot;:&quot;Florida&quot;,&quot;name&quot;:&quot;Food Handler Certificate - Florida&quot;,&quot;time&quot;:&quot;60 min&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95},{&quot;id&quot;:122,&quot;label&quot;:&quot;ANAB Nationally Accredited&quot;,&quot;name&quot;:&quot;Food Handler Certificate - Nationally Accredited&quot;,&quot;time&quot;:&quot;90 min&quot;,&quot;price&quot;:&quot;$9.95&quot;,&quot;price_num&quot;:9.95}]"
2682                                                                                            />
2683                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2684                                            <span class="hlh-dropdown__meta">
2685                                                <span class="hlh-dropdown__name">Food Handler</span>
2686                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2687                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version                                                                                                    </span>
2688                                            </span>
2689                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">—</span>
2690                                        </label>
2691                                    </li>
2692                                                                                                        <li class="hlh-dropdown__item" data-family-key="family-0">
2693                                        <label for="hot-left-hero-98141-c-2" class="hlh-dropdown__row">
2694                                            <input
2695                                                id="hot-left-hero-98141-c-2"
2696                                                type="checkbox"
2697                                                name="course_lms_ids[]"
2698                                                value="123"
2699                                                data-type="simple"
2700                                                data-family-key="family-0"
2701                                                data-family-name="Food Manager Study Session"
2702                                                data-lms-id="123"
2703                                                data-slug=""
2704                                                data-price="199"
2705                                                data-name="Food Manager Study Session"
2706                                                data-version-label=""
2707                                                                                            />
2708                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2709                                            <span class="hlh-dropdown__meta">
2710                                                <span class="hlh-dropdown__name">Food Manager Study Session</span>
2711                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2712                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> 3 hr                                                                                                    </span>
2713                                            </span>
2714                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">$199</span>
2715                                        </label>
2716                                    </li>
2717                                                                                                        <li class="hlh-dropdown__item" data-family-key="family-3">
2718                                        <label for="hot-left-hero-98141-c-3" class="hlh-dropdown__row">
2719                                            <input
2720                                                id="hot-left-hero-98141-c-3"
2721                                                type="checkbox"
2722                                                name="course_lms_ids[]"
2723                                                value="51"
2724                                                data-type="simple"
2725                                                data-family-key="family-3"
2726                                                data-family-name="Human Trafficking Prevention"
2727                                                data-lms-id="51"
2728                                                data-slug=""
2729                                                data-price="15"
2730                                                data-name="Human Trafficking Prevention"
2731                                                data-version-label=""
2732                                                                                            />
2733                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2734                                            <span class="hlh-dropdown__meta">
2735                                                <span class="hlh-dropdown__name">Human Trafficking Prevention</span>
2736                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2737                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> 15 min                                                                                                    </span>
2738                                            </span>
2739                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">$15</span>
2740                                        </label>
2741                                    </li>
2742                                                                                                        <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-5">
2743                                        <label for="hot-left-hero-98141-c-4" class="hlh-dropdown__row">
2744                                            <input
2745                                                id="hot-left-hero-98141-c-4"
2746                                                type="checkbox"
2747                                                name="course_lms_ids[]"
2748                                                value=""
2749                                                data-type="versioned"
2750                                                data-family-key="family-5"
2751                                                data-family-name="OSHA"
2752                                                data-lms-id=""
2753                                                data-slug=""
2754                                                data-price="0"
2755                                                data-name="OSHA"
2756                                                data-version-label=""
2757                                                                                                    data-versions="[{&quot;id&quot;:87,&quot;label&quot;:&quot;Bloodborne Pathogens&quot;,&quot;name&quot;:&quot;OSHA - Bloodborne Pathogens&quot;,&quot;time&quot;:&quot;15 min&quot;,&quot;price&quot;:&quot;$9&quot;,&quot;price_num&quot;:9},{&quot;id&quot;:68,&quot;label&quot;:&quot;Slips, Trips and Falls&quot;,&quot;name&quot;:&quot;Slips, Trips and Falls - Employee&quot;,&quot;time&quot;:&quot;8 min&quot;,&quot;price&quot;:&quot;$9&quot;,&quot;price_num&quot;:9},{&quot;id&quot;:60,&quot;label&quot;:&quot;Fire Prevention&quot;,&quot;name&quot;:&quot;Fire Prevention&quot;,&quot;time&quot;:&quot;12 min&quot;,&quot;price&quot;:&quot;$9&quot;,&quot;price_num&quot;:9}]"
2758                                                                                            />
2759                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2760                                            <span class="hlh-dropdown__meta">
2761                                                <span class="hlh-dropdown__name">OSHA</span>
2762                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2763                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version                                                                                                    </span>
2764                                            </span>
2765                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">—</span>
2766                                        </label>
2767                                    </li>
2768                                                                                                        <li class="hlh-dropdown__item" data-family-key="family-4">
2769                                        <label for="hot-left-hero-98141-c-5" class="hlh-dropdown__row">
2770                                            <input
2771                                                id="hot-left-hero-98141-c-5"
2772                                                type="checkbox"
2773                                                name="course_lms_ids[]"
2774                                                value="115"
2775                                                data-type="simple"
2776                                                data-family-key="family-4"
2777                                                data-family-name="Security / Doorman / Bouncer"
2778                                                data-lms-id="115"
2779                                                data-slug=""
2780                                                data-price="75"
2781                                                data-name="Security / Doorman / Bouncer"
2782                                                data-version-label=""
2783                                                                                            />
2784                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2785                                            <span class="hlh-dropdown__meta">
2786                                                <span class="hlh-dropdown__name">Security / Doorman / Bouncer</span>
2787                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2788                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> 2 hr                                                                                                    </span>
2789                                            </span>
2790                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">$75</span>
2791                                        </label>
2792                                    </li>
2793                                                                                                        <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-6">
2794                                        <label for="hot-left-hero-98141-c-6" class="hlh-dropdown__row">
2795                                            <input
2796                                                id="hot-left-hero-98141-c-6"
2797                                                type="checkbox"
2798                                                name="course_lms_ids[]"
2799                                                value=""
2800                                                data-type="versioned"
2801                                                data-family-key="family-6"
2802                                                data-family-name="Sexual Harassment Prevention"
2803                                                data-lms-id=""
2804                                                data-slug=""
2805                                                data-price="0"
2806                                                data-name="Sexual Harassment Prevention"
2807                                                data-version-label=""
2808                                                                                                    data-versions="[{&quot;id&quot;:103,&quot;label&quot;:&quot;Employee&quot;,&quot;name&quot;:&quot;Sexual Harassment - Employee&quot;,&quot;time&quot;:&quot;30 min&quot;,&quot;price&quot;:&quot;$24&quot;,&quot;price_num&quot;:24},{&quot;id&quot;:104,&quot;label&quot;:&quot;Manager&quot;,&quot;name&quot;:&quot;Manager&quot;,&quot;time&quot;:&quot;60 min&quot;,&quot;price&quot;:&quot;$24&quot;,&quot;price_num&quot;:24},{&quot;id&quot;:101,&quot;label&quot;:&quot;Employee (California)&quot;,&quot;name&quot;:&quot;Sexual Harassment - California \/ Employee&quot;,&quot;time&quot;:&quot;60 min&quot;,&quot;price&quot;:&quot;$24&quot;,&quot;price_num&quot;:24},{&quot;id&quot;:102,&quot;label&quot;:&quot;Manager (California)&quot;,&quot;name&quot;:&quot;Manager (California)&quot;,&quot;time&quot;:&quot;2 hr&quot;,&quot;price&quot;:&quot;$24&quot;,&quot;price_num&quot;:24}]"
2809                                                                                            />
2810                                            <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2811                                            <span class="hlh-dropdown__meta">
2812                                                <span class="hlh-dropdown__name">Sexual Harassment Prevention</span>
2813                                                <span class="hlh-dropdown__sub hlh-dropdown__sub--hint">
2814                                                                                                            <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version                                                                                                    </span>
2815                                            </span>
2816                                            <span class="hlh-dropdown__price hlh-dropdown__price--pending">—</span>
2817                                        </label>
2818                                    </li>
2819                                                            </ul>
2820                            <div class="hlh-dropdown__foot">
2821                                <span class="hlh-dropdown__foot-count">0 selected</span>
2822                                <span class="hlh-dropdown__foot-total">$0</span>
2823                            </div>
2824                            <div class="hlh-dropdown__action">
2825                                <button type="submit" class="hlh-btn hlh-btn--fire hlh-btn--in-dropdown">
2826                                    <span class="hlh-btn__flame" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M11.5 1.5c.4 2.4-.8 3.6-2 4.8-1.4 1.4-3 2.9-3 5.7 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3.5-2.4-5.5-3.6-7.4-.7-1-1.1-2-.9-3.1-1 .3-1.9.9-2.5 1.7-.5-.6-.7-1.2 0-1.7zM10 17c-1.7 0-3-1.3-3-3 0-1.4.8-2.2 1.6-3 .7.8 1.7 1.2 2.4 0 1 .8 2 1.6 2 3 0 1.7-1.3 3-3 3z"/></svg></span>
2827                                    <span class="hlh-btn__label">Start Training Now</span>
2828                                    <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2829                                </button>
2830                                <a href="https://lms.homeoftraining.com/#/pricing" class="hlh-dropdown__see-more" target="_blank" rel="noopener">See More Courses</a>
2831                            </div>
2832                        </div>
2833                    </div>
2834
2835                    <div class="hlh-chips" aria-live="polite"></div>
2836
2837                    <div class="hlh-version-modal hlh-version-modal--portal" data-hlh-root="hot-left-hero-98141" hidden role="dialog" aria-modal="true" aria-labelledby="hot-left-hero-98141-version-title">
2838                        <div class="hlh-version-modal__backdrop" data-close="1"></div>
2839                        <div class="hlh-version-modal__panel">
2840                            <button type="button" class="hlh-version-modal__close" aria-label="Close">&times;</button>
2841                            <h3 class="hlh-version-modal__title" id="hot-left-hero-98141-version-title"></h3>
2842                            <p class="hlh-version-modal__lede">Select one version to add to your cart.</p>
2843                            <ul class="hlh-version-modal__list"></ul>
2844                        </div>
2845                    </div>
2846
2847                    <div class="hlh-refer-modal hlh-refer-modal--portal" data-hlh-root="hot-left-hero-98141" hidden role="dialog" aria-modal="true" aria-labelledby="hot-left-hero-98141-refer-title">
2848                        <div class="hlh-refer-modal__backdrop" data-refer-close="1"></div>
2849                        <div class="hlh-refer-modal__panel">
2850                            <button type="button" class="hlh-refer-modal__close" aria-label="Close">&times;</button>
2851                            <h3 class="hlh-refer-modal__title" id="hot-left-hero-98141-refer-title">Refer a Company &amp; Earn $200</h3>
2852                            <p class="hlh-refer-modal__lede">Tell us about the company you&rsquo;re referring and we&rsquo;ll take it from there.</p>
2853                            <div class="hlh-refer-modal__form">
2854                                <fieldset class="hlh-refer-modal__fieldset">
2855                                    <legend class="hlh-refer-modal__legend">Company Being Referred</legend>
2856                                    <label class="hlh-refer-modal__label">
2857                                        <span>Company Name <abbr title="required">*</abbr></span>
2858                                        <input type="text" name="refer_company" class="hlh-refer-modal__input" required>
2859                                    </label>
2860                                    <label class="hlh-refer-modal__label">
2861                                        <span>Contact Name <abbr title="required">*</abbr></span>
2862                                        <input type="text" name="refer_contact" class="hlh-refer-modal__input" required>
2863                                    </label>
2864                                    <label class="hlh-refer-modal__label">
2865                                        <span>Phone Number <abbr title="required">*</abbr></span>
2866                                        <input type="tel" name="refer_phone" class="hlh-refer-modal__input" required>
2867                                    </label>
2868                                    <label class="hlh-refer-modal__label">
2869                                        <span>Email Address <abbr title="required">*</abbr></span>
2870                                        <input type="email" name="refer_email" class="hlh-refer-modal__input" required>
2871                                    </label>
2872                                </fieldset>
2873                                <fieldset class="hlh-refer-modal__fieldset">
2874                                    <legend class="hlh-refer-modal__legend">Your Information (Referrer)</legend>
2875                                    <label class="hlh-refer-modal__label">
2876                                        <span>Your Name <abbr title="required">*</abbr></span>
2877                                        <input type="text" name="referrer_name" class="hlh-refer-modal__input" required>
2878                                    </label>
2879                                    <label class="hlh-refer-modal__label">
2880                                        <span>Your Email <abbr title="required">*</abbr></span>
2881                                        <input type="email" name="referrer_email" class="hlh-refer-modal__input" required>
2882                                    </label>
2883                                    <label class="hlh-refer-modal__label">
2884                                        <span>Your Phone Number <abbr title="required">*</abbr></span>
2885                                        <input type="tel" name="referrer_phone" class="hlh-refer-modal__input" required>
2886                                    </label>
2887                                </fieldset>
2888                                <button type="button" class="hlh-btn hlh-btn--fire hlh-refer-modal__submit">
2889                                    <span class="hlh-btn__label">Submit Referral</span>
2890                                    <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2891                                </button>
2892                                <p class="hlh-refer-modal__success" hidden>Thank you! Your referral has been submitted successfully.</p>
2893                            </div>
2894                        </div>
2895                    </div>
2896
2897                    <input type="hidden" name="hot_lp_preload_cart" value="1">
2898                    <input type="hidden" id="hot_lp_nonce" name="hot_lp_nonce" value="598721b2c8" /><input type="hidden" name="_wp_http_referer" value="/courses/alcohol-server-training" />
2899                    <button type="submit" class="hlh-btn hlh-btn--fire">
2900                        <span class="hlh-btn__flame" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M11.5 1.5c.4 2.4-.8 3.6-2 4.8-1.4 1.4-3 2.9-3 5.7 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3.5-2.4-5.5-3.6-7.4-.7-1-1.1-2-.9-3.1-1 .3-1.9.9-2.5 1.7-.5-.6-.7-1.2 0-1.7zM10 17c-1.7 0-3-1.3-3-3 0-1.4.8-2.2 1.6-3 .7.8 1.7 1.2 2.4 0 1 .8 2 1.6 2 3 0 1.7-1.3 3-3 3z"/></svg></span>
2901                        <span class="hlh-btn__label">Start Training Now</span>
2902                        <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2903                    </button>
2904                    <button type="button" class="hlh-subline hlh-subline--refer hlh-refer-trigger" aria-label="Open referral form">
2905                        <span class="hlh-subline__refer-lede">
2906                            <span class="hlh-subline__refer-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2907                            Refer your company, receive
2908                        </span>
2909                        <span class="hlh-subline__refer-amount">$200</span>
2910                        <span class="hlh-refer-info" tabindex="0" aria-label="Referral program details" role="button">
2911                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M8 7v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="5" r=".9" fill="currentColor"/></svg>
2912                            <span class="hlh-refer-info__tooltip">Refer us to any location that signs up for any monthly service package and receive $200 after their first payment is made. It&rsquo;s that simple.</span>
2913                        </span>
2914                    </button>
2915                </form>
2916
2917                
2918                                    <div class="hlh-cross-link">
2919                        Need training for your team? <a href="#">Switch to Company &rarr;</a>
2920                    </div>
2921                            </section>
2922
2923                            <section class="hlh-panel" data-panel="company" role="tabpanel">
2924                    <h2 class="hlh-title hlh-title--company">Train Your Employees. Stay Compliant. All in One Platform, from $0.50 per user, per month</h2>
2925
2926                    <div class="hlh-ticker hlh-ticker--lg" aria-live="polite">
2927                        <span class="hlh-ticker__label">Available features:</span>
2928                        <span class="hlh-ticker__track">
2929                            <span class="hlh-ticker__item is-active">Custom content</span>
2930                            <span class="hlh-ticker__item">White label</span>
2931                            <span class="hlh-ticker__item">Live filming</span>
2932                            <span class="hlh-ticker__item">API integration</span>
2933                            <span class="hlh-ticker__item">Custom Reporting</span>
2934                        </span>
2935                    </div>
2936
2937                    <div class="hlh-testimonial" aria-live="polite">
2938                        <span class="hlh-stars" aria-hidden="true">
2939                            <svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg>                        </span>
2940                        <span class="hlh-testimonial__track">
2941                            <span class="hlh-testimonial__item is-active">&ldquo;Cut onboarding time in half.&rdquo;</span>
2942                            <span class="hlh-testimonial__item">&ldquo;Compliance is finally automated.&rdquo;</span>
2943                            <span class="hlh-testimonial__item">&ldquo;Our whole team certified in a week.&rdquo;</span>
2944                        </span>
2945                    </div>
2946
2947                    <ul class="hlh-feature-row hlh-feature-row--stack">
2948                        <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Employees can pay or your company can</li>
2949                        <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Trusted by McDonald&rsquo;s + 40,000 locations</li>
2950                        <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> SOC 2 / ANAB / HIPAA badges</li>
2951                    </ul>
2952
2953                    <div class="hlh-btn-row">
2954                        <a class="hlh-btn hlh-btn--fire" href="https://lms.homeoftraining.com/#/pricing?action=trial">
2955                            <span class="hlh-btn__flame" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M11.5 1.5c.4 2.4-.8 3.6-2 4.8-1.4 1.4-3 2.9-3 5.7 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3.5-2.4-5.5-3.6-7.4-.7-1-1.1-2-.9-3.1-1 .3-1.9.9-2.5 1.7-.5-.6-.7-1.2 0-1.7zM10 17c-1.7 0-3-1.3-3-3 0-1.4.8-2.2 1.6-3 .7.8 1.7 1.2 2.4 0 1 .8 2 1.6 2 3 0 1.7-1.3 3-3 3z"/></svg></span>
2956                            <span class="hlh-btn__label">Start free trial</span>
2957                            <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2958                        </a>
2959                        <a class="hlh-btn hlh-btn--outline" href="https://lms.homeoftraining.com/#/pricing">
2960                            <span class="hlh-btn__label">Get started now</span>
2961                            <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2962                        </a>
2963                    </div>
2964                    <div class="hlh-subline">Setup in minutes &middot; Cancel anytime</div>
2965
2966                    <div class="hlh-cross-link">Just need your training: <a href="#">Switch to Individual &rarr;</a></div>
2967                </section>
2968                    </div>
2969
2970        <style>
2971            #hot-left-hero-98141.hot-left-hero {
2972                --hlh-grad: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
2973                --hlh-grad-soft: linear-gradient(270deg, rgba(229,145,57,.12), rgba(234,42,41,.12), rgba(234,102,41,.12));
2974                --hlh-orange: #ea6629;
2975                --hlh-red: #ea2a29;
2976                --hlh-amber: #e59139;
2977                --hlh-ink: #0f1115;
2978                --hlh-ink-2: #3a3f48;
2979                --hlh-mute: #6b7280;
2980                --hlh-line: rgba(15,17,21,.08);
2981                --hlh-card: #ffffff;
2982                --hlh-soft: #fafafa;
2983                position: relative;
2984                z-index: 1;
2985                background:
2986                    radial-gradient(1200px 400px at -10% -20%, rgba(234,102,41,.08), transparent 55%),
2987                    radial-gradient(800px 300px at 110% 110%, rgba(234,42,41,.06), transparent 55%),
2988                    #ffffff;
2989                border: 0;
2990                border-radius: 18px;
2991                padding: 18px 18px 16px;
2992                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
2993                color: var(--hlh-ink);
2994                box-shadow: none;
2995                overflow: visible; /* allow the Quick Start dropdown to overlay outside the card */
2996            }
2997            #hot-left-hero-98141.hot-left-hero--embed {
2998                background: #fff;
2999                border-radius: 18px;
3000                padding: 14px 16px 12px;
3001                box-shadow:
3002                    0 8px 32px rgba(15, 17, 21, 0.12),
3003                    0 0 0 1px rgba(15, 17, 21, 0.06);
3004            }
3005            #hot-left-hero-98141.hot-left-hero--embed .hlh-switch {
3006                margin-bottom: 4px;
3007            }
3008            #hot-left-hero-98141.hot-left-hero--embed .hlh-title,
3009            #hot-left-hero-98141.hot-left-hero--embed .hlh-title--company {
3010                margin-top: 0;
3011                margin-bottom: 8px;
3012            }
3013            #hot-left-hero-98141.hot-left-hero--embed .hlh-cross-link {
3014                display: none;
3015            }
3016            #hot-left-hero-98141 * { box-sizing: border-box; }
3017
3018            #hot-left-hero-98141 .hlh-switch {
3019                position: relative;
3020                display: inline-flex;
3021                gap: 0;
3022                margin-bottom: 12px;
3023                padding: 4px;
3024                border-radius: 999px;
3025                background: #f3f4f6;
3026                border: 1px solid var(--hlh-line);
3027            }
3028            #hot-left-hero-98141 .hlh-switch__indicator {
3029                position: absolute; top: 4px; bottom: 4px; left: 4px;
3030                width: calc(50% - 4px);
3031                background: #0f1115;
3032                border-radius: 999px;
3033                transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s ease;
3034                box-shadow: 0 6px 14px -4px rgba(0,0,0,.45);
3035                z-index: 0;
3036            }
3037            #hot-left-hero-98141 .hlh-switch[data-active="company"] .hlh-switch__indicator {
3038                transform: translateX(100%);
3039            }
3040            #hot-left-hero-98141 .hlh-switch__btn {
3041                position: relative; z-index: 1;
3042                border: 0;
3043                padding: 8px 18px;
3044                border-radius: 999px;
3045                background: transparent;
3046                cursor: pointer;
3047                font-size: 13px;
3048                font-weight: 700;
3049                color: #525866;
3050                transition: color .2s ease;
3051                font-family: inherit;
3052            }
3053            #hot-left-hero-98141 .hlh-switch__btn.is-active { color: #fff; }
3054
3055            #hot-left-hero-98141 .hlh-panel {
3056                display: none;
3057                animation: hlhFadeIn .35s ease both;
3058            }
3059            #hot-left-hero-98141 .hlh-panel.is-active { display: block; }
3060            @keyframes hlhFadeIn {
3061                from { opacity: 0; transform: translateY(4px); }
3062                to   { opacity: 1; transform: translateY(0); }
3063            }
3064
3065            #hot-left-hero-98141 .hlh-title {
3066                font-size: clamp(1.35rem, 1.85vw, 1.6rem);
3067                line-height: 1.22;
3068                margin: 0 0 10px;
3069                letter-spacing: -0.02em;
3070                color: var(--hlh-ink);
3071                font-weight: 800;
3072            }
3073            #hot-left-hero-98141 .hlh-title--company {
3074                font-size: clamp(1.05rem, 1.45vw, 1.28rem);
3075                line-height: 1.32;
3076                margin: 0 0 14px;
3077            }
3078            #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-ticker--lg {
3079                margin-bottom: 14px;
3080            }
3081            #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-testimonial {
3082                margin-bottom: 14px;
3083            }
3084            #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-feature-row--stack {
3085                gap: 10px;
3086                margin-bottom: 20px;
3087            }
3088            #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-btn-row {
3089                gap: 10px;
3090                padding-bottom: 4px;
3091            }
3092            #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-cross-link {
3093                margin-top: 14px;
3094            }
3095            #hot-left-hero-98141 .hlh-lede {
3096                font-size: clamp(0.72rem, 0.88vw, 0.8rem);
3097                line-height: 1.42;
3098                margin: 0 0 12px;
3099                color: var(--hlh-mute);
3100                letter-spacing: -0.01em;
3101            }
3102            /* Catalog line runs long — nudge smaller so one line fits typical card widths */
3103            #hot-left-hero-98141 .hlh-panel[data-panel="individual"] .hlh-lede {
3104                font-size: clamp(0.65rem, 0.78vw, 0.72rem);
3105                letter-spacing: -0.02em;
3106                line-height: 1.35;
3107            }
3108            #hot-left-hero-98141 .hlh-lede strong {
3109                background: linear-gradient(180deg, transparent 70%, rgba(234,102,41,.25) 0);
3110                padding: 0 2px;
3111            }
3112
3113            #hot-left-hero-98141 .hlh-feature-row {
3114                display: flex; flex-wrap: wrap; gap: 8px 14px;
3115                list-style: none; margin: 0 0 16px; padding: 0;
3116                font-size: 12.5px; color: var(--hlh-ink); font-weight: 600;
3117            }
3118            #hot-left-hero-98141 .hlh-feature-row li {
3119                display: inline-flex; align-items: center; gap: 6px;
3120            }
3121            #hot-left-hero-98141 .hlh-feature-row--stack {
3122                flex-direction: column;
3123                align-items: flex-start;
3124                flex-wrap: nowrap;
3125                gap: 8px;
3126                margin: 0 0 18px;
3127            }
3128            #hot-left-hero-98141 .hlh-panel[data-panel="individual"] .hlh-quick-start {
3129                margin-top: 0;
3130            }
3131            #hot-left-hero-98141 .hlh-tick {
3132                display: inline-flex; align-items: center; justify-content: center;
3133                width: 18px; height: 18px; border-radius: 50%;
3134                background: rgba(34,197,94,.12); color: #14823f;
3135            }
3136            #hot-left-hero-98141 .hlh-tick svg { width: 12px; height: 12px; }
3137
3138            #hot-left-hero-98141 .hlh-testimonial {
3139                display: flex; align-items: center; gap: 10px;
3140                padding: 4px 0 4px 12px; margin-bottom: 12px;
3141                background: transparent;
3142                border: 0;
3143                border-left: 3px solid var(--hlh-orange);
3144                border-radius: 0;
3145            }
3146            #hot-left-hero-98141 .hlh-stars {
3147                display: inline-flex; gap: 2px; color: #f59e0b; flex: 0 0 auto;
3148            }
3149            #hot-left-hero-98141 .hlh-stars svg { width: 13px; height: 13px; }
3150            #hot-left-hero-98141 .hlh-testimonial__track {
3151                position: relative; min-height: 18px; font-size: 12.5px; color: var(--hlh-ink-2); font-style: italic;
3152                flex: 1 1 auto;
3153            }
3154            #hot-left-hero-98141 .hlh-testimonial__item {
3155                position: absolute; inset: 0;
3156                opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
3157            }
3158            #hot-left-hero-98141 .hlh-testimonial__item.is-active {
3159                opacity: 1; transform: translateY(0); position: relative;
3160            }
3161
3162            /* Ticker — labeled rotating red text (courses + features) */
3163            #hot-left-hero-98141 .hlh-ticker {
3164                display: flex; align-items: baseline; gap: 7px;
3165                margin: 0 0 12px;
3166                font-size: 13px; line-height: 1.4;
3167                flex-wrap: nowrap; overflow: hidden;
3168            }
3169            #hot-left-hero-98141 .hlh-ticker--lg {
3170                font-size: 13.5px;
3171                margin: 0 0 12px;
3172                flex-wrap: wrap;
3173                row-gap: 4px;
3174            }
3175            #hot-left-hero-98141 .hlh-ticker__label {
3176                color: var(--hlh-mute); font-weight: 600;
3177                white-space: nowrap; flex-shrink: 0;
3178            }
3179            /* inline-grid stacks all items in the same cell — no layout jump */
3180            #hot-left-hero-98141 .hlh-ticker__track {
3181                display: inline-grid; min-width: 0;
3182            }
3183            #hot-left-hero-98141 .hlh-ticker__item {
3184                grid-area: 1 / 1;
3185                color: var(--hlh-red); font-weight: 800;
3186                opacity: 0; transition: opacity .4s ease;
3187                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
3188            }
3189            #hot-left-hero-98141 .hlh-ticker__item.is-active {
3190                opacity: 1;
3191            }
3192
3193            /* Two-CTA row (Company) */
3194            #hot-left-hero-98141 .hlh-btn-row {
3195                display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
3196                margin: 0 0 0;
3197            }
3198            /* Side-by-side CTAs: skip oversized glow so subline/badges keep even spacing */
3199            #hot-left-hero-98141 .hlh-btn-row .hlh-btn--fire {
3200                animation: none;
3201                box-shadow: 0 6px 16px rgba(234, 102, 41, .22);
3202            }
3203            #hot-left-hero-98141 .hlh-btn-row .hlh-btn--fire::before,
3204            #hot-left-hero-98141 .hlh-btn-row .hlh-btn--fire::after {
3205                display: none;
3206            }
3207            #hot-left-hero-98141 .hlh-btn--outline {
3208                background-image: none;
3209                background-color: transparent;
3210                border: 2px solid var(--hlh-red);
3211                color: var(--hlh-red);
3212                text-shadow: none;
3213                animation: none;
3214            }
3215            #hot-left-hero-98141 .hlh-btn--outline:hover {
3216                background-color: rgba(234,42,41,.06);
3217                transform: translateY(-1px);
3218            }
3219            #hot-left-hero-98141 .hlh-btn--outline::before,
3220            #hot-left-hero-98141 .hlh-btn--outline::after { display: none; }
3221            @media (max-width: 380px) {
3222                #hot-left-hero-98141 .hlh-btn-row { grid-template-columns: 1fr; }
3223            }
3224
3225            #hot-left-hero-98141 .hlh-quick-start {
3226                margin: 0 0 14px;
3227            }
3228
3229            /* Unified Quick Start dropdown (header + trigger merged) */
3230            #hot-left-hero-98141 .hlh-dropdown {
3231                position: relative; margin-bottom: 10px;
3232            }
3233            #hot-left-hero-98141 .hlh-dropdown__trigger {
3234                display: flex; align-items: center; gap: 12px;
3235                width: 100%;
3236                padding: 12px 14px;
3237                background: linear-gradient(180deg, #ffffff, #fbfbfb);
3238                border: 1.5px solid var(--hlh-line);
3239                border-radius: 14px;
3240                font-family: inherit;
3241                color: var(--hlh-ink);
3242                cursor: pointer; text-align: left;
3243                transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
3244                box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 6px 20px -14px rgba(15,17,21,.18);
3245            }
3246            #hot-left-hero-98141 .hlh-dropdown__trigger:hover {
3247                border-color: rgba(234, 102, 41, .55);
3248            }
3249            #hot-left-hero-98141 .hlh-dropdown[data-open="true"] .hlh-dropdown__trigger {
3250                border-color: var(--hlh-orange);
3251                box-shadow: 0 0 0 1.5px rgba(234,102,41,.10);
3252            }
3253            #hot-left-hero-98141 .hlh-dropdown__icon {
3254                display: inline-flex; align-items: center; justify-content: center;
3255                width: 38px; height: 38px; border-radius: 10px;
3256                background-image: var(--hlh-grad); color: #fff; flex: 0 0 auto;
3257                box-shadow: 0 4px 12px -3px rgba(234,102,41,.5);
3258            }
3259            #hot-left-hero-98141 .hlh-dropdown__icon svg { width: 16px; height: 16px; margin-left: 1px; }
3260            #hot-left-hero-98141 .hlh-dropdown__lead {
3261                display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0;
3262            }
3263            #hot-left-hero-98141 .hlh-dropdown__title {
3264                font-size: 14.5px; font-weight: 800; color: var(--hlh-ink); line-height: 1.15;
3265                letter-spacing: -0.01em;
3266            }
3267            #hot-left-hero-98141 .hlh-dropdown__sublabel {
3268                font-size: 11.5px; font-weight: 50
32680; color: var(--hlh-mute); line-height: 1.3;
3269            }
3270            #hot-left-hero-98141 .hlh-dropdown__count {
3271                font-size: 11px; font-weight: 800;
3272                padding: 4px 9px; border-radius: 999px;
3273                background: #f3f4f6; color: #525866; white-space: nowrap;
3274                transition: background .2s ease, color .2s ease;
3275            }
3276            #hot-left-hero-98141 .hlh-dropdown__count[data-empty="false"] {
3277                background-image: var(--hlh-grad); color: #fff;
3278            }
3279            #hot-left-hero-98141 .hlh-dropdown__chevron {
3280                display: inline-flex; align-items: center; justify-content: center;
3281                width: 20px; height: 20px; color: var(--hlh-mute);
3282                transition: transform .25s ease, color .2s ease;
3283            }
3284            #hot-left-hero-98141 .hlh-dropdown__chevron svg { width: 16px; height: 16px; }
3285            #hot-left-hero-98141 .hlh-dropdown[data-open="true"] .hlh-dropdown__chevron {
3286                transform: rotate(180deg); color: var(--hlh-orange);
3287            }
3288
3289            #hot-left-hero-98141 .hlh-dropdown {
3290                z-index: 2;
3291            }
3292            #hot-left-hero-98141:has(.hlh-dropdown[data-open="true"]) {
3293                position: relative;
3294                z-index: 999998;
3295            }
3296            #hot-left-hero-98141 .hlh-dropdown[data-open="true"] {
3297                z-index: 999999;
3298            }
3299            #hot-left-hero-98141 .hlh-dropdown__panel {
3300                position: absolute; top: calc(100% + 4px); left: 0; right: 0;
3301                background: #fff;
3302                border: 1px solid rgba(234,102,41,.35);
3303                border-radius: 12px;
3304                box-shadow: 0 10px 24px -10px rgba(15,17,21,.14);
3305                z-index: 999999;
3306                overflow: hidden;
3307                opacity: 0; transform: translateY(-4px) scale(.99);
3308                pointer-events: none;
3309                transition: opacity .18s ease, transform .18s ease;
3310            }
3311            #hot-left-hero-98141 .hlh-dropdown[data-open="true"] .hlh-dropdown__panel {
3312                opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
3313            }
3314            /* Keep the open Quick Start menu above logos/trust rows site-wide */
3315            body.hlh-qs-dropdown-open .hot-left-hero {
3316                position: relative;
3317                z-index: 999997;
3318            }
3319            body.hlh-qs-dropdown-open .logos-bar,
3320            body.hlh-qs-dropdown-open .trust-row,
3321            body.hlh-qs-dropdown-open .hlh-logos,
3322            body.hlh-qs-dropdown-open .hlh-proof {
3323                z-index: 0 !important;
3324                position: relative;
3325            }
3326            #hot-left-hero-98141 .hlh-dropdown__panel-head {
3327                display: flex; align-items: center; justify-content: space-between;
3328                padding: 10px 14px; background: var(--hlh-soft);
3329                border-bottom: 1px solid var(--hlh-line);
3330                font-size: 11px; color: var(--hlh-mute); text-transform: uppercase; letter-spacing: .06em;
3331            }
3332            #hot-left-hero-98141 .hlh-dropdown__panel-head strong {
3333                color: var(--hlh-ink); font-size: 11px; letter-spacing: .06em;
3334            }
3335            #hot-left-hero-98141 .hlh-dropdown__list {
3336                list-style: none; margin: 0; padding: 4px;
3337                max-height: 240px; overflow: auto;
3338            }
3339            #hot-left-hero-98141 .hlh-dropdown__list::-webkit-scrollbar { width: 6px; }
3340            #hot-left-hero-98141 .hlh-dropdown__list::-webkit-scrollbar-thumb { background: rgba(15,17,21,.15); border-radius: 999px; }
3341
3342            #hot-left-hero-98141 .hlh-dropdown__row {
3343                display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
3344                padding: 9px 10px;
3345                border-radius: 8px;
3346                cursor: pointer;
3347                transition: background .15s ease;
3348            }
3349            #hot-left-hero-98141 .hlh-dropdown__row:hover { background: #fafafa; }
3350            #hot-left-hero-98141 .hlh-dropdown__row input {
3351                position: absolute; opacity: 0; pointer-events: none;
3352            }
3353            #hot-left-hero-98141 .hlh-dropdown__check {
3354                width: 22px; height: 22px; border-radius: 6px;
3355                border: 1.5px solid #d1d5db;
3356                display: inline-flex; align-items: center; justify-content: center;
3357                color: transparent;
3358                transition: all .15s ease;
3359                flex: 0 0 auto;
3360            }
3361            #hot-left-hero-98141 .hlh-dropdown__check svg { width: 13px; height: 13px; }
3362            #hot-left-hero-98141 .hlh-dropdown__row input:checked ~ .hlh-dropdown__check {
3363                border-color: transparent;
3364                background-image: var(--hlh-grad);
3365                color: #fff;
3366            }
3367            #hot-left-hero-98141 .hlh-dropdown__row input:checked ~ .hlh-dropdown__meta .hlh-dropdown__name { color: var(--hlh-ink); }
3368            #hot-left-hero-98141 .hlh-dropdown__row:has(input:checked) { background: #fff7f2; }
3369            #hot-left-hero-98141 .hlh-dropdown__row input:disabled ~ .hlh-dropdown__check { opacity: .5; }
3370
3371            #hot-left-hero-98141 .hlh-dropdown__meta {
3372                display: flex; flex-direction: column; gap: 2px; min-width: 0;
3373            }
3374            #hot-left-hero-98141 .hlh-dropdown__name {
3375                font-size: 13px; font-weight: 700; color: var(--hlh-ink); line-height: 1.25;
3376            }
3377            #hot-left-hero-98141 .hlh-dropdown__sub {
3378                display: inline-flex; align-items: center; gap: 4px;
3379                font-size: 11px; color: var(--hlh-mute); font-weight: 600;
3380            }
3381            #hot-left-hero-98141 .hlh-dropdown__sub svg { width: 11px; height: 11px; }
3382            #hot-left-hero-98141 .hlh-dropdown__price {
3383                font-size: 13px; font-weight: 800; white-space: nowrap;
3384                background-image: var(--hlh-grad);
3385                -webkit-background-clip: text; background-clip: text;
3386                -webkit-text-fill-color: transparent;
3387            }
3388
3389            #hot-left-hero-98141 .hlh-dropdown__foot {
3390                display: flex; align-items: center; justify-content: space-between;
3391                padding: 10px 14px;
3392                background: var(--hlh-soft);
3393                border-top: 1px solid var(--hlh-line);
3394                font-size: 12px; font-weight: 700; color: var(--hlh-ink-2);
3395            }
3396            #hot-left-hero-98141 .hlh-dropdown__foot-total {
3397                font-size: 14px; font-weight: 800;
3398                background-image: var(--hlh-grad);
3399                -webkit-background-clip: text; background-clip: text;
3400                -webkit-text-fill-color: transparent;
3401            }
3402            #hot-left-hero-98141 .hlh-dropdown__action {
3403                padding: 10px 12px 12px;
3404                border-top: 1px solid var(--hlh-line);
3405                background: #fff;
3406            }
3407            #hot-left-hero-98141 .hlh-btn--in-dropdown {
3408                margin: 0;
3409                animation: none;
3410                box-shadow: 0 6px 16px rgba(234, 102, 41, .22);
3411            }
3412            #hot-left-hero-98141 .hlh-btn--in-dropdown::before,
3413            #hot-left-hero-98141 .hlh-btn--in-dropdown::after {
3414                display: none;
3415            }
3416            #hot-left-hero-98141 .hlh-dropdown__see-more {
3417                display: block;
3418                margin-top: 10px;
3419                padding: 9px 14px;
3420                text-align: center;
3421                font-size: 13px;
3422                font-weight: 700;
3423                color: #fff;
3424                background: var(--hlh-ink);
3425                border-radius: 8px;
3426                text-decoration: none;
3427                transition: background .2s ease, transform .15s ease;
3428            }
3429            #hot-left-hero-98141 .hlh-dropdown__see-more:hover {
3430                background: var(--hlh-ink-2);
3431                transform: translateY(-1px);
3432            }
3433
3434            /* Selected chips below trigger */
3435            #hot-left-hero-98141 .hlh-chips {
3436                display: flex; flex-wrap: wrap; gap: 5px;
3437                margin: 0 0 10px;
3438            }
3439            #hot-left-hero-98141 .hlh-chips:empty { display: none; }
3440            #hot-left-hero-98141 .hlh-chip {
3441                display: inline-flex; align-items: center; gap: 5px;
3442                font-size: 11.5px; font-weight: 700; color: var(--hlh-ink);
3443                padding: 4px 4px 4px 9px; border-radius: 999px;
3444                background: #fff;
3445                border: 1px solid rgba(234,102,41,.35);
3446                box-shadow: 0 1px 2px rgba(15,17,21,.04);
3447            }
3448            #hot-left-hero-98141 .hlh-chip__x {
3449                width: 16px; height: 16px; border-radius: 50%;
3450                display: inline-flex; align-items: center; justify-content: center;
3451                background: #f3f4f6; color: #525866; border: 0; cursor: pointer; padding: 0;
3452                font-size: 12px; line-height: 1;
3453                transition: background .15s ease, color .15s ease;
3454            }
3455            #hot-left-hero-98141 .hlh-chip__x:hover { background: var(--hlh-red); color: #fff; }
3456
3457            #hot-left-hero-98141 .hlh-dropdown__item--versioned .hlh-dropdown__sub--hint {
3458                color: var(--hlh-orange);
3459                font-weight: 600;
3460            }
3461            #hot-left-hero-98141 .hlh-dropdown__price--pending {
3462                color: var(--hlh-mute);
3463                font-weight: 600;
3464            }
3465
3466            /* Version picker — portaled to body so it centers on the viewport (not clipped by hero/transform parents) */
3467            body >
3467 .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] {
3468                --hlh-ink: #0f1115;
3469                --hlh-mute: #6b7280;
3470                --hlh-line: rgba(15,17,21,.08);
3471                --hlh-orange: #ea6629;
3472                --hlh-red: #ea2a29;
3473                position: fixed;
3474                inset: 0;
3475                z-index: 999999;
3476                display: flex;
3477                align-items: center;
3478                justify-content: center;
3479                padding: 20px;
3480                box-sizing: border-box;
3481                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
3482            }
3483            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"][hidden] {
3484                display: none !important;
3485            }
3486            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__backdrop {
3487                position: fixed;
3488                inset: 0;
3489                background: rgba(15, 17, 21, .45);
3490            }
3491            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__panel {
3492                position: relative;
3493                z-index: 1;
3494                width: min(420px, calc(100vw - 40px));
3495                max-height: min(80vh, 520px);
3496                overflow: auto;
3497                background: #fff;
3498                border-radius: 14px;
3499                padding: 18px 18px 14px;
3500                box-shadow: 0 24px 60px rgba(15, 17, 21, .22);
3501            }
3502            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__close {
3503                position: absolute;
3504                top: 10px;
3505                right: 12px;
3506                border: 0;
3507                background: transparent;
3508                font-size: 22px;
3509                line-height: 1;
3510                color: var(--hlh-mute);
3511                cursor: pointer;
3512            }
3513            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__title {
3514                margin: 0 28px 6px 0;
3515                font-size: 1.05rem;
3516                font-weight: 800;
3517                color: var(--hlh-ink);
3518            }
3519            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__lede {
3520                margin: 0 0 12px;
3521                font-size: 12.5px;
3522                color: var(--hlh-mute);
3523            }
3524            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__list {
3525                list-style: none;
3526                margin: 0;
3527                padding: 0;
3528                display: flex;
3529                flex-direction: column;
3530                gap: 8px;
3531            }
3532            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option {
3533                display: flex;
3534                align-items: center;
3535                justify-content: space-between;
3536                gap: 12px;
3537                width: 100%;
3538                padding: 12px 14px;
3539                border: 1.5px solid var(--hlh-line);
3540                border-radius: 12px;
3541                background: #fff;
3542                font-family: inherit;
3543                text-align: left;
3544                cursor: pointer;
3545                transition: border-color .2s ease, box-shadow .2s ease;
3546            }
3547            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option:hover {
3548                border-color: var(--hlh-orange);
3549                box-shadow: 0 4px 14px -8px rgba(234, 102, 41, .45);
3550            }
3551            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-meta {
3552                display: flex;
3553                flex-direction: column;
3554                gap: 3px;
3555                min-width: 0;
3556            }
3557            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-label {
3558                font-size: 13.5px;
3559                font-weight: 700;
3560                color: var(--hlh-ink);
3561            }
3562            body >
3562 .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-sub {
3563                font-size: 11.5px;
3564                color: var(--hlh-mute);
3565            }
3566            body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-price {
3567                font-size: 14px;
3568                font-weight: 800;
3569                color: var(--hlh-red);
3570                white-space: nowrap;
3571            }
3572
3573            #hot-left-hero-98141 .hlh-btn {
3574                position: relative;
3575                display: inline-flex; align-items: center; justify-content: center; gap: 8px;
3576                width: 100%;
3577                border: 0;
3578                border-radius: 12px;
3579                padding: 13px 18px;
3580                font-size: 14.5px;
3581                font-weight: 800;
3582                letter-spacing: .01em;
3583                color: #fff;
3584                text-decoration: none;
3585                cursor: pointer;
3586                background-image: var(--hlh-grad);
3587                background-size: 200% 100%;
3588                background-position: 0% 50%;
3589                transition: background-position .35s ease, transform .15s ease;
3590                font-family: inherit;
3591                text-shadow: 0 1px 0 rgba(0,0,0,.15);
3592            }
3593            #hot-left-hero-98141 .hlh-btn:hover {
3594                background-position: 100% 50%;
3595                transform: translateY(-1px);
3596            }
3597            #hot-left-hero-98141 .hlh-btn:active { transform: translateY(0); }
3598            #hot-left-hero-98141 .hlh-btn__flame svg { width: 16px; height: 16px; }
3599            #hot-left-hero-98141 .hlh-btn__arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }
3600            #hot-left-hero-98141 .hlh-btn:hover .hlh-btn__arrow svg { transform: translateX(3px); }
3601
3602            /* Layered "fire" glow */
3603            #hot-left-hero-98141 .hlh-btn--fire {
3604                animation: hlhFireGlow 2.6s ease-in-out infinite;
3605            }
3606            #hot-left-hero-98141 .hlh-btn--fire::before,
3607            #hot-left-hero-98141 .hlh-btn--fire::after {
3608                content: ""; position: absolute; inset: -2px;
3609                border-radius: inherit; pointer-events: none;
3610                z-index: -1;
3611            }
3612            #hot-left-hero-98141 .hlh-btn--fire::before {
3613                background: var(--hlh-grad);
3614                filter: blur(14px); opacity: .55;
3615                animation: hlhFireFlicker 3.2s ease-in-out infinite;
3616            }
3617            #hot-left-hero-98141 .hlh-btn--fire::after {
3618                inset: -6px;
3619                background: radial-gradient(closest-side, rgba(234,102,41,.45), transparent 70%);
3620                filter: blur(16px); opacity: .35;
3621                animation: hlhFireFlicker 4.5s ease-in-out infinite reverse;
3622            }
3623            @keyframes hlhFireGlow {
3624                0%, 100% {
3625                    box-shadow:
3626                        0 0 0 0 rgba(234,42,41,.22),
3627                        0 6px 18px rgba(229,145,57,.22),
3628                        0 10px 28px rgba(234,102,41,.18);
3629                }
3630                50% {
3631                    box-shadow:
3632                        0 0 0 2px rgba(234,42,41,.30),
3633                        0 8px 24px rgba(229,145,57,.34),
3634                        0 14px 38px rgba(234,102,41,.32);
3635                }
3636            }
3637            @keyframes hlhFireFlicker {
3638                0%, 100% { opacity: .35; transform: scale(1); }
3639                40%      { opacity: .55; transform: scale(1.02); }
3640                60%      { opacity: .42; transform: scale(.99); }
3641            }
3642
3643            #hot-left-hero-98141 .hlh-panel[data-panel="individual"] .hlh-btn--fire {
3644                margin-bottom: 6px;
3645            }
3646            #hot-left-hero-98141 .hlh-disclosures-link {
3647                margin: 14px 0 0;
3648                font-size: 13px;
3649                line-height: 1.5;
3650                color: var(--hlh-mute);
3651            }
3652            #hot-left-hero-98141 .hlh-disclosures-link a {
3653                color: #E8590C;
3654                font-weight: 700;
3655                text-decoration: underline;
3656                text-underline-offset: 2px;
3657            }
3658            #hot-left-hero-98141 .hlh-disclosures-link a:hover { color: #CC2200; }
3659            #hot-left-hero-98141 .hlh-subline {
3660                margin-top: 12px;
3661                font-size: 11.5px;
3662                color: var(--hlh-mute);
3663                text-align: center;
3664                line-height: 1.35;
3665            }
3666            #hot-left-hero-98141 .hlh-subline--refer {
3667                position: relative;
3668                display: flex;
3669                flex-direction: column;
3670                align-items: center;
3671                justify-content: center;
3672                gap: 4px;
3673                margin: 10px 0 4px;
3674                padding: 12px 16px;
3675                text-align: center;
3676                background: rgba(34, 197, 94, .07);
3677                border: 1px solid rgba(20, 130, 63, .2);
3678                border-radius: 10px;
3679            }
3680            #hot-left-hero-98141 .hlh-subline__refer-lede {
3681                display: inline-flex;
3682                align-items: center;
3683                justify-content: center;
3684                gap: 7px;
3685                max-width: 100%;
3686                font-size: 12.5px;
3687                font-weight: 600;
3688                line-height: 1.35;
3689                color: var(--hlh-ink-2);
3690                letter-spacing: .01em;
3691            }
3692            #hot-left-hero-98141 .hlh-subline__refer-icon {
3693                display: inline-flex;
3694                align-items: center;
3695                justify-content: center;
3696                flex: 0 0 auto;
3697                width: 22px;
3698                height: 22px;
3699                border-radius: 50%;
3700                background: rgba(34, 197, 94, .14);
3701                color: #14823f;
3702            }
3703            #hot-left-hero-98141 .hlh-subline__refer-icon svg {
3704                width: 12px;
3705                height: 12px;
3706            }
3707            #hot-left-hero-98141 .hlh-subline__refer-amount {
3708                display: block;
3709                font-size: 20px;
3710                font-weight: 800;
3711                line-height: 1.1;
3712                letter-spacing: -.03em;
3713                color: #14823f;
3714                font-variant-numeric: tabular-nums;
3715            }
3716            #hot-left-hero-98141 .hlh-refer-trigger {
3717                appearance: none;
3718                -webkit-appearance: none;
3719                outline: none;
3720                cursor: pointer;
3721                transition: box-shadow .2s ease, border-color .2s ease;
3722                text-align: center;
3723                font-family: inherit;
3724                font-size: inherit;
3725                line-height: inherit;
3726                width: 100%;
3727                color: inherit;
3728                overflow: visible;
3729            }
3730            #hot-left-hero-98141 .hlh-refer-trigger:hover,
3731            #hot-left-hero-98141 .hlh-refer-trigger:focus-within {
3732                border-color: rgba(20, 130, 63, .45);
3733                box-shadow: 0 4px 14px -6px rgba(20, 130, 63, .25);
3734                z-index: 100;
3735            }
3736            #hot-left-hero-98141 .hlh-refer-info {
3737                position: absolute;
3738                top: 8px;
3739                right: 10px;
3740                display: inline-flex;
3741                align-items: center;
3742                justify-content: center;
3743                color: #6b7280;
3744                cursor: help;
3745                transition: color .2s ease;
3746            }
3747            #hot-left-hero-98141 .hlh-refer-info:hover,
3748            #hot-left-hero-98141 .hlh-refer-info:focus {
3749                color: #14823f;
3750                z-index: 9999;
3751            }
3752            #hot-left-hero-98141 .hlh-refer-info__tooltip {
3753                position: absolute;
3754                bottom: calc(100% + 10px);
3755                right: -6px;
3756                width: 250px;
3757                padding: 11px 14px;
3758                font-size: 12px;
3759                font-weight: 500;
3760                line-height: 1.5;
3761                color: #fff;
3762                background: #1f2937;
3763                border-radius: 9px;
3764                box-shadow: 0 10px 30px -6px rgba(0,0,0,.35);
3765                opacity: 0;
3766                visibility: hidden;
3767                transform: translateY(4px);
3768                transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
3769                pointer-events: none;
3770                text-align: left;
3771                z-index: 9999;
3772            }
3773            #hot-left-hero-98141 .hlh-refer-info__tooltip::after {
3774                content: "";
3775                position: absolute;
3776                top: 100%;
3777                right: 10px;
3778                border: 5px solid transparent;
3779                border-top-color: #1f2937;
3780            }
3781            #hot-left-hero-98141 .hlh-refer-info:hover .hlh-refer-info__tooltip,
3782            #hot-left-hero-98141 .hlh-refer-info:focus .hlh-refer-info__tooltip {
3783                opacity: 1;
3784                visibility: visible;
3785                transform: translateY(0);
3786            }
3787
3788            body >
3788 .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] {
3789                --hlh-ink: #0f1115;
3790                --hlh-mute: #6b7280;
3791                --hlh-line: rgba(15,17,21,.08);
3792                position: fixed;
3793                inset: 0;
3794                z-index: 999999;
3795                display: flex;
3796                align-items: center;
3797                justify-content: center;
3798                padding: 20px;
3799                box-sizing: border-box;
3800                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
3801                line-height: 1.5;
3802            }
3803            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] *,
3804            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] *::before,
3805            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] *::after {
3806                box-sizing: border-box;
3807            }
3808            .hlh-refer-modal--portal[hidden] {
3809                display: none !important;
3810            }
3811            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"][hidden] {
3812                display: none !important;
3813            }
3814            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__backdrop {
3815                position: fixed;
3816                inset: 0;
3817                background: rgba(15, 17, 21, .5);
3818                backdrop-filter: blur(2px);
3819                -webkit-backdrop-filter: blur(2px);
3820            }
3821            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__panel {
3822                position: relative;
3823                z-index: 1;
3824                width: min(440px, calc(100vw - 40px));
3825                max-height: min(85vh, 640px);
3826                overflow-y: auto;
3827                overflow-x: hidden;
3828                background: #fff;
3829                border-radius: 16px;
3830                padding: 28px 24px 22px;
3831                box-shadow: 0 24px 60px rgba(15, 17, 21, .25), 0 0 0 1px rgba(15, 17, 21, .05);
3832            }
3833            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__close {
3834                position: absolute;
3835                top: 14px;
3836                right: 16px;
3837                border: 0;
3838                background: transparent;
3839                font-size: 24px;
3840                line-height: 1;
3841                color: var(--hlh-mute);
3842                cursor: pointer;
3843                padding: 4px;
3844                border-radius: 4px;
3845                transition: background .15s ease;
3846            }
3847            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__close:hover {
3848                background: rgba(0,0,0,.05);
3849            }
3850            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__title {
3851                margin: 0 32px 6px 0;
3852                padding: 0;
3853                font-size: 1.2rem;
3854                font-weight: 800;
3855                color: var(--hlh-ink);
3856                line-height: 1.3;
3857            }
3858            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__lede {
3859                margin: 0 0 20px;
3860                padding: 0;
3861                font-size: 13px;
3862                color: var(--hlh-mute);
3863                line-height: 1.4;
3864            }
3865            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__form {
3866                display: block;
3867            }
3868            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__fieldset {
3869                border: 0;
3870                padding: 0;
3871                margin: 0 0 18px;
3872                min-width: 0;
3873            }
3874            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__legend {
3875                display: block;
3876                width: 100%;
3877                font-size: 13.5px;
3878                font-weight: 700;
3879                color: var(--hlh-ink);
3880                margin: 0 0 12px;
3881                padding: 0 0 8px;
3882                border-bottom: 1px solid rgba(15,17,21,.06);
3883            }
3884            body >
3884 .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__label {
3885                display: block;
3886                margin: 0 0 12px;
3887                padding: 0;
3888            }
3889            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__label span {
3890                display: block;
3891                font-size: 12px;
3892                font-weight: 600;
3893                color: var(--hlh-ink);
3894                margin: 0 0 5px;
3895                padding: 0;
3896            }
3897            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__label abbr {
3898                color: #ea2a29;
3899                text-decoration: none;
3900            }
3901            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__input {
3902                display: block;
3903                width: 100%;
3904                padding: 10px 12px;
3905                font-size: 14px;
3906                font-family: inherit;
3907                line-height: 1.4;
3908                border: 1.5px solid rgba(15, 17, 21, .15);
3909                border-radius: 8px;
3910                background: #fafafa;
3911                color: var(--hlh-ink);
3912                transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
3913                outline: none;
3914                margin: 0;
3915                appearance: none;
3916                -webkit-appearance: none;
3917            }
3918            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__input:focus {
3919                border-color: #14823f;
3920                box-shadow: 0 0 0 3px rgba(20, 130, 63, .1);
3921                background: #fff;
3922            }
3923            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit {
3924                --hlh-grad: linear-gradient(270deg, #e59139, #ea2a29, #ea6629);
3925                position: relative;
3926                display: inline-flex;
3927                align-items: center;
3928                justify-content: center;
3929                gap: 8px;
3930                width: 100%;
3931                margin-top: 8px;
3932                border: 0;
3933                border-radius: 12px;
3934                padding: 14px 18px;
3935                font-size: 14.5px;
3936                font-weight: 800;
3937                letter-spacing: .01em;
3938                color: #fff;
3939                text-decoration: none;
3940                cursor: pointer;
3941                background-image: var(--hlh-grad);
3942                background-size: 200% 100%;
3943                background-position: 0% 50%;
3944                transition: background-position .35s ease, transform .15s ease;
3945                font-family: inherit;
3946                text-shadow: 0 1px 0 rgba(0,0,0,.15);
3947                box-shadow: 0 6px 18px rgba(229,145,57,.22), 0 10px 28px rgba(234,102,41,.18);
3948            }
3949            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit:hover {
3950                background-position: 100% 50%;
3951                transform: translateY(-1px);
3952            }
3953            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit:disabled {
3954                opacity: .65;
3955                cursor: not-allowed;
3956                transform: none;
3957            }
3958            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit .hlh-btn__label {
3959                font-size: inherit;
3960                font-weight: inherit;
3961                color: inherit;
3962            }
3963            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit .hlh-btn__arrow svg {
3964                width: 16px;
3965                height: 16px;
3966                transition: transform .2s ease;
3967            }
3968            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit:hover .hlh-btn__arrow svg {
3969                transform: translateX(3px);
3970            }
3971            body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__success {
3972                margin: 16px 0 0;
3973                padding: 14px 16px;
3974                font-size: 13.5px;
3975                font-weight: 600;
3976                color: #14823f;
3977                background: rgba(34, 197, 94, .08);
3978                border: 1px solid rgba(20, 130, 63, .2);
3979                border-radius: 10px;
3980                text-align: center;
3981                line-height: 1.4;
3982            }
3983
3984            #hot-left-hero-98141 .hlh-pillars {
3985                display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
3986                margin: 4px 0 14px;
3987            }
3988            #hot-left-hero-98141 .hlh-pillar {
3989                display: flex; flex-direction: column; gap: 2px;
3990                padding: 10px 12px;
3991                background: #fff;
3992                border: 1px solid var(--hlh-line);
3993                border-radius: 10px;
3994                position: relative;
3995                overflow: hidden;
3996            }
3997            #hot-left-hero-98141 .hlh-pillar::before {
3998                content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
3999                background: var(--hlh-grad);
4000            }
4001            #hot-left-hero-98141 .hlh-pillar strong {
4002                font-size: 12.5px; font-weight: 800; color: var(--hlh-ink);
4003            }
4004            #hot-left-hero-98141 .hlh-pillar small {
4005                font-size: 11px; color: var(--hlh-mute);
4006            }
4007
4008            #hot-left-hero-98141 .hlh-cross-link {
4009                font-size: 12px; color: var(--hlh-ink-2);
4010                margin-top: 12px;
4011            }
4012            #hot-left-hero-98141 .hlh-cross-link a {
4013                font-weight: 800;
4014                background-image: var(--hlh-grad);
4015                -webkit-background-clip: text; background-clip: text;
4016                -webkit-text-fill-color: transparent;
4017                text-decoration: none;
4018            }
4019            #hot-left-hero-98141 .hlh-cross-link a:hover { text-decoration: underline; -webkit-text-decoration-color: var(--hlh-orange); }
4020
4021            @media (max-width: 480px) {
4022                #hot-left-hero-98141.hot-left-hero { padding: 14px; border-radius: 14px; }
4023                #hot-left-hero-98141 .hlh-pillars { grid-template-columns: 1fr; }
4024                #hot-left-hero-98141 .hlh-feature-row { gap: 4px 12px; font-size: 12px; }
4025            }
4026            @media (prefers-reduced-motion: reduce) {
4027                #hot-left-hero-98141 .hlh-btn--fire,
4028                #hot-left-hero-98141 .hlh-btn--fire::before,
4029                #hot-left-hero-98141 .hlh-btn--fire::after,
4030                #hot-left-hero-98141 .hlh-pulse-dot { animation: none !important; }
4031            }
4032        </style>
4033
4034        
4034<script>
4035            (function() {
4036                const root = document.getElementById('hot-left-hero-98141');
4037                if (!root) { return; }
4038
4039                const switchEl = root.querySelector('.hlh-switch');
4040                const switchButtons = root.querySelectorAll('.hlh-switch__btn');
4041                const panels = root.querySelectorAll('.hlh-panel');
4042                const syncAccount = root.getAttribute('data-sync-account') === '1';
4043
4044                function setHeroMode(mode) {
4045                    switchButtons.forEach(function(btn) { btn.classList.remove('is-active'); });
4046                    panels.forEach(function(panel) { panel.classList.remove('is-active'); });
4047                    const activeBtn = root.querySelector('.hlh-switch__btn[data-mode="' + mode + '"]');
4048                    if (activeBtn) { activeBtn.classList.add('is-active'); }
4049                    if (switchEl) { switchEl.setAttribute('data-active', mode); }
4050                    const target = root.querySelector('.hlh-panel[data-panel="' + mode + '"]');
4051                    if (target) { target.classList.add('is-active'); }
4052                    if (syncAccount) {
4053                        document.body.setAttribute('data-account', mode);
4054                        document.dispatchEvent(new CustomEvent('hot-left-hero-account-mode', { detail: { mode: mode } }));
4055                    }
4056                }
4057
4058                switchButtons.forEach(function(button) {
4059                    button.addEventListener('click', function() {
4060                        setHeroMode(button.getAttribute('data-mode'));
4061                    });
4062                });
4063
4064                if (syncAccount) {
4065                    root.querySelectorAll('.hlh-cross-link a').forEach(function(link) {
4066                        link.addEventListener('click', function(e) {
4067                            e.preventDefault();
4068                            const panel = link.closest('.hlh-panel');
4069                            const targetMode = panel && panel.getAttribute('data-panel') === 'individual'
4070                                ? 'company'
4071                                : 'individual';
4072                            setHeroMode(targetMode);
4073                        });
4074                    });
4075                }
4076
4077                const defaultMode = root.getAttribute('data-default-mode') || 'individual';
4078                setHeroMode(defaultMode);
4079
4080                // Rotating testimonials — one independent interval per block.
4081                root.querySelectorAll('.hlh-testimonial').forEach(function(block) {
4082                    var items = block.querySelectorAll('.hlh-testimonial__item');
4083                    if (items.length <= 1) { return; }
4084                    var idx = 0;
4085                    window.setInterval(function() {
4086                        items[idx].classList.remove('is-active');
4087                        idx = (idx + 1) % items.length;
4088                        items[idx].classList.add('is-active');
4089                    }, 3500);
4090                });
4091
4092                // Rotating ticker — one independent interval per ticker block.
4093                root.querySelectorAll('.hlh-ticker').forEach(function(ticker) {
4094                    var items = ticker.querySelectorAll('.hlh-ticker__item');
4095                    if (items.length <= 1) { return; }
4096                    var ti = 0;
4097                    window.setInterval(function() {
4098                        items[ti].classList.remove('is-active');
4099                        ti = (ti + 1) % items.length;
4100                        items[ti].classList.add('is-active');
4101                    }, 2200);
4102                });
4103
4104                // Quick Start dropdown — open/close, version modal, chips, cart
4105                const dropdown   = root.querySelector('.hlh-dropdown');
4106                const trigger    = root.querySelector('.hlh-dropdown__trigger');
4107                const triggerCnt = root.querySelector('.hlh-dropdown__count');
4108                const footCount  = root.querySelector('.hlh-dropdown__foot-count');
4109                const footTotal  = root.querySelector('.hlh-dropdown__foot-total');
4110                const chipsWrap  = root.querySelector('.hlh-chips');
4111                const checks     = root.querySelectorAll('.hlh-dropdown input[type="checkbox"]');
4112                const versionModal = root.querySelector('.hlh-version-modal');
4113                const versionTitle = versionModal ? versionModal.querySelector('.hlh-version-modal__title') : null;
4114                const versionList  = versionModal ? versionModal.querySelector('.hlh-version-modal__list') : null;
4115                let activeVersionInput = null;
4116                let bodyScrollLock = '';
4117
4118                if (versionModal && versionModal.parentNode !== document.body) {
4119                    document.body.appendChild(versionModal);
4120                }
4121
4122                function setOpen(open) {
4123                    if (!dropdown || !trigger) return;
4124                    dropdown.setAttribute('data-open', open ? 'true' : 'false');
4125                    trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
4126                    if (open) {
4127                        document.body.classList.add('hlh-qs-dropdown-open');
4128                    } else {
4129                        document.body.classList.remove('hlh-qs-dropdown-open');
4130                    }
4131                }
4132
4133                function closeVersionModal() {
4134                    if (!versionModal) return;
4135                    versionModal.hidden = true;
4136                    activeVersionInput = null;
4137                    if (versionList) versionList.innerHTML = '';
4138                    // Always restore. The saved value is normally '' (no inline
4139                    // overflow set), and the previous `!== ''` guard skipped the
4140                    // restore in exactly that case -- leaving overflow:hidden
4141                    // stuck on <body>, so the page could not scroll after the
4142                    // version modal closed. Assigning '' clears the inline
4143                    // style, which is the correct restore.
4144                    document.body.style.overflow = bodyScrollLock;
4145                    bodyScrollLock = '';
4146                }
4147
4148                function openVersionModal(input) {
4149                    if (!versionModal || !versionList || !input) return;
4150                    let versions = [];
4151                    try {
4152                        versions = JSON.parse(input.dataset.versions || '[]');
4153                    } catch (err) {
4154                        versions = [];
4155                    }
4156                    if (!versions.length) return;
4157
4158                    activeVersionInput = input;
4159                    const familyName = input.dataset.familyName || input.dataset.name || 'Course';
4160                    if (versionTitle) {
4161                        versionTitle.textContent = familyName;
4162                    }
4163                    versionList.innerHTML = '';
4164
4165                    versions.forEach(function(ver) {
4166                        const btn = document.createElement('button');
4167                        btn.type = 'button';
4168                        btn.className = 'hlh-version-modal__option';
4169                        const label = ver.label || ver.name || ('Course ' + ver.id);
4170                        const time  = ver.time || '';
4171                        const price = ver.price || '';
4172                        btn.innerHTML =
4173                            '<span class="hlh-version-modal__option-meta">' +
4174                                '<span class="hlh-version-modal__option-label"></span>' +
4175                                '<span class="hlh-version-modal__option-sub"></span>' +
4176                            '</span>' +
4177                            '<span class="hlh-version-modal__option-price"></span>';
4178                        btn.querySelector('.hlh-version-modal__option-label').textContent = label;
4179                        btn.querySelector('.hlh-version-modal__option-sub').textContent = time;
4180                        btn.querySelector('.hlh-version-modal__option-price').textContent = price;
4181                        btn.addEventListener('click', function() {
4182                            applyVersionSelection(input, ver);
4183                            closeVersionModal();
4184                        });
4185                        versionList.appendChild(btn);
4186                    });
4187
4188                    bodyScrollLock = document.body.style.overflow || '';
4189                    document.body.style.overflow = 'hidden';
4190                    versionModal.hidden = false;
4191                }
4192
4193                function resetVersionedRow(input) {
4194                    const row = input.closest('.hlh-dropdown__item');
4195                    input.value = '';
4196                    input.dataset.lmsId = '';
4197                    input.dataset.price = '0';
4198                    input.dataset.versionLabel = '';
4199                    input.removeAttribute('value');
4200                    if (row) {
4201                        const priceEl = row.querySelector('.hlh-dropdown__price');
4202                        const subEl   = row.querySelector('.hlh-dropdown__sub');
4203                        if (priceEl) {
4204                            priceEl.textContent = '—';
4205                            priceEl.classList.add('hlh-dropdown__price--pending');
4206                        }
4207                        if (subEl) {
4208                            subEl.classList.add('hlh-dropdown__sub--hint');
4209                            const clockSvg = subEl.querySelector('svg');
4210                            subEl.textContent = '';
4211                            if (clockSvg) subEl.appendChild(clockSvg.cloneNode(true));
4212                            subEl.appendChild(document.createTextNode(' Choose version'));
4213                        }
4214                    }
4215                }
4216
4217                function applyVersionSelection(input, ver) {
4218                    const row = input.closest('.hlh-dropdown__item');
4219                    const id  = parseInt(ver.id, 10);
4220                    const priceNum = parseFloat(ver.price_num || ver.price || '0') || 0;
4221                    const label = ver.label || ver.name || '';
4222                    input.dataset.lmsId = String(id);
4223                    input.dataset.price = String(priceNum);
4224                    input.dataset.versionLabel = label;
4225                    input.value = String(id);
4226                    input.checked = true;
4227                    if (row) {
4228                        const priceEl = row.querySelector('.hlh-dropdown__price');
4229                        const subEl   = row.querySelector('.hlh-dropdown__sub');
4230                        if (priceEl) {
4231                            priceEl.textContent = ver.price || ('$' + (priceNum % 1 === 0 ? priceNum.toFixed(0) : priceNum.toFixed(2)));
4232                            priceEl.classList.remove('hlh-dropdown__price--pending');
4233                        }
4234                        if (subEl && ver.time) {
4235                            subEl.classList.remove('hlh-dropdown__sub--hint');
4236                            const clockSvg = subEl.querySelector('svg');
4237                            subEl.textContent = '';
4238                            if (clockSvg) subEl.appendChild(clockSvg.cloneNode(true));
4239                            subEl.appendChild(document.createTextNode(' ' + ver.time));
4240                        }
4241                    }
4242                    update();
4243                }
4244
4245                function isVersioned(input) {
4246                    return input && input.dataset.type === 'versioned';
4247                }
4248
4249                function chipLabel(input) {
4250                    const base = input.dataset.familyName || input.dataset.name || 'Course';
4251                    const ver  = input.dataset.versionLabel || '';
4252                    return ver ? (base + ' — ' + ver) : base;
4253                }
4254
4255                if (trigger) {
4256                    trigger.addEventListener('click', function(e) {
4257                        e.preventDefault();
4258                        e.stopPropagation();
4259                        const isOpen = dropdown.getAttribute('data-open') === 'true';
4260                        setOpen(!isOpen);
4261                    });
4262                }
4263
4264                if (dropdown) {
4265                    dropdown.addEventListener('click', function(e) {
4266                        e.stopPropagation();
4267                    });
4268                }
4269
4270                document.addEventListener('click', function(e) {
4271                    if (versionModal && !versionModal.hidden) {
4272                        if (e.target.closest('[data-close="1"]') || e.target.classList.contains('hlh-version-modal__close')) {
4273                            if (activeVersionInput) activeVersionInput.checked = false;
4274                            closeVersionModal();
4275                            update();
4276                            return;
4277                        }
4278                    }
4279                    if (versionModal && !versionModal.hidden) {
4280                        return;
4281                    }
4282                    if (!dropdown || !dropdown.contains(e.target)) {
4283                        setOpen(false);
4284                    }
4285                });
4286
4287                document.addEventListener('keydown', function(e) {
4288                    if (e.key === 'Escape') {
4289                        if (versionModal && !versionModal.hidden) {
4290                            if (activeVersionInput) activeVersionInput.checked = false;
4291                            closeVersionModal();
4292                            update();
4293                            return;
4294                        }
4295                        setOpen(false);
4296                    }
4297                });
4298
4299                function fmtPrice(n) {
4300                    return (n % 1 === 0) ? n.toFixed(0) : n.toFixed(2);
4301                }
4302
4303                function renderChips(selected) {
4304                    if (!chipsWrap) return;
4305                    chipsWrap.innerHTML = '';
4306                    selected.forEach(function(c) {
4307                        const chip = document.createElement('span');
4308                        chip.className = 'hlh-chip';
4309                        chip.textContent = chipLabel(c);
4310
4311                        const x = document.createElement('button');
4312                        x.type = 'button';
4313                        x.className = 'hlh-chip__x';
4314                        x.setAttribute('aria-label', 'Remove ' + chipLabel(c));
4315                        x.innerHTML = '\u00D7';
4316                        x.addEventListener('click', function() {
4317                            if (isVersioned(c)) resetVersionedRow(c);
4318                            c.checked = false;
4319                            update();
4320                        });
4321                        chip.appendChild(x);
4322                        chipsWrap.appendChild(chip);
4323                    });
4324                }
4325
4326                function update() {
4327                    let count = 0, total = 0;
4328                    const selected = [];
4329                    checks.forEach(function(c) {
4330                        if (!c.checked) return;
4331                        if (isVersioned(c) && !c.dataset.lmsId) {
4332                            c.checked = false;
4333                            return;
4334                        }
4335                        count++;
4336                        total += parseFloat(c.dataset.price || '0') || 0;
4337                        selected.push(c);
4338                    });
4339                    const dollars = fmtPrice(total);
4340
4341                    if (triggerCnt) {
4342                        triggerCnt.textContent = count === 0 ? '0 selected' : (count + ' · $' + dollars);
4343                        triggerCnt.setAttribute('data-empty', count === 0 ? 'true' : 'false');
4344                    }
4345                    if (footCount) {
4346                        footCount.textContent = count + (count === 1 ? ' course selected' : ' courses selected');
4347                    }
4348                    if (footTotal) {
4349                        footTotal.textContent = '$' + dollars;
4350                    }
4351                    renderChips(selected);
4352                }
4353
4354                checks.forEach(function(c) {
4355                    c.addEventListener('change', function() {
4356                        if (isVersioned(c)) {
4357                            if (c.checked && !c.dataset.lmsId) {
4358                                c.checked = false;
4359                                openVersionModal(c);
4360                                return;
4361                            }
4362                            if (!c.checked) {
4363                                resetVersionedRow(c);
4364                            }
4365                        }
4366                        update();
4367                    });
4368                    if (isVersioned(c)) {
4369                        const item = c.closest('.hlh-dropdown__item--versioned');
4370                        if (item) {
4371                            item.addEventListener('click', function(e) {
4372                                if (e.target === c) return;
4373                                e.preventDefault();
4374                                e.stopPropagation();
4375                                openVersionModal(c);
4376                            });
4377                        }
4378                    }
4379                });
4380                update();
4381
4382                const preselectId = root.getAttribute('data-preselect-lms-id');
4383                if (preselectId) {
4384                    checks.forEach(function(c) {
4385                        if (isVersioned(c)) {
4386                            let versions = [];
4387                            try {
4388                                versions = JSON.parse(c.dataset.versions || '[]');
4389                            } catch (_) {
4390                                versions = [];
4391                            }
4392                            const ver = versions.find(function(v) {
4393                                return String(v.id) === String(preselectId);
4394                            });
4395                            if (ver) {
4396                                applyVersionSelection(c, ver);
4397                            }
4398                            return;
4399                        }
4400                        const lmsId = c.dataset.lmsId || c.value || '';
4401                        if (String(lmsId).split(',').indexOf(String(preselectId)) !== -1) {
4402                            c.checked = true;
4403                        }
4404                    });
4405                    update();
4406                }
4407
4408                // Referral modal
4409                const referInfo = root.querySelector('.hlh-refer-info');
4410                const referModal = root.querySelector('.hlh-refer-modal');
4411                const referTrigger = root.querySelector('.hlh-refer-trigger');
4412                let referScrollLock = '';
4413
4414                if (referModal && referModal.parentNode !== document.body) {
4415                    document.body.appendChild(referModal);
4416                }
4417
4418                function openReferModal() {
4419                    if (!referModal) return;
4420                    referScrollLock = document.body.style.overflow || '';
4421                    document.body.style.overflow = 'hidden';
4422                    referModal.hidden = false;
4423                }
4424
4425                function closeReferModal() {
4426                    if (!referModal) return;
4427                    referModal.hidden = true;
4428                    // Same unconditional restore as closeVersionModal().
4429                    document.body.style.overflow = referScrollLock;
4430                    referScrollLock = '';
4431                }
4432
4433                if (referTrigger) {
4434                    referTrigger.addEventListener('click', function(e) {
4435                        if (referInfo && referInfo.contains(e.target)) {
4436                            e.stopPropagation();
4437                            return;
4438                        }
4439                        openReferModal();
4440                    });
4441                }
4442
4443                if (referModal) {
4444                    referModal.addEventListener('click', function(e) {
4445                        if (e.target.closest('[data-refer-close="1"]') || e.target.classList.contains('hlh-refer-modal__close')) {
4446                            closeReferModal();
4447                        }
4448                    });
4449
4450                    var referSubmit = referModal.querySelector('.hlh-refer-modal__submit');
4451                    if (referSubmit) {
4452                        referSubmit.addEventListener('click', function() {
4453                            var inputs = referModal.querySelectorAll('.hlh-refer-modal__input[required]');
4454                            var valid = true;
4455                            inputs.forEach(function(inp) {
4456                                if (!inp.value.trim()) { valid = false; inp.focus(); }
4457                                else if (inp.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inp.value.trim())) {
4458                                    valid = false; inp.focus();
4459                                }
4460                            });
4461                            if (!valid) return;
4462
4463                            var data = {};
4464                            referModal.querySelectorAll('.hlh-refer-modal__input').forEach(function(inp) {
4465                                data[inp.name] = inp.value.trim();
4466                            });
4467
4468                            var formData = new FormData();
4469                            formData.append('action', 'hlh_submit_referral');
4470                            formData.append('refer_company', data.refer_company || '');
4471                            formData.append('refer_contact', data.refer_contact || '');
4472                            formData.append('refer_phone', data.refer_phone || '');
4473                            formData.append('refer_email', data.refer_email || '');
4474                            formData.append('referrer_name', data.referrer_name || '');
4475                            formData.append('referrer_email', data.referrer_email || '');
4476                            formData.append('referrer_phone', data.referrer_phone || '');
4477
4478                            referSubmit.disabled = true;
4479                            referSubmit.querySelector('.hlh-btn__label').textContent = 'Submitting…';
4480
4481                            fetch('https://homeoftraining.com/wp-admin/admin-ajax.php', {
4482                                method: 'POST',
4483                                body: formData
4484                            }).then(function(r) { return r.json(); }).then(function(res) {
4485                                var success = referModal.querySelector('.hlh-refer-modal__success');
4486                                var formEl  = referModal.querySelector('.hlh-refer-modal__form');
4487                                if (success && formEl) {
4488                                    formEl.querySelectorAll('.hlh-refer-modal__fieldset, .hlh-refer-modal__submit').forEach(function(el) { el.hidden = true; });
4489                                    success.hidden = false;
4490                                }
4491                                setTimeout(function() { closeReferModal(); }, 3000);
4492                            }).catch(function() {
4493                                referSubmit.disabled = false;
4494                                referSubmit.querySelector('.hlh-btn__label').textContent = 'Submit Referral';
4495                                alert('Something went wrong. Please try again.');
4496                            });
4497                        });
4498                    }
4499                }
4500
4501                document.addEventListener('keydown', function(e) {
4502                    if (e.key === 'Escape' && referModal && !referModal.hidden) {
4503                        closeReferModal();
4504                    }
4505                });
4506
4507                function navigateToQuickStart() {
4508                    const picked = Array.prototype.filter.call(checks, function(c) {
4509                        return c.checked && (!isVersioned(c) || c.dataset.lmsId);
4510                    });
4511                    const idSet = new Set();
4512                    picked.forEach(function(c) {
4513                        String(c.dataset.lmsId || c.value || '').split(',').forEach(function(s) {
4514                            const n = parseInt(s.trim(), 10);
4515                            if (n > 0) idSet.add(n);
4516                        });
4517                    });
4518                    let url = 'https://lms.homeoftraining.com/#/pricing?';
4519                    if (idSet.size) {
4520                        url += 'courses=' + encodeURIComponent(Array.from(idSet).join(',')) + '&';
4521                    }
4522                    // Individual Quick Start — without this the LMS pricing
4523                    // page defaults to the Company tab/flow.
4524                    url += 'account_type=individual&';
4525                    url += 'utm_source=hot-landing&utm_medium=hero&utm_campaign=left_hero';
4526                    window.location.assign(url);
4527                }
4528
4529                const form = root.querySelector('.hlh-quick-start');
4530                if (form) {
4531                    form.addEventListener('submit', function(e) {
4532                        e.preventDefault();
4533                        e.stopPropagation();
4534                        navigateToQuickStart();
4535                    });
4536
4537                    form.querySelectorAll('button[type="submit"]').forEach(function(btn
4537) {
4538                        btn.addEventListener('click', function(e) {
4539                            e.stopPropagation();
4540                        });
4541                    });
4542                }
4543            })();
4544        </script>
4544
4545                                            </div>
4546                <div class="hero-visual">
4547                    <div class="hero-video-wrap">
4548                        <video class="hero-video" autoplay muted loop playsinline preload="auto" poster="https://homeoftraining.com/wp-content/uploads/hot-video/hot-hero-poster.jpg" data-vimeo-fallback="1029251829"><source src="https://homeoftraining.com/wp-content/uploads/hot-video/hot-hero.mp4" type="video/mp4"></video>                    </div>
4549                    <div class="cert-float-badge cert-float-1"><div class="cert-float-icon green"><svg width="16" height="16" fill="none" stroke="#28a745" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> 100% Online</div>
4550                    <div class="cert-float-badge cert-float-2"><div class="cert-float-icon orange"><svg width="16" height="16" fill="none" stroke="#ea580c" stroke-width="2" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div> Instant Certificate</div>
4551                    <div class="hero-mini-compliance" aria-label="Compliance certifications">
4552                        <span class="hero-mini-compliance-label">Security &amp; Compliance</span>
4553                        <div class="hero-mini-compliance-row">
4554                            <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/aicpa-soc.png" alt="AICPA SOC">
4555                            <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/soc-noncpa.png" alt="SOC for Service Organizations">
4556                            <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/prescient.png" alt="Prescient Security">
4557                            <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/prescient-soc2.png" alt="SOC 2 Type II">
4558                            <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/hipaa.png" alt="HIPAA Compliant">
4559                        </div>
4560                    </div>
4561                </div>
4562            </div>
4563                </div>
4564    </section>
4565
4566    <!-- Logos Bar — auto-scrolling carousel -->
4567    <div class="logos-bar reveal"><div class="container">
4568        <p class="logos-label">Trusted by 40,000+ locations including</p>
4569        <div class="logos-viewport">
4570            <div class="logos-track">
4571                                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/burgerking.png" alt="Burger King">
4572                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/racetrac.svg" alt="RaceTrac">
4573                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/wingstop.png" alt="Wingstop">
4574                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/mcdonalds.png" alt="McDonald's">
4575                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/firstservice.png" alt="First Service">
4576                                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/burgerking.png" alt="Burger King" aria-hidden="true">
4577                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/racetrac.svg" alt="RaceTrac" aria-hidden="true">
4578                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/wingstop.png" alt="Wingstop" aria-hidden="true">
4579                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/mcdonalds.png" alt="McDonald's" aria-hidden="true">
4580                <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/firstservice.png" alt="First Service" aria-hidden="true">
4581                            </div>
4582        </div>
4583    </div></div>
4584
4585    <!-- Trust Row (Phase 11 — relocated from hero per 5/6 UAT) -->
4586    <section class="trust-row reveal" aria-label="Why learners choose Home of Training"><div class="container">
4587        <ul class="hot-trust-badges trust-row-badges" role="list">
4588                        <li class="hot-trust-badge"><span class="hot-trust-icon" aria-hidden="true">&#9733;</span> Trusted by 100,000+ learners</li>
4589            <li class="hot-trust-badge"><span class="hot-trust-icon" aria-hidden="true">&#128340;</span> Start in under 60 seconds</li>
4590                        <li class="hot-trust-badge"><span class="hot-trust-icon" aria-hidden="true">&#128220;</span> Instant certificate</li>
4591                        <li class="hot-trust-badge hot-trust-badge--lang"><span class="hot-trust-icon" aria-hidden="true">&#127760;</span> Available in multiple languages</li>
4592        </ul>
4593    </div></section>
4594
4595    
4596    
4597    
4598    <!-- Gutenberg Content (What You'll Learn, How It Works, FAQ, etc.) -->
4599    <div class="hot-gutenberg-content">
4600        
4601<div class="wp-block-group learn-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container">
4602<div style="text-align:center" class="reveal"><span class="section-label">Course Content</span></div>
4603<h2 class="section-title reveal">What You&#039;ll Learn</h2>
4604<div class="learn-grid">
4605<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24">
4605<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>ID Verification</h3><p>How to properly check IDs, spot fakes, and verify legal drinking age</p></div></div>
4606<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Signs of Intoxication</h3><p>Recognizing behavioral and physical signs that a patron has had too much</p></div></div>
4607<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Refusal Techniques</h3><p>Professional strategies for cutting off service while maintaining relationships</p></div></div>
4608<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Legal Liability</h3><p>Understanding dram shop laws, personal liability, and legal responsibilities</p></div></div>
4609<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Responsible Service Practices</h3><p>Pacing drinks, offering food and water, creating a safe environment</p></div></div>
4610<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Intervention Strategies</h3><p>How to handle difficult situations including underage attempts and over-service</p></div></div>
4611</div>
4612</div></div></div>
4613
4614
4615<div class="wave-divider white-to-gray"></div>
4616
4617
4618<div class="wp-block-group steps-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container">
4619<div style="text-align:center" class="reveal"><span class="section-label">Simple Process</span></div>
4620<h2 class="section-title reveal">How It Works</h2>
4621<p class="section-subtitle reveal">Three simple steps to your certificate</p>
4622<div class="steps-row">
4623<div class="step reveal-item"><div class="step-number">1</div><h3>Sign Up</h3><p>Create your account and purchase the course. You&#8217;ll get instant access to start learning right away.</p></div>
4624<div class="step reveal-item"><div class="step-number">2</div><h3>Complete the Course</h3><p>Work through the material at your own pace, 24/7, from any device. No deadlines, no pressure.</p></div>
4625<div class="step reveal-item"><div class="step-number">3</div><h3>Get Certified</h3><p>Pass the final assessment and download your certificate immediately. It&#8217;s that simple.</p></div>
4626</div>
4627</div></div></div>
4628
4629
4630<div class="wave-divider gray-to-white"></div>
4631
4632
4633<div class="wp-block-group why-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container">
4634<div style="text-align:center" class="reveal"><span class="section-label">Why Choose Us</span></div>
4635<h2 class="section-title reveal">Why Home of Training?</h2>
4636<p class="section-subtitle reveal">Trusted by businesses across the country since 2010</p>
4637<div class="why-grid">
4638<div class="why-item reveal-item"><div class="why-icon"><svg width="28" height="28" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div><h3>Real Human Support</h3><p>Talk to a real person when you need help. No chatbots, no runaround. We&#8217;re here for you.</p></div>
4639<div class="why-item reveal-item"><div class="why-icon"><svg width="28" height="28" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24">
4639<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div><h3>Trusted by Major Brands</h3><p>Over 40,000 locations nationwide rely on Home of Training for their compliance needs.</p></div>
4640<div class="why-item reveal-item"><div class="why-icon"><svg width="28" height="28" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div><h3>Learn on Any Device</h3><p>Desktop, laptop, tablet, or phone. Our courses work seamlessly wherever you are.</p></div>
4641</div>
4642</div></div></div>
4643
4644
4645<div class="wave-divider gray-to-white"></div>
4646
4647
4648<div class="wp-block-group testimonials-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container">
4649<div style="text-align:center" class="reveal"><span class="section-label">Reviews</span></div>
4650<h2 class="section-title reveal">What People Are Saying</h2>
4651<p class="section-subtitle reveal">Join thousands who&#039;ve earned their certifications with Home of Training</p>
4652<div class="testimonials-grid">
4653<div class="testimonial-card reveal-item"><div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p class="testimonial-text">&quot;Super easy to use. Our entire staff was certified within a week. The support team was incredibly helpful when we had questions.&quot;</p><div class="testimonial-author-row"><div class="testimonial-avatar">JA</div><div class="testimonial-info"><div class="testimonial-name">Jennifer A.</div><div class="testimonial-role">Restaurant Manager, FL</div></div></div></div>
4654<div class="testimonial-card reveal-item"><div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p class="testimonial-text">&quot;We&#039;ve been using Home of Training for years across all our locations. Reliable, affordable, and the real human support makes all the difference.&quot;</p><div class="testimonial-author-row"><div class="testimonial-avatar">AJ</div><div class="testimonial-info"><div class="testimonial-name">Arthur J.</div><div class="testimonial-role">Operations Director</div></div></div></div>
4655<div class="testimonial-card reveal-item"><div class="testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p class="testimonial-text">&quot;I completed the course on my phone during breaks. Got my certificate the same day. Couldn&#039;t have been simpler.&quot;</p><div class="testimonial-author-row"><div class="testimonial-avatar">ML</div><div class="testimonial-info"><div class="testimonial-name">Maria L.</div><div class="testimonial-role">Food Service Worker</div></div></div></div>
4656</div>
4657</div></div></div>
4658
4659
4660<div class="wave-divider white-to-gray"></div>
4661
4662
4663<div class="wp-block-group faq-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container">
4664<div style="text-align:center" class="reveal"><span class="section-label">Got Questions?</span></div>
4665<h2 class="section-title reveal">Frequently Asked Questions</h2>
4666<div class="faq-list">
4667<div class="faq-item reveal-item"><button class="faq-question">Which states accept this training?<span class="faq-chevron"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span></button><div class="faq-answer"><div class="faq-answer-inner">Home of Training is an approved provider of the NY Alcohol Training Awareness Program (ATAP) and our course meets requirements in multiple states. Contact us to confirm coverage for your specific state.</div></div></div>
4668<div class="faq-item reveal-item"><button class="faq-question">Can I train my entire staff at once?<span class="faq-chevron"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span></button><div class="faq-answer"><div class="faq-answer-inner">Yes. Each staff member creates their own account to track their individual progress and certificate. Contact us about group pricing for larger teams.</div></div></div>
4669<div class="faq-item reveal-item"><button class="faq-question">How long is the course?<span class="faq-chevron"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewB
4669ox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span></button><div class="faq-answer"><div class="faq-answer-inner">The course is self-paced and can be completed in a few hours. Staff can pause and resume at any time, making it easy to fit around work schedules.</div></div></div>
4670</div>
4671</div></div></div>
4672
4673
4674    </div>
4675
4676    <!-- Pricing Card -->
4677    <section class="pricing-section"><div class="container">
4678        <div style="text-align:center" class="reveal"><span class="section-label">Enroll Now</span></div>
4679        <h2 class="section-title reveal">Everything You Need <span class="hot-price-prefix">Starting at </span><span style="color:#E8590C">$9.95</span></h2>
4680        <p class="section-subtitle reveal">One course. One price. No surprises.</p>
4681        <div class="pricing-card reveal">
4682            <div class="pricing-popular">Best Value</div>
4683            <div class="pricing-header">
4684                <h3>Alcohol Server Training</h3>
4685                <div class="pricing-amount"><sup>$</sup>9<sup>.95</sup></div>
4686                            </div>
4687            <div class="pricing-body">
4688                <ul class="pricing-features">
4689                    <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Full certification course</li>
4690                    <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Practice quizzes throughout</li>
4691                    <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Final exam included</li>
4692                    <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Instant digital certificate download</li>
4693                    <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Access on any device, 24/7</li>
4694                    <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Real human support if you need help</li>
4695                </ul>
4696                <div class="pricing-cta"><a href="https://homeoftraining.com/go/?course=alcohol-server-training" class="btn-primary" data-cta-primary="1"><span class="cta-label-individual">Get Started Now &mdash; $9.95</span><span class="cta-label-company" aria-hidden="true">Get Started for Teams &mdash; from $29.95/mo</span></a></div>
4697                <div class="pricing-guarantee"><svg width="14" height="14" fill="none" stroke="#999" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Secure checkout &middot; Instant access after purchase</div>
4698            </div>
4699        </div>
4700    </div></section>
4701
4702    <!-- Final CTA -->
4703    <section class="final-cta"><div class="container">
4704        <h2 class="reveal">Ready to Get Certified?</h2>
4705        <p class="reveal">Get your alcohol server training today. Start and finish entirely on your own time — 24/7 from any device.</p>
4706        <a href="https://homeoftraining.com/go/?course=alcohol-server-training" class="btn-white reveal" data-cta-primary="1"><span class="cta-label-individual">Get Started Now &mdash; $9.95</span><span class="cta-label-company" aria-hidden="true">Get Started for Teams &mdash; from $29.95/mo</span> <svg width="16" height="16" fill="none" stroke="#E8590C" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
4707        <span class="final-secondary reveal">Questions? <a href="mailto:[email protected]">Contact our team</a> &middot; <a href="tel:9546767900">954.676.7900</a></span>
4708    </div></section>
4709
4710    <!-- Footer -->
4711    <footer class="site-footer"><div class="container">
4712        <div class="footer-grid">
4713            <div class="footer-brand"><img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/hot-logo.png" alt="Home of Training" class="footer-logo" style="height:36px;width:auto;"><p>Our mission is to help businesses stay compliant with industry regulations and ensure the safety of their customers.</p></div>
4714            <div class="footer-col"><h4>Quick Links</h4><ul><li><a href="https://homeoftraining.com/complaints-appeals/">Complaints &amp; Appeals</a></li><li><a href="https://homeoftraining.com/refund-policy/">Refund Policy</a></li><li><a href="https://homeoftraining.com/accessibility/">Accessibility</a></li><li><a href="https://homeoftraining.com/non-discrimination/">Non-Discrimination</a></li></ul></div>
4715            <div class="footer-col"><h4>Follow Us</h4><ul><li><a href="https://www.linkedin.com/company/barwize">LinkedIn</a></li><li><a href="https://www.instagram.com/homeoftraining/">Instagram</a></li><li><a href="https://www.youtube.com/@homeoftraining">YouTube</a></li></ul></div>
4716            <div class="footer-col"><h4>Get in Touch</h4><ul><li><a href="mailto:[email protected]">[email protected]</a></li><li><a href="tel:9546767900">954.676.7900</a></li></ul></div>
4717        </div>
4718    </div><div class="footer-bottom"><div class="container" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px"><p>&copy; 2026 Home of Training, Inc. All rights reserved.</p><div class="footer-bottom-links"><a href="https://homeoftraining.com/terms-conditions/">Terms &amp; Conditions</a><a href="https://homeoftraining.com/privacy-policy/">Privacy Policy</a></div></div></div></footer>
4719
4720    <!-- Sticky Mobile CTA -->
4721    <div class="mobile-sticky"><div class="mobile-sticky-inner">
4722        <div class="mobile-sticky-price"><span class="hero-price-individual">$9.95</span><span class="hero-price-company" aria-hidden="true">$29.95<span class="hero-price-company-suffix">/mo</span></span></div>
4723        <a href="https://homeoftraining.com/go/?course=alcohol-server-training" class="btn-primary" data-cta-primary="1"><span class="cta-label-individual">Get Started Now</span><span class="cta-label-company" aria-hidden="true">Get Started for Teams</span></a>
4724    </div></div>
4725
4726    <!-- Phase 12 — Pre-checkout modal (fires for all modes, Eric 5/11 pt.2).
4727         Three sections: employees + locations (Company only), LMS-vs-license
4728         (Company only), course-only vs bundle (always). Individual mode hides
4729         the two Company-only sections via CSS — bundle picker still shows so
4730         buyers can add Food + Alcohol etc. before /go/. On submit we append
4731         the selections to /go/?... so the LMS pricing page can prefill the
4732         cart. -->
4733    <div class="hot-precheckout-backdrop" id="hot-precheckout" role="dialog" aria-modal="true" aria-labelledby="hot-precheckout-title" aria-hidden="true">
4734        <div class="hot-precheckout-modal" role="document">
4735            <button type="button" class="hot-precheckout-close" aria-label="Close">
4736                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
4737            </button>
4738            <h2 id="hot-precheckout-title"><span class="hot-precheckout-title-individual">Add courses before checkout</span><span class="hot-precheckout-title-company" aria-hidden="true">Quick setup before checkout</span></h2>
4739            <p class="hot-precheckout-lead"><span class="hot-precheckout-lead-individual">Want to bundle? Pick one below, or stick with just this course.</span><span class="hot-precheckout-lead-company" aria-hidden="true">Three quick questions so we land you on the right pricing tier.</span></p>
4740
4741            <div class="hot-precheckout-section" data-precheckout-mode="company">
4742                <p class="hot-precheckout-section-title">1. Your team</p>
4743                <div class="hot-precheckout-fields">
4744                    <div class="hot-precheckout-field">
4745                        <label for="hot-pc-employees">Number of employees</label>
4746                        <input type="number" id="hot-pc-employees" name="employees" min="1" max="100000" value="10" inputmode="numeric">
4747                    </div>
4748                    <div class="hot-precheckout-field">
4749                        <label for="hot-pc-locations">Number of locations</label>
4750                        <input type="number" id="hot-pc-locations" name="locations" min="1" max="10000" value="1" inputmode="numeric">
4751                    </div>
4752                </div>
4753            </div>
4754
4755            <div class="hot-precheckout-section" data-precheckout-mode="company">
4756                <p class="hot-precheckout-section-title">2. How you'll deliver training</p>
4757                <div class="hot-precheckout-choices">
4758                    <label class="hot-precheckout-choice is-selected" data-choice="use_lms">
4759                        <input type="radio" name="use_lms" value="lms" checked>
4760                        <span class="hot-precheckout-choice-body">
4761                            <span class="hot-precheckout-choice-label">Use HOT LMS</span>
4762                            <span class="hot-precheckout-choice-desc">We host the courses, track completion, issue certificates. Audit-ready dashboard included.</span>
4763                        </span>
4764                    </label>
4765                    <label class="hot-precheckout-choice" data-choice="use_lms">
4766                        <input type="radio" name="use_lms" value="license">
4767                        <span class="hot-precheckout-choice-body">
4768                            <span class="hot-precheckout-choice-label">License our content</span>
4769                            <span class="hot-precheckout-choice-desc">
4769Run the courses inside your own LMS. Per-user licensing — best for larger teams.</span>
4770                        </span>
4771                    </label>
4772                </div>
4773            </div>
4774
4775            <div class="hot-precheckout-section" data-precheckout-mode="all">
4776                <p class="hot-precheckout-section-title"><span class="hot-precheckout-section-title-individual">Add a bundle and save</span><span class="hot-precheckout-section-title-company" aria-hidden="true">3. What to include</span></p>
4777                <div class="hot-precheckout-choices">
4778                    <label class="hot-precheckout-choice is-selected" data-choice="bundle">
4779                        <input type="radio" name="bundle" value="this_only" checked>
4780                        <span class="hot-precheckout-choice-body">
4781                            <span class="hot-precheckout-choice-label">This course only</span>
4782                            <span class="hot-precheckout-choice-desc">Alcohol Server Training</span>
4783                        </span>
4784                    </label>
4785                    <label class="hot-precheckout-choice" data-choice="bundle">
4786                        <input type="radio" name="bundle" value="food_alcohol">
4787                        <span class="hot-precheckout-choice-body">
4788                            <span class="hot-precheckout-choice-label">Food + Alcohol bundle</span>
4789                            <span class="hot-precheckout-choice-desc">Food handler + alcohol server — most common combo.</span>
4790                        </span>
4791                    </label>
4792                    <label class="hot-precheckout-choice" data-choice="bundle">
4793                        <input type="radio" name="bundle" value="safety_compliance">
4794                        <span class="hot-precheckout-choice-body">
4795                            <span class="hot-precheckout-choice-label">Safety + Compliance bundle</span>
4796                            <span class="hot-precheckout-choice-desc">OSHA, harassment, security, and our top safety modules.</span>
4797                        </span>
4798                    </label>
4799                    <label class="hot-precheckout-choice" data-choice="bundle">
4800                        <input type="radio" name="bundle" value="full_catalog">
4801                        <span class="hot-precheckout-choice-body">
4802                            <span class="hot-precheckout-choice-label">Full catalog (100+ courses)</span>
4803                            <span class="hot-precheckout-choice-desc">Everything we offer. Best per-user value for multi-location operators.</span>
4804                        </span>
4805                    </label>
4806                </div>
4807            </div>
4808
4809            <div class="hot-precheckout-footer">
4810                <button type="button" class="btn-ghost" data-precheckout-cancel>Cancel</button>
4811                <button type="button" class="btn-primary" data-precheckout-submit>Continue to Pricing &rarr;</button>
4812            </div>
4813        </div>
4814    </div>
4815
4816    <!-- PostHog Tracking -->
4817    
vendor: 1,770 bytes, lines 4817-4834
4817<script>
4818    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onFeatureFlags onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
4819    posthog.init('phc_qUd4KGL3FLJjELgve6UZDPEEKK6pEFMQbaoMBFvjVVZk', {
4820        api_host: 'https://us.i.posthog.com',
4821        person_profiles: 'identified_only',
4822        capture_pageview: true
4823    });
4824    // Register HOT-specific properties on every event for BOS dashboard filtering
4825    posthog.register({
4826        client: 'home-of-training',
4827        hot_page_type: 'course',
4828        hot_slug: "alcohol-server-training",
4829        hot_title: "Alcohol Server Training",
4830        hot_category: "Compliance",
4831        hot_price: 9.95,
4832        hot_url: "https:\/\/homeoftraining.com\/courses\/alcohol-server-training",
4833        hot_hero_variant: "grid-dark"    });
4834    </script>
4834
4835
4836    <!-- Individual / Company mode — syncs below-the-fold CTAs with left hero -->
4837    
4837<script>
4838    (function () {
4839        var STORAGE_KEY = 'hot_account_type';
4840        var body = document.body;
4841        var btns = document.querySelectorAll('.hot-account-toggle-btn');
4842        var hlhRoot = document.querySelector('.hot-left-hero[data-sync-account="1"]');
4843
4844        function applyAccount(mode) {
4845            if (mode !== 'individual' && mode !== 'company') { mode = 'individual'; }
4846            body.setAttribute('data-account', mode);
4847            for (var i = 0; i < btns.length; i++) {
4848                var b = btns[i];
4849                var isActive = b.getAttribute('data-account-target') === mode;
4850                b.setAttribute('aria-pressed', isActive ? 'true' : 'false');
4851            }
4852            var dualPairs = [
4853                ['.cta-label-individual',       '.cta-label-company'],
4854                ['.hero-price-individual',     '.hero-price-company'],
4855            ];
4856            for (var di = 0; di < dualPairs.length; di++) {
4857                var indEls = document.querySelectorAll(dualPairs[di][0]);
4858                var coEls  = document.querySelectorAll(dualPairs[di][1]);
4859                for (var ii = 0; ii < indEls.length; ii++) {
4860                    indEls[ii].setAttribute('aria-hidden', mode === 'individual' ? 'false' : 'true');
4861                }
4862                for (var ci = 0; ci < coEls.length; ci++) {
4863                    coEls[ci].setAttribute('aria-hidden', mode === 'company' ? 'false' : 'true');
4864                }
4865            }
4866            var links = document.querySelectorAll('a[href*="/go/"]');
4867            for (var j = 0; j < links.length; j++) {
4868                var a = links[j];
4869                var href = a.getAttribute('href');
4870                if (!href || href.indexOf('/go/') === -1) { continue; }
4871                try {
4872                    var u = new URL(href, window.location.origin);
4873                    u.searchParams.set('account_type', mode);
4874                    a.setAttribute('href', u.pathname + u.search + u.hash);
4875                } catch (_) {}
4876            }
4877            try { localStorage.setItem(STORAGE_KEY, mode); } catch (_) {}
4878        }
4879
4880        var initial = 'individual';
4881        if (hlhRoot) {
4882            initial = hlhRoot.getAttribute('data-default-mode')
4883                || (hlhRoot.querySelector('.hlh-switch') && hlhRoot.querySelector('.hlh-switch').getAttribute('data-active'))
4884                || 'individual';
4885        } else {
4886            try {
4887                var qs = new URLSearchParams(window.location.search);
4888                var fromUrl = qs.get('account_type');
4889                if (fromUrl === 'company' || fromUrl === 'individual') {
4890                    initial = fromUrl;
4891                } else {
4892                    var saved = localStorage.getItem(STORAGE_KEY);
4893                    if (saved === 'company' || saved === 'individual') { initial = saved; }
4894                }
4895            } catch (_) {}
4896        }
4897        applyAccount(initial);
4898
4899        document.addEventListener('hot-left-hero-account-mode', function (e) {
4900            if (e.detail && e.detail.mode) {
4901                applyAccount(e.detail.mode);
4902            }
4903        });
4904
4905        for (var k = 0; k < btns.length; k++) {
4906            btns[k].addEventListener('click', function (e) {
4907                applyAccount(e.currentTarget.getAttribute('data-account-target'));
4908                if (window.posthog && typeof window.posthog.capture === 'function') {
4909                    try { window.posthog.capture('account_toggle_click', { account_type: e.currentTarget.getAttribute('data-account-target') }); } catch (_) {}
4910                }
4911            });
4912        }
4913    })();
4914    </script>
4914
4915
4916    <!-- Phase 12 — Pre-checkout modal controller (Eric 5/11 pt.2).
4917         Fires on every primary /go/ CTA click. Company mode sees all three
4918         sections (team / LMS-vs-license / bundle); Individual mode sees
4919         only the bundle section (others hidden via CSS). On submit we
4920         append employees/locations/use_lms/bundle/account_type to the
4921         destination URL so the LMS pricing page can prefill the cart. -->
4922    
4922<script>
4923    (function () {
4924        var modal = document.getElementById('hot-precheckout');
4925        if (!modal) { return; }
4926        var backdrop = modal;
4927        var pendingHref = null;
4928
4929        function isCompany() {
4930            return document.body.getAttribute('data-account') === 'company';
4931        }
4932
4933        function open(initialHref) {
4934            pendingHref = initialHref;
4935            backdrop.classList.add('is-open');
4936            backdrop.setAttribute('aria-hidden', 'false');
4937            document.body.style.overflow = 'hidden';
4938            var firstInput = modal.querySelector('#hot-pc-employees');
4939            if (firstInput) { try { firstInput.focus(); } catch (_) {} }
4940            if (window.posthog && typeof window.posthog.capture === 'function') {
4941                try { window.posthog.capture('precheckout_open', { from_href: initialHref }); } catch (_) {}
4942            }
4943        }
4944        function close() {
4945            backdrop.classList.remove('is-open');
4946            backdrop.setAttribute('aria-hidden', 'true');
4947            document.body.style.overflow = '';
4948            pendingHref = null;
4949        }
4950
4951        // Radio "card" styling — keep .is-selected in sync with checked state.
4952        modal.querySelectorAll('.hot-precheckout-choice input[type="radio"]').forEach(function (input) {
4953            input.addEventListener('change', function () {
4954                var name = input.getAttribute('name');
4955                modal.querySelectorAll('.hot-precheckout-choice input[name="' + name + '"]').forEach(function (sib) {
4956                    var card = sib.closest('.hot-precheckout-choice');
4957                    if (!card) return;
4958                    card.classList.toggle('is-selected', sib.checked);
4959                });
4960            });
4961        });
4962
4963        // Intercept primary CTA clicks in both Individual and Company modes.
4964        // Individual mode shows the bundle-only view (Company-only sections
4965        // hidden via CSS); Company mode shows the full form.
4966        document.addEventListener('click', function (e) {
4967            var a = e.target.closest && e.target.closest('a[data-cta-primary="1"]');
4968            if (!a) return;
4969            var href = a.getAttribute('href') || '';
4970            if (href.indexOf('/go/') === -1) return; // only intercept /go/ CTAs
4971            e.preventDefault();
4972            open(href);
4973        }, true);
4974
4975        // Close handlers — X button, Cancel button, click on backdrop, Escape key.
4976        modal.querySelector('.hot-precheckout-close').addEventListener('click', close);
4977        modal.querySelector('[data-precheckout-cancel]').addEventListener('click', close);
4978        backdrop.addEventListener('click', function (e) { if (e.target === backdrop) close(); });
4979        document.addEventListener('keydown', function (e) {
4980            if (e.key === 'Escape' && backdrop.classList.contains('is-open')) close();
4981        });
4982
4983        // Submit — read values, rewrite the href, navigate.
4984        modal.querySelector('[data-precheckout-submit]').addEventListener('click', function () {
4985            if (!pendingHref) { close(); return; }
4986            var employees = parseInt(modal.querySelector('#hot-pc-employees').value, 10);
4987            var locations = parseInt(modal.querySelector('#hot-pc-locations').value, 10);
4988            if (!isFinite(employees) || employees < 1) employees = 1;
4989            if (!isFinite(locations) || locations < 1) locations = 1;
4990            var useLms = (modal.querySelector('input[name="use_lms"]:checked') || {}).value || 'lms';
4991            var bundle = (modal.querySelector('input[name="bundle"]:checked') || {}).value || 'this_only';
4992
4993            try {
4994                var u = new URL(pendingHref, window.location.origin);
4995                var accountType = isCompany() ? 'company' : 'individual';
4996                u.searchParams.set('account_type', accountType);
4997                u.searchParams.set('bundle', bundle);
4998                // Team-size + delivery-method fields are Company-only; their
4999                // sections are hidden in Individual mode, so we skip them
5000                // there to keep the URL clean.
5001                if (accountType === 'company') {
5002                    u.searchParams.set('employees', String(employees));
5003                    u.searchParams.set('locations', String(locations));
5004                    u.searchParams.set('use_lms', useLms);
5005                }
5006
5007                if (window.posthog && typeof window.posthog.capture === 'function') {
5008                    try { window.posthog.capture('precheckout_submit', {
5009                        account_type: accountType,
5010                        employees: employees, locations: locations,
5011                        use_lms: useLms, bundle: bundle, dest_href: u.toString()
5012                    }); } catch (_) {}
5013                }
5014                window.location.href = u.pathname + u.search + u.hash;
5015            } catch (_) {
5016                // Malformed href — fall back to original
5017                window.location.href = pendingHref;
5018            }
5019        });
5020    })();
5021    </script>
5021
5022
5023    
5023<script type="speculationrules">
5024{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/landpress/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
5025</script>
5025
5026			
5026<script>
5027				( () => {
5028					const lazyloadRunObserver = () => {
5029						const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
5030						const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
5031							entries.forEach( ( entry ) => {
5032								if ( entry.isIntersecting ) {
5033									let lazyloadBackground = entry.target;
5034									if( lazyloadBackground ) {
5035										lazyloadBackground.classList.add( 'e-lazyloaded' );
5036									}
5037									lazyloadBackgroundObserver.unobserve( entry.target );
5038								}
5039							});
5040						}, { rootMargin: '200px 0px 200px 0px' } );
5041						lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
5042							lazyloadBackgroundObserver.observe( lazyloadBackground );
5043						} );
5044					};
5045					const events = [
5046						'DOMContentLoaded',
5047						'elementor/lazyload/observe',
5048					];
5049					events.forEach( ( event ) => {
5050						document.addEventListener( event, lazyloadRunObserver );
5051					} );
5052				} )();
5053			</script>
5053
5054			
5054<script src="https://homeoftraining.com/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script>
vendor: 1 bytes, line 5054
5054
5055<script src="https://homeoftraining.com/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script>
vendor: 1 bytes, line 5055
5055
5056<script id="wp-i18n-js-after">
5057wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
5058//# sourceURL=wp-i18n-js-after
5059</script>
vendor: 1 bytes, line 5059
5059
5060<script src="https://homeoftraining.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.7" id="swv-js"></script>
vendor: 1 bytes, line 5060
5060
5061<script id="contact-form-7-js-before">
5062var wpcf7 = {
5063    "api": {
5064        "root": "https:\/\/homeoftraining.com\/wp-json\/",
5065        "namespace": "contact-form-7\/v1"
5066    }
5067};
5068//# sourceURL=contact-form-7-js-before
5069</script>
vendor: 1 bytes, line 5069
5069
5070<script src="https://homeoftraining.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.7" id="contact-form-7-js"></script>
vendor: 1 bytes, line 5070
5070
5071<script src="https://homeoftraining.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
vendor: 1 bytes, line 5071
5071
5072<script src="https://homeoftraining.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
vendor: 1 bytes, line 5072
5072
5073<script src="https://homeoftraining.com/wp-content/themes/landpress/assets/js/front-end.js?ver=1.6" id="landpress-scripts-js"></script>
vendor: 1 bytes, line 5073
5073
5074<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/nav-menu.js?ver=4.0.6" id="ekit-menu-js"></script>
vendor: 1 bytes, line 5074
5074
5075<script src="https://homeoftraining.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=4.2.4" id="elementor-webpack-runtime-js"></script>
vendor: 1 bytes, line 5075
5075
5076<script src="https://homeoftraining.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=4.2.4" id="elementor-frontend-modules-js"></script>
vendor: 1 bytes, line 5076
5076
5077<script src="https://homeoftraining.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
vendor: 1 bytes, line 5077
5077
5078<script src="https://homeoftraining.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=4.2.4" id="elementor-frontend-js"></script>
vendor: 1 bytes, line 5078
5078
5079<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/core.js?ver=4.0.6" id="ekit-core-js"></script>
vendor: 1 bytes, line 5079
5079
5080<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/nav-menu.js?ver=4.0.6" id="ekit-nav-menu-js"></script>
vendor: 61 bytes, lines 5080-5081
5080
5081<script src="https://www.google.com/recaptcha/api.js?render=
50816LeLLYoqAAAAAJkPd3w1OxaUPvhtUntKW2j4ig1Y
vendor: 49 bytes, line 5081
5081&amp;ver=3.0" id="google-recaptcha-js"></script>
5082<script src="https://homeoftraining.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script>
vendor: 1 bytes, line 5082
5082
5083<script id="wpcf7-recaptcha-js-before">
5084var wpcf7_recaptcha = {
5085    "sitekey": "6LeLLYoqAAAAAJkPd3w1OxaUPvhtUntKW2j4ig1Y",
5086    "actions": {
5087        "homepage": "homepage",
5088        "contactform": "contactform"
5089    }
5090};
5091//# sourceURL=wpcf7-recaptcha-js-before
5092</script>
vendor: 1 bytes, line 5092
5092
5093<script src="https://homeoftraining.com/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.7" id="wpcf7-recaptcha-js"></script>
vendor: 1 bytes, line 5093
5093
5094<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/assets/libs/magnific-popup/jquery.magnific-popup.min.js?ver=4.0.6" id="magnific-popup-js"></script>
vendor: 1 bytes, line 5094
5094
5095<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/header-search.js?ver=4.0.6" id="ekit-header-search-js"></script>
vendor: 1 bytes, line 5095
5095
5096<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/header-offcanvas.js?ver=4.0.6" id="ekit-header-offcanvas-js"></script>
vendor: 1 bytes, line 5096
5096
5097<script src="https://homeoftraining.com/wp-content/plugins/keydesign-framework/assets/js/keydesign-framework.js?ver=2.3" id="keydesign-scripts-js"></script>
vendor: 1 bytes, line 5097
5097
5098<script src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/js/landing-page.js?ver=1.7.3" id="hot-landing-page-js"></script>
5098
5099<!-- HOT unified support launcher -------------------------------------------
5100     Replaces the duplicate bottom-left "Email Support" launcher with a single
5101     bottom-right button that offers two choices:
5102       1. Chat with Solera  -> opens the existing Vapi AI widget
5103       2. Contact Support   -> opens the existing email-support panel (#chat)
5104     The legacy .chatbox markup (entry 26191) is hidden, NOT deleted: the legacy
5105     script (entry 26190) calls getElementById("chat").addEventListener with no
5106     null guard, so removing the markup would throw and kill every other handler
5107     in that file. Added 2026-08-20.
5108--------------------------------------------------------------------------- -->
5109<style id="hot-support-hub-css">
5110/* 1. hide the duplicate bottom-left launcher (markup kept for the legacy JS) */
5111.chatbox { display: none !important; }
5112
5113/* 2. the email-support panels are repositioned and restyled in the
5114      "Contact Support dialog" block further down this entry */
5115
5116/* 3. the unified launcher */
5117#hot-support-hub {
5118    position: fixed;
5119    right: 1.5rem;
5120    bottom: 1.5rem;
5121    z-index: 9998;
5122    display: flex;
5123    flex-direction: column;
5124    align-items: flex-end;
5125    gap: 10px;
5126    font-family: inherit;
5127}
5128#hot-support-hub[hidden] { display: none; }
5129
5130#hot-support-launcher {
5131    display: flex;
5132    align-items: center;
5133    gap: 0.5rem;
5134    height: 3rem;
5135    padding: 0.75rem 1rem;
5136    border: 0;
5137    border-radius: 1rem;
5138    background-color: #007BFF;
5139    color: #FFFFFF;
5140    font-size: 15px;
5141    font-weight: 600;
5142    line-height: 1;
5143    cursor: pointer;
5144    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
5145    transition: transform .15s ease, box-shadow .15s ease;
5146}
5147#hot-support-launcher:hover {
5148    transform: translateY(-2px) scale(1.03);
5149    box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
5150}
5151#hot-support-launcher svg { flex: none; }
5152
5153/* 4. the two-option menu */
5154#hot-support-menu {
5155    width: 300px;
5156    max-width: calc(100vw - 3rem);
5157    background: #fff;
5158    border: 1px solid #e5e7eb;
5159    border-radius: 1rem;
5160    box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1);
5161    overflow: hidden;
5162    transform-origin: bottom right;
5163    animation: hot-support-pop .16s ease-out;
5164}
5165#hot-support-menu[hidden] { display: none; }
5166@keyframes hot-support-pop {
5167    from { opacity: 0; transform: translateY(8px) scale(.96); }
5168    to   { opacity: 1; transform: none; }
5169}
5170#hot-support-menu button {
5171    display: flex;
5172    align-items: flex-start;
5173    gap: 10px;
5174    width: 100%;
5175    padding: 14px 16px;
5176    border: 0;
5177    border-bottom: 1px solid #eef0f3;
5178    background: #fff;
5179    color: #1A1A1A;
5180    font-size: 14px;
5181    line-height: 1.35;
5182    text-align: left;
5183    cursor: pointer;
5184    transition: background .12s ease;
5185}
5186#hot-support-menu button:last-child { border-bottom: 0; }
5187#hot-support-menu button:hover { background: #f5f8ff; }
5188#hot-support-menu .hot-opt-ico {
5189    flex: none;
5190    width: 32px;
5191    height: 32px;
5192    border-radius: 8px;
5193    display: flex;
5194    align-items: center;
5195    justify-content: center;
5196}
5197#hot-support-menu .hot-opt-ico.ai    { background: #e8f1ff; color: #007BFF; }
5198#hot-support-menu .hot-opt-ico.mail  { background: #fdece5; color: #ea5a29; }
5199#hot-support-menu .hot-opt-title { display: block; font-weight: 600; }
5200#hot-support-menu .hot-opt-sub   { display: block; margin-top: 2px; color: #6b7280; font-size: 12.5px; }
5201
5202@media (max-width: 480px) {
5203    #hot-support-hub { right: 1rem; bottom: 1rem; }
5204    #hot-support-launcher { font-size: 14px; }
5205}
5206</style>
5207
5208<div id="hot-support-hub" hidden>
5209    <div id="hot-support-menu" role="menu" aria-label="Support options" hidden>
5210        <button type="button" data-hot-act="ai" role="menuitem">
5211            <span class="hot-opt-ico ai" aria-hidden="true">
5212                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
5213            </span>
5214            <span>
5215                <span class="hot-opt-title">Chat with Solera</span>
5216                <span class="hot-opt-sub">Home of Training&rsquo;s AI Assistant</span>
5217            </span>
5218        </button>
5219        <button type="button" data-hot-act="email" role="menuitem">
5220            <span class="hot-opt-ico mail" aria-hidden="true">
5221                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
5222            </span>
5223            <span>
5224                <span class="hot-opt-title">Contact Support</span>
5225                <span class="hot-opt-sub">Email the Home of Training team</span>
5226            </span>
5227        </button>
5228    </div>
5229
5230    <button type="button" id="hot-support-launcher" aria-haspopup="true" aria-expanded="false">
5231        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
5232        <span>Chat with Support</span>
5233    </button>
5234</div>
5235
5236<script id="hot-support-hub-js">
5237(function () {
5238    "use strict";
5239
5240    var hub, launcher, menu;
5241
5242    function vapiBox() {
5243        var wrap = document.querySelector("vapi-widget .vapi-widget-wrapper");
5244        return wrap ? wrap.querySelector('div[style*="position: fixed"]') : null;
5245    }
5246
5247    /* The Vapi widget renders its launcher pill and its chat panel into the same
5248       fixed container. Collapsed it is ~48px tall, open it is ~512px. */
5249    function vapiOpen() {
5250        var box = vapiBox();
5251        return !!box && box.getBoundingClientRect().height > 120;
5252    }
5253
5254    function legacyPanelOpen() {
5255        return [".chatbox-first", ".chatbox-form"].some(function (sel) {
5256            var el = document.querySelector(sel);
5257            return el && getComputedStyle(el).display !== "none";
5258        });
5259    }
5260
5261    /* Keep Vapi's own pill out of sight while collapsed so there is only ever one
5262       button on screen. visibility (not display) so click dispatch still works. */
5263    function sync() {
5264        var box = vapiBox(), open = vapiOpen();
5265        if (box) {
5266            box.style.visibility = open ? "visible" : "hidden";
5267            box.style.pointerEvents = open ? "auto" : "none";
5268        }
5269        if (hub) hub.hidden = open || legacyPanelOpen();
5270        if (!hub || hub.hidden) closeMenu();
5271    }
5272
5273    function openMenu() {
5274        menu.hidden = false;
5275        launcher.setAttribute("aria-expanded", "true");
5276    }
5277    function closeMenu() {
5278        if (!menu || menu.hidden) return;
5279        menu.hidden = true;
5280        launcher.setAttribute("aria-expanded", "false");
5281    }
5282
5283    function openAI() {
5284        var box = vapiBox();
5285        if (!box) { return; }
5286        var pill = box.firstElementChild;
5287        box.style.visibility = "visible";
5288        box.style.pointerEvents = "auto";
5289        if (pill) {
5290            pill.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, view: window }));
5291        }
5292        setTimeout(sync, 60);
5293        setTimeout(sync, 400);
5294    }
5295
5296    /* Same behaviour as the old bottom-left "Email Support" button: fire its own
5297       handler if it is still bound, otherwise fall back to showing the panel. */
5298    function openEmailSupport() {
5299        var legacy = document.getElementById("chat");
5300        if (legacy) {
5301            legacy.click();
5302        } else {
5303            var first = document.querySelector(".chatbox-first");
5304            if (first) first.style.display = "block";
5305        }
5306        setTimeout(sync, 30);
5307    }
5308
5309    function init() {
5310        hub = document.getElementById("hot-support-hub");
5311        launcher = document.getElementById("hot-support-launcher");
5312        menu = document.getElementById("hot-support-menu");
5313        if (!hub || !launcher || !menu) return;
5314
5315        hub.hidden = false;
5316
5317        launcher.addEventListener("click", function (e) {
5318            e.stopPropagation();
5319            if (menu.hidden) { openMenu(); } else { closeMenu(); }
5320        });
5321
5322        menu.addEventListener("click", function (e) {
5323            var btn = e.target.closest("button[data-hot-act]");
5324            if (!btn) return;
5325            e.stopPropagation();
5326            closeMenu();
5327            if (btn.getAttribute("data-hot-act") === "ai") { openAI(); } else { openEmailSupport(); }
5328        });
5329
5330        document.addEventListener("click", function (e) {
5331            if (!hub.contains(e.target)) closeMenu();
5332        });
5333        document.addEventListener("keydown", function (e) {
5334            if (e.key === "Escape") closeMenu();
5335        });
5336
5337        /* React re-renders the Vapi container and the legacy script toggles inline
5338           styles, so watch for both and re-sync. */
5339        var mo = new MutationObserver(sync);
5340        mo.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["style", "class"] });
5341        setInterval(sync, 700);
5342        sync();
5343    }
5344
5345    if (document.readyState === "loading") {
5346        document.addEventListener("DOMContentLoaded", init);
5347    } else {
5348        init();
5349    }
5350})();
5351</script>
5351
5352
5353<!-- ===== Contact Support dialog: modernized skin =========================
5354     Restyles the legacy panels (.chatbox-first FAQ list and .chatbox-form
5355     email form, markup from entry 26191, base CSS from entry 26189) to match
5356     the launcher. Pure CSS over the top plus a few additive JS touches - the
5357     legacy markup, ids and handlers in entry 26190 are untouched.
5358     Added 2026-08-20.
5359====================================================================== -->
5360<style id="hot-support-dialog-css">
5361/* ---------- shared card shell ---------- */
5362.chatbox-first,
5363.chatbox-form {
5364    left: auto !important;
5365    right: 24px !important;
5366    bottom: 24px !important;
5367    z-index: 10000 !important;
5368    width: 380px !important;
5369    max-width: calc(100vw - 2rem) !important;
5370    background: #ffffff !important;
5371    border: 1px solid #e5e7eb !important;
5372    border-radius: 16px !important;
5373    box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.10) !important;
5374    overflow: hidden !important;
5375    font-family: inherit;
5376    color: #1a1a1a;
5377    animation: hot-dialog-pop .18s ease-out;
5378}
5379@keyframes hot-dialog-pop {
5380    from { opacity: 0; transform: translateY(10px) scale(.97); }
5381    to   { opacity: 1; transform: none; }
5382}
5383
5384/* ---------- header bar (#popupclose / #formclose) ---------- */
5385.chatbox-first button#popupclose,
5386.chatbox-form button.btn#formclose {
5387    position: relative !important;
5388    display: block !important;
5389    width: 100% !important;
5390    margin: 0 !important;
5391    padding: 15px 56px 15px 18px !important;
5392    border: 0 !important;
5393    border-bottom: 1px solid #eef0f3 !important;
5394    border-radius: 0 !important;
5395    background: #ffffff !important;
5396    color: #111827 !important;
5397    font-size: 15px !important;
5398    font-weight: 700 !important;
5399    line-height: 1.25 !important;
5400    text-align: left !important;
5401    letter-spacing: -.01em;
5402    cursor: pointer;
5403}
5404.chatbox-first button#popupclose::after {
5405    content: "Pick a topic for a quick answer";
5406    display: block;
5407    margin-top: 3px;
5408    color: #6b7280;
5409    font-size: 12.5px;
5410    font-weight: 500;
5411    letter-spacing: 0;
5412}
5413.chatbox-form button.btn#formclose::after {
5414    content: "Send us the details and we'll reply by email";
5415    display: block;
5416    margin-top: 3px;
5417    color: #6b7280;
5418    font-size: 12.5px;
5419    font-weight: 500;
5420    letter-spacing: 0;
5421}
5422
5423/* close / back control inside the header */
5424.chatbox-first span.minus,
5425.chatbox-form span.minus {
5426    position: absolute !important;
5427    top: 14px !important;
5428    right: 14px !important;
5429    display: inline-flex;
5430    align-items: center;
5431    gap: 4px;
5432    height: 28px;
5433    padding: 0 9px;
5434    border-radius: 8px;
5435    background: #f3f4f6;
5436    color: #4b5563;
5437    font-size: 12.5px;
5438    font-weight: 600;
5439    transition: background .12s ease, color .12s ease;
5440}
5441.chatbox-first span.minus:hover,
5442.chatbox-form span.minus:hover { background: #e5e7eb; color: #111827; }
5443/* the FAQ panel header collapses the dialog - show a real close glyph */
5444.chatbox-first span.minus { width: 28px; padding: 0; justify-content: center; }
5445.chatbox-first span.minus i.fa { display: none; }
5446.chatbox-first span.minus::before {
5447    content: "\00d7";
5448    font-size: 19px;
5449    line-height: 1;
5450    font-style: normal;
5451}
5452
5453/* ---------- FAQ list ---------- */
5454.chatbox-first ul#menuid {
5455    height: auto !important;
5456    max-height: min(46vh, 360px) !important;
5457    overflow-y: auto !important;
5458    margin: 0 !important;
5459    padding: 6px 0 !important;
5460    scrollbar-width: thin;
5461    scrollbar-color: #d1d5db transparent;
5462}
5463.chatbox-first ul#menuid::-webkit-scrollbar { width: 8px; }
5464.chatbox-first ul#menuid::-webkit-scrollbar-thumb { background: #d8dce2; border-radius: 8px; border: 2px solid #fff; }
5465.chatbox-first ul#menuid::-webkit-scrollbar-track { background: transparent; }
5466
5467.chatbox-first ul#menuid > li > a {
5468    display: flex !important;
5469    align-items: center;
5470    justify-content: space-between;
5471    gap: 12px;
5472    padding: 12px 18px !important;
5473    border: 0 !important;
5474    color: #1f2937 !important;
5475    font-size: 14px !important;
5476    font-weight: 500;
5477    line-height: 1.35;
5478    text-decoration: none !important;
5479    transition: background .12s ease, color .12s ease;
5480}
5481.chatbox-first ul#menuid > li > a:hover,
5482.chatbox-first ul#menuid > li.selected > a {
5483    background: #f5f8ff !important;
5484    color: #0067d6 !important;
5485}
5486.chatbox-first span.info {
5487    float: none !important;
5488    flex: none;
5489    display: inline-flex;
5490    align-items: center;
5491    justify-content: center;
5492    width: 22px;
5493    height: 22px;
5494    border-radius: 999px;
5495    background: #f3f4f6;
5496    color: #9ca3af !important;
5497    font-size: 11px;
5498    transition: background .12s ease, color .12s ease, transform .15s ease;
5499}
5500.chatbox-first ul#menuid > li > a:hover span.info,
5501.chatbox-first ul#menuid > li.selected > a span.info {
5502    background: #e3edff;
5503    color: #007BFF !important;
5504}
5505/* rotate the + into an x while that row's answer is open */
5506.chatbox-first ul#menuid > li.hot-open > a span.info { transform: rotate(45deg); }
5507
5508.chatbox-first .logcontent {
5509    margin: 0 12px 8px !important;
5510    padding: 13px 16px !important;
5511    border: 0 !important;
5512    border-radius: 12px !important;
5513    background: #f7f9fc !important;
5514    color: #4b5563 !important;
5515    font-size: 13.5px !important;
5516    line-height: 1.62 !important;
5517}
5518.chatbox-first .logcontent a {
5519    display: inline !important;
5520    padding: 0 !important;
5521    border: 0 !important;
5522    background: none !important;
5523    font-size: inherit !important;
5524    color: #0067d6 !important;
5525    text-decoration: underline;
5526    text-underline-offset: 2px;
5527    word-break: break-word;
5528}
5529
5530/* ---------- email form ---------- */
5531.chatbox-form p {
5532    margin: 0 !important;
5533    padding: 14px 18px 4px !important;
5534    color: #6b7280 !important;
5535    font-size: 13px !important;
5536    line-height: 1.55 !important;
5537}
5538.chatbox-form p a { color: #0067d6 !important; text-decoration: underline; text-underline-offset: 2px; }
5539
5540.chatbox-form .form-label { padding: 10px 18px 0 !important; margin: 0 !important; }
5541.chatbox-form .form-label label {
5542    display: block;
5543    margin-bottom: 6px;
5544    color: #374151;
5545    font-size: 12.5px;
5546    font-weight: 600;
5547}
5548.chatbox-form .form-label input,
5549.chatbox-form .form-label textarea {
5550    width: 100% !important;
5551    padding: 10px 12px !important;
5552    border: 1px solid #d9dee5 !important;
5553    border-radius: 10px !important;
5554    background: #fff !important;
5555    color: #111827;
5556    font-family: inherit;
5557    font-size: 14px !important;
5558    line-height: 1.4;
5559    transition: border-color .12s ease, box-shadow .12s ease;
5560}
5561.chatbox-form .form-label textarea { min-height: 96px; resize: vertical; }
5562.chatbox-form .form-label input::placeholder,
5563.chatbox-form .form-label textarea::placeholder { color: #9ca3af; }
5564.chatbox-form .form-label input:focus,
5565.chatbox-form .form-label textarea:focus {
5566    outline: 0 !important;
5567    border-color: #007BFF !important;
5568    box-shadow: 0 0 0 3px rgba(0,123,255,.15) !important;
5569}
5570.chatbox-form .form-label.hot-invalid input,
5571.chatbox-form .form-label.hot-invalid textarea {
5572    border-color: #e0524a !important;
5573    box-shadow: 0 0 0 3px rgba(224,82,74,.12) !important;
5574}
5575
5576.chatbox-form .hot-form-msg {
5577    margin: 12px 18px 0;
5578    padding: 9px 12px;
5579    border-radius: 10px;
5580    font-size: 13px;
5581    line-height: 1.45;
5582    display: none;
5583}
5584.chatbox-form .hot-form-msg.err  { display: block; background: #fdeceb;
5584 color: #b3372f; }
5585.chatbox-form .hot-form-msg.ok   { display: block; background: #e9f7ef; color: #1d7a45; }
5586
5587.chatbox-form .chat-btn { padding: 14px 18px 18px !important; }
5588.chatbox-form .chat-btn button.start {
5589    display: block !important;
5590    width: 100% !important;
5591    max-width: none !important;
5592    margin: 0 !important;
5593    padding: 11px 16px !important;
5594    border: 0 !important;
5595    border-radius: 10px !important;
5596    background: #007BFF !important;
5597    color: #fff !important;
5598    font-family: inherit;
5599    font-size: 14.5px !important;
5600    font-weight: 600 !important;
5601    cursor: pointer;
5602    transition: background .12s ease, transform .12s ease;
5603}
5604.chatbox-form .chat-btn button.start:hover { background: #0067d6 !important; transform: translateY(-1px); }
5605
5606@media (max-width: 480px) {
5607    .chatbox-first,
5608    .chatbox-form {
5609        right: 1rem !important;
5610        bottom: 1rem !important;
5611        width: calc(100vw - 2rem) !important;
5612    }
5613    .chatbox-first ul#menuid { max-height: 52vh !important; }
5614}
5615</style>
5616
5617<script id="hot-support-dialog-js">
5618(function () {
5619    "use strict";
5620
5621    var SUPPORT_EMAIL = "[email protected]";
5622
5623    /* Replace only the leading text node of a header button, leaving the
5624       <span class="minus"> control (and its bound handler) in place. */
5625    function relabel(el, text) {
5626        if (!el) return;
5627        for (var i = 0; i < el.childNodes.length; i++) {
5628            var n = el.childNodes[i];
5629            if (n.nodeType === 3 && n.nodeValue.trim()) { n.nodeValue = text + " "; return; }
5630        }
5631    }
5632
5633    function firstPanel() { return document.querySelector(".chatbox-first"); }
5634    function formPanel()  { return document.querySelector(".chatbox-form"); }
5635    function visible(el)  { return el && getComputedStyle(el).display !== "none"; }
5636
5637    function init() {
5638        var first = firstPanel(), form = formPanel();
5639        if (!first || !form) return;
5640
5641        relabel(document.getElementById("popupclose"), "Contact Support");
5642        relabel(document.getElementById("formclose"), "Email Support");
5643
5644        /* mirror the legacy inline display toggle onto a class so the + can rotate */
5645        var rows = first.querySelectorAll("#menuid li");
5646        first.addEventListener("click", function () {
5647            setTimeout(function () {
5648                for (var i = 0; i < rows.length; i++) {
5649                    var c = rows[i].querySelector(".logcontent");
5650                    rows[i].classList.toggle("hot-open", !!c && getComputedStyle(c).display !== "none");
5651                }
5652            }, 0);
5653        });
5654
5655        /* status line for the form */
5656        var msg = document.createElement("div");
5657        msg.className = "hot-form-msg";
5658        var btnWrap = form.querySelector(".chat-btn");
5659        if (btnWrap) form.insertBefore(msg, btnWrap);
5660
5661        function setMsg(kind, text) {
5662            msg.className = "hot-form-msg" + (kind ? " " + kind : "");
5663            msg.textContent = text || "";
5664        }
5665
5666        /* The legacy "Send Email" button has never had a handler - it is a dead
5667           submit button with no form. Wire it to the address the panel already
5668           tells people to write to, with the fields pre-filled. */
5669        var send = document.getElementById("supportEmail");
5670        if (send) {
5671            send.setAttribute("type", "button");
5672            send.addEventListener("click", function (e) {
5673                e.preventDefault();
5674                var f = {
5675                    name:    document.getElementById("query_p_name"),
5676                    email:   document.getElementById("query_p_email"),
5677                    message: document.getElementById("query_message")
5678                };
5679                var bad = [];
5680                Object.keys(f).forEach(function (k) {
5681                    var el = f[k], wrap = el ? el.closest(".form-label") : null;
5682                    var val = el ? el.value.trim() : "";
5683                    var ok = !!val && (k !== "email" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val));
5684                    if (wrap) wrap.classList.toggle("hot-invalid", !ok);
5685                    if (!ok) bad.push(k);
5686                });
5687                if (bad.length) {
5688                    setMsg("err", bad.indexOf("email") > -1 && f.email.value.trim()
5689                        ? "That email address does not look right."
5690                        : "Please fill in your name, email and message.");
5691                    return;
5692                }
5693                var subject = "Support request from " + f.name.value.trim();
5694                var body = "Name: " + f.name.value.trim() +
5695                           "\nEmail: " + f.email.value.trim() +
5696                           "\n\n" + f.message.value.trim();
5697                setMsg("ok", "Opening your email app… if nothing happens, write to " + SUPPORT_EMAIL + ".");
5698                window.location.href = "mailto:" + SUPPORT_EMAIL +
5699                    "?subject=" + encodeURIComponent(subject) +
5700                    "&body=" + encodeURIComponent(body);
5701            });
5702        }
5703
5704        ["query_p_name", "query_p_email", "query_message"].forEach(function (id) {
5705            var el = document.getElementById(id);
5706            if (!el) return;
5707            el.addEventListener("input", function () {
5708                var wrap = el.closest(".form-label");
5709                if (wrap) wrap.classList.remove("hot-invalid");
5710                setMsg("", "");
5711            });
5712        });
5713
5714        /* Escape closes whichever panel is showing */
5715        document.addEventListener("keydown", function (e) {
5716            if (e.key !== "Escape") return;
5717            if (visible(form)) { var b = document.getElementById("formclose"); if (b) b.click(); return; }
5718            if (visible(first)) { var p = document.getElementById("popupclose"); if (p) p.click(); }
5719        });
5720    }
5721
5722    if (document.readyState === "loading") {
5723        document.addEventListener("DOMContentLoaded", init);
5724    } else {
5725        init();
5726    }
5727})();
5728</script>
5728
5729<!-- Add HTML code to the header or the footer.
5730
5731For example, you can use the following code for loading the jQuery library from Google CDN:
5732<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
5732
5733
5734or the following one for loading the Bootstrap library from jsDelivr:
5735<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
5736
5737-- End of the comment --> 
5738
5739<script>
5740      jQuery(document).ready(function($) {
5741    $.ajax({
5742        url: "https://api.homeoftraining.com/api/tour/demovideos",
5743        success: function(result) {
5744            var abc = "";
5745            for (var i = 0; i < result.length; i++) {
5746                abc =
5747                    abc +
5748                    "<div class='demo-video-box'><div><iframe src='https://player.vimeo.com/video/" + result[i].vimeo_video_id + "' width='320' height='240' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><div class='mobi-none'><h5 class='mb-0 mt-1 text-center'>" + result[i].name + "</h5>												</div>						</div>";
5749            }
5750
5751            $("#demo-videos").html(abc);
5752        }
5753    });
5754});
5755    </script>
5755
5756
5757
5758<script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js" async type="text/javascript"></script>
5758
5759<vapi-widget
5760public-key="506b7909-b992-43a3-9471-3e836c413fdb"
5761assistant-id="7301fa87-6480-4724-8e29-94e2e4c7a17f"
5762mode="chat"
5763theme="light"
5764size="compact"
5765radius="medium"
5766base-color="#FFFFFF"
5767accent-color="#1A1A1A"
5768button-base-color="#007BFF"
5769button-accent-color="#FFFFFF"
5770main-label="Chat with Support"
5771start-button-text="Start Chat"
5772end-button-text="End Chat"
5773empty-chat-message="Hi! I'm Solera. Home of Training's AI Assistant. How can I help you today?"
5774size="compact"
5775position="bottom-right"
5776></vapi-widget>        <!-- chatbox code start here -->
5777        <div class="chatbox">
5778            <div class="chatcomment-box">
5779                <div class="chat-comment">
5780                    <h3>Questions?</h3>
5781                    <button class="cross">X</button>
5782                </div>
5783                <i>Click here to email us.</i>
5784            </div>
5785            <div class="offline-chat">
5786                <h3 id="chat"><i class="fa fa-envelope" aria-hidden="true"></i> Email Support</h3>
5787            </div>
5788        </div>
5789
5790
5791        <div class="chatbox-first">
5792            <button class="btn" id="popupclose">Email Support <span class="minus"><i class="fa fa-minus"
5793                        aria-hidden="true"></i></span></button>
5794            <ul id="menuid">
5795                <li><a href="javascript:void(0);" class="canlogin">Can’t login <span class="info"><i class="fa fa-plus"
5796                                aria-hidden="true"></i></span></a>
5797                    <div class="logcontent">
5798                        a. If you forgot your password, please click the forgot password button located next to the
5799                        login button. Most of the time, your email address is your username, so please try to reset the
5800                        password using your email address.
5801                        <br />
5802                        b. If you forgot your username, please email <a  href="mailto:[email protected]">[email protected]</a> with your full name and the
5803                        company you work for.
5804
5805                    </div>
5806                </li>
5807                <li><a href="javascript:void(0);" class="canlogin">Copy of certificate <span class="info"><i
5808                                class="fa fa-plus" aria-hidden="true"></i></span></a>
5809                    <div class="logcontent">
5810                        a. If need to view your certificate, please log into your dashboard. On the left-hand side,
5811                        click the “Certificates” tab. If you have any active certificates, you will find them on this
5812                        page. You can view the certificates by clicking the green eye icon or download the certificate
5813                        by clicking on the orange download icon. Watch this tutorial video for more information.
5814                        <a title="_blank" href="https://lms.homeoftraining.com/#/tour?id=yqtu84v1" >https://lms.homeoftraining.com/#/tour?id=yqtu84v1</a>
5815
5816                        - If your account is no longer active and you need your certificate, please email
5817                        [email protected]
5818
5819                        <br />
5820                        b. If you are a manager or admin and want to see all employee certificates, please log into your
5821                        dashboard. On the left-hand side, click the “Certificates” tab. Then select “Employee
5822                        Certificates” from the dropdown. Please select which course certificates you would like to view
5823                        by clicking the blue detail button on the right-hand side. You can view employees' certificates
5824                        by clicking the green icon on the right-hand side, or you can click the view certificates button
5825                        located on the top right-hand side to view all certificates for that course.
5826                        Watch this tutorial video for more information. <a title="_blank" href="https://lms.homeoftraining.com/#/tour?id=egcsi0a9" >https://lms.homeoftraining.com/#/tour?id=egcsi0a9</a>
5827
5828                    </div>
5829                </li>
5830                <li><a href="javascript:void(0);" class="canlogin">Transfer user <span class="info"><i
5831                                class="fa fa-plus" aria-hidden="true"></i></span></a>
5832                    <div class="logcontent">
5833                        If you cannot add a user, this means they already have an account with Home of Training. Please
5834                        email <a href="mailto:[email protected]">[email protected]</a> and let us know the user’s name and new location.
5835                    </div>
5836                </li>
5837                <li><a href="javascript:void(0);" class="canlogin">Course assigned in wrong language <span
5838                            class="info"><i class="fa fa-plus" aria-hidden="true"></i></span></a>
5839                    <div class="logcontent">
5840                        Please email <a href="mailto:[email protected]">[email protected]</a> and include your full name, the course name, the company you
5841                        work for and your preferred language.
5842                    </div>
5843                </li>
5844                <li><a href="javascript:void(0);" class="canlogin">Health inspector at location <span class="info"><i
5845                                class="fa fa-plus" aria-hidden="true"></i></span></a>
5846                    <div class="logcontent">
5847                        We are the authorized training provider under the Ye Olde Falcon Pub, Certification #: 4077557.
5848                        This will be the last company on the list the inspector has. The certification number is located
5849                        on the bottom right-hand corner of every food handler certificate. Please show the health
5850                        inspector this information.
5851                    </div>
5852                </li>
5853                <li><a href="javascript:void(0);" class="canlogin">Schedule Food Manager <span class="info"><i
5854                                class="fa fa-plus" aria-hidden="true"></i></span></a>
5855                    <div class="logcontent">
5856                        a. We have two options for food manager exams. First, is a live proctored exam that must be
5857                        scheduled with us by emailing <a href="mailto:[email protected]">[email protected]</a>. For this option, please ensure that your
5858                        managers are assigned the Food Manager – Study Session Course.
5859                        *Please note this is just a study session not the certification exam. We recommend 2-3 weeks of
5860                        studying prior to taking the exam.
5861                        <br />
5862                        b. Our second option is the online proctored exam offered through Always Food Safe and ProctorU.
5863                        For this course, the Food Manager Online Exam must be assigned to the user. We recommend 2-3
5864                        weeks of studying prior to taking the exam.
5865
5866                        Please email <a href="mailto:[email protected]">[email protected]</a> with any questions or to sign up for and schedule a proctored
5867                        exam. Thank you!
5868
5869                    </div>
5870                </li>
5871                <li><a href="javascript:void(0);" class="canlogin">Billing <span class="info"><i class="fa fa-plus"
5872                                aria-hidden="true"></i></span></a>
5873                    <div class="logcontent">
5874                        If you have questions regarding billing, please email <a href="mailto:[email protected]">[email protected]</a>
5875                    </div>
5876                </li>
5877                <li><a href="javascript:void(0);" id="other">Other <span class="info"><i class="fa fa-plus"
5878                                aria-hidden="true"></i></span></a>
5879                    <div class="logcontent">
5880
5881                    </div>
5882                </li>
5883            </ul>
5884        </div>
5885        <div class="chatbox-form">
5886            <button class="btn" id="formclose">Email Support <span class="minus"><i class="fa fa-angle-left"
5887                        aria-hidden="true"></i> Back</span></button>
5888            <p>Please email <a href="mailto:[email protected]">[email protected]</a> for further inquiries. </p>
5889            <div class="form-label">
5890                <label>Name *</label>
5891                <input type="text" class="intro" id="query_p_name" name="" placeholder="Name" />
5892            </div>
5893            <div class="form-label">
5894                <label>Email *</label>
5895                <input type="text" class="intro" id="query_p_email" name="" placeholder="Email" />
5896            </div>
5897            <div class="form-label">
5898                <label>Message *</label>
5899                <textarea type="text" id="query_message" class="message"></textarea>
5900            </div>
5901            <div class="chat-btn">
5902                <button class="start" id="supportEmail">Send Email</button>
5903            </div>
5904        </div>
5905        <!-- chatbox code end here --><!-- start Simple Custom CSS and JS -->
5906<script>
5907</script>
5907
5908<!-- end Simple Custom CSS and JS -->
5909<!-- start Simple Custom CSS and JS -->
5910<script>
5911        document.getElementById('search-input').addEventListener('input', function() {
5912            const query = this.value.toLowerCase();
5913            const courseSections = document.querySelectorAll('.searchable-course-div .course-section');
5914            let visibleCourseLists = [];
5915            let matchFound = false;
5916
5917            courseSections.forEach(section => {
5918                const heading = section.querySelector('.course-section-heading').textContent.toLowerCase();
5919                const listItems = section.querySelectorAll('.course-list li');
5920                let sectionMatchFound = heading.includes(query);
5921                let matchedItems = [];
5922
5923                if (sectionMatchFound) {
5924                    section.style.display = 'block';
5925                    listItems.forEach(item => item.style.display = 'list-item');
5926                    visibleCourseLists.push(section.querySelector('.course-list'));
5927                    matchFound = true;
5928                } else {
5929                    listItems.forEach(item => {
5930                        if (item.textContent.toLowerCase().includes(query)) {
5931                            sectionMatchFound = true;
5932                            matchedItems.push(item);
5933                        }
5934                    });
5935
5936                    if (sectionMatchFound) {
5937                        section.style.display = 'block';
5938                        listItems.forEach(item => item.style.display = 'none');
5939                        matchedItems.forEach(item => item.style.display = 'list-item');
5940                        visibleCourseLists.push(section.querySelector('.course-list'));
5941                        matchFound = true;
5942                    } else {
5943                        section.style.display = 'none';
5944                    }
5945                }
5946
5947                if (query === '') {
5948                    section.style.display = 'block';
5949                    listItems.forEach(item => item.style.display = 'list-item');
5950                    visibleCourseLists.push(section.querySelector('.course-list'));
5951                    matchFound = true;
5952                }
5953            });
5954
5955            document.querySelectorAll('.course-list').forEach(list => list.classList.remove('single-list-grid-css'));
5956            if (visibleCourseLists.length === 1) {
5957                visibleCourseLists[0].classList.add('single-list-grid-css');
5958            }
5959
5960            const noResultsMessage = document.querySelector('.no-results-section');
5961            if (!matchFound && query !== '') {
5962                noResultsMessage.style.display = 'block';
5963            } else {
5964                noResultsMessage.style.display = 'none';
5965            }
5966        });</script>
5966
5967<!-- end Simple Custom CSS and JS -->
5968
5969<script src='//homeoftraining.com/wp-content/uploads/custom-css-js/26190.js?v=8800'></script>
5969
5970	<div id="hot-variant-picker"
5971		class="hot-variant-picker"
5972		role="dialog"
5973		aria-modal="true"
5974		aria-labelledby="hot-variant-picker-title"
5975		aria-hidden="true"
5976		hidden>
5977		<div class="hot-variant-picker-backdrop" data-hot-variant-close="1"></div>
5978		<div class="hot-variant-picker-card" role="document">
5979			<button type="button"
5980				class="hot-variant-picker-close"
5981				aria-label="Close"
5982				data-hot-variant-close="1">&times;</button>
5983			<h2 id="hot-variant-picker-title" class="hot-variant-picker-title"></h2>
5984			<p class="hot-variant-picker-sub">Pick the version that fits your situation. You can always switch on the next page.</p>
5985			<div class="hot-variant-picker-options" role="group" aria-labelledby="hot-variant-picker-title"></div>
5986		</div>
5987	</div>
5988		
5988<script>
5989	(function () {
5990		var btn = document.querySelector('.hot-bestseller-cta');
5991		if (!btn) { return; }
5992		btn.addEventListener('click', function () {
5993			try {
5994				if (window.posthog && typeof window.posthog.capture === 'function') {
5995					window.posthog.capture('bestseller_strip_click', {
5996						course_slug: btn.getAttribute('data-bestseller-course'),
5997						source: 'landing_page',
5998						page_url: window.location.href
5999					});
6000				}
6001			} catch (_) { /* never break navigation over analytics */ }
6002		});
6003	})();
6004	</script>
6004
6005		
6005<script>
6006	(function () {
6007		var GROUPS = {"food-handler-certificate":{"label":"Food Handler Certificate Program","variants":[{"slug":"food-handler-certificate","label":"Nationally Accredited (ASTM E2659-24)"},{"slug":"florida-food-handler","label":"Florida-specific"}]},"alcohol-server-training":{"label":"Alcohol Safety Training","variants":[{"slug":"california-rbs","label":"California \u2014 RBS"},{"slug":"alcohol-certification","label":"Nationwide \u2014 Employee","default":true},{"slug":"alcohol-server-training","label":"Florida \u2014 Employee"},{"slug":"alcohol-manager-nationwide","label":"Nationwide \u2014 Manager"},{"slug":"alcohol-manager-florida","label":"Florida \u2014 Manager"}]},"sexual-harassment-training":{"label":"Sexual Harassment Training","variants":[{"slug":"sexual-harassment-training","label":"Employee"},{"slug":"california-sexual-harassment","label":"California-specific"}]}};
6008		var modal = document.getElementById('hot-variant-picker');
6009		if (!modal) { return; }
6010
6011		var titleEl   = modal.querySelector('.hot-variant-picker-title');
6012		var optionsEl = modal.querySelector('.hot-variant-picker-options');
6013		var lastFocus = null;
6014		var openState = { parent: null, source: null };
6015
6016		// Selectors covered by the click interceptor. Stay in sync with
6017		// any new CTA classes added in other Phase 10 blocks.
6018		//
6019		// HTN-949: the picker used to fire only on /go/ CTAs, so the two
6020		// browse surfaces walked users straight into the parent course
6021		// (Florida alcohol) with no chance to pick RBS:
6022		//   .course-card   -- Course Library catalog cards
6023		//   .nav-mega a    -- Services megamenu (landing pages / archive)
6024		//   .dropdown-item -- Services dropdown in the homepage ElementsKit nav
6025		// The real gate is still the GROUPS lookup below, so a link only
6026		// opens the modal when it points at a registered parent slug.
6027		var CTA_SELECTOR = '.btn-primary, .nav-cta, .hero-cta-primary, .hot-bestseller-cta, .hot-quickbuy-tile-cta, .course-card, .nav-mega a, .dropdown-item';
6028
6029		// Map a CTA element to a click "source" tag for analytics.
6030		function detectSource(el) {
6031			if (el.closest('.hot-bestseller-strip')) { return 'bestseller_strip'; }
6032			if (el.closest('.hot-quickbuy'))         { return 'quickbuy_tile'; }
6033			if (el.classList.contains('hero-cta-primary') || el.closest('.hot-hero')) { return 'landing_page_cta'; }
6034			if (el.classList.contains('nav-cta'))    { return 'landing_page_cta'; }
6035			// HTN-949 browse surfaces.
6036			if (el.closest('.course-card'))          { return 'course_library'; }
6037			if (el.closest('.nav-mega'))             { return 'services_menu'; }
6038			if (el.classList.contains('dropdown-item')) { return 'services_menu'; }
6039			return 'unknown';
6040		}
6041
6042		// Pull ?course=... out of an absolute or relative href without
6043		// caring about the install path. URL() resolves relative URLs
6044		// against document.baseURI, so /wordpress/go/?course=foo and
6045		// /go/?course=foo and https://homeoftraining.com/go/?course=foo
6046		// all parse identically.
6047		function courseSlugFromHref(href) {
6048			if (!href) { return null; }
6049			try {
6050				var u = new URL(href, window.location.origin);
6051				// Form 1 -- /go/?course=<slug>, the CTA links on landing pages.
6052				if (/(^|\/)go\/?$/.test(u.pathname)) {
6053					return u.searchParams.get('course');
6054				}
6055				// Form 2 (HTN-949) -- /courses/<slug>, the landing-page permalink
6056				// used by Course Library cards and both Services menus. Only a
6057				// single trailing segment matches, so /courses/ (the archive) and
6058				// /courses/category/<term> are left alone.
6059				var m = u.pathname.match(/(^|\/)courses\/([a-z0-9-]+)\/?$/);
6060				if (m) { return m[2]; }
6061				return null;
6062			} catch (_) {
6063				return null;
6064			}
6065		}
6066
6067		function buildOptionButton(variant, isDefault) {
6068			var btn = document.createElement('button');
6069			btn.type = 'button';
6070			btn.className = 'btn-primary hot-variant-option' + (isDefault ? ' is-recommended' : '');
6071			btn.setAttribute('data-variant-slug', variant.slug);
6072			btn.setAttribute('data-variant-label', variant.label);
6073
6074			var label = document.createElement('span');
6075			label.className = 'hot-variant-option-label';
6076			label.textContent = variant.label;
6077			btn.appendChild(label);
6078
6079			// Phase 11: visual highlight only. The "Recommended" word was
6080			// stripped per owner — the .is-recommended class already styles
6081			// the default with the warm fire treatment.
6082			return btn;
6083		}
6084
6085		function openModal(parentSlug, sourceEl) {
6086			var group = GROUPS[parentSlug];
6087			if (!group || !group.variants || group.variants.length < 2) { return false; }
6088
6089			openState.parent = parentSlug;
6090			openState.source = detectSource(sourceEl);
6091
6092			titleEl.textContent = group.label;
6093			optionsEl.innerHTML = '';
6094			// Phase 11.4: explicit `default: true` flag wins over the
6095			// slug==parent fallback. Nationwide alcohol-employee was
6096			// pre-highlighted this way when the parent slug is the
6097			// Florida-employee landing page.
6098			var hasExplicitDefault = false;
6099			for (var d = 0; d < group.variants.length; d++) {
6100				if (group.variants[d] && group.variants[d].default === true) {
6101					hasExplicitDefault = true;
6102					break;
6103				}
6104			}
6105			for (var i = 0; i < group.variants.length; i++) {
6106				var v = group.variants[i];
6107				var isDefault = hasExplicitDefault ? (v.default === true) : (v.slug === parentSlug);
6108				optionsEl.appendChild(buildOptionButton(v, isDefault));
6109			}
6110
6111			lastFocus = document.activeElement;
6112			modal.hidden = false;
6113			modal.setAttribute('aria-hidden', 'false');
6114			document.body.classList.add('hot-variant-picker-open');
6115
6116			// Focus the first option for keyboard users.
6117			var first = optionsEl.querySelector('button');
6118			if (first) {
6119				try { first.focus({ preventScroll: false }); } catch (_) { first.focus(); }
6120			}
6121
6122			try {
6123				if (window.posthog && typeof window.posthog.capture === 'function') {
6124					window.posthog.capture('variant_picker_open', {
6125						parent_slug: parentSlug,
6126						source: openState.source,
6127						page_url: window.location.href
6128					});
6129				}
6130			} catch (_) { /* never break UX over analytics */ }
6131
6132			return true;
6133		}
6134
6135		function closeModal() {
6136			if (modal.hidden) { return; }
6137			modal.hidden = true;
6138			modal.setAttribute('aria-hidden', 'true');
6139			document.body.classList.remove('hot-variant-picker-open');
6140			openState.parent = null;
6141			openState.source = null;
6142			if (lastFocus && typeof lastFocus.focus === 'function') {
6143				try { lastFocus.focus(); } catch (_) {}
6144			}
6145		}
6146
6147		function selectVariant(variantSlug, variantLabel) {
6148			var parent = openState.parent;
6149			var source = openState.source || 'unknown';
6150
6151			try {
6152				if (window.posthog && typeof window.posthog.capture === 'function') {
6153					window.posthog.capture('variant_picker_select', {
6154						parent_slug: parent,
6155						variant_slug: variantSlug,
6156						variant_label: variantLabel,
6157						source: source,
6158						page_url: window.location.href
6159					});
6160				}
6161			} catch (_) { /* never break navigation over analytics */ }
6162
6163			// Build the destination — match the existing /go/ shape so the
6164			// LMS-id resolver in hot_lp_handle_go_redirect handles cart prefill.
6165			var origin = window.location.origin;
6166			var basePath;
6167			try {
6168				// home_url('/go/') as seen in the page — derive from any
6169				// existing /go/ link if we can, else assume /go/. Falls back
6170				// to whatever the install path is.
6171				var probe = document.querySelector('a[href*="/go/?course="], a[href$="/go/"]');
6172				if (probe) {
6173					var u = new URL(probe.getAttribute('href'), origin);
6174					basePath = u.pathname; // e.g. /go/  or  /wordpress/go/
6175				} else {
6176					basePath = '/go/';
6177				}
6178			} catch (_) {
6179				basePath = '/go/';
6180			}
6181
6182			var dest = origin + basePath + '?course=' + encodeURIComponent(variantSlug) + '&autocheckout=1';
6183			window.location.href = dest;
6184		}
6185
6186		// ── Click interception (event delegation) ────────────────────
6187		document.addEventListener('click', function (ev) {
6188			// Allow modifier-clicks (open in new tab, etc.) to pass through.
6189			if (ev.defaultPrevented || ev.button !== 0) { return; }
6190			if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) { return; }
6191
6192			var target = ev.target;
6193			if (!target) { return; }
6194
6195			// First handle clicks INSIDE the modal — variant select + close.
6196			var optionBtn = target.closest && target.closest('.hot-variant-option');
6197			if (optionBtn) {
6198				ev.preventDefault();
6199				selectVariant(
6200					optionBtn.getAttribute('data-variant-slug'),
6201					optionBtn.getAttribute('data-variant-label')
6202				);
6203				return;
6204			}
6205			var closeEl = target.closest && target.closest('[data-hot-variant-close="1"]');
6206			if (closeEl) {
6207				ev.preventDefault();
6208				closeModal();
6209				return;
6210			}
6211
6212			// Then handle CTA interception OUTSIDE the modal.
6213			var anchor = target.closest && target.closest('a');
6214			if (!anchor) { return; }
6215			if (!anchor.matches(CTA_SELECTOR)) { return; }
6216
6217			var slug = courseSlugFromHref(anchor.getAttribute('href'));
6218			if (!slug) { return; }
6219			if (!Object.prototype.hasOwnProperty.call(GROUPS, slug)) { return; }
6220
6221			// We have a parent CTA — intercept and open the modal.
6222			ev.preventDefault();
6223			openModal(slug, anchor);
6224		}, false);
6225
6226		// Esc closes.
6227		document.addEventListener('keydown', function (ev) {
6228			if (ev.key === 'Escape' && !modal.hidden) {
6229				ev.preventDefault();
6230				closeModal();
6231			}
6232		}, false);
6233	})();
6234	</script>
6234
6235	
6235<script>
6236(function(){
6237  function run(){
6238    var els=document.querySelectorAll(".elementor-widget-elementskit-funfact .number-percentage");
6239    if(!els.length||!window.jQuery||!jQuery.fn.animateNumbers||!("IntersectionObserver" in window)) return;
6240    var io=new IntersectionObserver(function(entries,o){
6241      entries.forEach(function(en){
6242        if(!en.isIntersecting) return;
6243        o.unobserve(en.target);
6244        var $n=jQuery(en.target);
6245        if(parseInt(($n.text()||"").replace(/,/g,""),10)!==0) return; /* plugin already ran */
6246        var v=parseInt($n.data("value"),10), d=parseInt($n.data("animation-duration"),10)||3500;
6247        if(isNaN(v)) return;
6248        if($n.data("style")==="static"||typeof Odometer==="undefined") $n.animateNumbers(v,true,d);
6249        else new Odometer({el:en.target,value:0,duration:d}).update(v);
6250      });
6251    },{threshold:0.25});
6252    els.forEach(function(e){io.observe(e);});
6253  }
6254  var start=function(){setTimeout(run,1200);};
6255  if(document.readyState==="loading") document.addEventListener("DOMContentLoaded",start); else start();
6256})();
6257</script>
6257
6258</body>
6259</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.