DocsLog in

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

Viewing files at commit 278de6001cb3Commit detailsView latest

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