DocsLog in

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

Viewing files at commit 867f032d6ce0Commit detailsView latest

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