DocsLog in

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

Viewing files at commit c6b86fb80ff9Commit detailsView latest

apps/dashboard/src/landing.css 1253 lines · 21.6 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
.exampleRequest {
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
.exampleRequest span,
435
.exampleOutcome span {
436
  color: var(--accent);
437
  font-size: 10px;
438
  letter-spacing: 0.1em;
439
}
440
441
.exampleRequest strong {
442
  font-family: var(--font);
443
  font-size: 18px;
444
  font-weight: 500;
445
  line-height: 1.35;
446
}
447
448
.trustBrief {
449
  display: grid;
450
  margin: 18px 0 0;
451
}
452
453
.trustBrief div {
454
  display: grid;
455
  padding: 9px 0;
456
  grid-template-columns: 78px 1fr;
457
  gap: 16px;
458
  border-bottom: 1px dashed var(--border);
459
  font-size: 11px;
460
}
461
462
.trustBrief dt {
463
  color: var(--text-faint);
464
  text-transform: uppercase;
465
}
466
467
.trustBrief dd {
468
  margin: 0;
469
  color: var(--text);
470
}
471
472
.trustBrief .is-warning dd {
473
  color: var(--accent);
474
}
475
476
.directLink {
477
  display: grid;
478
  margin-top: 20px;
479
  grid-template-columns: 1fr auto 1fr;
480
  align-items: center;
481
  gap: 10px;
482
  color: var(--text-faint);
483
  font-size: 10px;
484
  text-align: center;
485
}
486
487
.directLink b {
488
  padding: 6px 9px;
489
  border: 1px solid var(--accent-line);
490
  color: var(--accent);
491
  font-weight: 500;
492
  letter-spacing: 0.06em;
493
  text-transform: uppercase;
494
}
495
496
.directLink span:first-child {
497
  text-align: left;
498
}
499
500
.directLink span:last-child {
501
  text-align: right;
502
}
503
504
.exampleOutcome {
505
  display: grid;
506
  margin-top: 20px;
507
  padding: 15px 16px;
508
  gap: 6px;
509
  border-left: 2px solid var(--live);
510
  background: color-mix(in srgb, var(--live) 7%, transparent);
511
}
512
513
.exampleOutcome strong {
514
  font-family: var(--font);
515
  font-size: 14px;
516
  font-weight: 500;
517
}
518
519
.exampleOutcome small {
520
  color: var(--text-muted);
521
  font-size: 11px;
522
  line-height: 1.5;
523
}
524
525
.diagramSpec {
526
  margin: 28px 0 0;
527
  padding-top: 16px;
528
  border-top: 1px dashed var(--border);
529
  color: var(--text-faint);
530
  font: 400 11px/1.7 var(--mono);
531
  letter-spacing: 0.04em;
532
}
533
534
.capabilityRail {
535
  display: flex;
536
  flex-wrap: wrap;
537
  justify-content: center;
538
  align-items: center;
539
  gap: 10px 22px;
540
  padding: 16px 24px;
541
  border-top: 1px solid var(--border);
542
  border-bottom: 1px solid var(--border);
543
  color: var(--text-muted);
544
  background: color-mix(in srgb, var(--bg) 58%, transparent);
545
  font-size: 11px;
546
  letter-spacing: 0.1em;
547
}
548
549
.capabilityRail span::after {
550
  margin-left: 22px;
551
  color: var(--accent);
552
  content: '──';
553
}
554
555
.capabilityRail span:last-child::after {
556
  content: none;
557
}
558
559
.productSection,
560
.intelligenceSection,
561
.principlesSection,
562
.accessSection {
563
  width: min(100% - 48px, 1120px);
564
  margin: 0 auto;
565
  scroll-margin-top: 72px;
566
}
567
568
.productSection {
569
  padding: 120px 0;
570
}
571
572
.intelligenceSection {
573
  padding: 110px 0;
574
  border-top: 1px solid var(--border);
575
}
576
577
.intelligenceLoop {
578
  display: grid;
579
  margin: 48px 0 0;
580
  padding: 0;
581
  grid-template-columns: repeat(4, 1fr);
582
  border: 1px solid var(--border-strong);
583
  list-style: none;
584
}
585
586
.intelligenceLoop li {
587
  position: relative;
588
  display: grid;
589
  min-height: 142px;
590
  padding: 18px;
591
  align-content: space-between;
592
  border-right: 1px solid var(--border);
593
}
594
595
.intelligenceLoop li:last-child {
596
  border-right: 0;
597
}
598
599
.intelligenceLoop li:not(:last-child)::after {
600
  position: absolute;
601
  top: 50%;
602
  right: -8px;
603
  z-index: 1;
604
  padding: 2px;
605
  color: var(--accent);
606
  background: var(--bg);
607
  content: '→';
608
  transform: translateY(-50%);
609
}
610
611
.intelligenceLoop span {
612
  color: var(--accent);
613
  font-size: 10px;
614
}
615
616
.intelligenceLoop strong {
617
  max-width: 13ch;
618
  font-family: var(--font);
619
  font-size: 16px;
620
  font-weight: 500;
621
  line-height: 1.35;
622
}
623
624
.intelligenceBoundary {
625
  margin: 20px 0 0;
626
  color: var(--text-faint);
627
  font-size: 11px;
628
  line-height: 1.6;
629
}
630
631
.sectionIntro {
632
  display: grid;
633
  margin-bottom: 36px;
634
  grid-template-columns: 1fr 0.72fr;
635
  column-gap: 72px;
636
}
637
638
.sectionIntro .landingKicker {
639
  grid-column: 1 / -1;
640
}
641
642
.sectionIntro h2,
643
.principlesSection h2 {
644
  font-size: clamp(32px, 4.4vw, 52px);
645
}
646
647
.sectionIntro > p:last-child {
648
  align-self: end;
649
  margin: 0 0 8px;
650
  color: var(--text-muted);
651
  font-family: var(--font);
652
  font-size: 15px;
653
  line-height: 1.65;
654
}
655
656
.recordAsk {
657
  display: flex;
658
  flex-wrap: wrap;
659
  margin-bottom: 36px;
660
  align-items: baseline;
661
  gap: 10px 22px;
662
  color: var(--text-muted);
663
  font-size: 12px;
664
}
665
666
.recordAsk > span {
667
  color: var(--accent);
668
  letter-spacing: 0.08em;
669
}
670
671
.recordAsk p {
672
  margin: 0;
673
}
674
675
.recordAsk p::before {
676
  margin-right: 8px;
677
  color: var(--text-faint);
678
  content: '>';
679
}
680
681
.recordSteps {
682
  display: grid;
683
  margin: 0;
684
  padding: 0;
685
  list-style: none;
686
  border-top: 1px solid var(--border);
687
}
688
689
.recordSteps li {
690
  display: grid;
691
  padding: 28px 0;
692
  grid-template-columns: 88px minmax(0, 1fr);
693
  gap: 28px;
694
  border-bottom: 1px dashed var(--border);
695
}
696
697
.recordSteps li > span {
698
  color: var(--accent);
699
  font-size: 11px;
700
  letter-spacing: 0.1em;
701
}
702
703
.recordSteps h3 {
704
  max-width: 20ch;
705
  margin: 0 0 8px;
706
  font-size: clamp(20px, 2.2vw, 30px);
707
  font-weight: 500;
708
  letter-spacing: -0.04em;
709
  line-height: 1.05;
710
}
711
712
.recordSteps p {
713
  max-width: 42em;
714
  margin: 0;
715
  color: var(--text-muted);
716
  font-family: var(--font);
717
  font-size: 14px;
718
  line-height: 1.6;
719
}
720
721
.asciiMini {
722
  margin: 18px 0 0;
723
  color: var(--text-muted);
724
  font: 400 11px/1.55 var(--mono);
725
  letter-spacing: 0.02em;
726
}
727
728
.principlesSection {
729
  display: grid;
730
  padding: 110px 0;
731
  grid-template-columns: 1fr 0.9fr;
732
  gap: 72px;
733
  border-top: 1px solid var(--border);
734
}
735
736
.principlesSection h2 {
737
  margin-bottom: 0;
738
}
739
740
.principleList {
741
  display: grid;
742
}
743
744
.principleList article {
745
  display: grid;
746
  padding: 22px 0;
747
  grid-template-columns: 72px 1fr;
748
  gap: 16px;
749
  border-bottom: 1px dashed var(--border);
750
}
751
752
.principleList article:first-child {
753
  border-top: 1px dashed var(--border);
754
}
755
756
.principleList article > span {
757
  color: var(--accent);
758
  font-size: 11px;
759
}
760
761
.principleList h3 {
762
  margin: -2px 0 6px;
763
  font-size: 15px;
764
  font-weight: 500;
765
  letter-spacing: -0.02em;
766
}
767
768
.principleList p {
769
  margin: 0;
770
  color: var(--text-muted);
771
  font-family: var(--font);
772
  font-size: 13px;
773
  line-height: 1.6;
774
}
775
776
.accessSection {
777
  display: grid;
778
  margin-bottom: 80px;
779
  padding: clamp(28px, 5vw, 56px) 0 0;
780
  grid-template-columns: 1.1fr 0.9fr;
781
  align-items: start;
782
  gap: clamp(36px, 6vw, 88px);
783
  border-top: 1px solid var(--border);
784
}
785
786
.accessCopy h2 {
787
  max-width: 16ch;
788
  margin: 16px 0;
789
  font-size: clamp(32px, 4vw, 48px);
790
}
791
792
.accessCopy > p:last-child {
793
  max-width: 40em;
794
  margin: 0;
795
  color: var(--text-muted);
796
  font-family: var(--font);
797
  font-size: 15px;
798
  line-height: 1.65;
799
}
800
801
.accessCard {
802
  display: grid;
803
  gap: 14px;
804
  border: 1px solid var(--border-strong);
805
  background: var(--bg);
806
}
807
808
.accessChrome {
809
  display: flex;
810
  padding: 8px 12px;
811
  align-items: center;
812
  justify-content: space-between;
813
  border-bottom: 1px solid var(--border);
814
  color: var(--text-faint);
815
  font-size: 11px;
816
  letter-spacing: 0.08em;
817
}
818
819
.accessBlink {
820
  color: var(--accent);
821
  animation: caretBlink 1.1s steps(1) infinite;
822
}
823
824
.accessCard .socialButtons {
825
  padding: 16px 16px 4px;
826
}
827
828
.accessCard .socialButtons button {
829
  min-height: 42px;
830
  border-radius: 0;
831
  font-family: var(--mono);
832
  font-size: 12px;
833
  font-weight: 500;
834
  letter-spacing: 0.03em;
835
}
836
837
.accessCard .socialButtons button:last-child svg:last-child {
838
  width: 14px;
839
  margin-left: auto;
840
}
841
842
.pilotList {
843
  display: grid;
844
  margin: 0;
845
  padding: 4px 16px 0;
846
  list-style: none;
847
}
848
849
.pilotList li {
850
  padding: 12px 0;
851
  border-bottom: 1px dashed var(--border);
852
  font-family: var(--font);
853
  font-size: 13px;
854
}
855
856
.pilotList li::before {
857
  margin-right: 10px;
858
  color: var(--accent);
859
  content: '+';
860
}
861
862
.demoActions {
863
  display: flex;
864
  padding: 2px 16px 0;
865
  flex-wrap: wrap;
866
  gap: 12px;
867
}
868
869
.demoActions .landingPrimary,
870
.demoActions button {
871
  min-height: 42px;
872
  padding: 0 16px;
873
}
874
875
.demoActions button {
876
  border: 1px solid var(--border-strong);
877
  color: var(--text-muted);
878
  background: transparent;
879
  font: 500 11px/1 var(--mono);
880
  cursor: pointer;
881
}
882
883
.accessCard > small {
884
  padding: 0 16px 16px;
885
  color: var(--text-faint);
886
  font-size: 11px;
887
  line-height: 1.55;
888
}
889
890
.accessCard .loginError {
891
  margin: 0 16px;
892
}
893
894
.landingFooter {
895
  display: grid;
896
  width: min(100% - 48px, 1120px);
897
  min-height: 88px;
898
  margin: 0 auto;
899
  padding: 24px 0 36px;
900
  grid-template-columns: 1fr auto 1fr;
901
  align-items: center;
902
  gap: 20px;
903
  border-top: 1px solid var(--border);
904
}
905
906
.landingFooter p,
907
.landingFooter small {
908
  margin: 0;
909
  color: var(--text-faint);
910
  font-size: 11px;
911
}
912
913
.landingFooter small {
914
  justify-self: end;
915
  max-width: 34em;
916
  text-align: right;
917
  line-height: 1.5;
918
}
919
920
@keyframes landingReveal {
921
  from {
922
    opacity: 0;
923
    translate: 0 14px;
924
  }
925
  to {
926
    opacity: 1;
927
    translate: 0 0;
928
  }
929
}
930
931
@keyframes caretBlink {
932
  50% {
933
    opacity: 0;
934
  }
935
}
936
937
@keyframes sectionArrival {
938
  from {
939
    opacity: 0;
940
    translate: 0 14px;
941
  }
942
  to {
943
    opacity: 1;
944
    translate: 0 0;
945
  }
946
}
947
948
@keyframes destinationPulse {
949
  0% {
950
    box-shadow: inset 0 0 0 1px transparent;
951
  }
952
  42% {
953
    box-shadow: inset 0 0 0 1px var(--accent-line);
954
  }
955
  100% {
956
    box-shadow: inset 0 0 0 1px transparent;
957
  }
958
}
959
960
@keyframes scrollReveal {
961
  from {
962
    opacity: 0;
963
    translate: 0 20px;
964
  }
965
  to {
966
    opacity: 1;
967
    translate: 0 0;
968
  }
969
}
970
971
@keyframes themeClick {
972
  50% {
973
    opacity: 0.35;
974
    transform: rotate(110deg) scale(0.65);
975
  }
976
}
977
978
.themeButton:active svg {
979
  animation: themeClick 340ms cubic-bezier(0.22, 1, 0.36, 1);
980
}
981
982
@supports (animation-timeline: view()) {
983
  .sectionIntro,
984
  .recordSteps li,
985
  .intelligenceLoop li,
986
  .principlesSection > div,
987
  .accessSection {
988
    animation: scrollReveal linear both;
989
    animation-timeline: view();
990
    animation-range: entry 5% cover 27%;
991
  }
992
993
  .recordSteps li:nth-child(2) {
994
    animation-range: entry 10% cover 30%;
995
  }
996
997
  .recordSteps li:nth-child(3) {
998
    animation-range: entry 15% cover 33%;
999
  }
1000
}
1001
1002
.productSection.is-arriving .sectionIntro,
1003
.intelligenceSection.is-arriving .sectionIntro,
1004
.intelligenceSection.is-arriving .intelligenceLoop li,
1005
.principlesSection.is-arriving > div,
1006
.accessSection.is-arriving .accessCopy,
1007
.accessSection.is-arriving .accessCard {
1008
  animation: sectionArrival 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
1009
  animation-timeline: auto;
1010
}
1011
1012
.productSection.is-arriving .recordSteps li {
1013
  animation: sectionArrival 600ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
1014
  animation-timeline: auto;
1015
}
1016
1017
.productSection.is-arriving .recordSteps li:nth-child(2),
1018
.principlesSection.is-arriving > div:nth-child(2),
1019
.accessSection.is-arriving .accessCard {
1020
  animation-delay: 130ms;
1021
}
1022
1023
.productSection.is-arriving .recordSteps li:nth-child(3) {
1024
  animation-delay: 190ms;
1025
}
1026
1027
.accessSection.is-arriving {
1028
  animation: destinationPulse 880ms ease-out;
1029
  animation-timeline: auto;
1030
}
1031
1032
@media (max-width: 1080px) {
1033
  .landingHero {
1034
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
1035
    gap: 36px;
1036
  }
1037
1038
  .sectionIntro,
1039
  .principlesSection {
1040
    gap: 40px;
1041
  }
1042
}
1043
1044
@media (max-width: 900px) {
1045
  .landingNav {
1046
    grid-template-columns: 1fr auto;
1047
  }
1048
1049
  .landingNav nav {
1050
    display: none;
1051
  }
1052
1053
  .landingHero {
1054
    min-height: auto;
1055
    padding: 56px 0 64px;
1056
    grid-template-columns: 1fr;
1057
  }
1058
1059
  .heroCopy {
1060
    max-width: 40em;
1061
  }
1062
1063
  .asciiDiagram {
1064
    margin-top: 8px;
1065
  }
1066
1067
  .liveAscii {
1068
    top: 42%;
1069
    left: 50%;
1070
    right: auto;
1071
    bottom: auto;
1072
    font-size: 14px;
1073
    opacity: 0.2;
1074
  }
1075
1076
  .sectionIntro,
1077
  .intelligenceLoop {
1078
    grid-template-columns: repeat(2, 1fr);
1079
  }
1080
1081
  .intelligenceLoop li:nth-child(2) {
1082
    border-right: 0;
1083
  }
1084
1085
  .intelligenceLoop li:nth-child(-n + 2) {
1086
    border-bottom: 1px solid var(--border);
1087
  }
1088
1089
  .sectionIntro,
1090
  .principlesSection,
1091
  .accessSection {
1092
    grid-template-columns: 1fr;
1093
  }
1094
1095
  .principlesSection {
1096
    gap: 36px;
1097
  }
1098
1099
  .accessCard {
1100
    max-width: 520px;
1101
  }
1102
1103
  .landingFooter {
1104
    grid-template-columns: 1fr auto;
1105
  }
1106
1107
  .landingFooter p {
1108
    display: none;
1109
  }
1110
}
1111
1112
@media (max-width: 720px) {
1113
  .landingNav,
1114
  .landingHero,
1115
  .productSection,
1116
  .intelligenceSection,
1117
  .principlesSection,
1118
  .accessSection,
1119
  .landingFooter {
1120
    width: min(100% - 32px, 1120px);
1121
  }
1122
1123
  .landingNav {
1124
    padding-inline: 16px;
1125
    width: 100%;
1126
  }
1127
1128
  .navCta,
1129
  .landingClock {
1130
    display: none;
1131
  }
1132
1133
  .heroCopy h1 {
1134
    font-size: clamp(34px, 11vw, 52px);
1135
  }
1136
1137
  .heroNotes {
1138
    display: grid;
1139
    margin-top: 32px;
1140
  }
1141
1142
  .asciiDiagram {
1143
    padding: 18px 16px 14px;
1144
  }
1145
1146
  .directLink {
1147
    grid-template-columns: 1fr;
1148
  }
1149
1150
  .directLink span,
1151
  .directLink span:first-child,
1152
  .directLink span:last-child {
1153
    text-align: center;
1154
  }
1155
1156
  .recordSteps li {
1157
    grid-template-columns: 64px minmax(0, 1fr);
1158
    gap: 16px;
1159
    padding: 22px 0;
1160
  }
1161
1162
  .productSection,
1163
  .intelligenceSection,
1164
  .principlesSection {
1165
    padding: 80px 0;
1166
  }
1167
1168
  .sectionIntro {
1169
    display: block;
1170
    margin-bottom: 0;
1171
  }
1172
1173
  .sectionIntro h2,
1174
  .principlesSection h2 {
1175
    font-size: clamp(30px, 9vw, 44px);
1176
  }
1177
1178
  .recordAsk {
1179
    margin: 24px 0 28px;
1180
    flex-direction: column;
1181
  }
1182
1183
  .intelligenceLoop {
1184
    grid-template-columns: 1fr;
1185
  }
1186
1187
  .intelligenceLoop li,
1188
  .intelligenceLoop li:nth-child(2) {
1189
    min-height: 108px;
1190
    border-right: 0;
1191
    border-bottom: 1px solid var(--border);
1192
  }
1193
1194
  .intelligenceLoop li:last-child {
1195
    border-bottom: 0;
1196
  }
1197
1198
  .intelligenceLoop li:not(:last-child)::after {
1199
    top: auto;
1200
    right: 16px;
1201
    bottom: -9px;
1202
    transform: rotate(90deg);
1203
  }
1204
1205
  .accessSection {
1206
    margin-bottom: 48px;
1207
    gap: 28px;
1208
  }
1209
1210
  .landingFooter {
1211
    padding-top: 28px;
1212
    grid-template-columns: 1fr;
1213
    align-items: start;
1214
  }
1215
1216
  .landingFooter small {
1217
    justify-self: start;
1218
    text-align: left;
1219
  }
1220
}
1221
1222
@media (prefers-reduced-motion: reduce) {
1223
  html {
1224
    scroll-behavior: auto;
1225
  }
1226
1227
  .heroCopy,
1228
  .asciiDiagram,
1229
  .heroCopy h1 em::after,
1230
  .accessBlink,
1231
  .sectionIntro,
1232
  .recordSteps li,
1233
  .intelligenceLoop li,
1234
  .principlesSection > div,
1235
  .accessSection {
1236
    animation: none;
1237
  }
1238
1239
  .productSection.is-arriving *,
1240
  .intelligenceSection.is-arriving *,
1241
  .principlesSection.is-arriving > div,
1242
  .accessSection.is-arriving,
1243
  .accessSection.is-arriving * {
1244
    animation: none !important;
1245
  }
1246
1247
  .themeButton,
1248
  .navCta,
1249
  .landingPrimary,
1250
  .landingSecondary {
1251
    transition: none;
1252
  }
1253
}