DocsLog in

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

Viewing files at commit 8135358a54bcCommit detailsView latest

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