DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Viewing files at commit e9e4992bde95Commit detailsView latest

apps/dashboard/src/landing.css 1343 lines · 23.1 KB · css
1
/* Public landing — protocol document */
2
3
html:has(.landingPage),
4
html:has(.landingPage) body {
5
  scrollbar-gutter: stable;
6
  scrollbar-width: thin;
7
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
8
    color-mix(in srgb, var(--bg) 92%, var(--border));
9
}
10
11
html:has(.landingPage)::-webkit-scrollbar,
12
html:has(.landingPage) body::-webkit-scrollbar {
13
  width: 10px;
14
}
15
16
html:has(.landingPage)::-webkit-scrollbar-track,
17
html:has(.landingPage) body::-webkit-scrollbar-track {
18
  background: color-mix(in srgb, var(--bg) 96%, #000);
19
  box-shadow: inset 1px 0 0 var(--border);
20
}
21
22
html:has(.landingPage)::-webkit-scrollbar-thumb,
23
html:has(.landingPage) body::-webkit-scrollbar-thumb {
24
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
25
  border: 3px solid color-mix(in srgb, var(--bg) 96%, #000);
26
  background-clip: padding-box;
27
}
28
29
html:has(.landingPage)::-webkit-scrollbar-thumb:hover,
30
html:has(.landingPage) body::-webkit-scrollbar-thumb:hover {
31
  background: var(--accent);
32
  border: 3px solid color-mix(in srgb, var(--bg) 96%, #000);
33
  background-clip: padding-box;
34
}
35
36
html:has(.landingPage)::-webkit-scrollbar-corner,
37
html:has(.landingPage) body::-webkit-scrollbar-corner {
38
  background: transparent;
39
}
40
41
.landingPage {
42
  position: relative;
43
  isolation: isolate;
44
  min-height: 100vh;
45
  overflow-x: clip;
46
  color: var(--text);
47
  font-family: var(--mono);
48
  background: var(--bg);
49
}
50
51
.landingPage > main,
52
.landingFooter {
53
  position: relative;
54
  z-index: 1;
55
}
56
57
.landingPage a {
58
  color: inherit;
59
  text-decoration: none;
60
}
61
62
.landingPage :is(a, button) {
63
  -webkit-tap-highlight-color: transparent;
64
}
65
66
.landingPage button,
67
.landingPage .navCta,
68
.landingPage .landingPrimary,
69
.landingPage .landingSecondary,
70
.landingPage .themeButton,
71
.landingPage .accessCard .socialButtons button,
72
.landingPage .demoActions button {
73
  border-radius: 0;
74
}
75
76
.landingNav {
77
  position: sticky;
78
  top: 0;
79
  z-index: 20;
80
  display: grid;
81
  min-height: 52px;
82
  padding: 0 max(24px, calc((100% - 1120px) / 2));
83
  grid-template-columns: 1fr auto 1fr;
84
  align-items: center;
85
  border-bottom: 1px solid var(--border);
86
  background: color-mix(in srgb, var(--bg) 88%, transparent);
87
  backdrop-filter: blur(12px);
88
  -webkit-backdrop-filter: blur(12px);
89
}
90
91
.landingBrand {
92
  display: inline-flex;
93
  width: fit-content;
94
  align-items: center;
95
  gap: 10px;
96
  font-size: 16px;
97
  font-weight: 500;
98
  letter-spacing: 0.04em;
99
  text-transform: lowercase;
100
}
101
102
.landingBrand strong {
103
  font-weight: 500;
104
}
105
106
.landingBrand .landingMark {
107
  display: block;
108
  width: 28px;
109
  height: 28px;
110
  flex: none;
111
}
112
113
.landingMark {
114
  color: var(--accent);
115
}
116
117
.landingNav nav {
118
  display: flex;
119
  align-items: center;
120
  gap: 28px;
121
  color: var(--text-muted);
122
  font-size: 12px;
123
}
124
125
.landingNav nav a {
126
  letter-spacing: 0.06em;
127
  text-transform: lowercase;
128
}
129
130
.landingNav nav a::before {
131
  margin-right: 2px;
132
  color: var(--text-faint);
133
  content: '/';
134
}
135
136
.landingNav nav a,
137
.landingSecondary {
138
  transition: color 140ms ease;
139
}
140
141
.landingNav nav a:hover,
142
.landingSecondary:hover {
143
  color: var(--text);
144
}
145
146
.landingNavActions {
147
  display: flex;
148
  justify-content: flex-end;
149
  align-items: center;
150
  gap: 8px;
151
}
152
153
.themeButton {
154
  display: grid;
155
  width: 34px;
156
  height: 34px;
157
  padding: 0;
158
  place-items: center;
159
  border: 1px solid var(--border);
160
  color: var(--text-muted);
161
  background: transparent;
162
  cursor: pointer;
163
}
164
165
.themeButton:hover {
166
  border-color: var(--border-strong);
167
  color: var(--text);
168
}
169
170
.themeButton svg,
171
.navCta svg,
172
.landingPrimary svg {
173
  width: 14px;
174
  height: 14px;
175
}
176
177
.navCta,
178
.landingPrimary {
179
  display: inline-flex;
180
  align-items: center;
181
  justify-content: center;
182
  gap: 8px;
183
  color: #fff !important;
184
  background: var(--accent);
185
  font-size: 12px;
186
  font-weight: 500;
187
  letter-spacing: 0.04em;
188
  text-transform: lowercase;
189
  transition:
190
    background 140ms ease,
191
    transform 140ms ease;
192
}
193
194
.navCta svg,
195
.landingPrimary svg {
196
  transition: transform 160ms ease;
197
}
198
199
.navCta {
200
  min-height: 34px;
201
  padding: 0 12px;
202
}
203
204
.navCta:hover,
205
.landingPrimary:hover {
206
  background: var(--accent-hover);
207
}
208
209
.navCta:hover svg,
210
.landingPrimary:hover svg {
211
  transform: translateX(3px);
212
}
213
214
.navCta:active,
215
.landingPrimary:active {
216
  transform: translateY(1px);
217
}
218
219
.landingHero {
220
  position: relative;
221
  display: grid;
222
  width: min(100% - 48px, 1120px);
223
  min-height: 640px;
224
  margin: 0 auto;
225
  padding: 72px 0 80px;
226
  grid-template-columns: minmax(0, 0.96fr) minmax(380px, 1fr);
227
  align-items: center;
228
  gap: clamp(32px, 5vw, 72px);
229
}
230
231
.heroCopy {
232
  position: relative;
233
  z-index: 2;
234
  animation: landingReveal 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
235
}
236
237
.landingKicker {
238
  display: flex;
239
  align-items: center;
240
  gap: 10px;
241
  margin: 0;
242
  color: var(--text-faint);
243
  font-family: var(--mono);
244
  font-size: 11px;
245
  font-weight: 400;
246
  letter-spacing: 0.08em;
247
  line-height: 1.4;
248
  text-transform: lowercase;
249
}
250
251
.landingKicker > span {
252
  color: var(--accent);
253
}
254
255
.heroCopy h1,
256
.sectionIntro h2,
257
.principlesSection h2,
258
.accessCopy h2 {
259
  margin: 18px 0;
260
  font-weight: 500;
261
  letter-spacing: -0.045em;
262
  line-height: 0.96;
263
}
264
265
.heroCopy h1 {
266
  max-width: 16ch;
267
  font-size: clamp(40px, 5.4vw, 68px);
268
}
269
270
.heroCopy h1 em,
271
.sectionIntro h2 em,
272
.principlesSection h2 em {
273
  display: inline-block;
274
  color: var(--text-muted);
275
  font-style: normal;
276
  font-weight: 400;
277
}
278
279
.heroCopy h1 em {
280
  padding-left: 0.55em;
281
}
282
283
.heroCopy h1 em::after {
284
  display: inline-block;
285
  width: 0.55ch;
286
  margin-left: 2px;
287
  color: var(--accent);
288
  content: '_';
289
  animation: caretBlink 1.1s steps(1) infinite;
290
}
291
292
.heroCopy > p {
293
  max-width: 42em;
294
  margin: 0;
295
  color: var(--text-muted);
296
  font-family: var(--font);
297
  font-size: 15px;
298
  line-height: 1.6;
299
}
300
301
.heroActions {
302
  display: flex;
303
  flex-wrap: wrap;
304
  align-items: center;
305
  gap: 22px;
306
  margin-top: 32px;
307
}
308
309
.landingPrimary {
310
  min-height: 42px;
311
  padding: 0 16px;
312
}
313
314
.landingSecondary {
315
  padding: 6px 0;
316
  border-bottom: 1px solid var(--border-strong);
317
  color: var(--text-muted);
318
  font-size: 12px;
319
  letter-spacing: 0.04em;
320
  text-transform: lowercase;
321
}
322
323
.landingSecondary:active,
324
.landingNav nav a:active {
325
  color: var(--accent);
326
}
327
328
.heroNotes {
329
  display: flex;
330
  flex-wrap: wrap;
331
  gap: 8px 18px;
332
  margin-top: 44px;
333
  color: var(--text-faint);
334
  font-size: 11px;
335
  letter-spacing: 0.04em;
336
}
337
338
.heroNotes span {
339
  color: var(--text-muted);
340
}
341
342
/* Live ASCII backdrop — one figure */
343
344
.landingBackdrop {
345
  position: fixed;
346
  inset: 0;
347
  z-index: 0;
348
  overflow: hidden;
349
  pointer-events: none;
350
}
351
352
.liveAscii {
353
  position: absolute;
354
  top: 50%;
355
  left: 50%;
356
  margin: 0;
357
  color: color-mix(in srgb, var(--accent) 46%, var(--text-faint));
358
  font: 400 16px/1 var(--mono);
359
  letter-spacing: 0;
360
  opacity: 0.36;
361
  user-select: none;
362
  white-space: pre;
363
  transform: translate(-50%, -46%);
364
}
365
366
/* 2D exchange diagram */
367
368
.asciiDiagram {
369
  position: relative;
370
  z-index: 2;
371
  display: grid;
372
  min-height: 0;
373
  padding: 22px 22px 18px;
374
  align-content: start;
375
  border-top: 1px solid var(--border-strong);
376
  border-right: 1px dashed var(--border);
377
  border-bottom: 0;
378
  border-left: 1px solid var(--border-strong);
379
  background: color-mix(in srgb, var(--bg) 70%, transparent);
380
  animation: landingReveal 720ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
381
}
382
383
.sceneCorner {
384
  position: absolute;
385
  z-index: 4;
386
  color: var(--accent);
387
  font: 500 12px/1 var(--mono);
388
  pointer-events: none;
389
}
390
391
.sceneTL {
392
  top: -7px;
393
  left: -5px;
394
}
395
396
.sceneTR {
397
  top: -7px;
398
  right: -5px;
399
}
400
401
.sceneBL {
402
  bottom: -6px;
403
  left: -5px;
404
}
405
406
.diagramHud {
407
  display: flex;
408
  justify-content: space-between;
409
  color: var(--text-faint);
410
  font-size: 10px;
411
  letter-spacing: 0.1em;
412
}
413
414
.diagramLive {
415
  color: var(--live);
416
}
417
418
.insightSubject {
419
  display: grid;
420
  margin: 28px 0 0;
421
  padding: 16px;
422
  gap: 8px;
423
  border: 1px solid var(--border);
424
  background: color-mix(in srgb, var(--surface) 56%, transparent);
425
}
426
427
.insightSubject span,
428
.exampleOutcome span {
429
  color: var(--accent);
430
  font-size: 10px;
431
  letter-spacing: 0.1em;
432
}
433
434
.insightSubject strong {
435
  font-family: var(--font);
436
  font-size: 18px;
437
  font-weight: 500;
438
  line-height: 1.35;
439
}
440
441
.riskPanel {
442
  display: grid;
443
  margin: 18px 0 0;
444
  border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--border));
445
  background: color-mix(in srgb, var(--danger) 6%, transparent);
446
}
447
448
.riskHeading {
449
  display: flex;
450
  padding: 14px 16px;
451
  align-items: end;
452
  justify-content: space-between;
453
  gap: 16px;
454
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
455
}
456
457
.riskHeading > div {
458
  display: grid;
459
  gap: 4px;
460
}
461
462
.riskHeading span {
463
  color: var(--danger);
464
  font-size: 9px;
465
  font-weight: 600;
466
  letter-spacing: 0.12em;
467
}
468
469
.riskHeading strong {
470
  color: color-mix(in srgb, var(--danger) 76%, var(--text));
471
  font-family: var(--font);
472
  font-size: 22px;
473
  font-weight: 600;
474
}
475
476
.riskHeading small {
477
  color: var(--text-faint);
478
  font-size: 9px;
479
}
480
481
.redFlagList {
482
  display: grid;
483
  margin: 0;
484
  padding: 0 16px;
485
  list-style: none;
486
}
487
488
.redFlagList li {
489
  display: grid;
490
  padding: 11px 0;
491
  grid-template-columns: 24px 1fr;
492
  gap: 10px;
493
  border-bottom: 1px dashed var(--border);
494
}
495
496
.redFlagList li:last-child {
497
  border-bottom: 0;
498
}
499
500
.redFlagList li > span {
501
  padding-top: 2px;
502
  color: var(--danger);
503
  font-size: 9px;
504
}
505
506
.redFlagList div {
507
  display: grid;
508
  gap: 3px;
509
}
510
511
.redFlagList strong {
512
  font-family: var(--font);
513
  font-size: 12px;
514
  font-weight: 600;
515
}
516
517
.redFlagList p {
518
  margin: 0;
519
  color: var(--text-muted);
520
  font-family: var(--font);
521
  font-size: 10px;
522
  line-height: 1.45;
523
}
524
525
.guidancePanel {
526
  display: grid;
527
  margin-top: 14px;
528
  padding: 15px 16px;
529
  gap: 6px;
530
  border: 1px solid var(--accent-line);
531
  border-left: 3px solid var(--accent);
532
  background: color-mix(in srgb, var(--accent) 8%, transparent);
533
}
534
535
.guidancePanel > span {
536
  color: var(--accent);
537
  font-size: 9px;
538
  font-weight: 600;
539
  letter-spacing: 0.1em;
540
}
541
542
.guidancePanel strong {
543
  font-family: var(--font);
544
  font-size: 16px;
545
  font-weight: 600;
546
}
547
548
.guidancePanel p {
549
  margin: 0;
550
  color: var(--text-muted);
551
  font-family: var(--font);
552
  font-size: 11px;
553
  line-height: 1.5;
554
}
555
556
.directLink {
557
  display: grid;
558
  margin-top: 20px;
559
  grid-template-columns: 1fr auto 1fr;
560
  align-items: center;
561
  gap: 10px;
562
  color: var(--text-faint);
563
  font-size: 10px;
564
  text-align: center;
565
}
566
567
.directLink b {
568
  padding: 6px 9px;
569
  border: 1px solid var(--accent-line);
570
  color: var(--accent);
571
  font-weight: 500;
572
  letter-spacing: 0.06em;
573
  text-transform: uppercase;
574
}
575
576
.directLink span:first-child {
577
  text-align: left;
578
}
579
580
.directLink span:last-child {
581
  text-align: right;
582
}
583
584
.exampleOutcome {
585
  display: grid;
586
  margin-top: 20px;
587
  padding: 15px 16px;
588
  gap: 6px;
589
  border-left: 2px solid var(--live);
590
  background: color-mix(in srgb, var(--live) 7%, transparent);
591
}
592
593
.exampleOutcome strong {
594
  font-family: var(--font);
595
  font-size: 14px;
596
  font-weight: 500;
597
}
598
599
.exampleOutcome small {
600
  color: var(--text-muted);
601
  font-size: 11px;
602
  line-height: 1.5;
603
}
604
605
.diagramSpec {
606
  margin: 28px 0 0;
607
  padding-top: 16px;
608
  border-top: 1px dashed var(--border);
609
  color: var(--text-faint);
610
  font: 400 11px/1.7 var(--mono);
611
  letter-spacing: 0.04em;
612
}
613
614
.capabilityRail {
615
  display: flex;
616
  flex-wrap: wrap;
617
  justify-content: center;
618
  align-items: center;
619
  gap: 10px 22px;
620
  padding: 16px 24px;
621
  border-top: 1px solid var(--border);
622
  border-bottom: 1px solid var(--border);
623
  color: var(--text-muted);
624
  background: color-mix(in srgb, var(--bg) 58%, transparent);
625
  font-size: 11px;
626
  letter-spacing: 0.1em;
627
}
628
629
.capabilityRail span::after {
630
  margin-left: 22px;
631
  color: var(--accent);
632
  content: '──';
633
}
634
635
.capabilityRail span:last-child::after {
636
  content: none;
637
}
638
639
.productSection,
640
.intelligenceSection,
641
.principlesSection,
642
.accessSection {
643
  width: min(100% - 48px, 1120px);
644
  margin: 0 auto;
645
  scroll-margin-top: 72px;
646
}
647
648
.productSection {
649
  padding: 120px 0;
650
}
651
652
.intelligenceSection {
653
  padding: 110px 0;
654
  border-top: 1px solid var(--border);
655
}
656
657
.intelligenceLoop {
658
  display: grid;
659
  margin: 48px 0 0;
660
  padding: 0;
661
  grid-template-columns: repeat(4, 1fr);
662
  border: 1px solid var(--border-strong);
663
  list-style: none;
664
}
665
666
.intelligenceLoop li {
667
  position: relative;
668
  display: grid;
669
  min-height: 142px;
670
  padding: 18px;
671
  align-content: space-between;
672
  border-right: 1px solid var(--border);
673
}
674
675
.intelligenceLoop li:last-child {
676
  border-right: 0;
677
}
678
679
.intelligenceLoop li:not(:last-child)::after {
680
  position: absolute;
681
  top: 50%;
682
  right: -8px;
683
  z-index: 1;
684
  padding: 2px;
685
  color: var(--accent);
686
  background: var(--bg);
687
  content: '→';
688
  transform: translateY(-50%);
689
}
690
691
.intelligenceLoop span {
692
  color: var(--accent);
693
  font-size: 10px;
694
}
695
696
.intelligenceLoop strong {
697
  max-width: 13ch;
698
  font-family: var(--font);
699
  font-size: 16px;
700
  font-weight: 500;
701
  line-height: 1.35;
702
}
703
704
.intelligenceBoundary {
705
  margin: 20px 0 0;
706
  color: var(--text-faint);
707
  font-size: 11px;
708
  line-height: 1.6;
709
}
710
711
.sectionIntro {
712
  display: grid;
713
  margin-bottom: 36px;
714
  grid-template-columns: 1fr 0.72fr;
715
  column-gap: 72px;
716
}
717
718
.sectionIntro .landingKicker {
719
  grid-column: 1 / -1;
720
}
721
722
.sectionIntro h2,
723
.principlesSection h2 {
724
  font-size: clamp(32px, 4.4vw, 52px);
725
}
726
727
.sectionIntro > p:last-child {
728
  align-self: end;
729
  margin: 0 0 8px;
730
  color: var(--text-muted);
731
  font-family: var(--font);
732
  font-size: 15px;
733
  line-height: 1.65;
734
}
735
736
.coreQuestions {
737
  margin: 8px 0 48px;
738
  border: 1px solid var(--border-strong);
739
  border-left: 3px solid var(--accent);
740
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
741
}
742
743
.coreQuestions header {
744
  display: flex;
745
  padding: 16px 20px;
746
  align-items: baseline;
747
  justify-content: space-between;
748
  gap: 24px;
749
  border-bottom: 1px solid var(--border);
750
}
751
752
.coreQuestions header > span {
753
  color: var(--accent);
754
  font-size: 10px;
755
  font-weight: 600;
756
  letter-spacing: 0.08em;
757
}
758
759
.coreQuestions h3 {
760
  margin: 0;
761
  font-family: var(--font);
762
  font-size: 15px;
763
  font-weight: 500;
764
}
765
766
.coreQuestions ol {
767
  display: grid;
768
  margin: 0;
769
  padding: 0;
770
  grid-template-columns: repeat(4, 1fr);
771
  list-style: none;
772
}
773
774
.coreQuestions li {
775
  display: grid;
776
  min-height: 132px;
777
  padding: 20px;
778
  align-content: space-between;
779
  gap: 24px;
780
  border-right: 1px solid var(--border);
781
}
782
783
.coreQuestions li:last-child {
784
  border-right: 0;
785
}
786
787
.coreQuestions li > span {
788
  color: var(--text-faint);
789
  font-size: 9px;
790
  letter-spacing: 0.08em;
791
}
792
793
.coreQuestions strong {
794
  max-width: 18ch;
795
  font-family: var(--font);
796
  font-size: clamp(17px, 1.8vw, 22px);
797
  font-weight: 550;
798
  letter-spacing: -0.025em;
799
  line-height: 1.25;
800
}
801
802
.principlesSection {
803
  display: grid;
804
  padding: 110px 0;
805
  grid-template-columns: 1fr 0.9fr;
806
  gap: 72px;
807
  border-top: 1px solid var(--border);
808
}
809
810
.principlesSection h2 {
811
  margin-bottom: 0;
812
}
813
814
.principleList {
815
  display: grid;
816
}
817
818
.principleList article {
819
  display: grid;
820
  padding: 22px 0;
821
  grid-template-columns: 72px 1fr;
822
  gap: 16px;
823
  border-bottom: 1px dashed var(--border);
824
}
825
826
.principleList article:first-child {
827
  border-top: 1px dashed var(--border);
828
}
829
830
.principleList article > span {
831
  color: var(--accent);
832
  font-size: 11px;
833
}
834
835
.principleList h3 {
836
  margin: -2px 0 6px;
837
  font-size: 15px;
838
  font-weight: 500;
839
  letter-spacing: -0.02em;
840
}
841
842
.principleList p {
843
  margin: 0;
844
  color: var(--text-muted);
845
  font-family: var(--font);
846
  font-size: 13px;
847
  line-height: 1.6;
848
}
849
850
.accessSection {
851
  display: grid;
852
  margin-bottom: 80px;
853
  padding: clamp(28px, 5vw, 56px) 0 0;
854
  grid-template-columns: 1.1fr 0.9fr;
855
  align-items: start;
856
  gap: clamp(36px, 6vw, 88px);
857
  border-top: 1px solid var(--border);
858
}
859
860
.accessCopy h2 {
861
  max-width: 16ch;
862
  margin: 16px 0;
863
  font-size: clamp(32px, 4vw, 48px);
864
}
865
866
.accessCopy > p:last-child {
867
  max-width: 40em;
868
  margin: 0;
869
  color: var(--text-muted);
870
  font-family: var(--font);
871
  font-size: 15px;
872
  line-height: 1.65;
873
}
874
875
.accessCard {
876
  display: grid;
877
  gap: 14px;
878
  border: 1px solid var(--border-strong);
879
  background: var(--bg);
880
}
881
882
.accessChrome {
883
  display: flex;
884
  padding: 8px 12px;
885
  align-items: center;
886
  justify-content: space-between;
887
  border-bottom: 1px solid var(--border);
888
  color: var(--text-faint);
889
  font-size: 11px;
890
  letter-spacing: 0.08em;
891
}
892
893
.accessBlink {
894
  color: var(--accent);
895
  animation: caretBlink 1.1s steps(1) infinite;
896
}
897
898
.accessCard .socialButtons {
899
  padding: 16px 16px 4px;
900
}
901
902
.accessCard .socialButtons button {
903
  min-height: 42px;
904
  border-radius: 0;
905
  font-family: var(--mono);
906
  font-size: 12px;
907
  font-weight: 500;
908
  letter-spacing: 0.03em;
909
}
910
911
.accessCard .socialButtons .authProviderButton {
912
  position: relative;
913
  display: grid;
914
  padding: 0 48px;
915
  grid-template-columns: 1fr;
916
  place-items: center;
917
  text-align: center;
918
}
919
920
.authProviderIcon {
921
  position: absolute;
922
  left: 15px;
923
  display: grid;
924
  width: 20px;
925
  height: 20px;
926
  place-items: center;
927
}
928
929
.accessCard .authProviderIcon svg {
930
  display: block;
931
  width: 18px;
932
  height: 18px;
933
}
934
935
.accessCard .socialButtons button:last-child svg:last-child {
936
  width: 14px;
937
  margin-left: auto;
938
}
939
940
.pilotList {
941
  display: grid;
942
  margin: 0;
943
  padding: 4px 16px 0;
944
  list-style: none;
945
}
946
947
.pilotList li {
948
  padding: 12px 0;
949
  border-bottom: 1px dashed var(--border);
950
  font-family: var(--font);
951
  font-size: 13px;
952
}
953
954
.pilotList li::before {
955
  margin-right: 10px;
956
  color: var(--accent);
957
  content: '+';
958
}
959
960
.demoActions {
961
  display: flex;
962
  padding: 2px 16px 0;
963
  flex-wrap: wrap;
964
  gap: 12px;
965
}
966
967
.demoActions .landingPrimary,
968
.demoActions button {
969
  min-height: 42px;
970
  padding: 0 16px;
971
}
972
973
.demoActions button {
974
  border: 1px solid var(--border-strong);
975
  color: var(--text-muted);
976
  background: transparent;
977
  font: 500 11px/1 var(--mono);
978
  cursor: pointer;
979
}
980
981
.accessCard > small {
982
  padding: 0 16px 16px;
983
  color: var(--text-faint);
984
  font-size: 11px;
985
  line-height: 1.55;
986
}
987
988
.accessCard .loginError {
989
  margin: 0 16px;
990
}
991
992
.landingFooter {
993
  display: grid;
994
  width: min(100% - 48px, 1120px);
995
  min-height: 88px;
996
  margin: 0 auto;
997
  padding: 24px 0 36px;
998
  grid-template-columns: 1fr auto 1fr;
999
  align-items: center;
1000
  gap: 20px;
1001
  border-top: 1px solid var(--border);
1002
}
1003
1004
.landingFooter p,
1005
.landingFooter small {
1006
  margin: 0;
1007
  color: var(--text-faint);
1008
  font-size: 11px;
1009
}
1010
1011
.landingFooter small {
1012
  justify-self: end;
1013
  max-width: 34em;
1014
  text-align: right;
1015
  line-height: 1.5;
1016
}
1017
1018
@keyframes landingReveal {
1019
  from {
1020
    opacity: 0;
1021
    translate: 0 14px;
1022
  }
1023
  to {
1024
    opacity: 1;
1025
    translate: 0 0;
1026
  }
1027
}
1028
1029
@keyframes caretBlink {
1030
  50% {
1031
    opacity: 0;
1032
  }
1033
}
1034
1035
@keyframes sectionArrival {
1036
  from {
1037
    opacity: 0;
1038
    translate: 0 14px;
1039
  }
1040
  to {
1041
    opacity: 1;
1042
    translate: 0 0;
1043
  }
1044
}
1045
1046
@keyframes destinationPulse {
1047
  0% {
1048
    box-shadow: inset 0 0 0 1px transparent;
1049
  }
1050
  42% {
1051
    box-shadow: inset 0 0 0 1px var(--accent-line);
1052
  }
1053
  100% {
1054
    box-shadow: inset 0 0 0 1px transparent;
1055
  }
1056
}
1057
1058
@keyframes scrollReveal {
1059
  from {
1060
    opacity: 0;
1061
    translate: 0 20px;
1062
  }
1063
  to {
1064
    opacity: 1;
1065
    translate: 0 0;
1066
  }
1067
}
1068
1069
@keyframes themeClick {
1070
  50% {
1071
    opacity: 0.35;
1072
    transform: rotate(110deg) scale(0.65);
1073
  }
1074
}
1075
1076
.themeButton:active svg {
1077
  animation: themeClick 340ms cubic-bezier(0.22, 1, 0.36, 1);
1078
}
1079
1080
@supports (animation-timeline: view()) {
1081
  .sectionIntro,
1082
  .intelligenceLoop li,
1083
  .principlesSection > div,
1084
  .accessSection {
1085
    animation: scrollReveal linear both;
1086
    animation-timeline: view();
1087
    animation-range: entry 5% cover 27%;
1088
  }
1089
}
1090
1091
.productSection.is-arriving .sectionIntro,
1092
.intelligenceSection.is-arriving .sectionIntro,
1093
.intelligenceSection.is-arriving .intelligenceLoop li,
1094
.principlesSection.is-arriving > div,
1095
.accessSection.is-arriving .accessCopy,
1096
.accessSection.is-arriving .accessCard {
1097
  animation: sectionArrival 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
1098
  animation-timeline: auto;
1099
}
1100
1101
.principlesSection.is-arriving > div:nth-child(2),
1102
.accessSection.is-arriving .accessCard {
1103
  animation-delay: 130ms;
1104
}
1105
1106
.accessSection.is-arriving {
1107
  animation: destinationPulse 880ms ease-out;
1108
  animation-timeline: auto;
1109
}
1110
1111
@media (max-width: 1080px) {
1112
  .landingHero {
1113
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
1114
    gap: 36px;
1115
  }
1116
1117
  .sectionIntro,
1118
  .principlesSection {
1119
    gap: 40px;
1120
  }
1121
}
1122
1123
@media (max-width: 900px) {
1124
  .landingNav {
1125
    grid-template-columns: 1fr auto;
1126
  }
1127
1128
  .landingNav nav {
1129
    display: none;
1130
  }
1131
1132
  .landingHero {
1133
    min-height: auto;
1134
    padding: 56px 0 64px;
1135
    grid-template-columns: 1fr;
1136
  }
1137
1138
  .heroCopy {
1139
    max-width: 40em;
1140
  }
1141
1142
  .asciiDiagram {
1143
    margin-top: 8px;
1144
  }
1145
1146
  .liveAscii {
1147
    top: 42%;
1148
    left: 50%;
1149
    right: auto;
1150
    bottom: auto;
1151
    font-size: 14px;
1152
    opacity: 0.2;
1153
  }
1154
1155
  .sectionIntro,
1156
  .intelligenceLoop {
1157
    grid-template-columns: repeat(2, 1fr);
1158
  }
1159
1160
  .intelligenceLoop li:nth-child(2) {
1161
    border-right: 0;
1162
  }
1163
1164
  .intelligenceLoop li:nth-child(-n + 2) {
1165
    border-bottom: 1px solid var(--border);
1166
  }
1167
1168
  .sectionIntro,
1169
  .principlesSection,
1170
  .accessSection {
1171
    grid-template-columns: 1fr;
1172
  }
1173
1174
  .principlesSection {
1175
    gap: 36px;
1176
  }
1177
1178
  .accessCard {
1179
    max-width: 520px;
1180
  }
1181
1182
  .landingFooter {
1183
    grid-template-columns: 1fr auto;
1184
  }
1185
1186
  .landingFooter p {
1187
    display: none;
1188
  }
1189
}
1190
1191
@media (max-width: 720px) {
1192
  .landingNav,
1193
  .landingHero,
1194
  .productSection,
1195
  .intelligenceSection,
1196
  .principlesSection,
1197
  .accessSection,
1198
  .landingFooter {
1199
    width: min(100% - 32px, 1120px);
1200
  }
1201
1202
  .landingNav {
1203
    padding-inline: 16px;
1204
    width: 100%;
1205
  }
1206
1207
  .navCta {
1208
    display: none;
1209
  }
1210
1211
  .heroCopy h1 {
1212
    font-size: clamp(34px, 11vw, 52px);
1213
  }
1214
1215
  .heroNotes {
1216
    display: grid;
1217
    margin-top: 32px;
1218
  }
1219
1220
  .asciiDiagram {
1221
    padding: 18px 16px 14px;
1222
  }
1223
1224
  .directLink {
1225
    grid-template-columns: 1fr;
1226
  }
1227
1228
  .directLink span,
1229
  .directLink span:first-child,
1230
  .directLink span:last-child {
1231
    text-align: center;
1232
  }
1233
1234
  .productSection,
1235
  .intelligenceSection,
1236
  .principlesSection {
1237
    padding: 80px 0;
1238
  }
1239
1240
  .sectionIntro {
1241
    display: block;
1242
    margin-bottom: 0;
1243
  }
1244
1245
  .sectionIntro h2,
1246
  .principlesSection h2 {
1247
    font-size: clamp(30px, 9vw, 44px);
1248
  }
1249
1250
  .coreQuestions {
1251
    margin: 24px 0 28px;
1252
  }
1253
1254
  .coreQuestions header {
1255
    align-items: flex-start;
1256
    flex-direction: column;
1257
    gap: 8px;
1258
  }
1259
1260
  .coreQuestions ol {
1261
    grid-template-columns: 1fr;
1262
  }
1263
1264
  .coreQuestions li {
1265
    min-height: 104px;
1266
    border-right: 0;
1267
    border-bottom: 1px solid var(--border);
1268
  }
1269
1270
  .coreQuestions li:last-child {
1271
    border-bottom: 0;
1272
  }
1273
1274
  .intelligenceLoop {
1275
    grid-template-columns: 1fr;
1276
  }
1277
1278
  .intelligenceLoop li,
1279
  .intelligenceLoop li:nth-child(2) {
1280
    min-height: 108px;
1281
    border-right: 0;
1282
    border-bottom: 1px solid var(--border);
1283
  }
1284
1285
  .intelligenceLoop li:last-child {
1286
    border-bottom: 0;
1287
  }
1288
1289
  .intelligenceLoop li:not(:last-child)::after {
1290
    top: auto;
1291
    right: 16px;
1292
    bottom: -9px;
1293
    transform: rotate(90deg);
1294
  }
1295
1296
  .accessSection {
1297
    margin-bottom: 48px;
1298
    gap: 28px;
1299
  }
1300
1301
  .landingFooter {
1302
    padding-top: 28px;
1303
    grid-template-columns: 1fr;
1304
    align-items: start;
1305
  }
1306
1307
  .landingFooter small {
1308
    justify-self: start;
1309
    text-align: left;
1310
  }
1311
}
1312
1313
@media (prefers-reduced-motion: reduce) {
1314
  html {
1315
    scroll-behavior: auto;
1316
  }
1317
1318
  .heroCopy,
1319
  .asciiDiagram,
1320
  .heroCopy h1 em::after,
1321
  .accessBlink,
1322
  .sectionIntro,
1323
  .intelligenceLoop li,
1324
  .principlesSection > div,
1325
  .accessSection {
1326
    animation: none;
1327
  }
1328
1329
  .productSection.is-arriving *,
1330
  .intelligenceSection.is-arriving *,
1331
  .principlesSection.is-arriving > div,
1332
  .accessSection.is-arriving,
1333
  .accessSection.is-arriving * {
1334
    animation: none !important;
1335
  }
1336
1337
  .themeButton,
1338
  .navCta,
1339
  .landingPrimary,
1340
  .landingSecondary {
1341
    transition: none;
1342
  }
1343
}