-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathChampions.html
More file actions
652 lines (612 loc) · 46 KB
/
Copy pathChampions.html
File metadata and controls
652 lines (612 loc) · 46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="https://cdn.prod.website-files.com/6266ff495972f5842b11a116/628cf51d4283cd71aa6d47e0_favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developing Champions at JupiterOne</title>
<style>
/* ═══════════════════════════════════════════
TOKENS — from provided stylesheet
═══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--blue:#2563eb;--blue-light:#3b82f6;--blue-dark:#1e40af;
--bg:#f0f4f8;--surface:#ffffff;--surface-2:#f8fafc;
--border:#e2e8f0;--border-dark:#cbd5e1;
--text:#0f172a;--text-muted:#64748b;--text-light:#94a3b8;
}
html{scroll-behavior:smooth}
body{
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
background:var(--bg);color:var(--text);
display:flex;flex-direction:column;align-items:center;
min-height:100vh;font-size:15px;
-webkit-font-smoothing:antialiased;
}
/* ═══════════════════════════════════════════
NAV — white glass, border-bottom
═══════════════════════════════════════════ */
.nav{
position:sticky;top:0;z-index:200;
width:100%;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
padding:0 32px;height:56px;
box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.nav-logo{font-size:1rem;font-weight:800;letter-spacing:4px;color:#0dd9cc}
.nav-sep{width:1px;height:18px;background:var(--border-dark)}
.nav-tagline{font-size:0.85rem;font-weight:600;color:var(--text-muted);letter-spacing:1px}
/* Tabs — rounded buttons, no 3D */
.nav-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
.tab{
padding:6px 14px;border-radius:8px;
font-size:0.72rem;font-weight:600;letter-spacing:0.5px;
cursor:pointer;white-space:nowrap;
color:var(--text-muted);
border:1px solid transparent;
background:transparent;
transition:all 0.2s;text-transform:uppercase;
}
.tab:hover{color:var(--blue);background:#eff6ff}
.tab.active{color:var(--blue);background:#dbeafe;border-color:#bfdbfe}
.nav-prog{font-size:0.7rem;color:var(--text-light);white-space:nowrap}
/* ═══════════════════════════════════════════
DECK
═══════════════════════════════════════════ */
.deck{width:100%;max-width:1100px;padding:0 24px 60px}
.slide{display:none;animation:fadeIn 0.3s ease}
.slide.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* SLIDE HEADER */
.sh{padding:48px 0 32px;border-bottom:1px solid var(--border);margin-bottom:32px}
.stag{
display:inline-block;font-size:0.65rem;font-weight:700;letter-spacing:2.5px;
text-transform:uppercase;color:var(--blue);
background:#dbeafe;border:1px solid #bfdbfe;
border-radius:20px;padding:4px 12px;margin-bottom:14px;
}
.stitle{font-size:2.2rem;font-weight:800;line-height:1.2;margin-bottom:12px;color:var(--text)}
.ssub{font-size:1rem;color:var(--text-muted);max-width:640px;line-height:1.6}
/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* CARDS */
.card{
background:var(--surface);border:1px solid var(--border);
border-radius:14px;padding:22px 20px;
box-shadow:0 1px 3px rgba(0,0,0,0.05);
transition:transform 0.2s,box-shadow 0.2s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.card-icon{font-size:1.6rem;margin-bottom:10px}
.card-title{font-size:0.9rem;font-weight:700;color:var(--text);margin-bottom:8px}
.card-body{font-size:0.8rem;color:var(--text-muted);line-height:1.6}
/* HERO */
.hero{
min-height:calc(100vh - 56px);
display:flex;flex-direction:column;justify-content:center;
padding:60px 0;
}
.hero-eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.hero-title{font-size:3.6rem;font-weight:900;line-height:1.08;letter-spacing:-0.5px;margin-bottom:10px}
.hero-title span{color:var(--blue)}
.hero-sub{font-size:1.05rem;color:var(--text-muted);max-width:580px;line-height:1.75;margin-bottom:38px}
.pillrow{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:46px}
.hpill{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:30px;border:1px solid;font-size:0.82rem;font-weight:600}
.hp1{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.hp2{background:#fffbeb;border-color:#fde68a;color:#b45309}
.hp3{background:#f0fdf4;border-color:#bbf7d0;color:#065f46}
.hp4{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.hp5{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.hp6{background:var(--surface-2);border-color:var(--border-dark);color:var(--text-muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:600px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.stat-n{font-size:1.8rem;font-weight:800;color:var(--blue)}
.stat-l{font-size:0.75rem;color:var(--text-muted);margin-top:4px;line-height:1.4}
/* DIVIDER */
.sdiv{display:flex;align-items:center;gap:16px;margin:28px 0 20px}
.sdiv .dl{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-light);white-space:nowrap}
.sdiv .dline{flex:1;height:1px;background:var(--border)}
/* CALLOUT */
.callout{border-radius:12px;padding:18px 20px;margin:20px 0;display:flex;gap:14px;align-items:flex-start}
.ci{background:#eff6ff;border:1px solid #bfdbfe}
.cw{background:#fffbeb;border:1px solid #fde68a}
.cd{background:#fef2f2;border:1px solid #fecaca}
.cs{background:#f0fdf4;border:1px solid #bbf7d0}
.callout-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.callout-text{font-size:0.85rem;color:var(--text-muted);line-height:1.6}
.callout-text strong{color:var(--text)}
/* TIER CARDS */
.tier{
border-radius:14px;padding:24px 22px;
border:1px solid var(--border);
background:var(--surface);
box-shadow:0 1px 3px rgba(0,0,0,0.05);
transition:transform 0.2s,box-shadow 0.2s;
}
.tier:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.09)}
.tier-badge{display:inline-block;font-size:0.6rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:12px}
.tier-icon{font-size:2rem;margin-bottom:8px}
.tier-name{font-size:1rem;font-weight:800;margin-bottom:6px;color:var(--text)}
.tier-sub{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:12px}
.tier-desc{font-size:0.78rem;color:var(--text-muted);line-height:1.65;margin-bottom:14px}
.tier-tags{display:flex;flex-wrap:wrap;gap:6px}
.ttag{font-size:0.68rem;padding:3px 9px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-light)}
.t-contact{border-top:3px solid #ef4444}
.t-contact .tier-badge{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.t-coach{border-top:3px solid #f59e0b}
.t-coach .tier-badge{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.t-champ{border-top:3px solid var(--blue)}
.t-champ .tier-badge{background:#dbeafe;color:var(--blue-dark);border:1px solid #bfdbfe}
.t-power{border-top:3px solid #8b5cf6}
.t-power .tier-badge{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe}
/* PROGRESS BAR */
.pbar-wrap{margin:6px 0 14px}
.pbar-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-light);margin-bottom:5px}
.pbar{height:5px;background:var(--border);border-radius:999px;overflow:hidden}
.pbar-fill{height:100%;border-radius:999px}
/* TABLE */
.vtable{width:100%;border-collapse:collapse;font-size:0.82rem;background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.vtable th{background:#eff6ff;padding:12px 16px;text-align:left;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--blue-dark);border-bottom:1px solid #bfdbfe}
.vtable td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text-muted);line-height:1.55;vertical-align:top}
.vtable tr:last-child td{border-bottom:none}
.vtable tr:hover td{background:var(--surface-2)}
.vtable .vcat{font-weight:700;color:var(--text);white-space:nowrap}
/* CONVERSATION */
.convo{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.convo-hd{padding:12px 18px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.convo-body{padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.bubble{max-width:86%;padding:10px 14px;border-radius:12px;font-size:0.8rem;line-height:1.65}
.b-rep{background:var(--surface);border:1px solid var(--border);color:var(--text);align-self:flex-start;border-radius:4px 12px 12px 12px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.b-champ{background:var(--text);color:rgba(255,255,255,0.88);align-self:flex-end;border-radius:12px 4px 12px 12px}
.b-label{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.b-rep .b-label{color:var(--blue)}
.b-champ .b-label{color:rgba(96,165,250,0.8);text-align:right}
.b-wrap-r{align-self:flex-start}
.b-wrap-c{align-self:flex-end}
/* CHECKLIST */
.cklist{display:flex;flex-direction:column;gap:8px}
.ck-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:0.82rem;color:var(--text-muted);line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.ckbox{width:18px;height:18px;min-width:18px;border:2px solid var(--border-dark);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:#16a34a;cursor:pointer;transition:all 0.2s;margin-top:1px;user-select:none}
.ckbox.checked{background:#f0fdf4;border-color:#16a34a}
/* SCORE CARDS */
.score-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.score-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.score-icon{font-size:1.8rem;margin-bottom:6px}
.score-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-light);margin-bottom:10px}
.score-badge{display:inline-block;padding:4px 13px;border-radius:20px;font-size:0.73rem;font-weight:700}
.sb-strong{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.sb-weak{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.sb-warn{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
/* PILLS */
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pill{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:4px 11px;font-size:0.73rem;color:var(--text-light)}
/* FOOTER */
.sf{margin-top:48px;padding:16px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.sf-l{font-size:0.72rem;color:var(--text-light)}
.sf-nav{display:flex;gap:8px;align-items:center}
/* BUTTONS */
.btn{padding:8px 18px;border-radius:8px;font-size:0.8rem;font-weight:600;cursor:pointer;border:1px solid var(--border-dark);background:var(--surface);color:var(--text-muted);transition:all 0.2s}
.btn:hover{border-color:var(--blue);color:var(--blue);background:#eff6ff}
.btn-p{background:var(--blue);border-color:var(--blue);color:#fff !important}
.btn-p:hover{background:var(--blue-dark) !important;border-color:var(--blue-dark) !important;transform:translateY(-1px)}
.btn-icon{padding:7px 11px;font-size:1.1rem;line-height:1;border-radius:8px;border:1px solid var(--border-dark);background:var(--surface);cursor:pointer;transition:all 0.2s;position:relative;display:flex;align-items:center;justify-content:center}
.btn-icon:hover{border-color:var(--blue);background:#eff6ff}
.btn-icon[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:0.68rem;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:999}
/* PRINT */
@page{margin:0.75in;size:letter portrait}
@media print{
.nav,.sf{display:none !important}
body{background:#fff}
.deck{padding:0}
.slide{display:none !important}
#s6{display:block !important}
}
/* RESPONSIVE */
@media(max-width:768px){
.hero-title{font-size:2.6rem}
.g4,.g3{grid-template-columns:repeat(2,1fr)}
.g2{grid-template-columns:1fr}
.score-wrap{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr}
.nav{padding:0 16px}
.deck{padding:0 16px 60px}
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<a class="nav-brand" href="Home.html">
<div class="nav-logo">Selling</div>
<div class="nav-sep"></div>
<div class="nav-tagline">JupiterOne </div>
</a>
<div class="nav-tabs">
<div class="tab active" onclick="go(0)">Intro</div>
<div class="tab" onclick="go(1)">Contact → Champion</div>
<div class="tab" onclick="go(2)">Business Value</div>
<div class="tab" onclick="go(3)">Conversations</div>
<div class="tab" onclick="go(4)">Test & Enable</div>
<div class="tab" onclick="go(5)">Deal Reviews</div>
<div class="tab" onclick="go(6)">Process Checklist</div>
</div>
<div class="nav-prog" id="np">1 / 7</div>
</nav>
<div class="deck">
<!-- ── SLIDE 0: HERO ── -->
<div class="slide active" id="s0">
<div class="hero">
<div class="hero-eyebrow">JupiterOne · Sales Enablement</div>
<div class="hero-title">Developing<br><span>Champions</span></div>
<div class="hero-sub">Your champion is your most powerful asset in a complex deal. This deck teaches you how to identify, develop, and activate champions who build business value on your behalf — even when you're not in the room.</div>
<div class="pillrow">
<div class="hpill hp1">🏆 Identify True Champions</div>
<div class="hpill hp2">💰 Build Business Value Together</div>
<div class="hpill hp3">🧠 Arm with the Right Story</div>
<div class="hpill hp4">⚡ Activate & Test</div>
<div class="hpill hp5">🔗 Multi-Thread at Risk Deals</div>
<div class="hpill hp6">🚩 Spot & Fix Weak Champions</div>
</div>
<div class="stats">
<div class="stat"><div class="stat-n">45%</div><div class="stat-l">Reduction in late-stage losses with strong champion development</div></div>
<div class="stat"><div class="stat-n">3×</div><div class="stat-l">More likely to win when champion can articulate ROI to the EB</div></div>
<div class="stat"><div class="stat-n">60%</div><div class="stat-l">Of deals lost because champion lacked influence or went silent</div></div>
</div>
</div>
<div class="sf">
<div class="sf-l">Slide 1 of 7</div>
<div class="sf-nav"><button class="btn btn-p" onclick="go(1)">Start: Contact → Champion →</button></div>
</div>
</div>
<!-- ── SLIDE 1: TIERS ── -->
<div class="slide" id="s1">
<div class="sh">
<div class="stag">Champion Tiers</div>
<div class="stitle">Not All Allies Are Champions</div>
<div class="ssub">Most reps mistake a friendly contact for a champion. Know exactly where your ally sits — and what it takes to move them up.</div>
</div>
<div class="g4" style="margin-bottom:20px">
<div class="tier t-contact">
<div class="tier-badge">Tier 1</div><div class="tier-icon">👤</div>
<div class="tier-name">Contact</div><div class="tier-sub">Information Provider</div>
<div class="tier-desc">Takes your calls. Answers questions. Forwards invites. Has <strong>no influence</strong> and <strong>no stake</strong> in the outcome. Friendly but powerless.</div>
<div class="pbar-wrap"><div class="pbar-label">Influence</div><div class="pbar"><div class="pbar-fill" style="width:12%;background:#ef4444"></div></div></div>
<div class="pbar-wrap"><div class="pbar-label">Motivation</div><div class="pbar"><div class="pbar-fill" style="width:10%;background:#ef4444"></div></div></div>
<div class="tier-tags"><span class="ttag">Low risk to engage</span><span class="ttag">Can't sponsor</span></div>
</div>
<div class="tier t-coach">
<div class="tier-badge">Tier 2</div><div class="tier-icon">🎓</div>
<div class="tier-name">Coach</div><div class="tier-sub">Process Navigator</div>
<div class="tier-desc">Knows the org, shares intel, helps you navigate. Has access but <strong>limited influence</strong>. Won't advocate at risk to themselves.</div>
<div class="pbar-wrap"><div class="pbar-label">Influence</div><div class="pbar"><div class="pbar-fill" style="width:35%;background:#f59e0b"></div></div></div>
<div class="pbar-wrap"><div class="pbar-label">Motivation</div><div class="pbar"><div class="pbar-fill" style="width:30%;background:#f59e0b"></div></div></div>
<div class="tier-tags"><span class="ttag">Useful for intel</span><span class="ttag">Not a champion yet</span></div>
</div>
<div class="tier t-champ">
<div class="tier-badge">Tier 3</div><div class="tier-icon">🏆</div>
<div class="tier-name">Champion</div><div class="tier-sub">Internal Seller</div>
<div class="tier-desc">Wants your solution to win. Has <strong>real organizational influence</strong>. Will actively sell on your behalf and navigate internal obstacles.</div>
<div class="pbar-wrap"><div class="pbar-label">Influence</div><div class="pbar"><div class="pbar-fill" style="width:72%;background:var(--blue)"></div></div></div>
<div class="pbar-wrap"><div class="pbar-label">Motivation</div><div class="pbar"><div class="pbar-fill" style="width:78%;background:var(--blue)"></div></div></div>
<div class="tier-tags"><span class="ttag">Introduces to EB</span><span class="ttag">Presents biz case</span><span class="ttag">Handles objections</span></div>
</div>
<div class="tier t-power">
<div class="tier-badge">Tier 4</div><div class="tier-icon">⚡</div>
<div class="tier-name">Power Champion</div><div class="tier-sub">Executive Sponsor</div>
<div class="tier-desc">Has authority near the Economic Buyer. Brings your solution into leadership conversations, defends budget, and accelerates the deal at will.</div>
<div class="pbar-wrap"><div class="pbar-label">Influence</div><div class="pbar"><div class="pbar-fill" style="width:96%;background:#8b5cf6"></div></div></div>
<div class="pbar-wrap"><div class="pbar-label">Motivation</div><div class="pbar"><div class="pbar-fill" style="width:90%;background:#8b5cf6"></div></div></div>
<div class="tier-tags"><span class="ttag">Near-EB access</span><span class="ttag">Can unlock budget</span><span class="ttag">Rare — develop early</span></div>
</div>
</div>
<div class="callout cw">
<div class="callout-icon">⚠️</div>
<div class="callout-text"><strong>The Most Common Mistake:</strong> Reps build rapport with a friendly Coach or Contact and assume they have a Champion. If your ally says "I'll pass that along" instead of "I'll walk them through it myself" — you don't have a champion yet. Test them before you trust them.</div>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">The Three Champion Tests</div><div class="dline"></div></div>
<div class="g3">
<div class="card" style="border-top:3px solid var(--blue)">
<div class="card-icon">📩</div><div class="card-title">Test 1 — The Ask</div>
<div class="card-body">Ask your champion to do something low-stakes: forward a 1-pager, arrange an intro, share an internal doc. <strong>Inaction disqualifies.</strong> A real champion acts within 48 hours without being chased.</div>
</div>
<div class="card" style="border-top:3px solid var(--blue)">
<div class="card-icon">🎤</div><div class="card-title">Test 2 — The Pitch</div>
<div class="card-body">Ask: <em>"Would you be comfortable walking leadership through the business case we built?"</em> A champion says yes and asks for talking points. A contact deflects or defers.</div>
</div>
<div class="card" style="border-top:3px solid var(--blue)">
<div class="card-icon">🛡️</div><div class="card-title">Test 3 — The Defense</div>
<div class="card-body">Ask: <em>"If IT or Finance pushed back, how would you handle it?"</em> A champion has an answer and owns the outcome. A coach shrugs and says "I'd escalate it to you."</div>
</div>
</div>
<div class="sf">
<div class="sf-l">Slide 2 of 7</div>
<div class="sf-nav"><button class="btn" onclick="go(0)">← Back</button><button class="btn btn-p" onclick="go(2)">Next: Business Value →</button></div>
</div>
</div>
<!-- ── SLIDE 2: BUSINESS VALUE ── -->
<div class="slide" id="s2">
<div class="sh">
<div class="stag">Business Value</div>
<div class="stitle">Building Value With Your Champion</div>
<div class="ssub">A champion armed with vague benefits will lose the internal sale. Your job is to help them build a business case so compelling they can present it without you.</div>
</div>
<div class="callout ci">
<div class="callout-icon">💡</div>
<div class="callout-text"><strong>The Golden Rule:</strong> The business case must be built <em>with</em> the champion using <em>their</em> data — not delivered <em>to</em> them as a vendor PDF. When they own the numbers, they defend the numbers.</div>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">JupiterOne Value Levers by Buyer Persona</div><div class="dline"></div></div>
<div style="overflow-x:auto">
<table class="vtable">
<thead><tr><th>Persona</th><th>Their Core Pain</th><th>JupiterOne Value Lever</th><th>Metric to Co-Build</th><th>EB Connection</th></tr></thead>
<tbody>
<tr><td class="vcat">🔐 CISO</td><td>Can't see everything in the attack surface — blind spots create breach risk</td><td>Complete, continuous asset visibility across cloud, code, identity & devices</td><td>% reduction in undetected assets; MTTR on critical findings</td><td>Board risk posture reporting; cyber insurance premium impact</td></tr>
<tr><td class="vcat">☁️ Cloud Security Lead</td><td>Misconfigs and drift discovered too late — after deployment</td><td>Policy-as-code + graph-based misconfiguration detection at build time</td><td>Misconfigs caught pre-prod vs. post-prod (cost per remediation)</td><td>Engineering velocity unlocked; audit findings reduced</td></tr>
<tr><td class="vcat">✅ Compliance / GRC</td><td>Manual evidence collection kills audit cycles — months of spreadsheet hell</td><td>Automated compliance evidence mapped to controls (SOC2, ISO, FedRAMP)</td><td>Audit prep hours saved × FTE cost; % controls automated</td><td>Audit cost reduction; audit cycle time from months → weeks</td></tr>
<tr><td class="vcat">🛠️ SecOps / Detection</td><td>Alert triage with no asset context — every alert treated the same</td><td>Asset context layered on alerts — prioritize by business criticality</td><td>Alerts triaged per analyst per day; MTTR reduction %</td><td>Analyst headcount avoidance; SLA compliance improvement</td></tr>
<tr><td class="vcat">💼 IT / DevOps</td><td>No single source of truth for what's deployed — shadow IT everywhere</td><td>Auto-discovered, continuously updated CMDB replacing manual spreadsheets</td><td>Time saved on asset audits; incidents caused by unknown assets</td><td>Operational risk reduction; tool consolidation savings</td></tr>
</tbody>
</table>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">The 4-Step Business Case Co-Build</div><div class="dline"></div></div>
<div class="g4">
<div class="card" style="border-left:3px solid var(--blue)"><div class="card-icon">1️⃣</div><div class="card-title">Quantify Current State</div><div class="card-body">Get real numbers from the champion: hours spent, FTEs involved, incidents in last 12 months, audit findings, tool count. Use their words and their data.</div></div>
<div class="card" style="border-left:3px solid var(--blue)"><div class="card-icon">2️⃣</div><div class="card-title">Attach Consequence</div><div class="card-body">Translate the pain into dollars: labor cost, breach exposure, audit remediation cost, engineering time lost. Ask "what would you put on that in your budget model?"</div></div>
<div class="card" style="border-left:3px solid var(--blue)"><div class="card-icon">3️⃣</div><div class="card-title">Model 3 Scenarios</div><div class="card-body">Present conservative, base, and optimistic outcomes — let the champion pick the one they'd stand behind. Never present a single number. Ownership transfers when they choose.</div></div>
<div class="card" style="border-left:3px solid var(--blue)"><div class="card-icon">4️⃣</div><div class="card-title">Tie to EB's Goals</div><div class="card-body">Research the EB's priorities. Map your metrics to their KPIs — not generic savings. "This frees $X that your CTO committed to reinvesting in product velocity."</div></div>
</div>
<div class="sf">
<div class="sf-l">Slide 3 of 7</div>
<div class="sf-nav"><button class="btn" onclick="go(1)">← Back</button><button class="btn btn-p" onclick="go(3)">Next: Conversations →</button></div>
</div>
</div>
<!-- ── SLIDE 3: CONVERSATIONS ── -->
<div class="slide" id="s3">
<div class="sh">
<div class="stag">Champion Conversations</div>
<div class="stitle">What to Say at Every Stage</div>
<div class="ssub">The exact conversations that move a contact to champion and a champion toward power champion. Use these as starting points — make them yours.</div>
</div>
<div class="convo">
<div class="convo-hd" style="background:#eff6ff;color:var(--blue-dark)">🎯 Stage 1 — Discovering Personal Motivation</div>
<div class="convo-body">
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"Beyond your team hitting its goals — what would this project mean for you personally if it gets delivered well?"</div></div>
<div class="b-wrap-c"><div class="b-label" style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;color:rgba(96,165,250,0.8);text-align:right">Champion</div><div class="bubble b-champ">"Honestly? If we can get the compliance piece automated, it's a huge win for me. I've been promising my VP we could cut audit prep in half for two years."</div></div>
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"That's exactly what we should put in the business case — let's build the model around your audit cycle. If we can show the CFO the hours and cost, that becomes your win, not just a vendor claim."</div></div>
</div>
</div>
<div class="convo">
<div class="convo-hd" style="background:#eff6ff;color:var(--blue-dark)">💼 Stage 2 — Co-Building the Business Case</div>
<div class="convo-body">
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"You mentioned audit prep takes 3 people about 6 weeks. What's the fully loaded cost of that in your model — do you use $150K per FTE or something different?"</div></div>
<div class="b-wrap-c"><div class="b-label" style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;color:rgba(96,165,250,0.8);text-align:right">Champion</div><div class="bubble b-champ">"We use $180K loaded. So that's around $162K in labor just for one audit cycle. And we do two a year."</div></div>
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"$324K a year in audit labor alone. Customers like yours typically automate 70–80% of evidence collection. Want to model 70% reduction as the conservative case — so $226K saved — and let your CFO decide if that's the right assumption?"</div></div>
</div>
</div>
<div class="convo">
<div class="convo-hd" style="background:#eff6ff;color:var(--blue-dark)">🤝 Stage 3 — Asking the Champion to Sell Internally</div>
<div class="convo-body">
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"We've got a really strong business case here. Would you be comfortable walking Sarah through this before our exec meeting — maybe 15 minutes to frame the problem and the numbers before I present?"</div></div>
<div class="b-wrap-c"><div class="b-label" style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;color:rgba(96,165,250,0.8);text-align:right">Champion</div><div class="bubble b-champ">"Yeah, I can do that. She trusts me more than a vendor deck. Do you have a 1-pager I can send her today so she's not going in cold?"</div></div>
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"Sending it in 30 minutes. I'll make it look like it came from your team's analysis — your data, your numbers. She needs to own this decision, not just approve ours."</div></div>
</div>
</div>
<div class="convo">
<div class="convo-hd" style="background:#fef2f2;color:#dc2626">🚩 Stage 4 — Champion Going Cold (Recovery)</div>
<div class="convo-body">
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"Hey — haven't heard from you in a couple weeks and I want to make sure we're still aligned. Is the project still on track, or has something shifted internally?"</div></div>
<div class="b-wrap-c"><div class="b-label" style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;color:rgba(96,165,250,0.8);text-align:right">Champion</div><div class="bubble b-champ">"Sorry — things got hectic. There's been some internal pushback from IT about the integration complexity."</div></div>
<div class="b-wrap-r"><div class="b-label b-rep">Rep</div><div class="bubble b-rep">"That's really helpful to know. Can we get 20 minutes with your IT lead this week? I'll bring our solutions engineer to address integration concerns directly — and I'll prep you on what they're likely to ask so you can back it up."</div></div>
</div>
</div>
<div class="sf">
<div class="sf-l">Slide 4 of 7</div>
<div class="sf-nav"><button class="btn" onclick="go(2)">← Back</button><button class="btn btn-p" onclick="go(4)">Next: Test & Enable →</button></div>
</div>
</div>
<!-- ── SLIDE 4: TEST & ENABLE ── -->
<div class="slide" id="s4">
<div class="sh">
<div class="stag">Activation</div>
<div class="stitle">Test, Arm & Activate Your Champion</div>
<div class="ssub">A champion who can't articulate your value internally is a liability. Arm them with everything they need — then test if they'll use it.</div>
</div>
<div class="g2">
<div>
<div class="sdiv" style="margin-top:0"><div class="dline"></div><div class="dl">What to Give Your Champion</div><div class="dline"></div></div>
<div class="cklist">
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div><strong>1-Page Executive Brief</strong> — their data, their pain, JupiterOne value. Written in their voice, not vendor language.</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div><strong>Business Case Model</strong> — 3-scenario spreadsheet using their numbers. Conservative, base, optimistic.</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div><strong>Objection Prep Sheet</strong> — the top 5 objections they'll hear from IT, Finance, or their boss — with responses.</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div><strong>Reference Customer Story</strong> — a named customer in their industry/size with a similar pain.</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div><strong>Risk + Urgency Framing</strong> — what happens if this isn't solved in 6 months. Tied to a real date they own.</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div><strong>Competitive Positioning Brief</strong> — why JupiterOne over the alternatives, from the buyer's criteria.</div>
</div>
</div>
<div>
<div class="sdiv" style="margin-top:0"><div class="dline"></div><div class="dl">Champion Activation Actions</div><div class="dline"></div></div>
<div class="g2" style="gap:12px">
<div class="card" style="border-top:3px solid var(--blue)"><div class="card-icon">📧</div><div class="card-title">Forward the Brief</div><div class="card-body">Ask them to send the 1-pager to the EB with their own note. If they won't — red flag.</div></div>
<div class="card" style="border-top:3px solid var(--blue)"><div class="card-icon">📅</div><div class="card-title">Set the EB Meeting</div><div class="card-body">Ask them to book the "executive alignment" session directly. They own the relationship.</div></div>
<div class="card" style="border-top:3px solid var(--blue)"><div class="card-icon">🗣️</div><div class="card-title">Brief Prep Call</div><div class="card-body">Run a 20-min prep call before every EB meeting. Role-play the business case, rehearse objections.</div></div>
<div class="card" style="border-top:3px solid var(--blue)"><div class="card-icon">🔁</div><div class="card-title">Post-Meeting Debrief</div><div class="card-body">Get a debrief within 24 hours of every internal meeting your champion runs.</div></div>
</div>
</div>
</div>
<div class="callout cs">
<div class="callout-icon">✅</div>
<div class="callout-text"><strong>The Activation Mindset:</strong> You are a sales coach. Your champion is your rep inside the account. Your job is to give them the same tools, confidence, and prep you'd want before a high-stakes exec meeting.</div>
</div>
<div class="sf">
<div class="sf-l">Slide 5 of 7</div>
<div class="sf-nav"><button class="btn" onclick="go(3)">← Back</button><button class="btn btn-p" onclick="go(5)">Next: Deal Reviews →</button></div>
</div>
</div>
<!-- ── SLIDE 5: DEAL REVIEWS ── -->
<div class="slide" id="s5">
<div class="sh">
<div class="stag">Deal Reviews</div>
<div class="stitle">Champion Health in Your Pipeline</div>
<div class="ssub">How to assess champion strength in weekly deal reviews and catch deteriorating deals before they slip.</div>
</div>
<div class="sdiv" style="margin-top:0"><div class="dline"></div><div class="dl">Champion Strength Assessment</div><div class="dline"></div></div>
<div style="overflow-x:auto">
<table class="vtable">
<thead><tr><th>Signal</th><th>🟢 Strong Champion</th><th>🟡 Developing Champion</th><th>🔴 Weak / No Champion</th></tr></thead>
<tbody>
<tr><td class="vcat">EB Access</td><td>Has introduced you directly</td><td>Says they will but hasn't yet</td><td>Blocks access or "not necessary"</td></tr>
<tr><td class="vcat">Business Case</td><td>Can present it without you in room</td><td>Understands it but defers to you</td><td>Can't articulate ROI at all</td></tr>
<tr><td class="vcat">Internal Activity</td><td>Proactively shares intel & advances deal</td><td>Responds to your prompts only</td><td>Goes quiet between your calls</td></tr>
<tr><td class="vcat">Objection Handling</td><td>Addresses internal pushback directly</td><td>Forwards objections to you</td><td>Unaware of objections or avoids them</td></tr>
<tr><td class="vcat">Personal Stake</td><td>Career/bonus tied to project success</td><td>Project is important but not personal</td><td>No identifiable personal upside</td></tr>
<tr><td class="vcat">Urgency Ownership</td><td>Drives timeline based on business need</td><td>Agrees urgency but doesn't push it</td><td>No timeline pressure from their side</td></tr>
</tbody>
</table>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">Champion Score in Your Current Deals</div><div class="dline"></div></div>
<div class="score-wrap">
<div class="score-card"><div class="score-icon">🏆</div><div class="score-label">Champion Tier</div><div style="display:flex;justify-content:center;gap:8px;flex-wrap:wrap"><span class="score-badge sb-strong">Champion ✓</span><span class="score-badge sb-warn">Coach Only ⚠️</span><span class="score-badge sb-weak">No Champion ✗</span></div></div>
<div class="score-card"><div class="score-icon">💼</div><div class="score-label">Business Case Readiness</div><div style="display:flex;justify-content:center;gap:8px;flex-wrap:wrap"><span class="score-badge sb-strong">EB-Ready ✓</span><span class="score-badge sb-warn">Draft Only ⚠️</span><span class="score-badge sb-weak">Not Built ✗</span></div></div>
<div class="score-card"><div class="score-icon">⚡</div><div class="score-label">Activation Status</div><div style="display:flex;justify-content:center;gap:8px;flex-wrap:wrap"><span class="score-badge sb-strong">Actively Selling ✓</span><span class="score-badge sb-warn">Passive ⚠️</span><span class="score-badge sb-weak">Silent ✗</span></div></div>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">Red Flag Recovery Actions</div><div class="dline"></div></div>
<div class="g3">
<div class="card" style="border-top:3px solid #ef4444"><div class="card-icon">👻</div><div class="card-title">Champion Went Dark</div><div class="card-body">Don't wait. Direct outreach within 48 hours. Simultaneously identify a secondary stakeholder.<div class="pills"><span class="pill">Multi-thread now</span><span class="pill">Ping within 48h</span></div></div></div>
<div class="card" style="border-top:3px solid #f59e0b"><div class="card-icon">🔄</div><div class="card-title">Champion Lost Influence</div><div class="card-body">Org change? Map the new power structure. Ask your champion to introduce you to the new decision-maker.<div class="pills"><span class="pill">Re-map org</span><span class="pill">New intro required</span></div></div></div>
<div class="card" style="border-top:3px solid #ef4444"><div class="card-icon">🧊</div><div class="card-title">Never Had a Champion</div><div class="card-body">If you're in Stage 3+ with no verified champion, the deal is at serious risk. Qualify or exit.<div class="pills"><span class="pill">Qualify or exit</span><span class="pill">Find new entry point</span></div></div></div>
</div>
<div class="sf">
<div class="sf-l">Slide 6 of 7</div>
<div class="sf-nav"><button class="btn" onclick="go(4)">← Back</button><button class="btn btn-p" onclick="go(6)">Next: Process Checklist →</button></div>
</div>
</div>
<!-- ── SLIDE 6: Process Checklist ── -->
<div class="slide" id="s6">
<div class="sh">
<div class="stag">Process Checklist</div>
<div class="stitle">Champion Development Process Checklist</div>
<div class="ssub">Your week-by-week champion development checklist. Use this on every deal over $50K. Complete it before your next deal review.</div>
</div>
<div class="g2">
<div>
<div class="sdiv" style="margin-top:0"><div class="dline"></div><div class="dl">Weeks 1–2 · Identify</div><div class="dline"></div></div>
<div class="cklist">
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Mapped all stakeholders — identified who has the most to gain personally</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Asked the "personal stake" question: <em>"What would this project mean for you personally?"</em></div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Confirmed champion has organizational influence — not just access</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Tested champion with a low-risk ask (intro, forward a doc, book a meeting)</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Champion responded and acted within 48 hours without chasing</div>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">Weeks 3–4 · Build Value</div><div class="dline"></div></div>
<div class="cklist">
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Completed business value discovery using champion's own data and language</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Co-built a 3-scenario business case — champion chose the scenario they'd present</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Tied metrics to the EB's personal KPIs or stated strategic priorities</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Delivered a 1-page exec brief written in the customer's language</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Champion can verbally explain the ROI without your help or your slides</div>
</div>
</div>
<div>
<div class="sdiv" style="margin-top:0"><div class="dline"></div><div class="dl">Weeks 5–6 · Activate</div><div class="dline"></div></div>
<div class="cklist">
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Champion has introduced me to the Economic Buyer (not just said they would)</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Ran EB meeting prep call — role-played the business case presentation</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Prepared champion with top objections and responses for IT, Finance, and their boss</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Champion sent 1-pager to EB directly with their own cover note</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Received post-meeting debrief within 24 hours of every internal meeting</div>
</div>
<div class="sdiv"><div class="dline"></div><div class="dl">Ongoing · Protect</div><div class="dline"></div></div>
<div class="cklist">
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Have at least 2 champions in large / strategic deals — never single-threaded</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Check champion pulse weekly — any sign of cold triggers immediate outreach</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Updated champion status in SFDC every deal review — not just at stage change</div>
<div class="ck-item"><div class="ckbox" onclick="ck(this)"></div>Pain and business case reinforced at every champion touchpoint</div>
</div>
</div>
</div>
<div class="callout cs" style="margin-top:24px">
<div class="callout-icon">🎓</div>
<div class="callout-text">
<strong>This Week's Actions:</strong> Pick your top 3 deals. For each one — write down who your champion is, what their personal stake is, and when they last took an action on your behalf.
<div class="pills" style="margin-top:10px">
<span class="pill">📋 Score champion in top 3 deals</span>
<span class="pill">📩 Send champion a 1-pager to forward</span>
<span class="pill">📅 Book EB prep call with champion</span>
<span class="pill">🔁 Debrief every internal meeting within 24h</span>
</div>
</div>
</div>
<div class="sf">
<div class="sf-l">Slide 7 of 7</div>
<div class="sf-nav">
<button class="btn" onclick="go(5)">← Back</button>
<button class="btn-icon" data-tip="Clear Answers" onclick="clearChecks()">🗑️</button>
<button class="btn-icon" data-tip="Print Process Checklist" onclick="printPlaybook()">🖨️</button>
<button class="btn btn-p" onclick="go(0)">↩ Start Over</button>
</div>
</div>
</div>
</div><!-- /deck -->
<script>
const STORAGE_KEY='j1_champions_playbook';
let cur=0;
const slides=document.querySelectorAll('.slide');
const tabs=document.querySelectorAll('.tab');
/* ── persistence ── */
function saveChecks(){
const boxes=document.querySelectorAll('#s6 .ckbox');
const state={};
boxes.forEach((b,i)=>{ state[i]=b.classList.contains('checked'); });
try{ localStorage.setItem(STORAGE_KEY,JSON.stringify(state)); }catch(e){}
}
function loadChecks(){
try{
const raw=localStorage.getItem(STORAGE_KEY);
if(!raw) return;
const state=JSON.parse(raw);
const boxes=document.querySelectorAll('#s6 .ckbox');
boxes.forEach((b,i)=>{
if(state[i]){ b.classList.add('checked'); b.textContent='✓'; }
else { b.classList.remove('checked'); b.textContent=''; }
});
}catch(e){}
}
/* ── navigation ── */
function go(n){
slides[cur].classList.remove('active');tabs[cur].classList.remove('active');
cur=n;
slides[cur].classList.add('active');tabs[cur].classList.add('active');
document.getElementById('np').textContent=(n+1)+' / 7';
window.scrollTo({top:0,behavior:'smooth'});
tabs[cur].scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
}
/* ── checkbox toggle — auto-saves on every change ── */
function ck(el){
el.classList.toggle('checked');
el.textContent=el.classList.contains('checked')?'✓':'';
saveChecks();
}
/* ── clear — wipes UI then saves the cleared state ── */
function clearChecks(){
if(!confirm('Clear all Process Checklist answers? This cannot be undone.')) return;
document.querySelectorAll('#s6 .ckbox').forEach(b=>{
b.classList.remove('checked'); b.textContent='';
});
saveChecks();
}
function printPlaybook(){
if(cur!==6)go(6);
setTimeout(()=>window.print(),150);
}
/* ── restore on page load ── */
loadChecks();
</script>
</body>
</html>