DocsLog in

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

Viewing files at commit 874239cc591fCommit detailsView latest

apps/dashboard/src/styles.css 4279 lines · 72.5 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700&display=swap');
2
@import 'tailwindcss';
3
@import 'tw-animate-css';
4
5
@custom-variant dark (&:is(.dark *));
6
7
@theme inline {
8
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
9
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
10
  --color-background: var(--background);
11
  --color-foreground: var(--foreground);
12
  --color-card: var(--card);
13
  --color-card-foreground: var(--card-foreground);
14
  --color-popover: var(--popover);
15
  --color-popover-foreground: var(--popover-foreground);
16
  --color-primary: var(--primary);
17
  --color-primary-foreground: var(--primary-foreground);
18
  --color-secondary: var(--secondary);
19
  --color-secondary-foreground: var(--secondary-foreground);
20
  --color-muted: var(--muted);
21
  --color-muted-foreground: var(--muted-foreground);
22
  --color-accent: var(--ui-hover);
23
  --color-accent-foreground: var(--ui-hover-foreground);
24
  --color-destructive: var(--destructive);
25
  --color-border: var(--border);
26
  --color-input: var(--input);
27
  --color-ring: var(--ring);
28
  --color-sidebar: var(--sidebar);
29
  --color-sidebar-foreground: var(--sidebar-foreground);
30
  --color-sidebar-primary: var(--sidebar-primary);
31
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
32
  --color-sidebar-accent: var(--sidebar-accent);
33
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
34
  --color-sidebar-border: var(--sidebar-border);
35
  --color-sidebar-ring: var(--sidebar-ring);
36
  --radius-sm: calc(var(--radius) * 0.75);
37
  --radius-md: calc(var(--radius) * 0.875);
38
  --radius-lg: var(--radius);
39
  --radius-xl: calc(var(--radius) * 1.5);
40
}
41
42
:root {
43
  color-scheme: dark;
44
  --font: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
45
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
46
  --bg: #0c0a0a;
47
  --bg-sidebar: transparent;
48
  --bg-elevated: rgb(18 12 11 / 58%);
49
  --bg-card: transparent;
50
  --bg-hover: rgb(240 75 45 / 10%);
51
  --bg-input: rgb(12 10 10 / 78%);
52
  --bg-well: rgb(255 255 255 / 3.5%);
53
  --border: rgb(255 255 255 / 8%);
54
  --border-strong: rgb(255 255 255 / 14%);
55
  --text: #f6f1ee;
56
  --text-muted: #a39a94;
57
  --text-faint: #7a726c;
58
  --accent: #f04b2d;
59
  --accent-hover: #ff5d3d;
60
  --accent-ink: #ffffff;
61
  --accent-dim: rgb(240 75 45 / 16%);
62
  --accent-line: rgb(240 75 45 / 36%);
63
  --live: #2fbf71;
64
  --live-dim: rgb(47 191 113 / 14%);
65
  --warn: #e59a1a;
66
  --warn-dim: rgb(229 154 26 / 12%);
67
  --warn-line: rgb(229 154 26 / 32%);
68
  --danger: #c41f28;
69
  --danger-dim: rgb(196 31 40 / 12%);
70
  --danger-line: rgb(196 31 40 / 32%);
71
  --info: #e07a62;
72
  --shadow: none;
73
  --radius: 8px;
74
  --radius-sm: 6px;
75
  --glow-a: rgb(240 75 45 / 18%);
76
  --glow-b: rgb(240 75 45 / 8%);
77
  --dot: rgb(240 75 45 / 4%);
78
  --background: transparent;
79
  --foreground: var(--text);
80
  --card: transparent;
81
  --card-foreground: var(--text);
82
  --popover: #161211;
83
  --popover-foreground: var(--text);
84
  --primary: var(--accent);
85
  --primary-foreground: var(--accent-ink);
86
  --secondary: var(--bg-well);
87
  --secondary-foreground: var(--text);
88
  --muted: var(--bg-well);
89
  --muted-foreground: var(--text-muted);
90
  --ui-hover: var(--bg-hover);
91
  --ui-hover-foreground: var(--text);
92
  --destructive: var(--danger);
93
  --input: var(--border-strong);
94
  --ring: var(--accent);
95
  --sidebar: transparent;
96
  --sidebar-foreground: var(--text);
97
  --sidebar-primary: var(--accent);
98
  --sidebar-primary-foreground: var(--accent-ink);
99
  --sidebar-accent: var(--bg-hover);
100
  --sidebar-accent-foreground: var(--text);
101
  --sidebar-border: var(--border);
102
  --sidebar-ring: var(--accent);
103
  font-family: var(--font);
104
  color: var(--text);
105
  background: var(--bg);
106
  font-synthesis: none;
107
  line-height: 1.45;
108
}
109
110
:root[data-theme='light'] {
111
  color-scheme: light;
112
  --bg: #f7f4f2;
113
  --bg-sidebar: transparent;
114
  --bg-elevated: rgb(255 255 255 / 78%);
115
  --bg-card: transparent;
116
  --bg-hover: rgb(240 75 45 / 8%);
117
  --bg-input: #ffffff;
118
  --bg-well: rgb(22 14 12 / 3%);
119
  --border: rgb(22 14 12 / 8%);
120
  --border-strong: rgb(22 14 12 / 14%);
121
  --text: #16110f;
122
  --text-muted: #6b625d;
123
  --text-faint: #8a807a;
124
  --accent-dim: rgb(240 75 45 / 10%);
125
  --accent-line: rgb(240 75 45 / 28%);
126
  --live: #168a4d;
127
  --live-dim: rgb(22 138 77 / 10%);
128
  --warn-dim: rgb(229 154 26 / 12%);
129
  --warn-line: rgb(229 154 26 / 26%);
130
  --danger-dim: rgb(196 31 40 / 10%);
131
  --danger-line: rgb(196 31 40 / 22%);
132
  --glow-a: rgb(240 75 45 / 14%);
133
  --glow-b: rgb(240 75 45 / 6%);
134
  --dot: rgb(240 75 45 / 5%);
135
  --shadow: none;
136
  --popover: #ffffff;
137
}
138
139
* {
140
  box-sizing: border-box;
141
}
142
143
html,
144
body {
145
  min-height: 100%;
146
}
147
148
body {
149
  margin: 0;
150
  min-width: 320px;
151
  background-color: var(--bg);
152
  background-image:
153
    radial-gradient(ellipse 72% 48% at 6% -10%, var(--glow-a), transparent 58%),
154
    radial-gradient(ellipse 48% 34% at 100% 0%, var(--glow-b), transparent 52%),
155
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
156
  background-size:
157
    auto,
158
    auto,
159
    24px 24px;
160
  background-attachment: fixed;
161
}
162
163
::selection {
164
  color: var(--accent-ink);
165
  background: var(--accent);
166
}
167
168
button,
169
input,
170
select,
171
textarea {
172
  font: inherit;
173
}
174
175
button,
176
a,
177
input,
178
select,
179
textarea {
180
  outline: none;
181
}
182
183
:focus-visible {
184
  outline: 2px solid var(--accent);
185
  outline-offset: 2px;
186
}
187
188
[data-slot]:focus-visible {
189
  outline: none;
190
}
191
192
.skipLink {
193
  position: absolute;
194
  top: 8px;
195
  left: 8px;
196
  z-index: 20;
197
  padding: 8px 12px;
198
  border-radius: var(--radius-sm);
199
  color: var(--accent-ink);
200
  background: var(--accent);
201
  font-size: 13px;
202
  font-weight: 600;
203
  text-decoration: none;
204
  transform: translateY(-140%);
205
}
206
207
.skipLink:focus {
208
  transform: none;
209
}
210
211
.eyebrow {
212
  margin: 0;
213
  color: var(--text-faint);
214
  font: 500 11px/1.2 var(--mono);
215
  letter-spacing: 0.14em;
216
  text-transform: uppercase;
217
}
218
219
.eyebrow::before {
220
  color: var(--accent);
221
  content: '> ';
222
}
223
224
.mark {
225
  display: grid;
226
  width: 30px;
227
  height: 30px;
228
  place-items: center;
229
  border-radius: 8px;
230
  color: #fff;
231
  background: var(--accent);
232
  font: 600 10px/1 var(--mono);
233
}
234
235
.appInset {
236
  background: transparent;
237
}
238
239
.appTopbar {
240
  display: flex;
241
  align-items: center;
242
  gap: 8px;
243
  padding: 14px 24px 0;
244
}
245
246
.commandKbd {
247
  margin-left: auto;
248
  padding: 1px 5px;
249
  border: 1px solid var(--border);
250
  border-radius: 4px;
251
  color: var(--text-faint);
252
  font: 500 10px/1.4 var(--mono);
253
}
254
255
@media (max-width: 640px) {
256
  .commandKbd {
257
    display: none;
258
  }
259
}
260
261
.brand {
262
  display: flex;
263
  align-items: center;
264
  gap: 10px;
265
}
266
267
.brand strong {
268
  font-size: 14px;
269
  font-weight: 600;
270
  letter-spacing: -0.03em;
271
}
272
273
.navRule {
274
  display: block;
275
  height: 1px;
276
  margin: 8px 10px;
277
  background: var(--border);
278
}
279
280
.ghostButton {
281
  display: flex;
282
  align-items: center;
283
  gap: 10px;
284
  width: 100%;
285
  margin-top: 16px;
286
  padding: 9px 2px;
287
  border: 0;
288
  border-radius: 0;
289
  color: var(--text-muted);
290
  background: transparent;
291
  font-size: 12px;
292
  cursor: pointer;
293
}
294
295
.ghostButton:hover,
296
.secondary:hover {
297
  background: var(--bg-hover);
298
}
299
300
.ghostButton svg {
301
  width: 16px;
302
  height: 16px;
303
  flex: none;
304
}
305
306
.sidebarFoot {
307
  display: grid;
308
  gap: 10px;
309
  margin-top: auto;
310
  padding-top: 12px;
311
}
312
313
.privacyStamp {
314
  display: flex;
315
  align-items: center;
316
  gap: 8px;
317
  padding: 0 4px;
318
  border: 0;
319
  background: transparent;
320
}
321
322
.privacyStamp small {
323
  color: var(--text-faint);
324
  font-size: 11px;
325
  line-height: 1.3;
326
}
327
328
.liveDot {
329
  width: 6px;
330
  height: 6px;
331
  flex: none;
332
  border-radius: 50%;
333
  background: var(--live);
334
  box-shadow: 0 0 8px var(--live);
335
  animation: pulse 2.2s ease-in-out infinite;
336
}
337
338
.sidebarTools {
339
  display: flex;
340
  align-items: center;
341
  gap: 6px;
342
}
343
344
.sidebarTools .iconButton {
345
  width: 32px;
346
  height: 32px;
347
  flex: none;
348
}
349
350
.account {
351
  display: flex;
352
  min-width: 0;
353
  flex: 1;
354
  align-items: center;
355
  gap: 8px;
356
  padding: 4px;
357
  border: 0;
358
  border-radius: 8px;
359
  color: var(--text);
360
  background: transparent;
361
  text-align: left;
362
  cursor: pointer;
363
}
364
365
.account:hover {
366
  background: var(--bg-hover);
367
}
368
369
.account > span {
370
  display: grid;
371
  width: 28px;
372
  height: 28px;
373
  place-items: center;
374
  border: 0;
375
  border-radius: 50%;
376
  color: var(--accent-ink);
377
  background: var(--accent);
378
  font: 600 10px/1 var(--mono);
379
}
380
381
.account > div {
382
  display: flex;
383
  min-width: 0;
384
  flex: 1;
385
  flex-direction: column;
386
  gap: 2px;
387
}
388
389
.account strong,
390
.account small {
391
  overflow: hidden;
392
  text-overflow: ellipsis;
393
  white-space: nowrap;
394
}
395
396
.account strong {
397
  font-size: 12px;
398
}
399
400
.account small {
401
  color: var(--text-faint);
402
  font-size: 11px;
403
}
404
405
.account > b {
406
  color: var(--text-faint);
407
  font-size: 11px;
408
  font-weight: 500;
409
}
410
411
.mobileActions {
412
  display: flex;
413
  align-items: center;
414
  gap: 8px;
415
}
416
417
.iconButton {
418
  display: grid;
419
  width: 36px;
420
  height: 36px;
421
  place-items: center;
422
  border: 0;
423
  border-radius: 50%;
424
  color: var(--text);
425
  background: var(--bg-well);
426
  cursor: pointer;
427
}
428
429
.iconButton svg {
430
  width: 16px;
431
  height: 16px;
432
}
433
434
.appMain {
435
  width: 100%;
436
  max-width: 1040px;
437
  padding: 24px 40px 80px;
438
}
439
440
.appMain > * {
441
  animation: fadeUp 0.38s ease both;
442
}
443
444
.appMain > *:nth-child(1) {
445
  animation-delay: 0.02s;
446
}
447
448
.appMain > *:nth-child(2) {
449
  animation-delay: 0.06s;
450
}
451
452
.appMain > *:nth-child(3) {
453
  animation-delay: 0.1s;
454
}
455
456
.appMain > *:nth-child(4) {
457
  animation-delay: 0.14s;
458
}
459
460
.appMain > *:nth-child(n + 5) {
461
  animation-delay: 0.18s;
462
}
463
464
.previewBanner {
465
  margin-bottom: 22px;
466
  padding: 0 0 14px;
467
  border: 0;
468
  border-bottom: 1px solid var(--accent-line);
469
  border-radius: 0;
470
  color: var(--accent-soft, var(--text));
471
  background: transparent;
472
  font: 500 12px/1.4 var(--mono);
473
}
474
475
.pageHead {
476
  display: flex;
477
  align-items: flex-end;
478
  justify-content: space-between;
479
  gap: 16px;
480
  padding-bottom: 18px;
481
  border-bottom: 1px solid var(--border);
482
}
483
484
.pageHead h1 {
485
  max-width: 720px;
486
  margin: 0;
487
  font-size: clamp(26px, 3vw, 34px);
488
  font-weight: 600;
489
  letter-spacing: -0.045em;
490
  line-height: 1.05;
491
}
492
493
.pageHead p.lede {
494
  max-width: 520px;
495
  margin: 6px 0 0;
496
  color: var(--text-muted);
497
  font-size: 13px;
498
  line-height: 1.45;
499
}
500
501
.primary,
502
.secondary {
503
  display: inline-flex;
504
  align-items: center;
505
  gap: 8px;
506
  padding: 10px 16px;
507
  border-radius: var(--radius-sm);
508
  cursor: pointer;
509
  font-size: 13px;
510
  font-weight: 600;
511
}
512
513
.primary {
514
  border: 0;
515
  color: #fff;
516
  background: var(--accent);
517
  box-shadow: none;
518
  transition:
519
    background 0.16s ease,
520
    transform 0.16s ease;
521
}
522
523
.primary:hover {
524
  background: var(--accent-hover);
525
  transform: translateY(-1px);
526
}
527
528
.primary:disabled,
529
.secondary:disabled {
530
  opacity: 0.5;
531
  cursor: not-allowed;
532
}
533
534
.secondary {
535
  border: 1px solid var(--border-strong);
536
  color: var(--text);
537
  background: transparent;
538
}
539
540
.metrics {
541
  display: grid;
542
  grid-template-columns: repeat(4, minmax(0, 1fr));
543
  gap: 12px;
544
  margin: 14px 0 8px;
545
}
546
547
.readiness,
548
.attentionBanner {
549
  display: flex;
550
  align-items: center;
551
  justify-content: space-between;
552
  gap: 16px;
553
  margin: 22px 0 0;
554
  padding: 16px 4px 18px;
555
  border: 0;
556
  border-bottom: 1px solid var(--border);
557
  border-radius: 0;
558
  background: transparent;
559
}
560
561
.readiness.ready {
562
  border-color: var(--border);
563
  background: transparent;
564
}
565
566
.attentionBanner {
567
  width: 100%;
568
  color: inherit;
569
  text-align: left;
570
  cursor: pointer;
571
}
572
573
.readiness > div,
574
.attentionBanner > div {
575
  display: flex;
576
  align-items: center;
577
  gap: 12px;
578
}
579
580
.readiness > div > div,
581
.attentionBanner > div > div {
582
  display: flex;
583
  flex-direction: column;
584
  gap: 3px;
585
}
586
587
.readiness strong,
588
.attentionBanner strong {
589
  font-size: 14px;
590
}
591
592
.readiness small,
593
.attentionBanner small {
594
  color: var(--text-muted);
595
  font-size: 12px;
596
}
597
598
.statusOrb {
599
  display: grid;
600
  width: 34px;
601
  height: 34px;
602
  flex: none;
603
  place-items: center;
604
  border-radius: 50%;
605
  color: #0b1020;
606
  background: var(--warn);
607
  font: 600 13px/1 var(--mono);
608
}
609
610
.readiness.ready .statusOrb {
611
  color: #062214;
612
  background: var(--live);
613
  box-shadow: 0 0 18px var(--live-dim);
614
}
615
616
.attentionBanner .statusOrb {
617
  color: var(--accent-ink);
618
  background: var(--accent);
619
  box-shadow: none;
620
}
621
622
.metric {
623
  display: flex;
624
  min-height: 0;
625
  flex-direction: column;
626
  padding: 4px 8px 4px 0;
627
  border: 0;
628
  border-radius: 0;
629
  background: transparent;
630
}
631
632
.metric::before {
633
  width: 20px;
634
  height: 2px;
635
  margin-bottom: 10px;
636
  border-radius: 99px;
637
  background: var(--accent);
638
  content: '';
639
}
640
641
.metric.warn::before {
642
  background: var(--warn);
643
}
644
645
.metric > span {
646
  color: var(--text-faint);
647
  font: 11px/1.3 var(--mono);
648
  letter-spacing: 0.04em;
649
  text-transform: uppercase;
650
}
651
652
.metric > strong {
653
  margin: 0 0 5px;
654
  font: 500 28px/1 var(--mono);
655
  letter-spacing: -0.05em;
656
}
657
658
.metric > small {
659
  color: var(--text-muted);
660
  font-size: 12px;
661
}
662
663
.metric.warn > strong {
664
  color: var(--warn);
665
}
666
667
.contentGrid,
668
.connectLayout {
669
  display: grid;
670
  grid-template-columns: 1.25fr 1fr;
671
  gap: 36px;
672
}
673
674
.setupRequests {
675
  margin: 22px 0;
676
  padding: 8px 0 4px;
677
  border: 0;
678
  border-radius: 0;
679
  background: transparent;
680
}
681
682
.setupRequests > div:first-child h2 {
683
  margin: 8px 0 4px;
684
  font-size: 20px;
685
  letter-spacing: -0.03em;
686
}
687
688
.setupRequests > div:first-child > p:last-child {
689
  margin: 0 0 16px;
690
  color: var(--text-muted);
691
  font-size: 13px;
692
}
693
694
.setupRequest {
695
  display: flex;
696
  align-items: center;
697
  justify-content: space-between;
698
  gap: 16px;
699
  padding: 16px 0;
700
  border: 0;
701
  border-bottom: 1px solid var(--border);
702
  border-radius: 0;
703
  background: transparent;
704
}
705
706
.setupRequest + .setupRequest {
707
  margin-top: 10px;
708
}
709
710
.setupRequest > div:first-child {
711
  display: flex;
712
  min-width: 0;
713
  flex-direction: column;
714
  gap: 4px;
715
}
716
717
.setupRequest strong {
718
  font-size: 14px;
719
}
720
721
.setupRequest small {
722
  color: var(--text-muted);
723
  font: 12px/1.4 var(--mono);
724
}
725
726
.decisionButtons {
727
  display: flex;
728
  flex: none;
729
  gap: 8px;
730
}
731
732
.setupRequests > .loginError {
733
  margin-top: 10px;
734
}
735
736
.panel {
737
  min-width: 0;
738
  padding: 6px 0 0;
739
  border: 0;
740
  border-radius: 0;
741
  background: transparent;
742
}
743
744
.panelHead {
745
  padding-bottom: 14px;
746
  border-bottom: 1px solid var(--border);
747
}
748
749
.panelHead h2 {
750
  margin: 0;
751
  font-size: 20px;
752
  font-weight: 600;
753
  letter-spacing: -0.03em;
754
}
755
756
.panelHead p {
757
  margin: 4px 0 0;
758
  color: var(--text-muted);
759
  font-size: 13px;
760
}
761
762
.toolbar {
763
  display: flex;
764
  flex-wrap: wrap;
765
  align-items: center;
766
  gap: 10px;
767
  margin: 16px 0 8px;
768
}
769
770
.searchField {
771
  min-width: 220px;
772
  flex: 1;
773
  padding: 10px 0;
774
  border: 0;
775
  border-bottom: 1px solid var(--border-strong);
776
  border-radius: 0;
777
  color: var(--text);
778
  background: transparent;
779
  font-size: 13px;
780
}
781
782
.filterRow {
783
  display: flex;
784
  flex-wrap: wrap;
785
  gap: 6px;
786
}
787
788
.filterChip {
789
  padding: 6px 11px;
790
  border: 1px solid transparent;
791
  border-radius: 999px;
792
  color: var(--text-muted);
793
  background: transparent;
794
  font-size: 12px;
795
  cursor: pointer;
796
}
797
798
.filterChip.active,
799
.filterChip:hover {
800
  color: var(--text);
801
  background: var(--bg-hover);
802
}
803
804
.filterChip.active {
805
  border-color: transparent;
806
  color: var(--accent-ink);
807
  background: var(--accent);
808
}
809
810
.historyRow {
811
  display: flex;
812
  align-items: center;
813
  gap: 12px;
814
  padding: 13px 4px;
815
  border-bottom: 1px solid var(--border);
816
}
817
818
.historyRow:last-child {
819
  border-bottom: 0;
820
}
821
822
.historyRow:hover {
823
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
824
}
825
826
.historyRow > div {
827
  display: flex;
828
  min-width: 0;
829
  flex: 1;
830
  flex-direction: column;
831
  gap: 3px;
832
}
833
834
.historyRow strong {
835
  font-size: 13px;
836
  font-weight: 600;
837
  text-transform: capitalize;
838
}
839
840
.historyRow small {
841
  overflow: hidden;
842
  color: var(--text-muted);
843
  font: 12px/1.4 var(--mono);
844
  text-overflow: ellipsis;
845
  white-space: nowrap;
846
}
847
848
.historyRow > b {
849
  color: var(--text-faint);
850
  font: 11px/1.3 var(--mono);
851
  text-transform: uppercase;
852
}
853
854
.eventDot {
855
  width: 8px;
856
  height: 8px;
857
  flex: none;
858
  border-radius: 50%;
859
  background: var(--live);
860
}
861
862
.eventDot.policy_warning,
863
.eventDot.objection {
864
  background: var(--warn);
865
}
866
867
.eventDot.policy_violation,
868
.eventDot.dispute {
869
  background: var(--danger);
870
}
871
872
.eventDot.receipt {
873
  background: var(--info);
874
}
875
876
.textButton {
877
  margin-top: 14px;
878
  padding: 0;
879
  border: 0;
880
  color: var(--accent);
881
  background: transparent;
882
  font-size: 13px;
883
  font-weight: 600;
884
  cursor: pointer;
885
}
886
887
.empty {
888
  display: grid;
889
  min-height: 220px;
890
  place-items: center;
891
  align-content: center;
892
  padding: 28px;
893
  text-align: center;
894
}
895
896
.empty > span,
897
.empty > svg {
898
  display: grid;
899
  width: 42px;
900
  height: 42px;
901
  place-items: center;
902
  margin-bottom: 12px;
903
  border: 0;
904
  border-radius: 50%;
905
  color: var(--accent);
906
  background: var(--accent-dim);
907
}
908
909
.empty strong {
910
  font-size: 15px;
911
}
912
913
.empty p {
914
  max-width: 420px;
915
  margin: 8px 0 16px;
916
  color: var(--text-muted);
917
  font-size: 13px;
918
  line-height: 1.55;
919
}
920
921
.profile {
922
  padding: 16px 0;
923
  border-bottom: 1px solid var(--border);
924
}
925
926
.profile:last-child {
927
  border-bottom: 0;
928
}
929
930
.profile > div:first-child {
931
  display: flex;
932
  justify-content: space-between;
933
  gap: 12px;
934
  margin-bottom: 12px;
935
}
936
937
.profile > div:first-child strong {
938
  font-size: 13px;
939
}
940
941
.profile > div:first-child small {
942
  color: var(--text-muted);
943
  font: 12px/1.3 var(--mono);
944
}
945
946
.meter {
947
  display: grid;
948
  grid-template-columns: 96px 1fr 40px;
949
  align-items: center;
950
  gap: 10px;
951
  margin: 8px 0;
952
  color: var(--text-muted);
953
  font: 11px/1.3 var(--mono);
954
}
955
956
.meter i {
957
  height: 5px;
958
  overflow: hidden;
959
  border-radius: 99px;
960
  background: var(--border);
961
}
962
963
.meter i b {
964
  display: block;
965
  height: 100%;
966
  background: var(--accent);
967
}
968
969
.meter strong {
970
  text-align: right;
971
}
972
973
.agentGrid {
974
  display: grid;
975
  grid-template-columns: repeat(2, minmax(0, 1fr));
976
  gap: 16px;
977
  margin-top: 18px;
978
}
979
980
.agentGrid > .empty {
981
  grid-column: 1 / -1;
982
  border: 0;
983
  border-radius: 0;
984
  background: transparent;
985
}
986
987
.agentCard {
988
  display: flex;
989
  min-height: 230px;
990
  flex-direction: column;
991
  padding: 8px 4px 12px;
992
  border: 0;
993
  border-top: 1px solid var(--border);
994
  border-radius: 0;
995
  background: transparent;
996
}
997
998
.agentTop {
999
  display: flex;
1000
  align-items: flex-start;
1001
  justify-content: space-between;
1002
  gap: 12px;
1003
}
1004
1005
.agentGlyph {
1006
  display: grid;
1007
  width: 40px;
1008
  height: 40px;
1009
  place-items: center;
1010
  border: 0;
1011
  border-radius: 12px;
1012
  color: var(--accent);
1013
  background: var(--accent-dim);
1014
}
1015
1016
.agentGlyph svg {
1017
  width: 18px;
1018
  height: 18px;
1019
}
1020
1021
.agentBadges {
1022
  display: flex;
1023
  flex-wrap: wrap;
1024
  justify-content: flex-end;
1025
  gap: 6px;
1026
}
1027
1028
.agentTop b {
1029
  padding: 4px 8px;
1030
  border: 0;
1031
  border-radius: 999px;
1032
  color: var(--text-muted);
1033
  background: var(--bg-well);
1034
  font: 11px/1.3 var(--mono);
1035
}
1036
1037
.agentTop b.bad {
1038
  border-color: var(--danger-line);
1039
  color: var(--danger);
1040
  background: var(--danger-dim);
1041
}
1042
1043
.agentTop .readyBadge,
1044
.agentTop .onlineBadge {
1045
  border-color: transparent;
1046
  color: var(--live);
1047
  background: var(--live-dim);
1048
}
1049
1050
:root[data-theme='dark'] .agentTop .readyBadge,
1051
:root[data-theme='dark'] .agentTop .onlineBadge {
1052
  color: var(--live);
1053
}
1054
1055
.agentTop .needsBadge {
1056
  border-color: var(--warn-line);
1057
  color: var(--warn);
1058
  background: var(--warn-dim);
1059
}
1060
1061
.agentTop .offlineBadge {
1062
  color: var(--text-faint);
1063
}
1064
1065
.agentCard h2 {
1066
  margin: 18px 0 4px;
1067
  font-size: 18px;
1068
  letter-spacing: -0.03em;
1069
}
1070
1071
.agentCard p,
1072
.agentCard > small {
1073
  color: var(--text-muted);
1074
  font-size: 13px;
1075
}
1076
1077
.agentCard > small {
1078
  display: block;
1079
  margin-top: 10px;
1080
}
1081
1082
.agentPublicLinks {
1083
  display: flex;
1084
  flex-wrap: wrap;
1085
  gap: 12px;
1086
  margin-top: 10px;
1087
}
1088
1089
.agentPublicLinks a {
1090
  color: var(--accent);
1091
  font-size: 13px;
1092
  font-weight: 600;
1093
  text-decoration: none;
1094
}
1095
1096
.agentPublicLinks a:hover {
1097
  text-decoration: underline;
1098
}
1099
1100
.agentCard > button,
1101
.agentCard > .agentActions {
1102
  width: 100%;
1103
  margin-top: 16px;
1104
}
1105
1106
.automationSummary {
1107
  display: flex;
1108
  flex-wrap: wrap;
1109
  gap: 6px;
1110
  margin-top: 14px;
1111
}
1112
1113
.automationSummary span,
1114
.automationPreview span {
1115
  padding: 5px 0;
1116
  border: 0;
1117
  border-radius: 0;
1118
  color: var(--text-muted);
1119
  background: transparent;
1120
  font: 11px/1.3 var(--mono);
1121
}
1122
1123
.automationForm {
1124
  display: grid;
1125
  gap: 12px;
1126
  margin-top: 16px;
1127
  padding-top: 16px;
1128
  border-top: 1px solid var(--border);
1129
}
1130
1131
.runtimeBox {
1132
  display: grid;
1133
  gap: 10px;
1134
  margin-top: 16px;
1135
  padding: 14px 0 0;
1136
  border: 0;
1137
  border-top: 1px solid var(--border);
1138
  border-radius: 0;
1139
  background: transparent;
1140
}
1141
1142
.runtimeBox > div:first-child {
1143
  display: flex;
1144
  align-items: center;
1145
  justify-content: space-between;
1146
  gap: 12px;
1147
}
1148
1149
.runtimeBox p,
1150
.runtimeBox small {
1151
  margin: 0;
1152
  color: var(--text-muted);
1153
  font-size: 12px;
1154
  line-height: 1.5;
1155
}
1156
1157
.runtimeBox input,
1158
.automationForm input,
1159
.automationForm select,
1160
.setting input,
1161
.setting select {
1162
  width: 100%;
1163
  padding: 10px 0;
1164
  border: 0;
1165
  border-bottom: 1px solid var(--border-strong);
1166
  border-radius: 0;
1167
  color: var(--text);
1168
  background: transparent;
1169
  font-size: 13px;
1170
}
1171
1172
.runtimeBox input:focus,
1173
.automationForm input:focus,
1174
.automationForm select:focus,
1175
.setting input:focus,
1176
.setting select:focus,
1177
.searchField:focus {
1178
  border-color: var(--accent);
1179
  box-shadow: 0 0 0 3px rgb(240 75 45 / 22%);
1180
}
1181
1182
.runtimeLive,
1183
.runtimeMissing {
1184
  font: 11px/1.3 var(--mono);
1185
}
1186
1187
.runtimeLive {
1188
  color: var(--live);
1189
}
1190
1191
.runtimeMissing {
1192
  color: var(--warn);
1193
}
1194
1195
.accessTokenBox {
1196
  display: grid;
1197
  gap: 12px;
1198
  margin-top: 12px;
1199
  padding: 14px 0 0;
1200
  border: 0;
1201
  border-top: 1px solid var(--border);
1202
  border-radius: 0;
1203
  background: transparent;
1204
}
1205
1206
.accessTokenHead > div {
1207
  display: flex;
1208
  align-items: center;
1209
  justify-content: space-between;
1210
  gap: 12px;
1211
}
1212
1213
.accessTokenHead span {
1214
  color: var(--accent);
1215
  font: 11px/1.3 var(--mono);
1216
}
1217
1218
.accessTokenHead p {
1219
  margin: 8px 0 0;
1220
  color: var(--text-muted);
1221
  font-size: 12px;
1222
  line-height: 1.5;
1223
}
1224
1225
.tokenList {
1226
  display: grid;
1227
  border-top: 1px solid var(--border);
1228
}
1229
1230
.tokenList > div {
1231
  display: flex;
1232
  align-items: center;
1233
  justify-content: space-between;
1234
  gap: 12px;
1235
  padding-top: 10px;
1236
}
1237
1238
.tokenList span {
1239
  display: grid;
1240
  min-width: 0;
1241
  gap: 3px;
1242
}
1243
1244
.tokenList small {
1245
  color: var(--text-muted);
1246
  font: 10px/1.4 var(--mono);
1247
}
1248
1249
.automationForm label {
1250
  display: grid;
1251
  gap: 6px;
1252
  color: var(--text-muted);
1253
  font-size: 12px;
1254
}
1255
1256
.automationForm .checkControl {
1257
  display: flex;
1258
  grid-template-columns: none;
1259
  align-items: center;
1260
  gap: 8px;
1261
}
1262
1263
.automationForm .checkControl input {
1264
  width: 15px;
1265
  height: 15px;
1266
  accent-color: var(--accent);
1267
}
1268
1269
.agentActions {
1270
  display: flex;
1271
  justify-content: flex-end;
1272
  gap: 8px;
1273
}
1274
1275
.agentManagementActions {
1276
  justify-content: space-between;
1277
}
1278
1279
.dangerButton {
1280
  border-color: var(--danger-line);
1281
  color: var(--danger);
1282
  background: var(--danger-dim);
1283
}
1284
1285
.dangerButton:hover:not(:disabled) {
1286
  border-color: var(--danger);
1287
}
1288
1289
.automationPreview {
1290
  display: flex;
1291
  flex-wrap: wrap;
1292
  gap: 6px;
1293
  margin-top: 8px;
1294
}
1295
1296
.autoAccepted {
1297
  color: var(--live) !important;
1298
}
1299
1300
.tags {
1301
  display: flex;
1302
  flex-wrap: wrap;
1303
  gap: 6px;
1304
  margin-top: 12px;
1305
}
1306
1307
.tags span {
1308
  padding: 4px 0;
1309
  border: 0;
1310
  border-radius: 0;
1311
  color: var(--text-muted);
1312
  font: 11px/1.3 var(--mono);
1313
}
1314
1315
.tags span + span::before,
1316
.automationSummary span + span::before,
1317
.automationPreview span + span::before {
1318
  margin-right: 8px;
1319
  color: var(--accent);
1320
  content: '/';
1321
}
1322
1323
.notice {
1324
  margin: 18px 0;
1325
  padding: 4px 0 16px;
1326
  border: 0;
1327
  border-bottom: 1px solid var(--border);
1328
  color: var(--text-muted);
1329
  background: transparent;
1330
  font-size: 13px;
1331
}
1332
1333
.notice strong {
1334
  margin-right: 6px;
1335
  color: var(--text);
1336
}
1337
1338
.connectionTypePicker {
1339
  display: grid;
1340
  grid-template-columns: repeat(2, minmax(0, 1fr));
1341
  gap: 10px;
1342
  margin-top: 18px;
1343
}
1344
1345
.connectionTypePicker button {
1346
  display: grid;
1347
  gap: 5px;
1348
  padding: 14px 4px 16px;
1349
  border: 0;
1350
  border-top: 2px solid var(--border);
1351
  border-radius: 0;
1352
  color: var(--text);
1353
  background: transparent;
1354
  font-size: 14px;
1355
  font-weight: 600;
1356
  text-align: left;
1357
  cursor: pointer;
1358
}
1359
1360
.connectionTypePicker button.active {
1361
  border-color: var(--accent);
1362
  background: transparent;
1363
}
1364
1365
.connectionTypePicker small {
1366
  color: var(--text-muted);
1367
  font-size: 12px;
1368
  font-weight: 400;
1369
}
1370
1371
.connectLayout {
1372
  margin-top: 18px;
1373
}
1374
1375
.providerForm {
1376
  display: grid;
1377
  grid-template-columns: repeat(2, minmax(0, 1fr));
1378
  gap: 12px;
1379
  margin-top: 18px;
1380
}
1381
1382
.providerForm label,
1383
.providerResult label {
1384
  display: grid;
1385
  gap: 6px;
1386
  color: var(--text-muted);
1387
  font-size: 12px;
1388
}
1389
1390
.providerForm input,
1391
.providerForm select,
1392
.providerForm textarea {
1393
  width: 100%;
1394
  padding: 10px 0;
1395
  border: 0;
1396
  border-bottom: 1px solid var(--border-strong);
1397
  border-radius: 0;
1398
  color: var(--text);
1399
  background: transparent;
1400
  font: inherit;
1401
}
1402
1403
.providerForm textarea {
1404
  min-height: 82px;
1405
  resize: vertical;
1406
}
1407
1408
.providerForm .fullWidth {
1409
  grid-column: 1 / -1;
1410
}
1411
1412
.providerSubmit {
1413
  display: flex;
1414
  align-items: center;
1415
  justify-content: space-between;
1416
  gap: 12px;
1417
}
1418
1419
.providerSubmit p {
1420
  margin: 0;
1421
  color: var(--text-muted);
1422
  font-size: 12px;
1423
}
1424
1425
.providerResult {
1426
  display: grid;
1427
  gap: 14px;
1428
  margin-top: 18px;
1429
}
1430
1431
.providerResult code {
1432
  padding: 11px 0;
1433
  border: 0;
1434
  border-bottom: 1px solid var(--border);
1435
  border-radius: 0;
1436
  color: var(--accent);
1437
  background: transparent;
1438
  overflow-wrap: anywhere;
1439
  user-select: all;
1440
}
1441
1442
.successBanner {
1443
  display: grid;
1444
  gap: 3px;
1445
  padding: 12px 0;
1446
  border: 0;
1447
  border-radius: 0;
1448
  background: transparent;
1449
}
1450
1451
.successBanner span {
1452
  color: var(--text-muted);
1453
  font: 11px/1.4 var(--mono);
1454
  overflow-wrap: anywhere;
1455
}
1456
1457
.providerNotice {
1458
  margin-bottom: 0;
1459
}
1460
1461
.endpoint {
1462
  display: flex;
1463
  gap: 8px;
1464
  margin: 20px 0;
1465
}
1466
1467
.endpoint code {
1468
  overflow: auto;
1469
  flex: 1;
1470
  padding: 12px 0;
1471
  border: 0;
1472
  border-bottom: 1px solid var(--border);
1473
  border-radius: 0;
1474
  color: var(--accent);
1475
  background: transparent;
1476
  font: 13px/1.4 var(--mono);
1477
  white-space: nowrap;
1478
}
1479
1480
.endpoint button {
1481
  padding: 0 4px;
1482
  border: 0;
1483
  border-radius: 0;
1484
  color: var(--accent);
1485
  background: transparent;
1486
  font-weight: 600;
1487
  cursor: pointer;
1488
}
1489
1490
.connectLayout ol {
1491
  margin: 8px 0 0;
1492
  padding-left: 22px;
1493
  color: var(--text-muted);
1494
  font-size: 14px;
1495
  line-height: 1.7;
1496
}
1497
1498
.connectSteps {
1499
  display: grid;
1500
  gap: 12px;
1501
  margin-top: 18px;
1502
}
1503
1504
.connectStep {
1505
  display: grid;
1506
  grid-template-columns: 28px 1fr;
1507
  gap: 12px;
1508
  color: var(--text-muted);
1509
  font-size: 14px;
1510
}
1511
1512
.connectStep b {
1513
  display: grid;
1514
  width: 28px;
1515
  height: 28px;
1516
  place-items: center;
1517
  border-radius: 50%;
1518
  color: var(--accent-ink);
1519
  background: var(--accent);
1520
  font: 600 12px/1 var(--mono);
1521
}
1522
1523
.checkList {
1524
  margin: 16px 0 0;
1525
  padding: 0;
1526
  list-style: none;
1527
}
1528
1529
.checkList li {
1530
  padding: 11px 0;
1531
  border-bottom: 1px solid var(--border);
1532
  color: var(--text-muted);
1533
  font-size: 14px;
1534
}
1535
1536
.checkList li:last-child {
1537
  border-bottom: 0;
1538
}
1539
1540
.checkList li::before {
1541
  content: '✓';
1542
  margin-right: 10px;
1543
  color: var(--accent);
1544
}
1545
1546
.settingsCard {
1547
  margin-top: 10px;
1548
  border: 0;
1549
  border-radius: 0;
1550
  background: transparent;
1551
}
1552
1553
.setting {
1554
  display: grid;
1555
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1556
  align-items: center;
1557
  gap: 24px;
1558
  padding: 22px 0;
1559
  border-bottom: 1px solid var(--border);
1560
}
1561
1562
.setting strong {
1563
  font-size: 14px;
1564
}
1565
1566
.setting p {
1567
  max-width: 580px;
1568
  margin: 5px 0 0;
1569
  color: var(--text-muted);
1570
  font-size: 13px;
1571
  line-height: 1.5;
1572
}
1573
1574
.locked {
1575
  float: right;
1576
  color: var(--text-faint);
1577
  font: 12px/1.3 var(--mono);
1578
}
1579
1580
.toggle {
1581
  position: relative;
1582
  display: block;
1583
  width: 44px;
1584
  height: 26px;
1585
  margin-left: auto;
1586
  padding: 0;
1587
  border: 1px solid var(--border-strong);
1588
  border-radius: 99px;
1589
  background: var(--bg-well);
1590
  cursor: pointer;
1591
}
1592
1593
.toggle span {
1594
  position: absolute;
1595
  top: 4px;
1596
  left: 4px;
1597
  width: 16px;
1598
  height: 16px;
1599
  border-radius: 50%;
1600
  background: var(--text-faint);
1601
  transition: transform 0.18s ease;
1602
}
1603
1604
.toggle.on {
1605
  border-color: var(--accent);
1606
  background: var(--accent);
1607
}
1608
1609
.toggle.on span {
1610
  left: 4px;
1611
  background: #fff;
1612
  transform: translateX(18px);
1613
}
1614
1615
.saveRow {
1616
  display: flex;
1617
  align-items: center;
1618
  gap: 12px;
1619
  padding: 22px 0;
1620
}
1621
1622
.saveRow span {
1623
  color: var(--accent);
1624
  font-size: 13px;
1625
}
1626
1627
.loginPage {
1628
  display: grid;
1629
  grid-template-columns: 1.05fr 0.95fr;
1630
  min-height: 100vh;
1631
}
1632
1633
.loginPitch {
1634
  display: flex;
1635
  flex-direction: column;
1636
  justify-content: space-between;
1637
  padding: 48px 7vw;
1638
  background: transparent;
1639
}
1640
1641
.loginPitch h1 {
1642
  max-width: 680px;
1643
  margin: 10px 0 14px;
1644
  font-size: clamp(40px, 5.4vw, 72px);
1645
  font-weight: 600;
1646
  letter-spacing: -0.06em;
1647
  line-height: 0.94;
1648
}
1649
1650
.loginPitch > div > p:last-child {
1651
  max-width: 540px;
1652
  color: var(--text-muted);
1653
  font-size: 16px;
1654
  line-height: 1.65;
1655
}
1656
1657
.launchBadge {
1658
  display: inline-flex;
1659
  width: fit-content;
1660
  margin: 0 0 18px;
1661
  padding: 5px 10px;
1662
  border: 1px solid var(--accent-line);
1663
  border-radius: 999px;
1664
  color: var(--accent);
1665
  background: var(--accent-dim);
1666
  font: 500 11px/1.3 var(--mono);
1667
}
1668
1669
.loginProof {
1670
  display: grid;
1671
  grid-template-columns: auto 1fr;
1672
  gap: 10px 12px;
1673
  color: var(--text-muted);
1674
  font: 12px/1.3 var(--mono);
1675
  text-transform: uppercase;
1676
}
1677
1678
.loginProof span {
1679
  color: var(--accent);
1680
}
1681
1682
.loginCard {
1683
  display: flex;
1684
  flex-direction: column;
1685
  justify-content: center;
1686
  padding: 8vw;
1687
  gap: 28px;
1688
  border-left: 1px solid var(--border);
1689
  background: transparent;
1690
}
1691
1692
.loginCard h2 {
1693
  margin: 6px 0;
1694
  font-size: 28px;
1695
  font-weight: 600;
1696
  letter-spacing: -0.04em;
1697
}
1698
1699
.socialButtons {
1700
  display: grid;
1701
  gap: 10px;
1702
}
1703
1704
.socialButtons button {
1705
  display: flex;
1706
  align-items: center;
1707
  justify-content: center;
1708
  gap: 10px;
1709
  width: 100%;
1710
  padding: 13px;
1711
  border: 1px solid var(--border-strong);
1712
  border-radius: var(--radius-sm);
1713
  color: var(--text);
1714
  background: transparent;
1715
  font-size: 14px;
1716
  font-weight: 600;
1717
  cursor: pointer;
1718
}
1719
1720
.socialButtons button:first-child {
1721
  border-color: transparent;
1722
  color: var(--accent-ink);
1723
  background: var(--accent);
1724
  box-shadow: none;
1725
}
1726
1727
.socialButtons button:hover {
1728
  border-color: var(--accent);
1729
  background: var(--accent-dim);
1730
}
1731
1732
.socialButtons button:first-child:hover {
1733
  color: var(--accent-ink);
1734
  background: var(--accent-hover);
1735
}
1736
1737
.socialButtons svg {
1738
  width: 18px;
1739
  height: 18px;
1740
}
1741
1742
.loginError,
1743
.errorBar {
1744
  padding: 11px 0;
1745
  border: 0;
1746
  border-radius: 0;
1747
  color: var(--danger);
1748
  background: transparent;
1749
  font-size: 13px;
1750
}
1751
1752
.loginCard > div > p:last-child,
1753
.loginCard > small {
1754
  color: var(--text-muted);
1755
  font-size: 13px;
1756
  line-height: 1.55;
1757
}
1758
1759
.loading {
1760
  display: grid;
1761
  min-height: 100vh;
1762
  place-items: center;
1763
  align-content: center;
1764
  gap: 14px;
1765
  color: var(--text-muted);
1766
  font: 12px/1.3 var(--mono);
1767
  text-transform: uppercase;
1768
}
1769
1770
.loading.compact {
1771
  min-height: 50vh;
1772
}
1773
1774
.spinner {
1775
  width: 22px;
1776
  height: 22px;
1777
  border: 2px solid var(--border);
1778
  border-top-color: var(--accent);
1779
  border-radius: 50%;
1780
  animation: spin 0.8s linear infinite;
1781
}
1782
1783
.errorBar {
1784
  margin-bottom: 14px;
1785
}
1786
1787
@keyframes spin {
1788
  to {
1789
    transform: rotate(360deg);
1790
  }
1791
}
1792
1793
@keyframes fadeUp {
1794
  from {
1795
    opacity: 0;
1796
    transform: translateY(8px);
1797
  }
1798
  to {
1799
    opacity: 1;
1800
    transform: none;
1801
  }
1802
}
1803
1804
@keyframes pulse {
1805
  0%,
1806
  100% {
1807
    opacity: 1;
1808
    box-shadow: 0 0 0 0 rgb(240 75 45 / 35%);
1809
  }
1810
  50% {
1811
    opacity: 0.55;
1812
    box-shadow: 0 0 0 6px transparent;
1813
  }
1814
}
1815
1816
.conversationLayout {
1817
  display: grid;
1818
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1819
  gap: 16px;
1820
}
1821
1822
.threadList,
1823
.conversationDetail,
1824
.messageList {
1825
  display: grid;
1826
  gap: 10px;
1827
}
1828
1829
.threadList > button {
1830
  display: flex;
1831
  align-items: center;
1832
  justify-content: space-between;
1833
  width: 100%;
1834
  padding: 12px 2px;
1835
  border: 0;
1836
  border-bottom: 1px solid var(--border);
1837
  border-radius: 0;
1838
  color: var(--text);
1839
  background: transparent;
1840
  text-align: left;
1841
  cursor: pointer;
1842
}
1843
1844
.threadList > button.active,
1845
.threadList > button:hover {
1846
  border-color: var(--accent);
1847
  background: transparent;
1848
}
1849
1850
.threadList span,
1851
.threadList small {
1852
  display: block;
1853
}
1854
1855
.threadList small,
1856
.messageList span {
1857
  margin-top: 4px;
1858
  color: var(--text-muted);
1859
  font-size: 11px;
1860
}
1861
1862
.threadList b,
1863
.conversationInsights b {
1864
  color: var(--accent);
1865
  font: 10px/1.2 var(--mono);
1866
}
1867
1868
.conversationInsights {
1869
  padding: 4px 0 12px;
1870
  border: 0;
1871
  border-bottom: 1px solid var(--warn-line);
1872
  border-radius: 0;
1873
  background: transparent;
1874
}
1875
1876
.conversationInsights p {
1877
  margin: 0 0 6px;
1878
  font-size: 12px;
1879
  line-height: 1.5;
1880
}
1881
1882
.conversationInsights p:last-child {
1883
  margin-bottom: 0;
1884
}
1885
1886
.messageList article {
1887
  max-width: 82%;
1888
  padding: 4px 0 12px;
1889
  border: 0;
1890
  border-radius: 0;
1891
  background: transparent;
1892
}
1893
1894
.messageList article.sent {
1895
  justify-self: end;
1896
  border-color: transparent;
1897
  background: transparent;
1898
}
1899
1900
.messageList article p {
1901
  margin: 4px 0;
1902
  white-space: pre-wrap;
1903
}
1904
1905
.replyBox {
1906
  display: grid;
1907
  gap: 8px;
1908
}
1909
1910
.replyBox textarea {
1911
  min-height: 100px;
1912
  padding: 10px 0;
1913
  border: 0;
1914
  border-bottom: 1px solid var(--border-strong);
1915
  border-radius: 0;
1916
  color: var(--text);
1917
  background: transparent;
1918
  resize: vertical;
1919
}
1920
1921
.historyToolbar {
1922
  display: flex;
1923
  flex-wrap: wrap;
1924
  align-items: center;
1925
  gap: 10px;
1926
  margin-bottom: 16px;
1927
}
1928
1929
.journeyLayout {
1930
  display: grid;
1931
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
1932
  gap: 16px;
1933
  align-items: start;
1934
}
1935
1936
.journeyList {
1937
  display: grid;
1938
  gap: 8px;
1939
}
1940
1941
.journeyList > button {
1942
  display: flex;
1943
  width: 100%;
1944
  flex-direction: column;
1945
  gap: 7px;
1946
  padding: 15px 4px;
1947
  border: 0;
1948
  border-bottom: 1px solid var(--border);
1949
  border-radius: 0;
1950
  color: var(--text);
1951
  background: transparent;
1952
  text-align: left;
1953
  cursor: pointer;
1954
}
1955
1956
.journeyList > button:hover {
1957
  border-color: var(--border-strong);
1958
  background: transparent;
1959
}
1960
1961
.journeyList > button.active {
1962
  border-color: var(--accent);
1963
  box-shadow: none;
1964
}
1965
1966
.journeyListTop,
1967
.journeyListMeta {
1968
  display: flex;
1969
  align-items: center;
1970
  justify-content: space-between;
1971
  gap: 10px;
1972
}
1973
1974
.journeyListTop > b {
1975
  color: var(--text-faint);
1976
  font: 500 10px/1.2 var(--mono);
1977
  letter-spacing: 0.08em;
1978
  text-transform: uppercase;
1979
}
1980
1981
.journeyList > button > strong {
1982
  font-size: 13px;
1983
  line-height: 1.4;
1984
}
1985
1986
.journeyList > button > small {
1987
  overflow: hidden;
1988
  color: var(--text-muted);
1989
  font: 11px/1.4 var(--mono);
1990
  text-overflow: ellipsis;
1991
  white-space: nowrap;
1992
}
1993
1994
.journeyListMeta {
1995
  color: var(--text-faint);
1996
  font: 10px/1.3 var(--mono);
1997
}
1998
1999
.journeyListMeta i {
2000
  font-style: normal;
2001
}
2002
2003
.statusPill {
2004
  display: inline-grid;
2005
  grid-template-columns: 6px minmax(7.4em, max-content);
2006
  align-items: center;
2007
  gap: 7px;
2008
  flex: none;
2009
  min-width: 8.4em;
2010
  padding: 0;
2011
  border: 0;
2012
  border-radius: 0;
2013
  color: var(--text-muted);
2014
  background: transparent;
2015
  font: 500 10px/1 var(--mono);
2016
  letter-spacing: 0.06em;
2017
  text-transform: uppercase;
2018
  white-space: nowrap;
2019
}
2020
2021
.statusPill i {
2022
  width: 6px;
2023
  height: 6px;
2024
  border-radius: 1px;
2025
  background: currentColor;
2026
}
2027
2028
.statusPill.good {
2029
  color: var(--live);
2030
}
2031
2032
.statusPill.warn {
2033
  color: var(--warn);
2034
}
2035
2036
:root[data-theme='light'] .statusPill.warn {
2037
  color: #8a5a16;
2038
}
2039
2040
.statusPill.danger {
2041
  color: var(--danger);
2042
}
2043
2044
.journeyDetail {
2045
  min-width: 0;
2046
  overflow: hidden;
2047
  border: 0;
2048
  border-radius: 0;
2049
  background: transparent;
2050
}
2051
2052
.journeyHero {
2053
  display: flex;
2054
  align-items: flex-start;
2055
  justify-content: space-between;
2056
  gap: 20px;
2057
  padding: 8px 0 22px;
2058
  border-bottom: 1px solid var(--border);
2059
}
2060
2061
.journeyHero h2 {
2062
  max-width: 780px;
2063
  margin: 8px 0 5px;
2064
  font-size: clamp(18px, 2vw, 24px);
2065
  line-height: 1.25;
2066
  letter-spacing: -0.03em;
2067
}
2068
2069
.journeyHero p {
2070
  margin: 0;
2071
  color: var(--text-muted);
2072
  font: 11px/1.4 var(--mono);
2073
}
2074
2075
.journeySummaryGrid {
2076
  display: grid;
2077
  grid-template-columns: repeat(4, minmax(0, 1fr));
2078
  border-bottom: 1px solid var(--border);
2079
}
2080
2081
.journeySummaryGrid section {
2082
  display: flex;
2083
  min-width: 0;
2084
  flex-direction: column;
2085
  gap: 5px;
2086
  padding: 16px 20px 16px 0;
2087
  border-right: 1px solid var(--border);
2088
}
2089
2090
.journeySummaryGrid section:last-child {
2091
  border-right: 0;
2092
}
2093
2094
.journeySummaryGrid span,
2095
.outcomeCard > div > span,
2096
.profileDelta > span {
2097
  color: var(--text-faint);
2098
  font: 10px/1.3 var(--mono);
2099
  letter-spacing: 0.05em;
2100
  text-transform: uppercase;
2101
}
2102
2103
.journeySummaryGrid strong {
2104
  overflow: hidden;
2105
  font-size: 15px;
2106
  text-overflow: ellipsis;
2107
  white-space: nowrap;
2108
}
2109
2110
.journeySummaryGrid small {
2111
  overflow: hidden;
2112
  color: var(--text-muted);
2113
  font-size: 11px;
2114
  text-overflow: ellipsis;
2115
  white-space: nowrap;
2116
}
2117
2118
.outcomeCard {
2119
  margin: 18px 0;
2120
  padding: 18px 0;
2121
  border: 0;
2122
  border-top: 1px solid var(--border);
2123
  border-radius: 0;
2124
  background: transparent;
2125
}
2126
2127
.outcomeCard h3 {
2128
  max-width: 800px;
2129
  margin: 7px 0 14px;
2130
  font-size: 14px;
2131
  font-weight: 500;
2132
  line-height: 1.55;
2133
}
2134
2135
.outcomeCard ul {
2136
  display: grid;
2137
  gap: 7px;
2138
  margin: 0;
2139
  padding: 0;
2140
  list-style: none;
2141
}
2142
2143
.outcomeCard li {
2144
  display: flex;
2145
  align-items: center;
2146
  gap: 9px;
2147
  color: var(--text-muted);
2148
  font-size: 12px;
2149
}
2150
2151
.ratingGrid {
2152
  display: grid;
2153
  grid-template-columns: repeat(2, minmax(0, 1fr));
2154
  gap: 0 24px;
2155
  margin-top: 16px;
2156
  padding-top: 10px;
2157
  border-top: 1px solid var(--accent-line);
2158
}
2159
2160
.progressCard {
2161
  margin: 18px 0;
2162
  padding: 18px 0;
2163
  border: 0;
2164
  border-top: 1px solid var(--border);
2165
  border-radius: 0;
2166
  background: transparent;
2167
}
2168
2169
.progressCardTop {
2170
  display: flex;
2171
  align-items: flex-start;
2172
  justify-content: space-between;
2173
  gap: 16px;
2174
}
2175
2176
.progressCardTop h3 {
2177
  margin: 6px 0 0;
2178
  font-size: 15px;
2179
}
2180
2181
.progressCardTop > strong {
2182
  color: var(--accent);
2183
  font: 600 22px/1 var(--mono);
2184
}
2185
2186
.progressTrack {
2187
  height: 7px;
2188
  margin: 16px 0 13px;
2189
  overflow: hidden;
2190
  border-radius: 999px;
2191
  background: var(--border);
2192
}
2193
2194
.progressTrack i {
2195
  display: block;
2196
  height: 100%;
2197
  border-radius: inherit;
2198
  background: var(--accent);
2199
  transition: width 180ms ease;
2200
}
2201
2202
.progressFacts {
2203
  display: flex;
2204
  flex-wrap: wrap;
2205
  gap: 7px;
2206
}
2207
2208
.progressFacts span {
2209
  padding: 5px 0;
2210
  border: 0;
2211
  border-radius: 0;
2212
  color: var(--text-muted);
2213
  background: transparent;
2214
  font-size: 10px;
2215
}
2216
2217
.progressWarning {
2218
  margin: 13px 0 0;
2219
  padding-top: 12px;
2220
  border-top: 1px solid var(--warn-line);
2221
  color: var(--warn);
2222
  font-size: 11px;
2223
}
2224
2225
.journeyNotice {
2226
  margin: 18px 0;
2227
  padding: 13px 0;
2228
  border: 0;
2229
  border-top: 1px solid var(--warn-line);
2230
  border-radius: 0;
2231
  color: var(--text-muted);
2232
  background: transparent;
2233
  font-size: 12px;
2234
}
2235
2236
.journeyTimelineSection {
2237
  padding: 4px 0 24px;
2238
}
2239
2240
.journeyTimelineSection > div:first-child h3 {
2241
  margin: 0;
2242
  font-size: 14px;
2243
}
2244
2245
.journeyTimelineSection > div:first-child small {
2246
  color: var(--text-muted);
2247
  font-size: 11px;
2248
}
2249
2250
.journeyTimeline {
2251
  margin: 18px 0 0;
2252
  padding: 0;
2253
  list-style: none;
2254
}
2255
2256
.journeyTimeline li {
2257
  position: relative;
2258
  display: grid;
2259
  grid-template-columns: 8px minmax(0, 1fr) minmax(8.4em, max-content);
2260
  gap: 12px;
2261
  min-height: 76px;
2262
}
2263
2264
.journeyTimeline li:not(:last-child)::before {
2265
  position: absolute;
2266
  top: 12px;
2267
  bottom: -4px;
2268
  left: 3px;
2269
  width: 1px;
2270
  background: var(--border-strong);
2271
  content: '';
2272
}
2273
2274
.journeyNode {
2275
  z-index: 1;
2276
  width: 7px;
2277
  height: 7px;
2278
  margin-top: 5px;
2279
  border: 0;
2280
  border-radius: 1px;
2281
  background: var(--text-faint);
2282
  box-shadow: none;
2283
}
2284
2285
.journeyNode.good {
2286
  background: var(--live);
2287
}
2288
2289
.journeyNode.warn {
2290
  background: var(--warn);
2291
}
2292
2293
.journeyNode.danger {
2294
  background: var(--danger);
2295
}
2296
2297
.journeyTimeline li > .statusPill {
2298
  justify-self: start;
2299
  width: 100%;
2300
}
2301
2302
.journeyTimeline li > div {
2303
  display: flex;
2304
  min-width: 0;
2305
  flex-direction: column;
2306
  gap: 3px;
2307
  padding-bottom: 18px;
2308
}
2309
2310
.journeyTimeline li > div > span {
2311
  color: var(--text-faint);
2312
  font: 9px/1.3 var(--mono);
2313
  text-transform: uppercase;
2314
}
2315
2316
.journeyTimeline li strong {
2317
  font-size: 12px;
2318
}
2319
2320
.journeyTimeline li p {
2321
  margin: 0;
2322
  color: var(--text-muted);
2323
  font-size: 11px;
2324
  line-height: 1.5;
2325
}
2326
2327
.insightPrinciple {
2328
  display: grid;
2329
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2330
  gap: 30px;
2331
  align-items: center;
2332
  margin-bottom: 16px;
2333
  padding: 8px 0 22px;
2334
  border: 0;
2335
  border-bottom: 1px solid var(--border);
2336
  border-radius: 0;
2337
  background: transparent;
2338
}
2339
2340
.insightPrinciple h2 {
2341
  margin: 7px 0 5px;
2342
  font-size: 20px;
2343
  letter-spacing: -0.03em;
2344
}
2345
2346
.insightPrinciple p {
2347
  max-width: 680px;
2348
  margin: 0;
2349
  color: var(--text-muted);
2350
  font-size: 13px;
2351
  line-height: 1.55;
2352
}
2353
2354
.insightStats {
2355
  display: grid;
2356
  grid-template-columns: repeat(3, 1fr);
2357
  gap: 8px;
2358
}
2359
2360
.insightStats span {
2361
  display: flex;
2362
  min-width: 0;
2363
  flex-direction: column;
2364
  padding: 12px 0;
2365
  border: 0;
2366
  border-radius: 0;
2367
  color: var(--text-muted);
2368
  background: transparent;
2369
  font-size: 10px;
2370
  text-align: left;
2371
}
2372
2373
.insightStats strong {
2374
  margin-bottom: 3px;
2375
  color: var(--text);
2376
  font: 500 22px/1 var(--mono);
2377
}
2378
2379
.insightGrid {
2380
  display: grid;
2381
  grid-template-columns: repeat(2, minmax(0, 1fr));
2382
  gap: 16px;
2383
  margin-bottom: 16px;
2384
}
2385
2386
.insightGrid > .empty {
2387
  grid-column: 1 / -1;
2388
  border: 0;
2389
  border-radius: 0;
2390
  background: transparent;
2391
}
2392
2393
.profileHead {
2394
  display: flex;
2395
  align-items: flex-start;
2396
  justify-content: space-between;
2397
  gap: 12px;
2398
  margin-bottom: 2px;
2399
}
2400
2401
.profileHead > div {
2402
  display: flex;
2403
  min-width: 0;
2404
  flex-direction: column;
2405
  gap: 3px;
2406
}
2407
2408
.profileHeadCompact {
2409
  align-items: center;
2410
  margin-bottom: 11px;
2411
}
2412
2413
.profileHeadCompact > small {
2414
  color: var(--text-faint);
2415
  font: 10px/1.4 var(--mono);
2416
}
2417
2418
.sampleBadge {
2419
  padding: 4px 7px;
2420
  border-radius: 999px;
2421
  color: var(--accent);
2422
  background: var(--accent-dim);
2423
  font: 9px/1.2 var(--mono);
2424
  white-space: nowrap;
2425
}
2426
2427
:root[data-theme='light'] .sampleBadge {
2428
  color: #c43a22;
2429
}
2430
2431
:root[data-theme='light'] .account > span {
2432
  color: var(--accent-ink);
2433
}
2434
2435
:root[data-theme='light'] .profileDelta b.positive {
2436
  color: #c43a22;
2437
}
2438
2439
:root[data-theme='light'] .profileDelta b.negative {
2440
  color: #a33d2e;
2441
}
2442
2443
.profileEvidenceLine {
2444
  margin-bottom: 11px;
2445
  color: var(--text-faint);
2446
  font: 10px/1.4 var(--mono);
2447
}
2448
2449
.profileDelta {
2450
  margin-top: 14px;
2451
  padding-top: 12px;
2452
  border-top: 1px solid var(--border);
2453
}
2454
2455
.profileDelta > div {
2456
  display: flex;
2457
  flex-wrap: wrap;
2458
  gap: 5px;
2459
  margin-top: 7px;
2460
}
2461
2462
.profileDelta b {
2463
  padding: 4px 6px;
2464
  border-radius: 4px;
2465
  color: var(--text-muted);
2466
  background: var(--bg-well);
2467
  font: 9px/1.2 var(--mono);
2468
}
2469
2470
.profileDelta b.positive {
2471
  color: var(--accent);
2472
}
2473
2474
.profileDelta b.negative {
2475
  color: var(--danger);
2476
}
2477
2478
.learningDecisionList {
2479
  display: grid;
2480
}
2481
2482
.learningDecisionList article {
2483
  display: grid;
2484
  grid-template-columns: auto minmax(0, 1fr);
2485
  gap: 12px;
2486
  padding: 14px 0;
2487
  border-bottom: 1px solid var(--border);
2488
}
2489
2490
.learningDecisionList article:last-child {
2491
  border-bottom: 0;
2492
}
2493
2494
.learningDecisionList article > div {
2495
  display: flex;
2496
  min-width: 0;
2497
  flex-direction: column;
2498
  gap: 3px;
2499
}
2500
2501
.learningDecisionList strong {
2502
  overflow: hidden;
2503
  font: 11px/1.4 var(--mono);
2504
  text-overflow: ellipsis;
2505
}
2506
2507
.learningDecisionList small {
2508
  color: var(--text-muted);
2509
  font-size: 10px;
2510
}
2511
2512
.learningDecisionList p {
2513
  margin: 2px 0 0;
2514
  color: var(--text-muted);
2515
  font-size: 11px;
2516
}
2517
2518
@media (prefers-reduced-motion: reduce) {
2519
  .spinner,
2520
  .toggle span,
2521
  .liveDot,
2522
  .appMain > * {
2523
    animation: none;
2524
    transition: none;
2525
  }
2526
2527
  .primary {
2528
    transition: none;
2529
  }
2530
2531
  .primary:hover {
2532
    transform: none;
2533
  }
2534
}
2535
2536
@media (max-width: 980px) {
2537
  .contentGrid,
2538
  .connectLayout,
2539
  .conversationLayout,
2540
  .journeyLayout,
2541
  .insightPrinciple {
2542
    grid-template-columns: 1fr;
2543
  }
2544
2545
  .journeyList {
2546
    grid-template-columns: repeat(2, minmax(0, 1fr));
2547
  }
2548
2549
  .loginPage {
2550
    grid-template-columns: 1fr;
2551
  }
2552
2553
  .loginPitch {
2554
    display: none;
2555
  }
2556
2557
  .loginCard {
2558
    min-height: 100vh;
2559
    border: 0;
2560
  }
2561
2562
  .metrics {
2563
    grid-template-columns: 1fr 1fr;
2564
  }
2565
2566
  .agentGrid {
2567
    grid-template-columns: 1fr;
2568
  }
2569
2570
  .insightGrid {
2571
    grid-template-columns: 1fr;
2572
  }
2573
}
2574
2575
@media (max-width: 840px) {
2576
  .appTopbar {
2577
    padding: 12px 16px 0;
2578
  }
2579
2580
  .appMain {
2581
    padding: 16px 16px 64px;
2582
  }
2583
2584
  .pageHead {
2585
    align-items: flex-start;
2586
    flex-direction: column;
2587
  }
2588
2589
  .setting {
2590
    grid-template-columns: 1fr;
2591
    gap: 12px;
2592
  }
2593
2594
  .connectionTypePicker,
2595
  .providerForm {
2596
    grid-template-columns: 1fr;
2597
  }
2598
2599
  .providerSubmit {
2600
    align-items: flex-start;
2601
    flex-direction: column;
2602
  }
2603
2604
  .tokenList > div {
2605
    align-items: flex-start;
2606
    flex-direction: column;
2607
  }
2608
2609
  .toggle {
2610
    margin-left: 0;
2611
  }
2612
2613
  .endpoint {
2614
    flex-direction: column;
2615
  }
2616
2617
  .readiness,
2618
  .attentionBanner,
2619
  .setupRequest {
2620
    align-items: flex-start;
2621
    flex-direction: column;
2622
  }
2623
2624
  .readiness > button,
2625
  .attentionBanner,
2626
  .decisionButtons {
2627
    width: 100%;
2628
  }
2629
2630
  .decisionButtons button {
2631
    flex: 1;
2632
  }
2633
2634
  .loginCard {
2635
    padding: 28px 20px;
2636
  }
2637
2638
  .historyRow > b {
2639
    display: none;
2640
  }
2641
2642
  .journeyList {
2643
    grid-template-columns: 1fr;
2644
  }
2645
2646
  .journeySummaryGrid,
2647
  .ratingGrid,
2648
  .insightStats {
2649
    grid-template-columns: 1fr;
2650
  }
2651
2652
  .journeySummaryGrid section {
2653
    border-right: 0;
2654
    border-bottom: 1px solid var(--border);
2655
  }
2656
2657
  .journeySummaryGrid section:last-child {
2658
    border-bottom: 0;
2659
  }
2660
2661
  .journeyTimeline li {
2662
    grid-template-columns: 8px minmax(0, 1fr);
2663
  }
2664
2665
  .journeyTimeline li > .statusPill {
2666
    grid-column: 2;
2667
    margin-top: -12px;
2668
    margin-bottom: 16px;
2669
  }
2670
}
2671
2672
/* Public landing page */
2673
.landingPage {
2674
  position: relative;
2675
  min-height: 100vh;
2676
  overflow-x: clip;
2677
  color: var(--text);
2678
  background: radial-gradient(circle at 72% 7%, var(--accent-dim), transparent 24rem), var(--bg);
2679
}
2680
2681
.landingPage a {
2682
  color: inherit;
2683
  text-decoration: none;
2684
}
2685
2686
.landingPage :is(a, button) {
2687
  -webkit-tap-highlight-color: transparent;
2688
}
2689
2690
.landingNav {
2691
  position: sticky;
2692
  top: 12px;
2693
  z-index: 20;
2694
  display: grid;
2695
  width: min(100% - 48px, 1280px);
2696
  min-height: 58px;
2697
  margin: 12px auto 0;
2698
  padding: 0 16px;
2699
  grid-template-columns: 1fr auto 1fr;
2700
  align-items: center;
2701
  border: 1px solid var(--border-strong);
2702
  border-radius: 999px;
2703
  background: color-mix(in srgb, var(--bg-elevated) 64%, transparent);
2704
  box-shadow:
2705
    inset 0 1px 0 rgb(255 255 255 / 6%),
2706
    0 14px 44px rgb(0 0 0 / 8%);
2707
  backdrop-filter: blur(18px) saturate(1.25);
2708
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
2709
}
2710
2711
.landingBrand {
2712
  display: inline-flex;
2713
  width: fit-content;
2714
  align-items: center;
2715
  gap: 10px;
2716
}
2717
2718
.landingBrand strong {
2719
  font-size: 15px;
2720
  font-weight: 650;
2721
  letter-spacing: -0.035em;
2722
}
2723
2724
.landingMark {
2725
  position: relative;
2726
  display: block;
2727
  width: 26px;
2728
  height: 26px;
2729
  transform: rotate(-45deg);
2730
}
2731
2732
.landingMark > span {
2733
  position: absolute;
2734
  width: 16px;
2735
  height: 9px;
2736
  border: 2px solid var(--accent);
2737
  border-radius: 99px;
2738
}
2739
2740
.landingMark > span:first-child {
2741
  top: 3px;
2742
  left: 1px;
2743
}
2744
2745
.landingMark > span:last-child {
2746
  right: 1px;
2747
  bottom: 3px;
2748
}
2749
2750
.landingNav nav {
2751
  display: flex;
2752
  align-items: center;
2753
  gap: 34px;
2754
  color: var(--text-muted);
2755
  font-size: 13px;
2756
}
2757
2758
.landingNav nav a,
2759
.landingSecondary {
2760
  transition: color 160ms ease;
2761
}
2762
2763
.landingNav nav a:hover,
2764
.landingSecondary:hover {
2765
  color: var(--text);
2766
}
2767
2768
.landingNavActions {
2769
  display: flex;
2770
  justify-content: flex-end;
2771
  align-items: center;
2772
  gap: 9px;
2773
}
2774
2775
.themeButton {
2776
  display: grid;
2777
  width: 38px;
2778
  height: 38px;
2779
  padding: 0;
2780
  place-items: center;
2781
  border: 1px solid var(--border);
2782
  border-radius: 99px;
2783
  color: var(--text-muted);
2784
  background: color-mix(in srgb, var(--bg) 74%, transparent);
2785
  cursor: pointer;
2786
  transition:
2787
    border-color 160ms ease,
2788
    color 160ms ease,
2789
    transform 160ms ease;
2790
}
2791
2792
.themeButton:hover {
2793
  border-color: var(--border-strong);
2794
  color: var(--text);
2795
  transform: rotate(8deg);
2796
}
2797
2798
.themeButton svg,
2799
.navCta svg,
2800
.landingPrimary svg {
2801
  width: 15px;
2802
  height: 15px;
2803
}
2804
2805
.navCta,
2806
.landingPrimary {
2807
  position: relative;
2808
  display: inline-flex;
2809
  overflow: hidden;
2810
  align-items: center;
2811
  justify-content: center;
2812
  gap: 8px;
2813
  border-radius: 99px;
2814
  color: #fff !important;
2815
  background: var(--accent);
2816
  font-size: 13px;
2817
  font-weight: 600;
2818
  transition:
2819
    background 160ms ease,
2820
    transform 160ms ease,
2821
    box-shadow 160ms ease;
2822
}
2823
2824
.navCta::after,
2825
.landingPrimary::after {
2826
  position: absolute;
2827
  width: 16px;
2828
  height: 16px;
2829
  border-radius: 50%;
2830
  pointer-events: none;
2831
  background: rgb(255 255 255 / 28%);
2832
  opacity: 0;
2833
  content: '';
2834
  transform: scale(0);
2835
}
2836
2837
.navCta:active::after,
2838
.landingPrimary:active::after {
2839
  animation: clickBloom 480ms ease-out;
2840
}
2841
2842
.navCta svg,
2843
.landingPrimary svg {
2844
  transition: transform 180ms ease;
2845
}
2846
2847
.navCta {
2848
  min-height: 38px;
2849
  padding: 0 16px;
2850
}
2851
2852
.navCta:hover,
2853
.landingPrimary:hover {
2854
  background: var(--accent-hover);
2855
  transform: translateY(-1px);
2856
  box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 24%, transparent);
2857
}
2858
2859
.navCta:hover svg,
2860
.landingPrimary:hover svg {
2861
  transform: translateX(3px);
2862
}
2863
2864
.navCta:active,
2865
.landingPrimary:active {
2866
  transform: translateY(1px) scale(0.975);
2867
}
2868
2869
.landingHero {
2870
  position: relative;
2871
  display: grid;
2872
  width: min(100% - 48px, 1280px);
2873
  min-height: 700px;
2874
  margin: 0 auto;
2875
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
2876
  align-items: center;
2877
  gap: clamp(36px, 6vw, 90px);
2878
  padding: 76px 0 92px;
2879
}
2880
2881
.landingHero::before {
2882
  position: absolute;
2883
  top: 0;
2884
  bottom: 0;
2885
  left: -100vw;
2886
  width: 200vw;
2887
  pointer-events: none;
2888
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
2889
  background-size: 100% 140px;
2890
  opacity: 0.24;
2891
  content: '';
2892
}
2893
2894
.heroCopy {
2895
  position: relative;
2896
  z-index: 2;
2897
  animation: landingReveal 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
2898
}
2899
2900
.landingKicker {
2901
  display: flex;
2902
  align-items: center;
2903
  gap: 9px;
2904
  margin: 0;
2905
  color: var(--text-muted);
2906
  font: 500 10px/1.3 var(--mono);
2907
  letter-spacing: 0.11em;
2908
  text-transform: uppercase;
2909
}
2910
2911
.landingKicker > span {
2912
  width: 6px;
2913
  height: 6px;
2914
  border-radius: 50%;
2915
  background: var(--accent);
2916
  box-shadow: 0 0 0 5px var(--accent-dim);
2917
  animation: signalBreathe 3.4s ease-in-out infinite;
2918
}
2919
2920
.heroCopy h1,
2921
.sectionIntro h2,
2922
.principlesSection h2,
2923
.accessCopy h2 {
2924
  margin: 22px 0;
2925
  font-weight: 540;
2926
  letter-spacing: -0.065em;
2927
  line-height: 0.94;
2928
}
2929
2930
.heroCopy h1 {
2931
  max-width: 670px;
2932
  font-size: clamp(54px, 6.4vw, 92px);
2933
}
2934
2935
.heroCopy h1 em,
2936
.sectionIntro h2 em,
2937
.principlesSection h2 em {
2938
  color: var(--text-muted);
2939
  font-family: Georgia, 'Times New Roman', serif;
2940
  font-weight: 400;
2941
  letter-spacing: -0.055em;
2942
}
2943
2944
.heroCopy > p {
2945
  max-width: 570px;
2946
  margin: 0;
2947
  color: var(--text-muted);
2948
  font-size: clamp(16px, 1.45vw, 19px);
2949
  line-height: 1.6;
2950
}
2951
2952
.heroActions {
2953
  display: flex;
2954
  flex-wrap: wrap;
2955
  align-items: center;
2956
  gap: 22px;
2957
  margin-top: 34px;
2958
}
2959
2960
.landingPrimary {
2961
  min-height: 48px;
2962
  padding: 0 22px;
2963
  font-size: 14px;
2964
}
2965
2966
.landingSecondary {
2967
  padding: 8px 0;
2968
  border-bottom: 1px solid var(--border-strong);
2969
  color: var(--text-muted);
2970
  font-size: 13px;
2971
  transition:
2972
    color 160ms ease,
2973
    transform 160ms ease;
2974
}
2975
2976
.landingSecondary:active,
2977
.landingNav nav a:active {
2978
  color: var(--accent);
2979
  transform: scale(0.96);
2980
}
2981
2982
.heroNotes {
2983
  display: flex;
2984
  flex-wrap: wrap;
2985
  gap: 10px 24px;
2986
  margin-top: 50px;
2987
  color: var(--text-faint);
2988
  font: 500 10px/1.4 var(--mono);
2989
  letter-spacing: 0.02em;
2990
  text-transform: uppercase;
2991
}
2992
2993
.heroNotes span {
2994
  display: inline-flex;
2995
  align-items: center;
2996
  gap: 6px;
2997
}
2998
2999
.heroNotes svg {
3000
  width: 12px;
3001
  height: 12px;
3002
  color: var(--accent);
3003
}
3004
3005
.assuranceVisual {
3006
  position: relative;
3007
  z-index: 2;
3008
  min-height: 510px;
3009
  overflow: hidden;
3010
  isolation: isolate;
3011
  border: 1px solid var(--border-strong);
3012
  border-radius: 24px;
3013
  background: linear-gradient(
3014
    145deg,
3015
    color-mix(in srgb, var(--bg-elevated) 88%, transparent),
3016
    color-mix(in srgb, var(--bg) 82%, transparent)
3017
  );
3018
  box-shadow:
3019
    inset 0 1px 0 rgb(255 255 255 / 8%),
3020
    0 30px 90px rgb(0 0 0 / 12%);
3021
  backdrop-filter: blur(24px) saturate(1.12);
3022
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
3023
  animation: visualReveal 900ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
3024
}
3025
3026
.assuranceVisual::before {
3027
  position: absolute;
3028
  z-index: -1;
3029
  top: 4%;
3030
  left: 30%;
3031
  width: 48%;
3032
  height: 64%;
3033
  border-radius: 50%;
3034
  background: radial-gradient(circle, var(--accent-dim), transparent 68%);
3035
  filter: blur(26px);
3036
  opacity: 0.65;
3037
  content: '';
3038
  animation: ambientDrift 10s ease-in-out infinite alternate;
3039
}
3040
3041
.assuranceVisual::after {
3042
  position: absolute;
3043
  z-index: 1;
3044
  top: -24%;
3045
  right: 0;
3046
  left: 0;
3047
  height: 18%;
3048
  pointer-events: none;
3049
  background: linear-gradient(
3050
    to bottom,
3051
    transparent,
3052
    color-mix(in srgb, var(--accent) 9%, transparent),
3053
    transparent
3054
  );
3055
  opacity: 0;
3056
  content: '';
3057
  animation: assuranceScan 6.5s 1.4s ease-in-out infinite;
3058
}
3059
3060
.visualGrid {
3061
  position: absolute;
3062
  inset: 0;
3063
  opacity: 0.42;
3064
  background-image:
3065
    linear-gradient(var(--border) 1px, transparent 1px),
3066
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
3067
  background-size: 42px 42px;
3068
  mask-image: linear-gradient(to bottom, black, transparent 88%);
3069
}
3070
3071
.visualTopline,
3072
.visualCaption {
3073
  position: relative;
3074
  z-index: 2;
3075
  display: flex;
3076
  align-items: center;
3077
  justify-content: space-between;
3078
  color: var(--text-faint);
3079
  font: 500 9px/1.3 var(--mono);
3080
  letter-spacing: 0.12em;
3081
  text-transform: uppercase;
3082
}
3083
3084
.visualTopline {
3085
  padding: 20px 22px;
3086
  border-bottom: 1px solid var(--border);
3087
}
3088
3089
.visualLive {
3090
  display: inline-flex;
3091
  align-items: center;
3092
  gap: 6px;
3093
  color: var(--live);
3094
}
3095
3096
.visualLive i {
3097
  width: 6px;
3098
  height: 6px;
3099
  border-radius: 50%;
3100
  background: currentColor;
3101
  box-shadow: 0 0 0 4px var(--live-dim);
3102
  animation: visualPulse 2s ease-in-out infinite;
3103
}
3104
3105
.agentExchange {
3106
  position: relative;
3107
  display: grid;
3108
  min-height: 298px;
3109
  padding: 70px 26px 40px;
3110
  grid-template-columns: 132px 1fr 132px;
3111
  align-items: center;
3112
}
3113
3114
.agentNode {
3115
  position: relative;
3116
  z-index: 3;
3117
  display: grid;
3118
  min-height: 140px;
3119
  padding: 16px;
3120
  align-content: center;
3121
  justify-items: center;
3122
  gap: 10px;
3123
  border: 1px solid var(--border-strong);
3124
  border-radius: 18px;
3125
  text-align: center;
3126
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
3127
  box-shadow:
3128
    inset 0 1px 0 rgb(255 255 255 / 7%),
3129
    0 15px 40px rgb(0 0 0 / 9%);
3130
  backdrop-filter: blur(15px);
3131
  -webkit-backdrop-filter: blur(15px);
3132
  animation: nodeFloat 5.8s ease-in-out infinite;
3133
}
3134
3135
.agentNodeRight {
3136
  animation-delay: -2.9s;
3137
}
3138
3139
.agentGlyph {
3140
  display: grid;
3141
  width: 42px;
3142
  height: 42px;
3143
  place-items: center;
3144
  border: 1px solid var(--border-strong);
3145
  border-radius: 13px;
3146
  color: var(--accent);
3147
  background: var(--accent-dim);
3148
}
3149
3150
.agentGlyph svg {
3151
  width: 20px;
3152
}
3153
3154
.agentNode > div:nth-child(2) {
3155
  display: grid;
3156
  gap: 2px;
3157
}
3158
3159
.agentNode strong {
3160
  font-size: 13px;
3161
}
3162
3163
.agentNode small,
3164
.contractChip small,
3165
.assuranceEvents small {
3166
  color: var(--text-faint);
3167
  font: 9px/1.3 var(--mono);
3168
}
3169
3170
.verifiedTick {
3171
  position: absolute;
3172
  top: 9px;
3173
  right: 9px;
3174
  display: grid;
3175
  width: 18px;
3176
  height: 18px;
3177
  place-items: center;
3178
  border-radius: 50%;
3179
  color: #fff;
3180
  background: var(--live);
3181
}
3182
3183
.verifiedTick svg {
3184
  width: 11px;
3185
}
3186
3187
.contractRail {
3188
  position: relative;
3189
  z-index: 2;
3190
  height: 2px;
3191
  background: linear-gradient(90deg, var(--accent-line), var(--accent), var(--accent-line));
3192
}
3193
3194
.contractRail::before {
3195
  position: absolute;
3196
  top: -4px;
3197
  right: -2px;
3198
  bottom: -4px;
3199
  left: -2px;
3200
  border: 1px solid var(--accent-line);
3201
  border-radius: 99px;
3202
  content: '';
3203
}
3204
3205
.railDot {
3206
  position: absolute;
3207
  z-index: 2;
3208
  top: -3px;
3209
  width: 8px;
3210
  height: 8px;
3211
  border-radius: 50%;
3212
  background: var(--accent);
3213
  box-shadow: 0 0 10px var(--accent);
3214
  animation: railTravel 3.2s ease-in-out infinite;
3215
}
3216
3217
.railDotTwo {
3218
  animation-delay: -1.6s;
3219
}
3220
3221
.contractChip {
3222
  position: absolute;
3223
  top: 50%;
3224
  left: 50%;
3225
  display: flex;
3226
  min-width: 154px;
3227
  padding: 11px 13px;
3228
  align-items: center;
3229
  gap: 9px;
3230
  border: 1px solid var(--accent-line);
3231
  border-radius: 12px;
3232
  color: var(--accent);
3233
  background: color-mix(in srgb, var(--bg) 88%, transparent);
3234
  box-shadow:
3235
    inset 0 1px 0 rgb(255 255 255 / 7%),
3236
    0 8px 24px rgb(0 0 0 / 10%);
3237
  backdrop-filter: blur(14px);
3238
  -webkit-backdrop-filter: blur(14px);
3239
  transform: translate(-50%, -50%);
3240
  animation: contractBreathe 3.8s ease-in-out infinite;
3241
}
3242
3243
.contractChip > svg {
3244
  width: 18px;
3245
}
3246
3247
.contractChip > span {
3248
  display: grid;
3249
  gap: 2px;
3250
}
3251
3252
.contractChip strong {
3253
  color: var(--text);
3254
  font: 500 10px/1.3 var(--mono);
3255
}
3256
3257
.assuranceEvents {
3258
  position: relative;
3259
  z-index: 2;
3260
  display: grid;
3261
  margin: 0 22px;
3262
  grid-template-columns: repeat(3, 1fr);
3263
  border: 1px solid var(--border);
3264
  border-radius: 14px;
3265
  background: color-mix(in srgb, var(--bg) 70%, transparent);
3266
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
3267
  backdrop-filter: blur(14px);
3268
  -webkit-backdrop-filter: blur(14px);
3269
}
3270
3271
.assuranceEvents > div {
3272
  display: flex;
3273
  min-width: 0;
3274
  padding: 13px 12px;
3275
  align-items: center;
3276
  gap: 9px;
3277
  border-right: 1px solid var(--border);
3278
}
3279
3280
.assuranceEvents > div:last-child {
3281
  border-right: 0;
3282
}
3283
3284
.assuranceEvents svg {
3285
  width: 15px;
3286
  flex: none;
3287
  color: var(--accent);
3288
}
3289
3290
.assuranceEvents > div:nth-child(2) svg {
3291
  animation: radarTurn 9s linear infinite;
3292
}
3293
3294
.assuranceEvents span {
3295
  display: grid;
3296
  min-width: 0;
3297
  gap: 1px;
3298
}
3299
3300
.assuranceEvents strong {
3301
  overflow: hidden;
3302
  font-size: 10px;
3303
  font-weight: 500;
3304
  text-overflow: ellipsis;
3305
  white-space: nowrap;
3306
}
3307
3308
.visualCaption {
3309
  padding: 18px 22px 20px;
3310
}
3311
3312
.visualCaption span:last-child {
3313
  color: var(--accent);
3314
}
3315
3316
.capabilityRail {
3317
  display: flex;
3318
  width: 100%;
3319
  min-height: 70px;
3320
  padding: 0 28px;
3321
  align-items: center;
3322
  justify-content: center;
3323
  gap: clamp(14px, 2.7vw, 42px);
3324
  border-top: 1px solid var(--border);
3325
  border-bottom: 1px solid var(--border);
3326
  color: var(--text-muted);
3327
  background: color-mix(in srgb, var(--bg-elevated) 44%, transparent);
3328
  font: 500 10px/1.4 var(--mono);
3329
  letter-spacing: 0.08em;
3330
  text-transform: uppercase;
3331
}
3332
3333
.capabilityRail i {
3334
  width: 3px;
3335
  height: 3px;
3336
  flex: none;
3337
  border-radius: 50%;
3338
  background: var(--accent);
3339
  animation: railBlink 3s ease-in-out infinite;
3340
}
3341
3342
.capabilityRail i:nth-of-type(even) {
3343
  animation-delay: -1.5s;
3344
}
3345
3346
.productSection,
3347
.principlesSection,
3348
.accessSection {
3349
  width: min(100% - 48px, 1280px);
3350
  margin: 0 auto;
3351
  scroll-margin-top: 94px;
3352
}
3353
3354
.productSection {
3355
  padding: 150px 0;
3356
}
3357
3358
.sectionIntro {
3359
  display: grid;
3360
  margin-bottom: 64px;
3361
  grid-template-columns: 1fr 0.7fr;
3362
  column-gap: 80px;
3363
}
3364
3365
.sectionIntro .landingKicker {
3366
  grid-column: 1 / -1;
3367
}
3368
3369
.sectionIntro h2,
3370
.principlesSection h2 {
3371
  font-size: clamp(44px, 5.2vw, 70px);
3372
}
3373
3374
.sectionIntro > p:last-child {
3375
  align-self: end;
3376
  margin: 0 0 24px;
3377
  color: var(--text-muted);
3378
  font-size: 16px;
3379
  line-height: 1.65;
3380
}
3381
3382
.featureGrid {
3383
  display: grid;
3384
  min-height: 720px;
3385
  grid-template-columns: 1.14fr 0.86fr;
3386
  grid-template-rows: repeat(2, 1fr);
3387
  gap: 14px;
3388
}
3389
3390
.featureCard {
3391
  position: relative;
3392
  display: flex;
3393
  min-width: 0;
3394
  overflow: hidden;
3395
  padding: 34px;
3396
  flex-direction: column;
3397
  border: 1px solid var(--border);
3398
  border-radius: 20px;
3399
  background: color-mix(in srgb, var(--bg-elevated) 64%, transparent);
3400
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
3401
  backdrop-filter: blur(16px) saturate(1.08);
3402
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
3403
  transition:
3404
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
3405
    border-color 260ms ease,
3406
    box-shadow 260ms ease;
3407
}
3408
3409
.featureCard::before {
3410
  position: absolute;
3411
  top: -120px;
3412
  right: -120px;
3413
  width: 280px;
3414
  height: 280px;
3415
  border-radius: 50%;
3416
  background: var(--accent-dim);
3417
  filter: blur(2px);
3418
  opacity: 0;
3419
  transition: opacity 240ms ease;
3420
  content: '';
3421
}
3422
3423
.featureCard:hover::before {
3424
  opacity: 0.7;
3425
}
3426
3427
.featureCardWide {
3428
  grid-row: 1 / 3;
3429
}
3430
3431
.featureIcon {
3432
  position: relative;
3433
  display: grid;
3434
  width: 40px;
3435
  height: 40px;
3436
  margin-bottom: 52px;
3437
  place-items: center;
3438
  border: 1px solid var(--border-strong);
3439
  border-radius: 12px;
3440
  color: var(--accent);
3441
  background: var(--accent-dim);
3442
}
3443
3444
.featureIcon svg {
3445
  width: 19px;
3446
}
3447
3448
.featureCard > span {
3449
  position: relative;
3450
  color: var(--text-faint);
3451
  font: 500 9px/1.3 var(--mono);
3452
  letter-spacing: 0.12em;
3453
  text-transform: uppercase;
3454
}
3455
3456
.featureCard h3 {
3457
  position: relative;
3458
  max-width: 490px;
3459
  margin: 10px 0 10px;
3460
  font-size: clamp(25px, 2.6vw, 38px);
3461
  font-weight: 540;
3462
  letter-spacing: -0.045em;
3463
  line-height: 1.02;
3464
}
3465
3466
.featureCard > p {
3467
  position: relative;
3468
  max-width: 470px;
3469
  margin: 0;
3470
  color: var(--text-muted);
3471
  font-size: 14px;
3472
  line-height: 1.6;
3473
}
3474
3475
.discoveryMini,
3476
.termMini,
3477
.historyMini {
3478
  position: relative;
3479
  margin-top: auto;
3480
}
3481
3482
.discoveryMini {
3483
  display: grid;
3484
  padding-top: 72px;
3485
  gap: 8px;
3486
}
3487
3488
.discoveryMini > div {
3489
  display: grid;
3490
  padding: 14px;
3491
  grid-template-columns: auto 1fr auto;
3492
  align-items: center;
3493
  gap: 3px 11px;
3494
  border: 1px solid var(--border);
3495
  border-radius: 13px;
3496
  background: color-mix(in srgb, var(--bg) 64%, transparent);
3497
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
3498
  backdrop-filter: blur(12px);
3499
  -webkit-backdrop-filter: blur(12px);
3500
}
3501
3502
.miniAvatar {
3503
  display: grid;
3504
  width: 34px;
3505
  height: 34px;
3506
  grid-row: 1 / 3;
3507
  place-items: center;
3508
  border-radius: 10px;
3509
  color: var(--accent);
3510
  background: var(--accent-dim);
3511
  font: 600 11px/1 var(--mono);
3512
}
3513
3514
.discoveryMini strong {
3515
  font-size: 12px;
3516
}
3517
3518
.discoveryMini small {
3519
  color: var(--text-faint);
3520
  font: 9px/1.3 var(--mono);
3521
}
3522
3523
.discoveryMini b {
3524
  grid-column: 3;
3525
  grid-row: 1 / 3;
3526
  padding: 5px 7px;
3527
  border: 1px solid var(--border);
3528
  border-radius: 99px;
3529
  color: var(--text-muted);
3530
  font: 500 8px/1 var(--mono);
3531
  text-transform: uppercase;
3532
}
3533
3534
.termMini {
3535
  display: grid;
3536
  padding: 17px;
3537
  grid-template-columns: 78px 1fr;
3538
  align-items: center;
3539
  gap: 9px;
3540
  border: 1px solid var(--border);
3541
  border-radius: 13px;
3542
  background: color-mix(in srgb, var(--bg) 64%, transparent);
3543
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
3544
  backdrop-filter: blur(12px);
3545
  -webkit-backdrop-filter: blur(12px);
3546
}
3547
3548
.termMini small {
3549
  color: var(--text-faint);
3550
  font: 500 8px/1.3 var(--mono);
3551
  letter-spacing: 0.1em;
3552
}
3553
3554
.termMini strong {
3555
  font-size: 11px;
3556
  font-weight: 500;
3557
}
3558
3559
.termMini span {
3560
  display: inline-flex;
3561
  margin-top: 5px;
3562
  padding-top: 10px;
3563
  grid-column: 1 / -1;
3564
  align-items: center;
3565
  gap: 6px;
3566
  border-top: 1px solid var(--border);
3567
  color: var(--live);
3568
  font: 500 9px/1.3 var(--mono);
3569
}
3570
3571
.termMini svg {
3572
  width: 12px;
3573
}
3574
3575
.historyMini {
3576
  display: grid;
3577
  padding: 14px 0 0;
3578
  gap: 0;
3579
}
3580
3581
.historyMini span {
3582
  display: grid;
3583
  padding: 9px 0;
3584
  grid-template-columns: auto 1fr auto;
3585
  align-items: center;
3586
  gap: 9px;
3587
  border-bottom: 1px solid var(--border);
3588
  color: var(--text-muted);
3589
  font: 500 9px/1.3 var(--mono);
3590
}
3591
3592
.historyMini i {
3593
  width: 7px;
3594
  height: 7px;
3595
  border: 1px solid var(--accent);
3596
  border-radius: 50%;
3597
}
3598
3599
.historyMini i.ok {
3600
  background: var(--accent);
3601
  box-shadow: 0 0 0 4px var(--accent-dim);
3602
}
3603
3604
.historyMini b {
3605
  color: var(--text-faint);
3606
  font-weight: 400;
3607
}
3608
3609
.principlesSection {
3610
  display: grid;
3611
  padding: 145px 0;
3612
  grid-template-columns: 1fr 0.85fr;
3613
  gap: 90px;
3614
  border-top: 1px solid var(--border);
3615
}
3616
3617
.principlesSection h2 {
3618
  margin-bottom: 0;
3619
}
3620
3621
.principleList {
3622
  display: grid;
3623
  align-content: center;
3624
}
3625
3626
.principleList article {
3627
  display: grid;
3628
  padding: 28px 0;
3629
  grid-template-columns: 42px 1fr;
3630
  gap: 20px;
3631
  border-bottom: 1px solid var(--border);
3632
}
3633
3634
.principleList article:first-child {
3635
  border-top: 1px solid var(--border);
3636
}
3637
3638
.principleList article > span {
3639
  color: var(--accent);
3640
  font: 500 9px/1.4 var(--mono);
3641
}
3642
3643
.principleList h3 {
3644
  margin: -4px 0 5px;
3645
  font-size: 18px;
3646
  font-weight: 560;
3647
  letter-spacing: -0.025em;
3648
}
3649
3650
.principleList p {
3651
  margin: 0;
3652
  color: var(--text-muted);
3653
  font-size: 13px;
3654
  line-height: 1.6;
3655
}
3656
3657
.accessSection {
3658
  display: grid;
3659
  margin-bottom: 100px;
3660
  padding: clamp(38px, 6vw, 76px);
3661
  grid-template-columns: 1.1fr 0.9fr;
3662
  align-items: center;
3663
  gap: clamp(50px, 8vw, 120px);
3664
  border: 1px solid var(--accent-line);
3665
  border-radius: 28px;
3666
  background:
3667
    radial-gradient(circle at 0 100%, var(--accent-dim), transparent 42%),
3668
    color-mix(in srgb, var(--bg-elevated) 78%, transparent);
3669
  box-shadow:
3670
    inset 0 1px 0 rgb(255 255 255 / 7%),
3671
    0 28px 100px color-mix(in srgb, var(--accent) 7%, transparent);
3672
  backdrop-filter: blur(20px) saturate(1.1);
3673
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
3674
}
3675
3676
.accessCopy h2 {
3677
  max-width: 650px;
3678
  margin: 20px 0;
3679
  font-size: clamp(40px, 4.6vw, 64px);
3680
}
3681
3682
.accessCopy > p:last-child {
3683
  max-width: 550px;
3684
  margin: 0;
3685
  color: var(--text-muted);
3686
  font-size: 15px;
3687
  line-height: 1.65;
3688
}
3689
3690
.accessCard {
3691
  display: grid;
3692
  padding: 26px;
3693
  gap: 16px;
3694
  border: 1px solid var(--border);
3695
  border-radius: 18px;
3696
  background: color-mix(in srgb, var(--bg) 80%, transparent);
3697
  box-shadow:
3698
    inset 0 1px 0 rgb(255 255 255 / 7%),
3699
    0 24px 70px rgb(0 0 0 / 10%);
3700
  backdrop-filter: blur(18px);
3701
  -webkit-backdrop-filter: blur(18px);
3702
}
3703
3704
@media (hover: hover) {
3705
  .featureCard:hover {
3706
    border-color: var(--border-strong);
3707
    box-shadow:
3708
      inset 0 1px 0 rgb(255 255 255 / 8%),
3709
      0 22px 60px rgb(0 0 0 / 8%);
3710
    transform: translateY(-5px);
3711
  }
3712
}
3713
3714
.accessCard .socialButtons button {
3715
  min-height: 48px;
3716
  border-radius: 10px;
3717
  transition:
3718
    transform 160ms ease,
3719
    border-color 160ms ease,
3720
    background 160ms ease;
3721
}
3722
3723
.accessCard .socialButtons button:active {
3724
  transform: scale(0.975);
3725
}
3726
3727
.themeButton:active svg {
3728
  animation: themeClick 340ms cubic-bezier(0.22, 1, 0.36, 1);
3729
}
3730
3731
.accessCard .socialButtons button:last-child svg:last-child {
3732
  width: 14px;
3733
  margin-left: auto;
3734
}
3735
3736
.accessCard > small {
3737
  color: var(--text-faint);
3738
  font-size: 11px;
3739
  line-height: 1.55;
3740
}
3741
3742
.landingFooter {
3743
  display: grid;
3744
  width: min(100% - 48px, 1280px);
3745
  min-height: 130px;
3746
  margin: 0 auto;
3747
  grid-template-columns: 1fr auto 1fr;
3748
  align-items: center;
3749
  gap: 24px;
3750
  border-top: 1px solid var(--border);
3751
}
3752
3753
.landingFooter p,
3754
.landingFooter small {
3755
  margin: 0;
3756
  color: var(--text-faint);
3757
  font-size: 11px;
3758
}
3759
3760
.landingFooter small {
3761
  justify-self: end;
3762
  max-width: 360px;
3763
  text-align: right;
3764
  line-height: 1.5;
3765
}
3766
3767
@keyframes landingReveal {
3768
  from {
3769
    opacity: 0;
3770
    transform: translateY(22px);
3771
  }
3772
  to {
3773
    opacity: 1;
3774
    transform: translateY(0);
3775
  }
3776
}
3777
3778
@keyframes clickBloom {
3779
  0% {
3780
    opacity: 0.55;
3781
    transform: scale(0);
3782
  }
3783
  100% {
3784
    opacity: 0;
3785
    transform: scale(12);
3786
  }
3787
}
3788
3789
@keyframes themeClick {
3790
  50% {
3791
    opacity: 0.35;
3792
    transform: rotate(110deg) scale(0.65);
3793
  }
3794
}
3795
3796
@keyframes sectionArrival {
3797
  0% {
3798
    opacity: 0.3;
3799
    filter: blur(5px);
3800
    transform: translateY(22px);
3801
  }
3802
  55% {
3803
    opacity: 1;
3804
    filter: blur(0);
3805
    transform: translateY(-3px);
3806
  }
3807
  100% {
3808
    opacity: 1;
3809
    filter: blur(0);
3810
    transform: translateY(0);
3811
  }
3812
}
3813
3814
@keyframes destinationPulse {
3815
  0% {
3816
    box-shadow: inset 0 0 0 1px transparent;
3817
  }
3818
  42% {
3819
    box-shadow: inset 0 0 0 1px var(--accent-line);
3820
  }
3821
  100% {
3822
    box-shadow: inset 0 0 0 1px transparent;
3823
  }
3824
}
3825
3826
@keyframes visualReveal {
3827
  from {
3828
    opacity: 0;
3829
    transform: translateY(28px) scale(0.98);
3830
  }
3831
  to {
3832
    opacity: 1;
3833
    transform: translateY(0) scale(1);
3834
  }
3835
}
3836
3837
@keyframes railTravel {
3838
  0% {
3839
    left: 2%;
3840
    opacity: 0;
3841
  }
3842
  15%,
3843
  85% {
3844
    opacity: 1;
3845
  }
3846
  100% {
3847
    left: calc(100% - 8px);
3848
    opacity: 0;
3849
  }
3850
}
3851
3852
@keyframes visualPulse {
3853
  50% {
3854
    opacity: 0.45;
3855
    box-shadow: 0 0 0 7px var(--live-dim);
3856
  }
3857
}
3858
3859
@keyframes signalBreathe {
3860
  50% {
3861
    box-shadow: 0 0 0 8px var(--accent-dim);
3862
    opacity: 0.72;
3863
  }
3864
}
3865
3866
@keyframes ambientDrift {
3867
  to {
3868
    transform: translate(26%, 10%) scale(1.16);
3869
  }
3870
}
3871
3872
@keyframes assuranceScan {
3873
  0%,
3874
  12% {
3875
    opacity: 0;
3876
    transform: translateY(0);
3877
  }
3878
  22% {
3879
    opacity: 0.75;
3880
  }
3881
  62% {
3882
    opacity: 0.24;
3883
  }
3884
  72%,
3885
  100% {
3886
    opacity: 0;
3887
    transform: translateY(720%);
3888
  }
3889
}
3890
3891
@keyframes nodeFloat {
3892
  0%,
3893
  100% {
3894
    transform: translateY(0);
3895
  }
3896
  50% {
3897
    transform: translateY(-5px);
3898
  }
3899
}
3900
3901
@keyframes contractBreathe {
3902
  0%,
3903
  100% {
3904
    border-color: var(--accent-line);
3905
    transform: translate(-50%, -50%) scale(1);
3906
  }
3907
  50% {
3908
    border-color: var(--accent);
3909
    transform: translate(-50%, -50%) scale(1.025);
3910
  }
3911
}
3912
3913
@keyframes radarTurn {
3914
  to {
3915
    transform: rotate(360deg);
3916
  }
3917
}
3918
3919
@keyframes railBlink {
3920
  50% {
3921
    opacity: 0.25;
3922
  }
3923
}
3924
3925
@keyframes scrollReveal {
3926
  from {
3927
    opacity: 0;
3928
    transform: translateY(32px);
3929
  }
3930
  to {
3931
    opacity: 1;
3932
    transform: translateY(0);
3933
  }
3934
}
3935
3936
@supports (animation-timeline: view()) {
3937
  .sectionIntro,
3938
  .featureCard,
3939
  .principlesSection > div,
3940
  .accessSection {
3941
    animation: scrollReveal linear both;
3942
    animation-timeline: view();
3943
    animation-range: entry 5% cover 27%;
3944
  }
3945
3946
  .featureCard:nth-child(2) {
3947
    animation-range: entry 10% cover 30%;
3948
  }
3949
3950
  .featureCard:nth-child(3) {
3951
    animation-range: entry 15% cover 33%;
3952
  }
3953
}
3954
3955
.productSection.is-arriving .sectionIntro,
3956
.principlesSection.is-arriving > div,
3957
.accessSection.is-arriving .accessCopy,
3958
.accessSection.is-arriving .accessCard {
3959
  animation: sectionArrival 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
3960
  animation-timeline: auto;
3961
}
3962
3963
.productSection.is-arriving .featureCard {
3964
  animation: sectionArrival 720ms 90ms cubic-bezier(0.22, 1, 0.36, 1) both;
3965
  animation-timeline: auto;
3966
}
3967
3968
.productSection.is-arriving .featureCard:nth-child(2),
3969
.principlesSection.is-arriving > div:nth-child(2),
3970
.accessSection.is-arriving .accessCard {
3971
  animation-delay: 150ms;
3972
}
3973
3974
.productSection.is-arriving .featureCard:nth-child(3) {
3975
  animation-delay: 210ms;
3976
}
3977
3978
.accessSection.is-arriving {
3979
  animation: destinationPulse 880ms ease-out;
3980
  animation-timeline: auto;
3981
}
3982
3983
@media (max-width: 1080px) {
3984
  .landingHero {
3985
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
3986
    gap: 40px;
3987
  }
3988
3989
  .agentExchange {
3990
    padding-inline: 16px;
3991
    grid-template-columns: 112px 1fr 112px;
3992
  }
3993
3994
  .agentNode {
3995
    padding: 12px;
3996
  }
3997
3998
  .sectionIntro,
3999
  .principlesSection {
4000
    gap: 50px;
4001
  }
4002
}
4003
4004
@media (max-width: 900px) {
4005
  .landingNav {
4006
    grid-template-columns: 1fr auto;
4007
  }
4008
4009
  .landingNav nav {
4010
    display: none;
4011
  }
4012
4013
  .landingHero {
4014
    min-height: auto;
4015
    padding: 76px 0;
4016
    grid-template-columns: 1fr;
4017
  }
4018
4019
  .heroCopy {
4020
    max-width: 720px;
4021
  }
4022
4023
  .assuranceVisual {
4024
    width: min(100%, 660px);
4025
    margin: 20px auto 0;
4026
  }
4027
4028
  .sectionIntro,
4029
  .principlesSection,
4030
  .accessSection {
4031
    grid-template-columns: 1fr;
4032
  }
4033
4034
  .sectionIntro > p:last-child {
4035
    max-width: 650px;
4036
  }
4037
4038
  .principlesSection {
4039
    gap: 46px;
4040
  }
4041
4042
  .principleList {
4043
    max-width: 660px;
4044
  }
4045
4046
  .accessSection {
4047
    gap: 42px;
4048
  }
4049
4050
  .accessCard {
4051
    max-width: 560px;
4052
  }
4053
4054
  .landingFooter {
4055
    grid-template-columns: 1fr auto;
4056
  }
4057
4058
  .landingFooter p {
4059
    display: none;
4060
  }
4061
}
4062
4063
@media (max-width: 720px) {
4064
  .landingNav,
4065
  .landingHero,
4066
  .productSection,
4067
  .principlesSection,
4068
  .accessSection,
4069
  .landingFooter {
4070
    width: min(100% - 32px, 1280px);
4071
  }
4072
4073
  .landingNav {
4074
    min-height: 66px;
4075
  }
4076
4077
  .navCta {
4078
    display: none;
4079
  }
4080
4081
  .heroCopy h1 {
4082
    font-size: clamp(48px, 14vw, 72px);
4083
  }
4084
4085
  .heroNotes {
4086
    display: grid;
4087
    margin-top: 38px;
4088
  }
4089
4090
  .assuranceVisual {
4091
    min-height: 480px;
4092
    border-radius: 18px;
4093
  }
4094
4095
  .agentExchange {
4096
    min-height: 280px;
4097
    padding: 56px 12px 28px;
4098
    grid-template-columns: 94px 1fr 94px;
4099
  }
4100
4101
  .agentNode {
4102
    min-height: 126px;
4103
    border-radius: 14px;
4104
  }
4105
4106
  .agentGlyph {
4107
    width: 36px;
4108
    height: 36px;
4109
  }
4110
4111
  .agentNode small {
4112
    display: none;
4113
  }
4114
4115
  .contractChip {
4116
    min-width: 128px;
4117
    padding: 9px;
4118
  }
4119
4120
  .contractChip strong {
4121
    font-size: 8px;
4122
  }
4123
4124
  .assuranceEvents {
4125
    margin-inline: 12px;
4126
  }
4127
4128
  .assuranceEvents > div {
4129
    padding: 11px 7px;
4130
    gap: 5px;
4131
  }
4132
4133
  .assuranceEvents svg {
4134
    width: 12px;
4135
  }
4136
4137
  .assuranceEvents small {
4138
    display: none;
4139
  }
4140
4141
  .capabilityRail {
4142
    justify-content: flex-start;
4143
    overflow: hidden;
4144
    white-space: nowrap;
4145
  }
4146
4147
  .productSection,
4148
  .principlesSection {
4149
    padding: 100px 0;
4150
  }
4151
4152
  .sectionIntro {
4153
    display: block;
4154
    margin-bottom: 40px;
4155
  }
4156
4157
  .sectionIntro h2,
4158
  .principlesSection h2 {
4159
    font-size: clamp(42px, 12vw, 60px);
4160
  }
4161
4162
  .sectionIntro > p:last-child {
4163
    margin-bottom: 0;
4164
  }
4165
4166
  .featureGrid {
4167
    min-height: 0;
4168
    grid-template-columns: 1fr;
4169
    grid-template-rows: auto;
4170
  }
4171
4172
  .featureCard,
4173
  .featureCardWide {
4174
    min-height: 430px;
4175
    padding: 26px;
4176
    grid-row: auto;
4177
  }
4178
4179
  .featureCardWide {
4180
    min-height: 560px;
4181
  }
4182
4183
  .featureIcon {
4184
    margin-bottom: 42px;
4185
  }
4186
4187
  .principlesSection {
4188
    gap: 30px;
4189
  }
4190
4191
  .accessSection {
4192
    margin-bottom: 64px;
4193
    padding: 32px 22px;
4194
    border-radius: 20px;
4195
  }
4196
4197
  .accessCard {
4198
    padding: 14px;
4199
  }
4200
4201
  .landingFooter {
4202
    padding: 32px 0;
4203
    grid-template-columns: 1fr;
4204
    align-items: start;
4205
  }
4206
4207
  .landingFooter small {
4208
    justify-self: start;
4209
    text-align: left;
4210
  }
4211
}
4212
4213
@media (max-width: 440px) {
4214
  .agentExchange {
4215
    grid-template-columns: 82px 1fr 82px;
4216
  }
4217
4218
  .agentNode {
4219
    padding: 8px;
4220
  }
4221
4222
  .agentNode strong {
4223
    font-size: 11px;
4224
  }
4225
4226
  .verifiedTick {
4227
    top: 6px;
4228
    right: 6px;
4229
  }
4230
4231
  .contractChip > svg {
4232
    display: none;
4233
  }
4234
4235
  .accessCopy h2 {
4236
    font-size: 40px;
4237
  }
4238
}
4239
4240
@media (prefers-reduced-motion: reduce) {
4241
  html {
4242
    scroll-behavior: auto;
4243
  }
4244
4245
  .heroCopy,
4246
  .assuranceVisual,
4247
  .assuranceVisual::before,
4248
  .assuranceVisual::after,
4249
  .agentNode,
4250
  .contractChip,
4251
  .railDot,
4252
  .visualLive i,
4253
  .landingKicker > span,
4254
  .assuranceEvents svg,
4255
  .capabilityRail i,
4256
  .sectionIntro,
4257
  .featureCard,
4258
  .principlesSection > div,
4259
  .accessSection {
4260
    animation: none;
4261
  }
4262
4263
  .productSection.is-arriving *,
4264
  .principlesSection.is-arriving > div,
4265
  .accessSection.is-arriving,
4266
  .accessSection.is-arriving * {
4267
    animation: none !important;
4268
  }
4269
4270
  .themeButton,
4271
  .navCta,
4272
  .landingPrimary,
4273
  .landingSecondary,
4274
  .socialButtons button,
4275
  .featureCard,
4276
  .featureCard::before {
4277
    transition: none;
4278
  }
4279
}