@echomem/mcp 1.4.26 → 1.4.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,7 +14,8 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
14
14
  width: 100%;
15
15
  min-height: 100vh;
16
16
  margin: 0;
17
- padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 64px);
17
+ padding: clamp(12px, 1.8vw, 24px) clamp(18px, 5vw, 64px) clamp(38px, 6vw, 72px);
18
+ display: block;
18
19
  }
19
20
  main > header { display: none; }
20
21
  #app.state { color: transparent; }
@@ -24,26 +25,101 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
24
25
  width: 100%;
25
26
  min-height: calc(100vh - clamp(56px, 10vw, 128px));
26
27
  }
28
+ body.readyMode #app:has(> .setupJourney),
29
+ body.scanMode #app:has(> .setupJourney),
30
+ body.extractMode #app:has(> .setupJourney) {
31
+ padding-top: 0 !important;
32
+ }
27
33
 
28
- /* Permission ------------------------------------------------------------ */
29
- .mvpConsentStage {
30
- display: grid !important;
34
+ /* One calm map across local scan, account/Stripe, import, and first value. */
35
+ .setupJourney {
36
+ width: min(760px, 100%);
37
+ flex: 0 0 auto;
38
+ margin: 0 auto 14px;
39
+ color: var(--echo-ink-faint);
40
+ }
41
+ .setupJourney ol {
42
+ display: grid;
43
+ grid-template-columns: repeat(5, minmax(0, 1fr));
44
+ gap: 0;
45
+ margin: 0;
46
+ padding: 0;
47
+ list-style: none;
48
+ }
49
+ .setupJourneyStep {
50
+ position: relative;
51
+ display: grid;
52
+ justify-items: center;
53
+ gap: 7px;
54
+ min-width: 0;
55
+ text-align: center;
56
+ }
57
+ .setupJourneyStep:not(:last-child)::after {
58
+ content: "";
59
+ position: absolute;
60
+ z-index: 0;
61
+ top: 13px;
62
+ left: calc(50% + 17px);
63
+ width: calc(100% - 34px);
64
+ height: 1px;
65
+ background: rgba(26,58,143,0.16);
66
+ }
67
+ .setupJourneyStep > span {
68
+ position: relative;
69
+ z-index: 1;
70
+ display: grid;
71
+ width: 27px;
72
+ height: 27px;
31
73
  place-items: center;
74
+ border: 1px solid rgba(26,58,143,0.20);
75
+ border-radius: 50%;
76
+ background: var(--echo-paper-canvas);
77
+ font: 750 10px/1 var(--echo-font-mono);
32
78
  }
33
- .mvpConsent {
34
- display: flex;
35
- width: min(620px, 100%);
79
+ .setupJourneyStep > span .setupGlyph { width: 15px; height: 15px; }
80
+ .setupJourneyStep > b {
81
+ overflow: hidden;
82
+ max-width: 100%;
83
+ font: 700 9px/1.2 var(--echo-font-mono);
84
+ letter-spacing: 0.06em;
85
+ text-overflow: ellipsis;
86
+ text-transform: uppercase;
87
+ white-space: nowrap;
88
+ }
89
+ .setupJourneyStep.is-complete,
90
+ .setupJourneyStep.is-current { color: var(--echo-ink-primary); }
91
+ .setupJourneyStep.is-complete > span {
92
+ border-color: rgba(44,143,104,0.34);
93
+ background: rgba(44,143,104,0.12);
94
+ color: #257b59;
95
+ }
96
+ .setupJourneyStep.is-current > span {
97
+ border-color: var(--echo-ink-primary);
98
+ background: var(--echo-ink-primary);
99
+ box-shadow: 0 0 0 4px rgba(26,58,143,0.09);
100
+ color: white;
101
+ }
102
+ body.cityMode .setupJourney {
103
+ margin-top: 12px;
104
+ margin-bottom: 8px;
105
+ padding-inline: 18px;
106
+ }
107
+ #setupJourneySlot {
108
+ width: 100%;
109
+ flex: 0 0 auto;
110
+ }
111
+
112
+ /* Permission ------------------------------------------------------------ */
113
+ .mvpConsentStage {
114
+ display: flex !important;
36
115
  flex-direction: column;
37
116
  align-items: center;
38
- color: var(--echo-ink-text);
39
- text-align: center;
40
- }
41
- .mvpConsentEcho {
42
- width: clamp(82px, 9vw, 112px);
43
- height: auto;
44
- margin-bottom: 30px;
45
- filter: drop-shadow(0 18px 22px rgba(26,58,143,0.18));
117
+ justify-content: flex-start;
46
118
  }
119
+ .mvpConsent { display: grid; width: min(720px, 100%); gap: 18px; color: var(--echo-ink-text); text-align: center; }
120
+ .mvpConsentHero { display: flex; flex-direction: column; align-items: center; gap: 12px; }
121
+ .mvpConsentPitch { min-width: 0; }
122
+ .mvpConsentEcho { width: 86px; height: auto; flex: 0 0 auto; margin: 0; filter: drop-shadow(0 12px 18px rgba(26,58,143,0.16)); }
47
123
  .mvpKicker {
48
124
  margin: 0;
49
125
  color: var(--echo-ink-seal);
@@ -52,27 +128,59 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
52
128
  text-transform: uppercase;
53
129
  }
54
130
  .mvpConsent h2 {
55
- max-width: 560px;
56
- margin: 20px 0 0;
131
+ max-width: 660px;
132
+ margin: 12px auto 0;
57
133
  color: var(--echo-ink-text);
58
- font-size: clamp(42px, 4.3vw, 58px);
59
- font-weight: 500;
60
- line-height: 0.96;
134
+ font-size: clamp(40px, 4.2vw, 56px);
135
+ font-weight: 600;
136
+ line-height: 0.98;
61
137
  letter-spacing: -0.06em;
62
138
  }
63
139
  .mvpConsentIntro {
64
- max-width: 490px;
65
- margin: 38px 0 0;
140
+ max-width: 590px;
141
+ margin: 13px auto 0;
66
142
  color: var(--echo-ink-mute);
67
- font-size: clamp(16px, 2vw, 19px);
68
- line-height: 1.6;
143
+ font-size: clamp(15px, 1.5vw, 17px);
144
+ line-height: 1.55;
69
145
  }
70
- .mvpPrivacy {
71
- margin: 22px 0 0;
72
- color: var(--echo-ink-faint);
146
+ .mvpConsentTrustLine {
147
+ margin: 0;
148
+ color: var(--echo-ink-mute);
73
149
  font-size: 13px;
74
- line-height: 1.45;
150
+ line-height: 1.5;
151
+ text-align: center;
75
152
  }
153
+ .mvpConsentTrustLine strong { color: var(--echo-ink-text); }
154
+ .mvpReportPreview { overflow: hidden; border: 1px solid rgba(26,58,143,0.18); border-radius: 18px; background: rgba(255,255,255,0.84); box-shadow: 0 16px 36px -26px rgba(26,58,143,0.42); }
155
+ .mvpReportPreview header { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(26,58,143,0.10); background: color-mix(in srgb, var(--echo-paper-white) 66%, var(--echo-note-blue) 34%); padding: 13px 15px; }
156
+ .mvpReportPreview header span,
157
+ .mvpReportPreview header small,
158
+ .mvpReportPreview header strong,
159
+ .mvpPreviewRow span,
160
+ .mvpPreviewRow small,
161
+ .mvpPreviewRow strong { display: block; }
162
+ .mvpReportPreview header small { color: var(--echo-ink-primary); font: 800 9px/1 var(--echo-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
163
+ .mvpReportPreview header strong { margin-top: 5px; color: var(--echo-ink-text); font-size: 15px; }
164
+ .mvpPreviewRow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 15px; }
165
+ .mvpPreviewRow + .mvpPreviewRow { border-top: 1px solid rgba(26,58,143,0.08); }
166
+ .mvpPreviewRow .setupGlyph { width: 19px; height: 19px; color: #2c8f68; }
167
+ .mvpPreviewRow strong { color: var(--echo-ink-text); font-size: 13px; }
168
+ .mvpPreviewRow small { margin-top: 2px; color: var(--echo-ink-mute); font-size: 11px; line-height: 1.35; }
169
+ .mvpTrustCard { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(44,143,104,0.28); border-radius: 15px; background: color-mix(in srgb, var(--echo-paper-white) 62%, var(--echo-note-mint) 38%); padding: 13px 15px; }
170
+ .mvpTrustIcon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(44,143,104,0.13); color: #257b59; }
171
+ .mvpTrustIcon .setupGlyph { width: 21px; height: 21px; }
172
+ .mvpTrustCard > span:nth-child(2),
173
+ .mvpTrustCard strong,
174
+ .mvpTrustCard small { display: block; }
175
+ .mvpTrustCard strong { color: var(--echo-ink-text); font-size: 13px; }
176
+ .mvpTrustCard small { margin-top: 3px; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.4; }
177
+ .mvpTrustCard .dataHandlingLink { font-size: 11px; white-space: nowrap; }
178
+ .mvpNextPromise { margin: 0; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.45; text-align: center; }
179
+ .mvpNextPromise strong { color: var(--echo-ink-primary); }
180
+ .mvpConsentFooter { display: flex; align-items: center; justify-content: center; gap: 18px; }
181
+ .mvpReadScope { max-width: 660px; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.5; }
182
+ .mvpReadScope summary { color: var(--echo-ink-primary); font-weight: 800; cursor: pointer; }
183
+ .mvpReadScope p { margin: 8px 0 0; }
76
184
  .mvpConsentCheck {
77
185
  display: flex;
78
186
  max-width: 520px;
@@ -94,9 +202,9 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
94
202
  }
95
203
  .mvpPrimary {
96
204
  display: flex;
97
- width: min(500px, 100%);
205
+ width: min(620px, 100%);
98
206
  min-height: 58px;
99
- margin-top: 46px;
207
+ margin: 0 auto;
100
208
  padding: 0 24px;
101
209
  align-items: center;
102
210
  justify-content: space-between;
@@ -115,7 +223,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
115
223
  .mvpQuiet {
116
224
  display: block;
117
225
  width: fit-content;
118
- margin: 30px auto 0;
226
+ margin: 0;
119
227
  border: 0;
120
228
  background: transparent;
121
229
  color: var(--echo-ink-mute);
@@ -130,6 +238,19 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
130
238
  margin: 14px 0 0;
131
239
  color: var(--echo-ink-seal);
132
240
  font-size: 13px;
241
+ text-align: center;
242
+ }
243
+ .lifecycleResume code { border: 1px solid var(--echo-line-soft); border-radius: 5px; background: var(--echo-paper-soft); padding: 1px 5px; color: var(--echo-ink-primary); font-family: var(--echo-font-mono); }
244
+ .dataHandlingLink {
245
+ color: var(--echo-ink-primary);
246
+ font-weight: 700;
247
+ text-decoration: underline;
248
+ text-underline-offset: 3px;
249
+ }
250
+ .localAuthDataLink,
251
+ .readyDataLink {
252
+ margin: 10px 0 0;
253
+ font-size: 12px;
133
254
  }
134
255
 
135
256
  /* Local auth follows the public login surface ------------------------- */
@@ -138,9 +259,32 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
138
259
  }
139
260
  .localAuthStage,
140
261
  .localAuthWelcomeStage {
262
+ display: flex;
263
+ flex-direction: column;
264
+ align-items: center;
265
+ justify-content: flex-start;
141
266
  width: 100%;
142
267
  min-height: calc(100vh - clamp(56px, 10vw, 128px));
143
268
  }
269
+ .localAuthWelcomeStage .localAuthWelcome { margin-block: auto; }
270
+ body.readyMode #app.localAuthEmailStage {
271
+ display: flex;
272
+ flex-direction: column;
273
+ align-items: center;
274
+ justify-content: flex-start;
275
+ }
276
+ .localAuthWelcomeStage.localAuthEmailStage .localAuthWelcome {
277
+ margin: clamp(36px, 7vh, 64px) auto 0;
278
+ }
279
+ body.readyMode #app.localAuthPassphraseStage {
280
+ display: flex;
281
+ flex-direction: column;
282
+ align-items: center;
283
+ justify-content: flex-start;
284
+ }
285
+ .localAuthWelcomeStage.localAuthPassphraseStage .localAuthWelcome {
286
+ margin: clamp(24px, 5vh, 48px) auto 0;
287
+ }
144
288
  .localAuthWelcome {
145
289
  width: min(440px, 100%);
146
290
  gap: 14px;
@@ -185,13 +329,19 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
185
329
  }
186
330
  .localAuthEmailCapsule {
187
331
  min-height: 54px;
188
- grid-template-columns: minmax(0, 1fr) 44px;
332
+ grid-template-columns: minmax(0, 1fr) auto;
189
333
  padding: 5px 6px 5px 18px;
190
334
  }
191
335
  .localAuthEmailCapsule button {
192
- width: 42px;
336
+ width: auto;
337
+ min-width: 126px;
193
338
  height: 42px;
194
- font-size: 20px;
339
+ padding: 0 16px;
340
+ gap: 8px;
341
+ border-radius: 999px;
342
+ font-size: 12px;
343
+ font-weight: 750;
344
+ white-space: nowrap;
195
345
  }
196
346
  .localAuthSpinner {
197
347
  width: 15px;
@@ -262,11 +412,90 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
262
412
  justify-self: center;
263
413
  text-align: center;
264
414
  }
415
+ .localAuthVaultDeferNote {
416
+ margin: 0;
417
+ color: var(--echo-ink-mute);
418
+ font-size: 12px;
419
+ line-height: 1.45;
420
+ text-align: center;
421
+ }
422
+ .localAuthTextAction {
423
+ justify-self: center;
424
+ min-height: 36px;
425
+ padding: 0 8px;
426
+ border: 0;
427
+ background: transparent;
428
+ box-shadow: none;
429
+ color: var(--echo-blue);
430
+ font-size: 13px;
431
+ font-weight: 750;
432
+ text-decoration: underline;
433
+ text-underline-offset: 3px;
434
+ }
435
+ .localAuthTextAction:hover:not(:disabled) {
436
+ background: transparent;
437
+ box-shadow: none;
438
+ transform: none;
439
+ }
440
+ .localAuthRestartAction {
441
+ color: var(--echo-ink-mute);
442
+ font-weight: 650;
443
+ }
444
+ .localAuthDeferred {
445
+ min-height: 280px;
446
+ align-content: center;
447
+ }
448
+ .accountSwitchStage {
449
+ display: flex !important;
450
+ flex-direction: column;
451
+ align-items: center;
452
+ }
453
+ .accountSwitchConfirm {
454
+ display: grid;
455
+ width: min(520px, 100%);
456
+ gap: 18px;
457
+ color: var(--echo-ink-text);
458
+ }
459
+ .accountSwitchConfirm h2 {
460
+ margin: 0;
461
+ font-size: clamp(42px, 5vw, 58px);
462
+ font-weight: 650;
463
+ line-height: 1;
464
+ letter-spacing: -0.045em;
465
+ }
466
+ .accountSwitchConfirm > p {
467
+ margin: 0;
468
+ color: var(--echo-ink-mute);
469
+ font-size: 15px;
470
+ line-height: 1.55;
471
+ }
472
+ .accountSwitchConfirm > p strong { color: var(--echo-ink-text); }
473
+ .accountSwitchConfirm > .primary {
474
+ width: 100%;
475
+ min-height: 54px;
476
+ border-radius: 999px;
477
+ justify-content: center;
478
+ }
479
+ .flowBack {
480
+ width: fit-content;
481
+ min-height: 36px;
482
+ border: 0;
483
+ background: transparent;
484
+ padding: 0;
485
+ box-shadow: none;
486
+ color: var(--echo-ink-primary);
487
+ font-weight: 750;
488
+ }
265
489
 
266
490
  /* Reading --------------------------------------------------------------- */
267
491
  .scanLoading {
268
- display: grid !important;
269
- place-items: center;
492
+ display: flex !important;
493
+ flex-direction: column;
494
+ align-items: center;
495
+ justify-content: flex-start;
496
+ }
497
+ .scanLoading .mvpReading {
498
+ margin-block: auto;
270
499
  }
271
500
  .mvpReading {
272
501
  display: flex;
@@ -276,50 +505,112 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
276
505
  color: var(--echo-ink-text);
277
506
  text-align: center;
278
507
  }
279
- .mvpReadingAnimation {
280
- width: 176px !important;
281
- height: 176px !important;
508
+ .mvpReadingMascot {
509
+ display: block;
510
+ width: 150px;
511
+ height: 150px;
282
512
  margin: 0 auto 18px;
283
- border: 0;
284
- border-radius: 0;
285
- background: transparent;
286
- box-shadow: none;
287
- transform: none;
288
- }
289
- .mvpReading .scanMascotFrames {
290
- width: 100%;
291
- height: 100%;
292
- }
293
- .mvpReading .scanMascotFrame {
513
+ object-fit: contain;
294
514
  filter: none;
295
- animation-name: mvpScanFrame;
296
- animation-timing-function: steps(1, end);
297
- }
298
- @keyframes mvpScanFrame {
299
- 0%, 14.28% { opacity: 1; visibility: visible; }
300
- 14.29%, 100% { opacity: 0; visibility: hidden; }
301
515
  }
302
516
  .mvpReading h2 {
303
517
  margin: 0;
304
518
  color: var(--echo-ink-primary);
305
519
  font: 650 38px/1.05 var(--echo-font-script), cursive;
306
520
  }
307
- .mvpReading .scanCaption {
521
+ .mvpReadingCount {
522
+ min-height: 18px;
308
523
  margin: 13px 0 0;
524
+ color: var(--echo-ink-mute);
525
+ font: 650 13px/1.4 var(--echo-font-mono);
526
+ }
527
+ .mvpReadingCount[hidden] {
528
+ display: block;
529
+ visibility: hidden;
530
+ }
531
+ .mvpReadingEta {
532
+ min-height: 17px;
533
+ margin: 5px 0 0;
309
534
  color: var(--echo-ink-faint);
310
- font: 500 12px/1.5 var(--echo-font-mono);
535
+ font: 600 12px/1.4 var(--echo-font-mono);
536
+ font-variant-numeric: tabular-nums;
311
537
  }
312
538
  .mvpReadingProgress {
313
539
  width: min(260px, 100%);
314
540
  height: 3px;
315
- margin: 18px 0 0;
541
+ margin: 8px 0 0;
316
542
  background: rgba(26,58,143,0.12);
317
543
  }
544
+ .discoveryLoader {
545
+ width: 100%;
546
+ min-height: min(62vh, 620px);
547
+ display: grid;
548
+ place-items: center;
549
+ }
550
+ .discoverySpinner span {
551
+ display: block;
552
+ width: 26px;
553
+ height: 26px;
554
+ border: 3px solid rgba(26,58,143,0.16);
555
+ border-top-color: var(--echo-ink-primary);
556
+ border-radius: 50%;
557
+ animation: localAuthSpin 700ms linear infinite;
558
+ }
559
+ .extractionStartStage {
560
+ display: flex !important;
561
+ flex-direction: column;
562
+ align-items: center;
563
+ justify-content: flex-start;
564
+ }
565
+ .extractionStartStage .discoverySpinner {
566
+ display: grid;
567
+ flex: 1 1 auto;
568
+ place-items: center;
569
+ }
570
+ .reportMessageStage {
571
+ display: flex !important;
572
+ justify-content: center;
573
+ color: var(--echo-ink-text);
574
+ }
575
+ .reportMessage {
576
+ width: min(620px, 100%);
577
+ padding-top: clamp(48px, 10vh, 112px);
578
+ }
579
+ .reportMessage h2 {
580
+ margin: 0;
581
+ font-size: clamp(42px, 5vw, 58px);
582
+ font-weight: 650;
583
+ line-height: 1;
584
+ letter-spacing: -0.045em;
585
+ }
586
+ .reportMessage p {
587
+ margin: 16px 0 0;
588
+ color: var(--echo-ink-mute);
589
+ font-size: 16px;
590
+ line-height: 1.55;
591
+ }
592
+ .reportMessage code {
593
+ color: var(--echo-ink-primary);
594
+ font-family: var(--echo-font-mono);
595
+ }
596
+ .reportTechnical {
597
+ width: fit-content;
598
+ margin-top: 22px;
599
+ color: var(--echo-ink-faint);
600
+ font: 650 11px/1.5 var(--echo-font-mono);
601
+ }
602
+ .reportTechnical summary {
603
+ cursor: pointer;
604
+ text-decoration: underline;
605
+ text-underline-offset: 3px;
606
+ }
607
+ .reportTechnical code { display: block; margin-top: 8px; }
318
608
 
319
609
  /* Pricing copied from the public Echo habitat -------------------------- */
320
610
  .planGateStage {
321
- display: grid !important;
322
- place-items: start center;
611
+ display: flex !important;
612
+ flex-direction: column;
613
+ align-items: center;
323
614
  }
324
615
  .planGateDecision {
325
616
  width: 100%;
@@ -332,7 +623,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
332
623
  .mvpPricingIntro {
333
624
  display: block;
334
625
  width: min(960px, 100%);
335
- margin: 20px auto 30px;
626
+ margin: 8px auto 22px;
336
627
  text-align: center;
337
628
  }
338
629
  .mvpPricingIntro > span {
@@ -342,9 +633,9 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
342
633
  text-transform: uppercase;
343
634
  }
344
635
  .mvpPricingIntro h2 {
345
- margin: 10px 0 0;
636
+ margin: 0;
346
637
  color: var(--echo-ink-text);
347
- font-size: 4.6rem;
638
+ font-size: clamp(48px, 5vw, 64px);
348
639
  font-weight: 450;
349
640
  line-height: 0.92;
350
641
  letter-spacing: -0.07em;
@@ -401,10 +692,10 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
401
692
  min-height: 410px;
402
693
  margin: 0 auto;
403
694
  overflow: hidden;
404
- border: 1px solid color-mix(in srgb, var(--habitat-accent) 26%, white);
695
+ border: 0;
405
696
  border-radius: 34px;
406
697
  background: var(--habitat-bg);
407
- box-shadow: 0 28px 60px rgba(28,40,72,0.14);
698
+ box-shadow: none;
408
699
  }
409
700
  .mvpPlanHabitat[data-plan="pro"] {
410
701
  --habitat-bg: #eaf1ff;
@@ -645,12 +936,120 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
645
936
  text-transform: uppercase;
646
937
  }
647
938
  .planGateAccount .setupAccountChange { min-height: 34px; }
939
+ .readyUtilityNav {
940
+ position: fixed;
941
+ top: 20px;
942
+ left: 22px;
943
+ z-index: 20;
944
+ display: grid;
945
+ width: min(310px, calc(100vw - 44px));
946
+ gap: 2px;
947
+ border: 1px solid rgba(26,58,143,0.10);
948
+ border-radius: 24px;
949
+ background: rgba(255,255,255,0.78);
950
+ padding: 6px;
951
+ box-shadow: 0 8px 24px rgba(26,58,143,0.08);
952
+ backdrop-filter: blur(12px);
953
+ }
954
+ .readyUtilityNav .planGateAccount {
955
+ position: static;
956
+ top: auto;
957
+ left: auto;
958
+ z-index: auto;
959
+ width: 100%;
960
+ max-width: 100%;
961
+ }
962
+ .readyUtilityNav .planGateAccount .setupAccountCard {
963
+ display: grid;
964
+ width: 100%;
965
+ min-height: 44px;
966
+ grid-template-columns: 70px minmax(0, 1fr) auto;
967
+ align-items: center;
968
+ gap: 10px;
969
+ border: 0;
970
+ border-radius: 16px;
971
+ background: transparent;
972
+ padding: 5px 8px;
973
+ box-shadow: none;
974
+ backdrop-filter: none;
975
+ }
976
+ .readyUtilityNav .setupAccountCopy { display: contents; }
977
+ .readyUtilityNav .setupAccountCopy small {
978
+ grid-column: 1;
979
+ margin: 0;
980
+ align-self: center;
981
+ }
982
+ .readyUtilityNav .setupAccountCopy strong {
983
+ grid-column: 2;
984
+ overflow: hidden;
985
+ align-self: center;
986
+ text-overflow: ellipsis;
987
+ white-space: nowrap;
988
+ }
989
+ .readyUtilityNav .setupAccountChange { grid-column: 3; }
990
+ .readyPlanNav {
991
+ display: grid;
992
+ width: 100%;
993
+ min-height: 44px;
994
+ grid-template-columns: 70px minmax(0, 1fr);
995
+ align-items: center;
996
+ gap: 10px;
997
+ border: 0;
998
+ border-radius: 16px;
999
+ background: transparent;
1000
+ padding: 5px 8px;
1001
+ box-shadow: none;
1002
+ backdrop-filter: none;
1003
+ }
1004
+ .readyPlanNav:has(.setupPlanSlot.is-hidden) { display: none; }
1005
+ .readyPlanNavLabel {
1006
+ grid-column: 1;
1007
+ color: var(--echo-ink-faint);
1008
+ font: 700 8px/1 var(--echo-font-mono);
1009
+ letter-spacing: 0.1em;
1010
+ text-transform: uppercase;
1011
+ }
1012
+ .readyPlanNav .setupPlanSlot {
1013
+ grid-column: 2;
1014
+ min-width: 0;
1015
+ }
1016
+ .readyPlanNav .setupPlanConfirmed {
1017
+ display: grid;
1018
+ min-width: 0;
1019
+ grid-template-columns: minmax(0, 1fr) auto;
1020
+ margin: 0;
1021
+ align-items: center;
1022
+ gap: 8px;
1023
+ border: 0;
1024
+ background: transparent;
1025
+ padding: 0;
1026
+ box-shadow: none;
1027
+ }
1028
+ .readyPlanNav .setupPlanConfirmedIcon,
1029
+ .readyPlanNav .setupPlanConfirmedCopy > span { display: none; }
1030
+ .readyPlanNav .setupPlanConfirmedCopy { min-width: 0; }
1031
+ .readyPlanNav .setupPlanConfirmedCopy strong {
1032
+ display: block;
1033
+ overflow: hidden;
1034
+ color: var(--echo-ink-mute);
1035
+ font-size: 13px;
1036
+ font-weight: 500;
1037
+ text-overflow: ellipsis;
1038
+ white-space: nowrap;
1039
+ }
1040
+ .readyPlanNav .textButton {
1041
+ min-height: 34px;
1042
+ padding: 0 9px;
1043
+ font-size: 11px;
1044
+ }
648
1045
 
649
1046
  /* Found sessions: one message, one next action -------------------------- */
650
1047
  .readyDecision.extractionReady {
1048
+ display: flex;
1049
+ flex-direction: column;
651
1050
  overflow: visible;
652
- width: min(920px, 100%);
653
- padding-top: 58px;
1051
+ width: min(760px, 100%);
1052
+ padding-top: 8px;
654
1053
  border: 0;
655
1054
  border-radius: 0;
656
1055
  background: transparent;
@@ -658,32 +1057,39 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
658
1057
  }
659
1058
  .readyDecision.extractionReady::before,
660
1059
  .exHero::before { display: none; }
661
- .extractionReady .readyEyebrow { display: none; }
1060
+ .extractionReady .readyEyebrow {
1061
+ display: block;
1062
+ order: -1;
1063
+ margin: 18px 0 8px;
1064
+ text-align: left;
1065
+ }
662
1066
  .extractionReady .readyHero {
663
- display: flex;
1067
+ display: grid;
1068
+ order: 0;
1069
+ grid-template-columns: 54px minmax(0, 1fr);
664
1070
  width: 100%;
665
- padding: 14px 0 0;
666
- flex-direction: column;
667
- align-items: center;
668
- gap: 16px;
1071
+ padding: 0;
1072
+ align-items: start;
1073
+ gap: 18px;
669
1074
  border: 0;
670
1075
  background: transparent;
671
- text-align: center;
1076
+ text-align: left;
672
1077
  }
673
1078
  .extractionReady .readyMascot {
674
- width: 82px;
1079
+ width: 54px;
675
1080
  height: auto;
676
- filter: drop-shadow(0 16px 22px rgba(26,58,143,0.16));
1081
+ margin-top: 4px;
1082
+ filter: drop-shadow(0 10px 16px rgba(26,58,143,0.14));
677
1083
  }
678
1084
  .extractionReady .readyHero .exCopy h2 {
679
- max-width: 760px;
1085
+ max-width: 680px;
680
1086
  color: var(--echo-ink-text) !important;
681
1087
  -webkit-text-fill-color: var(--echo-ink-text);
682
1088
  background: none;
683
- font-size: 4rem;
684
- font-weight: 450;
685
- line-height: 0.92;
686
- letter-spacing: -0.07em !important;
1089
+ font-size: clamp(40px, 4.2vw, 54px);
1090
+ font-weight: 500;
1091
+ line-height: 0.98;
1092
+ letter-spacing: -0.055em !important;
687
1093
  }
688
1094
  .extractionReady .readyHero .exCopy h2 strong {
689
1095
  color: var(--echo-ink-primary);
@@ -691,25 +1097,28 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
691
1097
  font-weight: 650;
692
1098
  }
693
1099
  .extractionReady .readyHero .exSub {
694
- max-width: 590px;
695
- margin: 18px auto 0;
696
- font-size: 15px;
697
- line-height: 1.5;
698
- text-align: center;
1100
+ max-width: 620px;
1101
+ margin: 10px 0 0;
1102
+ font-size: 14px;
1103
+ line-height: 1.45;
1104
+ text-align: left;
699
1105
  }
1106
+ .extractionReady .readyHero .exSub:empty { display: none; }
700
1107
  .extractionReady .proofStrip {
1108
+ order: 1;
701
1109
  width: fit-content;
702
- min-height: 36px;
703
- margin: 20px auto 0;
1110
+ min-height: 30px;
1111
+ margin: 14px 0 0 72px;
704
1112
  border: 0;
705
1113
  border-radius: 999px;
706
1114
  background: rgba(255,255,255,0.65);
707
- padding: 8px 14px;
708
- box-shadow: 0 6px 20px rgba(26,58,143,0.07);
1115
+ padding: 5px 10px;
1116
+ box-shadow: none;
709
1117
  }
710
1118
  .extractionReady .readyGo {
711
- width: min(560px, 100%);
712
- margin: 24px auto 0;
1119
+ order: 3;
1120
+ width: 100%;
1121
+ margin: 16px auto 0;
713
1122
  padding: 0;
714
1123
  justify-items: center;
715
1124
  background: transparent;
@@ -721,36 +1130,73 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
721
1130
  }
722
1131
  .extractionReady .actions .primary {
723
1132
  width: 100%;
724
- min-height: 60px;
1133
+ min-height: 54px;
725
1134
  border: 0;
726
1135
  border-radius: 999px;
727
1136
  box-shadow: 0 8px 0 color-mix(in srgb, var(--echo-ink-primary) 77%, black);
728
1137
  font-size: 17px;
729
1138
  }
730
1139
  .extractionReady .skipHistoryButton {
731
- min-height: 44px !important;
1140
+ min-height: 38px !important;
732
1141
  border: 0;
733
1142
  background: transparent;
734
1143
  box-shadow: none;
735
1144
  color: var(--echo-ink-mute);
736
1145
  }
737
1146
  .extractionReady .ctaMeta {
738
- margin-top: 14px;
1147
+ margin-top: 11px;
739
1148
  justify-content: center;
740
1149
  color: var(--echo-ink-faint);
741
1150
  font-size: 11px;
742
1151
  }
1152
+ .extractionReady .ctaMeta:empty { display: none; }
1153
+ .extractionReady .ctaMeta .dataHandlingLink { font-size: inherit; }
1154
+ .extractionReady .readyFoot { order: 4; }
1155
+ .billingCommitmentSlot {
1156
+ display: none;
1157
+ order: 2;
1158
+ width: calc(100% - 72px);
1159
+ margin: 12px 0 0 72px;
1160
+ }
1161
+ .billingCommitmentSlot.is-visible { display: block; }
1162
+ .billingCommitment {
1163
+ display: flex;
1164
+ flex-wrap: wrap;
1165
+ gap: 4px 14px;
1166
+ align-items: baseline;
1167
+ border: 0;
1168
+ border-left: 3px solid #2c8f68;
1169
+ border-radius: 0;
1170
+ background: transparent;
1171
+ padding: 3px 0 3px 12px;
1172
+ box-shadow: none;
1173
+ text-align: left;
1174
+ }
1175
+ .billingCommitment.is-canceled {
1176
+ border-left-color: #c4942a;
1177
+ background: transparent;
1178
+ box-shadow: none;
1179
+ }
1180
+ .billingCommitmentIdentity { display: flex; gap: 7px; align-items: baseline; }
1181
+ .billingCommitmentIdentity span {
1182
+ color: var(--echo-ink-accent-deep);
1183
+ font: 800 9px/1 var(--echo-font-mono);
1184
+ letter-spacing: 0.1em;
1185
+ text-transform: uppercase;
1186
+ }
1187
+ .billingCommitmentIdentity strong { color: var(--echo-ink-text); font-size: 13px; }
1188
+ .billingCommitmentFacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--echo-ink-mute); font-size: 11px; }
1189
+ .billingCommitmentFacts b { color: var(--echo-ink-text); }
1190
+ .billingCommitment > p { flex-basis: 100%; margin: 0; color: var(--echo-ink-mute); font-size: 11px; font-weight: 600; line-height: 1.4; }
743
1191
  .extractionReady .readySettings {
744
1192
  display: flex;
745
- position: fixed;
746
- top: 18px;
747
- right: 22px;
748
- left: 22px;
749
- z-index: 20;
750
- width: auto;
751
- margin: 0;
1193
+ position: static;
1194
+ order: -2;
1195
+ z-index: auto;
1196
+ width: 100%;
1197
+ margin: 0 0 2px;
752
1198
  align-items: center;
753
- justify-content: space-between;
1199
+ justify-content: flex-end;
754
1200
  gap: 18px;
755
1201
  border: 0;
756
1202
  background: transparent;
@@ -762,10 +1208,10 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
762
1208
  gap: 7px;
763
1209
  border: 0;
764
1210
  border-radius: 999px;
765
- background: rgba(255,255,255,0.76);
766
- padding: 7px 10px 7px 12px;
767
- box-shadow: 0 6px 20px rgba(26,58,143,0.06);
768
- backdrop-filter: blur(12px);
1211
+ background: transparent;
1212
+ padding: 2px 0;
1213
+ box-shadow: none;
1214
+ backdrop-filter: none;
769
1215
  }
770
1216
  .extractionReady .readySettingLabel {
771
1217
  position: static;
@@ -796,6 +1242,17 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
796
1242
  .extractionReady .setupPlanConfirmedCopy span { display: none; }
797
1243
  .extractionReady .setupAccountCopy,
798
1244
  .extractionReady .setupPlanConfirmedCopy { flex: 0 1 auto; }
1245
+ .extractionReady .setupPlanConfirmed.has-lifecycle .setupPlanConfirmedCopy > span {
1246
+ display: block;
1247
+ max-width: 520px;
1248
+ margin-top: 3px;
1249
+ color: var(--echo-ink-mute);
1250
+ font-size: 11px;
1251
+ line-height: 1.35;
1252
+ }
1253
+ body:has(.billingCommitmentSlot.is-visible) .extractionReady .setupPlanConfirmed.has-lifecycle .setupPlanConfirmedCopy > span {
1254
+ display: none;
1255
+ }
799
1256
  .extractionReady .setupAccountCopy strong,
800
1257
  .extractionReady .setupPlanConfirmedCopy strong {
801
1258
  color: var(--echo-ink-mute);
@@ -808,11 +1265,16 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
808
1265
  font-size: 11px;
809
1266
  }
810
1267
  .extractionReady .readySettings.is-checkout-pending {
1268
+ top: 132px;
1269
+ right: auto;
1270
+ left: 50%;
1271
+ width: min(760px, calc(100vw - 44px));
811
1272
  align-items: flex-start;
1273
+ transform: translateX(-50%);
812
1274
  }
813
1275
  .extractionReady .readySettings.is-checkout-pending .readyPlanSetting {
814
1276
  display: block;
815
- width: min(680px, calc(100vw - 260px));
1277
+ width: 100%;
816
1278
  overflow: visible;
817
1279
  border: 0;
818
1280
  border-radius: 0;
@@ -835,56 +1297,59 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
835
1297
  }
836
1298
  .extractionReady .setupPlanCheckout {
837
1299
  display: grid;
838
- grid-template-columns: minmax(0, 1fr) auto;
839
- grid-template-rows: auto auto;
840
- column-gap: 18px;
841
- row-gap: 2px;
1300
+ grid-template-columns: 1fr;
1301
+ gap: 16px;
842
1302
  align-items: center;
843
1303
  margin: 0;
844
- overflow: hidden;
845
- border: 1px solid rgba(26,58,143,0.16);
846
- border-radius: 18px;
847
- background: rgba(255,255,255,0.94);
848
- padding: 13px 15px 12px 18px;
849
- box-shadow: 0 12px 32px rgba(26,58,143,0.12);
850
- backdrop-filter: blur(16px);
1304
+ overflow: visible;
1305
+ border: 0;
1306
+ border-radius: 0;
1307
+ background: transparent;
1308
+ padding: 0;
1309
+ box-shadow: none;
1310
+ backdrop-filter: none;
1311
+ }
1312
+ .setupPlanCheckout {
1313
+ width: min(760px, 100%);
1314
+ margin-inline: auto;
851
1315
  }
852
1316
  .extractionReady .setupPlanCheckout::before {
853
- display: block;
854
- position: absolute;
855
- inset: 0 auto 0 0;
856
- width: 4px;
857
- height: auto;
858
- background: var(--echo-ink-primary);
859
- opacity: 1;
1317
+ display: none;
860
1318
  }
861
1319
  .extractionReady .setupPlanCheckout .setupPlanIntro {
862
1320
  min-width: 0;
863
1321
  padding: 0;
864
1322
  }
865
1323
  .extractionReady .setupPlanCheckout .setupPlanIntro h3 {
866
- font-size: 16px;
1324
+ font-size: 25px;
867
1325
  line-height: 1.2;
868
1326
  letter-spacing: -0.01em;
869
1327
  }
870
1328
  .extractionReady .setupPlanCheckout .setupPlanIntro p {
871
- margin-top: 3px;
872
- font-size: 11px;
873
- line-height: 1.35;
1329
+ max-width: 620px;
1330
+ margin-top: 7px;
1331
+ font-size: 14px;
1332
+ line-height: 1.5;
874
1333
  }
875
- .extractionReady .setupPlanCheckout > .primary {
876
- grid-column: 2;
877
- grid-row: 1 / span 2;
878
- min-height: 42px;
879
- border-radius: 999px;
880
- padding: 0 18px;
881
- white-space: nowrap;
882
- box-shadow: 0 7px 18px rgba(26,58,143,0.18);
1334
+ .checkoutState { display: flex; align-items: center; gap: 8px; color: var(--echo-ink-primary); font: 800 11px/1 var(--echo-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
1335
+ .checkoutStateDot { width: 9px; height: 9px; border-radius: 50%; background: #e2ad34; box-shadow: 0 0 0 5px rgba(226,173,52,0.14); }
1336
+ .checkoutCommitment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
1337
+ .checkoutCommitment > div { border: 0; border-radius: 12px; background: rgba(247,249,255,0.82); padding: 11px 12px; }
1338
+ .checkoutCommitment dt { color: var(--echo-ink-faint); font: 800 9px/1 var(--echo-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
1339
+ .checkoutCommitment dd { margin: 6px 0 0; color: var(--echo-ink-text); font-size: 14px; font-weight: 800; }
1340
+ .checkoutActions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
1341
+ .checkoutActions button { min-height: 48px; border-radius: 999px; }
1342
+ .checkoutActions .secondary { border: 1px solid rgba(26,58,143,0.18); background: white; color: var(--echo-ink-primary); box-shadow: none; }
1343
+ .checkoutPollStatus { margin: -4px 0 0; color: var(--echo-ink-mute); font-size: 12px; }
1344
+ .checkoutPollStatus::before { content: "↻"; margin-right: 6px; color: var(--echo-ink-primary); font-weight: 900; }
1345
+ .extractionReady .setupPlanCheckout .dataHandlingLink {
1346
+ font-size: 10px;
1347
+ font-weight: 700;
883
1348
  }
884
1349
  .extractionReady .setupPlanCheckout .setupPlanFoot {
885
- justify-content: flex-start;
886
- gap: 8px;
887
- margin-top: 1px;
1350
+ justify-content: space-between;
1351
+ gap: 12px;
1352
+ margin-top: 0;
888
1353
  }
889
1354
  .extractionReady .setupPlanCheckout .setupPlanFoot .textButton {
890
1355
  min-height: 0;
@@ -906,11 +1371,14 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
906
1371
  .extractionReady .readyExplain { text-align: center; }
907
1372
  .extractionReady .readyExplain > p,
908
1373
  .extractionReady .readySteps { display: none; }
1374
+ .extractionReady .readyExplain > .readyDataLink { display: block; }
909
1375
 
910
1376
  /* Session review is a full canvas, not a floating legacy card ---------- */
911
1377
  .sessionPicker {
912
- width: 100vw;
913
- max-width: none;
1378
+ /* Percentage width follows the viewport's layout area, excluding classic
1379
+ scrollbars on Linux. 100vw includes that scrollbar and overflows. */
1380
+ width: 100%;
1381
+ max-width: 100%;
914
1382
  height: 100vh;
915
1383
  max-height: none;
916
1384
  margin: 0;
@@ -943,6 +1411,34 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
943
1411
  letter-spacing: -0.06em;
944
1412
  }
945
1413
  .sessionPickerHead p { margin-top: 12px; font-size: 14px; }
1414
+ .sessionPickerSummary {
1415
+ display: flex;
1416
+ flex-wrap: wrap;
1417
+ align-items: center;
1418
+ gap: 8px;
1419
+ }
1420
+ .sessionPickerQuota strong {
1421
+ color: var(--echo-ink-text);
1422
+ font-weight: 750;
1423
+ }
1424
+ .sessionPickerUpgrade {
1425
+ display: inline-flex;
1426
+ min-height: 30px;
1427
+ align-items: center;
1428
+ justify-content: center;
1429
+ border: 1px solid rgba(26,58,143,0.22);
1430
+ border-radius: 999px;
1431
+ background: rgba(255,255,255,0.78);
1432
+ padding: 0 12px;
1433
+ color: var(--echo-ink-primary);
1434
+ font-size: 12px;
1435
+ font-weight: 750;
1436
+ line-height: 1;
1437
+ text-decoration: none;
1438
+ box-shadow: 0 4px 12px rgba(26,58,143,0.07);
1439
+ }
1440
+ .sessionPickerUpgrade:hover { background: var(--echo-paper-white); }
1441
+ .sessionPickerOrder { color: var(--echo-ink-faint); }
946
1442
  .sessionPickerClose {
947
1443
  border: 0;
948
1444
  background: rgba(255,255,255,0.72);
@@ -1032,8 +1528,96 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
1032
1528
  box-shadow: none;
1033
1529
  }
1034
1530
  .exHeroActive .extractEndRow { border: 0; background: transparent; padding: 0; }
1531
+ .exActivity {
1532
+ margin: 0;
1533
+ color: var(--echo-ink-mute);
1534
+ font-size: 13px;
1535
+ line-height: 1.45;
1536
+ }
1537
+ .resultSummary {
1538
+ margin: 18px 0 0;
1539
+ color: var(--echo-ink-mute);
1540
+ font: 700 12px/1.5 var(--echo-font-mono);
1541
+ }
1542
+
1543
+ .recallPromptPrimary {
1544
+ margin-top: 24px;
1545
+ border: 0;
1546
+ background: color-mix(in srgb, var(--echo-paper-white) 86%, var(--echo-note-blue) 14%);
1547
+ box-shadow: none;
1548
+ }
1549
+ .recallAgentPrimary {
1550
+ min-width: 180px;
1551
+ border-color: var(--echo-ink-primary);
1552
+ background: var(--echo-ink-primary);
1553
+ color: white;
1554
+ }
1555
+ .recallMore {
1556
+ margin-top: 18px;
1557
+ border-top: 1px solid var(--echo-line-soft);
1558
+ padding-top: 14px;
1559
+ }
1560
+ .recallMore > summary {
1561
+ width: fit-content;
1562
+ color: var(--echo-ink-mute);
1563
+ font: 700 11px/1.4 var(--echo-font-mono);
1564
+ cursor: pointer;
1565
+ }
1566
+ .recallMore .recallPromptList { margin-top: 14px; }
1567
+ .tryCard.is-recalled {
1568
+ border-color: rgba(44,143,104,0.42);
1569
+ border-left-color: #257b59;
1570
+ background: color-mix(in srgb, var(--echo-paper-white) 90%, #e7f5ed 10%);
1571
+ }
1572
+ .tryCard.is-recalled .launchStatus {
1573
+ color: #257b59;
1574
+ font-weight: 750;
1575
+ }
1576
+ .audit-memory-bridge {
1577
+ max-width: 680px;
1578
+ margin: 0 auto 22px;
1579
+ color: var(--echo-ink-mute);
1580
+ font-size: 15px;
1581
+ line-height: 1.55;
1582
+ }
1583
+ .resultTop { border-top: 0; padding-top: 0; }
1584
+ .tryCard,
1585
+ .tryCard.is-recalled {
1586
+ max-width: none;
1587
+ border: 0;
1588
+ border-radius: 0;
1589
+ background: transparent;
1590
+ padding: 0;
1591
+ box-shadow: none;
1592
+ }
1593
+ .lifecycleState { align-self: start; width: min(760px, 100%); margin: 0 auto; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
1594
+ .lifecycleStatus { display: flex; align-items: center; gap: 9px; color: var(--echo-ink-primary); font: 800 10px/1 var(--echo-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
1595
+ .lifecycleStatus > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--echo-note-blue); }
1596
+ .lifecycleStatus .setupGlyph { width: 18px; height: 18px; }
1597
+ .lifecycleState > h2,
1598
+ .lifecycleIntro h2 { max-width: 650px; margin: 0; color: var(--echo-ink-text); font-size: clamp(34px, 4vw, 48px); font-weight: 650; line-height: 1.02; letter-spacing: -0.045em; }
1599
+ .lifecycleIntro { border-bottom: 0; padding-bottom: 0; }
1600
+ .lifecycleState > p,
1601
+ .lifecycleIntro > p:last-child { margin: 15px 0 0; max-width: 630px; color: var(--echo-ink-mute); font-size: 15px; line-height: 1.55; }
1602
+ .lifecycleIntro .utilityEyebrow { margin-top: 22px; }
1603
+ .lifecycleFacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
1604
+ .lifecycleFacts > span { border: 1px solid rgba(26,58,143,0.10); border-radius: 12px; background: var(--echo-paper-soft); padding: 11px 12px; }
1605
+ .lifecycleFacts small,
1606
+ .lifecycleFacts strong { display: block; }
1607
+ .lifecycleFacts small { color: var(--echo-ink-faint); font: 800 8px/1 var(--echo-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
1608
+ .lifecycleFacts strong { margin-top: 6px; color: var(--echo-ink-text); font-size: 13px; }
1609
+ .lifecyclePaused .tryCard { width: 100%; max-width: none; margin-top: 20px; }
1610
+ .lifecyclePaused .tryCard > .tryTitle { font-size: clamp(30px, 3.4vw, 42px); }
1611
+ .lifecycleResume { display: block; margin-top: 16px; border-top: 0; padding-top: 0; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.5; }
1612
+ .lifecycleResume strong { color: var(--echo-ink-text); font-size: 13px; }
1035
1613
 
1036
1614
  @media (max-width: 860px) {
1615
+ .mvpConsentHero { grid-template-columns: 1fr; }
1616
+ .mvpConsentPitch { text-align: center; }
1617
+ .mvpConsentPitch .mvpKicker { margin-inline: auto; }
1618
+ .mvpConsentPitch .mvpConsentIntro { margin-right: auto; margin-left: auto; }
1619
+ .mvpTrustCard { grid-template-columns: 38px minmax(0, 1fr); }
1620
+ .mvpTrustCard .dataHandlingLink { grid-column: 2; }
1037
1621
  .mvpPlanHabitat {
1038
1622
  grid-template-columns: 1fr;
1039
1623
  min-height: 0;
@@ -1044,7 +1628,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
1044
1628
  .mvpHabitatEcho { width: min(66%, 360px); }
1045
1629
  .extractionReady .readySettings { flex-direction: column; gap: 9px; }
1046
1630
  body.readyMode:has(.readySettings.is-checkout-pending) main {
1047
- padding-top: 190px;
1631
+ padding-top: 520px;
1048
1632
  }
1049
1633
  .extractionReady .readySettings.is-checkout-pending .readyAccountSetting { display: none; }
1050
1634
  .extractionReady .readySettings.is-checkout-pending .readyPlanSetting { width: 100%; }
@@ -1052,11 +1636,8 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
1052
1636
  grid-template-columns: 1fr;
1053
1637
  gap: 9px;
1054
1638
  }
1055
- .extractionReady .setupPlanCheckout > .primary {
1056
- grid-column: 1;
1057
- grid-row: auto;
1058
- width: 100%;
1059
- }
1639
+ .checkoutCommitment,
1640
+ .checkoutActions { grid-template-columns: 1fr; }
1060
1641
  .exHero.exHeroActive { grid-template-columns: 1fr; }
1061
1642
  .exHeroActive .exPlate { min-height: 440px; }
1062
1643
  }
@@ -1064,6 +1645,15 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
1064
1645
  body.readyMode main,
1065
1646
  body.scanMode main,
1066
1647
  body.extractMode main { padding: 22px 14px 38px; }
1648
+ .setupJourney { margin-bottom: 24px; }
1649
+ .mvpConsentFooter { align-items: stretch; flex-direction: column; }
1650
+ .mvpConsentFooter .mvpQuiet { align-self: flex-start; }
1651
+ .lifecycleFacts { grid-template-columns: 1fr; }
1652
+ .setupJourneyStep > b { font-size: 7px; letter-spacing: 0; }
1653
+ .setupJourneyStep:not(:last-child)::after {
1654
+ left: calc(50% + 14px);
1655
+ width: calc(100% - 28px);
1656
+ }
1067
1657
  .mvpConsent h2 { font-size: 42px; }
1068
1658
  .mvpPricingIntro h2 { font-size: 3.5rem; }
1069
1659
  .mvpPlanTabs { margin-bottom: 16px; }
@@ -1072,7 +1662,17 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
1072
1662
  .mvpHabitatScene { min-height: 310px; }
1073
1663
  .mvpHabitatDetails h3 { font-size: 3.25rem; }
1074
1664
  .mvpPlanPrice strong { font-size: 48px; }
1075
- .extractionReady .readyHero .exCopy h2 { font-size: 3.5rem; }
1665
+ .extractionReady .readyHero {
1666
+ grid-template-columns: 44px minmax(0, 1fr);
1667
+ gap: 12px;
1668
+ }
1669
+ .extractionReady .readyMascot { width: 44px; }
1670
+ .extractionReady .readyHero .exCopy h2 { font-size: 40px; }
1671
+ .extractionReady .proofStrip,
1672
+ .billingCommitmentSlot {
1673
+ width: 100%;
1674
+ margin-left: 0;
1675
+ }
1076
1676
  .sessionPickerShell { width: calc(100% - 18px); }
1077
1677
  .sessionPickerHead h2 { font-size: 42px; }
1078
1678
  }