@echomem/mcp 1.4.26 → 1.4.27

package/dist/setup-page/styles-mvp.js

@@ -14,7 +14,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       width: 100%;
       min-height: 100vh;
       margin: 0;
-      padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 64px);
+      padding: clamp(16px, 2.4vw, 34px) clamp(18px, 5vw, 64px) clamp(38px, 6vw, 72px);
     }
     main > header { display: none; }
     #app.state { color: transparent; }
@@ -25,25 +25,93 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       min-height: calc(100vh - clamp(56px, 10vw, 128px));
     }
 
-    /* Permission ------------------------------------------------------------ */
-    .mvpConsentStage {
-      display: grid !important;
+    /* One calm map across local scan, account/Stripe, import, and first value. */
+    .setupJourney {
+      width: min(760px, 100%);
+      margin: 0 auto clamp(16px, 2.4vw, 26px);
+      color: var(--echo-ink-faint);
+    }
+    .setupJourney ol {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    .setupJourneyStep {
+      position: relative;
+      display: grid;
+      justify-items: center;
+      gap: 7px;
+      min-width: 0;
+      text-align: center;
+    }
+    .setupJourneyStep:not(:last-child)::after {
+      content: "";
+      position: absolute;
+      z-index: 0;
+      top: 13px;
+      left: calc(50% + 17px);
+      width: calc(100% - 34px);
+      height: 1px;
+      background: rgba(26,58,143,0.16);
+    }
+    .setupJourneyStep > span {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      width: 27px;
+      height: 27px;
       place-items: center;
+      border: 1px solid rgba(26,58,143,0.20);
+      border-radius: 50%;
+      background: var(--echo-paper-canvas);
+      font: 750 10px/1 var(--echo-font-mono);
     }
-    .mvpConsent {
-      display: flex;
-      width: min(620px, 100%);
+    .setupJourneyStep > span .setupGlyph { width: 15px; height: 15px; }
+    .setupJourneyStep > b {
+      overflow: hidden;
+      max-width: 100%;
+      font: 700 9px/1.2 var(--echo-font-mono);
+      letter-spacing: 0.06em;
+      text-overflow: ellipsis;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+    .setupJourneyStep.is-complete,
+    .setupJourneyStep.is-current { color: var(--echo-ink-primary); }
+    .setupJourneyStep.is-complete > span {
+      border-color: rgba(44,143,104,0.34);
+      background: rgba(44,143,104,0.12);
+      color: #257b59;
+    }
+    .setupJourneyStep.is-current > span {
+      border-color: var(--echo-ink-primary);
+      background: var(--echo-ink-primary);
+      box-shadow: 0 0 0 4px rgba(26,58,143,0.09);
+      color: white;
+    }
+    body.cityMode .setupJourney {
+      margin-top: 26px;
+      margin-bottom: 8px;
+      padding-inline: 18px;
+    }
+    body.readyMode #app:has(.readyDecision.extractionReady) {
+      padding-top: 124px;
+    }
+
+    /* Permission ------------------------------------------------------------ */
+    .mvpConsentStage {
+      display: flex !important;
       flex-direction: column;
       align-items: center;
-      color: var(--echo-ink-text);
-      text-align: center;
-    }
-    .mvpConsentEcho {
-      width: clamp(82px, 9vw, 112px);
-      height: auto;
-      margin-bottom: 30px;
-      filter: drop-shadow(0 18px 22px rgba(26,58,143,0.18));
+      justify-content: flex-start;
     }
+    .mvpConsent { display: grid; width: min(720px, 100%); gap: 18px; color: var(--echo-ink-text); text-align: center; }
+    .mvpConsentHero { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+    .mvpConsentPitch { min-width: 0; }
+    .mvpConsentEcho { width: 86px; height: auto; flex: 0 0 auto; margin: 0; filter: drop-shadow(0 12px 18px rgba(26,58,143,0.16)); }
     .mvpKicker {
       margin: 0;
       color: var(--echo-ink-seal);
@@ -52,27 +120,59 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       text-transform: uppercase;
     }
     .mvpConsent h2 {
-      max-width: 560px;
-      margin: 20px 0 0;
+      max-width: 660px;
+      margin: 12px auto 0;
       color: var(--echo-ink-text);
-      font-size: clamp(42px, 4.3vw, 58px);
-      font-weight: 500;
-      line-height: 0.96;
+      font-size: clamp(40px, 4.2vw, 56px);
+      font-weight: 600;
+      line-height: 0.98;
       letter-spacing: -0.06em;
     }
     .mvpConsentIntro {
-      max-width: 490px;
-      margin: 38px 0 0;
+      max-width: 590px;
+      margin: 13px auto 0;
       color: var(--echo-ink-mute);
-      font-size: clamp(16px, 2vw, 19px);
-      line-height: 1.6;
+      font-size: clamp(15px, 1.5vw, 17px);
+      line-height: 1.55;
     }
-    .mvpPrivacy {
-      margin: 22px 0 0;
-      color: var(--echo-ink-faint);
+    .mvpConsentTrustLine {
+      margin: 0;
+      color: var(--echo-ink-mute);
       font-size: 13px;
-      line-height: 1.45;
+      line-height: 1.5;
+      text-align: center;
     }
+    .mvpConsentTrustLine strong { color: var(--echo-ink-text); }
+    .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); }
+    .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; }
+    .mvpReportPreview header span,
+    .mvpReportPreview header small,
+    .mvpReportPreview header strong,
+    .mvpPreviewRow span,
+    .mvpPreviewRow small,
+    .mvpPreviewRow strong { display: block; }
+    .mvpReportPreview header small { color: var(--echo-ink-primary); font: 800 9px/1 var(--echo-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
+    .mvpReportPreview header strong { margin-top: 5px; color: var(--echo-ink-text); font-size: 15px; }
+    .mvpPreviewRow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 15px; }
+    .mvpPreviewRow + .mvpPreviewRow { border-top: 1px solid rgba(26,58,143,0.08); }
+    .mvpPreviewRow .setupGlyph { width: 19px; height: 19px; color: #2c8f68; }
+    .mvpPreviewRow strong { color: var(--echo-ink-text); font-size: 13px; }
+    .mvpPreviewRow small { margin-top: 2px; color: var(--echo-ink-mute); font-size: 11px; line-height: 1.35; }
+    .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; }
+    .mvpTrustIcon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(44,143,104,0.13); color: #257b59; }
+    .mvpTrustIcon .setupGlyph { width: 21px; height: 21px; }
+    .mvpTrustCard > span:nth-child(2),
+    .mvpTrustCard strong,
+    .mvpTrustCard small { display: block; }
+    .mvpTrustCard strong { color: var(--echo-ink-text); font-size: 13px; }
+    .mvpTrustCard small { margin-top: 3px; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.4; }
+    .mvpTrustCard .dataHandlingLink { font-size: 11px; white-space: nowrap; }
+    .mvpNextPromise { margin: 0; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.45; text-align: center; }
+    .mvpNextPromise strong { color: var(--echo-ink-primary); }
+    .mvpConsentFooter { display: flex; align-items: center; justify-content: center; gap: 18px; }
+    .mvpReadScope { max-width: 660px; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.5; }
+    .mvpReadScope summary { color: var(--echo-ink-primary); font-weight: 800; cursor: pointer; }
+    .mvpReadScope p { margin: 8px 0 0; }
     .mvpConsentCheck {
       display: flex;
       max-width: 520px;
@@ -94,9 +194,9 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .mvpPrimary {
       display: flex;
-      width: min(500px, 100%);
+      width: min(620px, 100%);
       min-height: 58px;
-      margin-top: 46px;
+      margin: 0 auto;
       padding: 0 24px;
       align-items: center;
       justify-content: space-between;
@@ -115,7 +215,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     .mvpQuiet {
       display: block;
       width: fit-content;
-      margin: 30px auto 0;
+      margin: 0;
       border: 0;
       background: transparent;
       color: var(--echo-ink-mute);
@@ -130,6 +230,19 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       margin: 14px 0 0;
       color: var(--echo-ink-seal);
       font-size: 13px;
+      text-align: center;
+    }
+    .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); }
+    .dataHandlingLink {
+      color: var(--echo-ink-primary);
+      font-weight: 700;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    .localAuthDataLink,
+    .readyDataLink {
+      margin: 10px 0 0;
+      font-size: 12px;
     }
 
     /* Local auth follows the public login surface ------------------------- */
@@ -138,9 +251,32 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .localAuthStage,
     .localAuthWelcomeStage {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
       width: 100%;
       min-height: calc(100vh - clamp(56px, 10vw, 128px));
     }
+    .localAuthWelcomeStage .localAuthWelcome { margin-block: auto; }
+    body.readyMode #app.localAuthEmailStage {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    .localAuthWelcomeStage.localAuthEmailStage .localAuthWelcome {
+      margin: clamp(36px, 7vh, 64px) auto 0;
+    }
+    body.readyMode #app.localAuthPassphraseStage {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    .localAuthWelcomeStage.localAuthPassphraseStage .localAuthWelcome {
+      margin: clamp(24px, 5vh, 48px) auto 0;
+    }
     .localAuthWelcome {
       width: min(440px, 100%);
       gap: 14px;
@@ -185,13 +321,19 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .localAuthEmailCapsule {
       min-height: 54px;
-      grid-template-columns: minmax(0, 1fr) 44px;
+      grid-template-columns: minmax(0, 1fr) auto;
       padding: 5px 6px 5px 18px;
     }
     .localAuthEmailCapsule button {
-      width: 42px;
+      width: auto;
+      min-width: 126px;
       height: 42px;
-      font-size: 20px;
+      padding: 0 16px;
+      gap: 8px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 750;
+      white-space: nowrap;
     }
     .localAuthSpinner {
       width: 15px;
@@ -262,6 +404,80 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       justify-self: center;
       text-align: center;
     }
+    .localAuthVaultDeferNote {
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: 12px;
+      line-height: 1.45;
+      text-align: center;
+    }
+    .localAuthTextAction {
+      justify-self: center;
+      min-height: 36px;
+      padding: 0 8px;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+      color: var(--echo-blue);
+      font-size: 13px;
+      font-weight: 750;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    .localAuthTextAction:hover:not(:disabled) {
+      background: transparent;
+      box-shadow: none;
+      transform: none;
+    }
+    .localAuthRestartAction {
+      color: var(--echo-ink-mute);
+      font-weight: 650;
+    }
+    .localAuthDeferred {
+      min-height: 280px;
+      align-content: center;
+    }
+    .accountSwitchStage {
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+    }
+    .accountSwitchConfirm {
+      display: grid;
+      width: min(520px, 100%);
+      gap: 18px;
+      color: var(--echo-ink-text);
+    }
+    .accountSwitchConfirm h2 {
+      margin: 0;
+      font-size: clamp(42px, 5vw, 58px);
+      font-weight: 650;
+      line-height: 1;
+      letter-spacing: -0.045em;
+    }
+    .accountSwitchConfirm > p {
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      line-height: 1.55;
+    }
+    .accountSwitchConfirm > p strong { color: var(--echo-ink-text); }
+    .accountSwitchConfirm > .primary {
+      width: 100%;
+      min-height: 54px;
+      border-radius: 999px;
+      justify-content: center;
+    }
+    .flowBack {
+      width: fit-content;
+      min-height: 36px;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+      color: var(--echo-ink-primary);
+      font-weight: 750;
+    }
 
     /* Reading --------------------------------------------------------------- */
     .scanLoading {
@@ -276,50 +492,79 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       color: var(--echo-ink-text);
       text-align: center;
     }
-    .mvpReadingAnimation {
-      width: 176px !important;
-      height: 176px !important;
+    .mvpReadingMascot {
+      display: block;
+      width: 150px;
+      height: 150px;
       margin: 0 auto 18px;
-      border: 0;
-      border-radius: 0;
-      background: transparent;
-      box-shadow: none;
-      transform: none;
-    }
-    .mvpReading .scanMascotFrames {
-      width: 100%;
-      height: 100%;
-    }
-    .mvpReading .scanMascotFrame {
+      object-fit: contain;
       filter: none;
-      animation-name: mvpScanFrame;
-      animation-timing-function: steps(1, end);
-    }
-    @keyframes mvpScanFrame {
-      0%, 14.28% { opacity: 1; visibility: visible; }
-      14.29%, 100% { opacity: 0; visibility: hidden; }
     }
     .mvpReading h2 {
       margin: 0;
       color: var(--echo-ink-primary);
       font: 650 38px/1.05 var(--echo-font-script), cursive;
     }
-    .mvpReading .scanCaption {
+    .mvpReadingCount {
+      min-height: 18px;
       margin: 13px 0 0;
-      color: var(--echo-ink-faint);
-      font: 500 12px/1.5 var(--echo-font-mono);
+      color: var(--echo-ink-mute);
+      font: 650 13px/1.4 var(--echo-font-mono);
+    }
+    .mvpReadingCount[hidden] {
+      display: block;
+      visibility: hidden;
     }
     .mvpReadingProgress {
       width: min(260px, 100%);
       height: 3px;
-      margin: 18px 0 0;
+      margin: 8px 0 0;
       background: rgba(26,58,143,0.12);
     }
+    .reportMessageStage {
+      display: flex !important;
+      justify-content: center;
+      color: var(--echo-ink-text);
+    }
+    .reportMessage {
+      width: min(620px, 100%);
+      padding-top: clamp(48px, 10vh, 112px);
+    }
+    .reportMessage h2 {
+      margin: 0;
+      font-size: clamp(42px, 5vw, 58px);
+      font-weight: 650;
+      line-height: 1;
+      letter-spacing: -0.045em;
+    }
+    .reportMessage p {
+      margin: 16px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 16px;
+      line-height: 1.55;
+    }
+    .reportMessage code {
+      color: var(--echo-ink-primary);
+      font-family: var(--echo-font-mono);
+    }
+    .reportTechnical {
+      width: fit-content;
+      margin-top: 22px;
+      color: var(--echo-ink-faint);
+      font: 650 11px/1.5 var(--echo-font-mono);
+    }
+    .reportTechnical summary {
+      cursor: pointer;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    .reportTechnical code { display: block; margin-top: 8px; }
 
     /* Pricing copied from the public Echo habitat -------------------------- */
     .planGateStage {
-      display: grid !important;
-      place-items: start center;
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
     }
     .planGateDecision {
       width: 100%;
@@ -332,7 +577,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     .mvpPricingIntro {
       display: block;
       width: min(960px, 100%);
-      margin: 20px auto 30px;
+      margin: 8px auto 22px;
       text-align: center;
     }
     .mvpPricingIntro > span {
@@ -342,9 +587,9 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       text-transform: uppercase;
     }
     .mvpPricingIntro h2 {
-      margin: 10px 0 0;
+      margin: 0;
       color: var(--echo-ink-text);
-      font-size: 4.6rem;
+      font-size: clamp(48px, 5vw, 64px);
       font-weight: 450;
       line-height: 0.92;
       letter-spacing: -0.07em;
@@ -401,10 +646,10 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       min-height: 410px;
       margin: 0 auto;
       overflow: hidden;
-      border: 1px solid color-mix(in srgb, var(--habitat-accent) 26%, white);
+      border: 0;
       border-radius: 34px;
       background: var(--habitat-bg);
-      box-shadow: 0 28px 60px rgba(28,40,72,0.14);
+      box-shadow: none;
     }
     .mvpPlanHabitat[data-plan="pro"] {
       --habitat-bg: #eaf1ff;
@@ -648,9 +893,11 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
 
     /* Found sessions: one message, one next action -------------------------- */
     .readyDecision.extractionReady {
+      display: flex;
+      flex-direction: column;
       overflow: visible;
-      width: min(920px, 100%);
-      padding-top: 58px;
+      width: min(760px, 100%);
+      padding-top: 8px;
       border: 0;
       border-radius: 0;
       background: transparent;
@@ -658,32 +905,39 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .readyDecision.extractionReady::before,
     .exHero::before { display: none; }
-    .extractionReady .readyEyebrow { display: none; }
+    .extractionReady .readyEyebrow {
+      display: block;
+      order: -1;
+      margin: 18px 0 8px;
+      text-align: left;
+    }
     .extractionReady .readyHero {
-      display: flex;
+      display: grid;
+      order: 0;
+      grid-template-columns: 54px minmax(0, 1fr);
       width: 100%;
-      padding: 14px 0 0;
-      flex-direction: column;
-      align-items: center;
-      gap: 16px;
+      padding: 0;
+      align-items: start;
+      gap: 18px;
       border: 0;
       background: transparent;
-      text-align: center;
+      text-align: left;
     }
     .extractionReady .readyMascot {
-      width: 82px;
+      width: 54px;
       height: auto;
-      filter: drop-shadow(0 16px 22px rgba(26,58,143,0.16));
+      margin-top: 4px;
+      filter: drop-shadow(0 10px 16px rgba(26,58,143,0.14));
     }
     .extractionReady .readyHero .exCopy h2 {
-      max-width: 760px;
+      max-width: 680px;
       color: var(--echo-ink-text) !important;
       -webkit-text-fill-color: var(--echo-ink-text);
       background: none;
-      font-size: 4rem;
-      font-weight: 450;
-      line-height: 0.92;
-      letter-spacing: -0.07em !important;
+      font-size: clamp(40px, 4.2vw, 54px);
+      font-weight: 500;
+      line-height: 0.98;
+      letter-spacing: -0.055em !important;
     }
     .extractionReady .readyHero .exCopy h2 strong {
       color: var(--echo-ink-primary);
@@ -691,25 +945,27 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       font-weight: 650;
     }
     .extractionReady .readyHero .exSub {
-      max-width: 590px;
-      margin: 18px auto 0;
-      font-size: 15px;
-      line-height: 1.5;
-      text-align: center;
+      max-width: 620px;
+      margin: 10px 0 0;
+      font-size: 14px;
+      line-height: 1.45;
+      text-align: left;
     }
     .extractionReady .proofStrip {
+      order: 1;
       width: fit-content;
-      min-height: 36px;
-      margin: 20px auto 0;
+      min-height: 30px;
+      margin: 14px 0 0 72px;
       border: 0;
       border-radius: 999px;
       background: rgba(255,255,255,0.65);
-      padding: 8px 14px;
-      box-shadow: 0 6px 20px rgba(26,58,143,0.07);
+      padding: 5px 10px;
+      box-shadow: none;
     }
     .extractionReady .readyGo {
-      width: min(560px, 100%);
-      margin: 24px auto 0;
+      order: 3;
+      width: 100%;
+      margin: 16px auto 0;
       padding: 0;
       justify-items: center;
       background: transparent;
@@ -721,36 +977,72 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .extractionReady .actions .primary {
       width: 100%;
-      min-height: 60px;
+      min-height: 54px;
       border: 0;
       border-radius: 999px;
       box-shadow: 0 8px 0 color-mix(in srgb, var(--echo-ink-primary) 77%, black);
       font-size: 17px;
     }
     .extractionReady .skipHistoryButton {
-      min-height: 44px !important;
+      min-height: 38px !important;
       border: 0;
       background: transparent;
       box-shadow: none;
       color: var(--echo-ink-mute);
     }
     .extractionReady .ctaMeta {
-      margin-top: 14px;
+      margin-top: 11px;
       justify-content: center;
       color: var(--echo-ink-faint);
       font-size: 11px;
     }
+    .extractionReady .ctaMeta .dataHandlingLink { font-size: inherit; }
+    .extractionReady .readyFoot { order: 4; }
+    .billingCommitmentSlot {
+      display: none;
+      order: 2;
+      width: calc(100% - 72px);
+      margin: 12px 0 0 72px;
+    }
+    .billingCommitmentSlot.is-visible { display: block; }
+    .billingCommitment {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 14px;
+      align-items: baseline;
+      border: 0;
+      border-left: 3px solid #2c8f68;
+      border-radius: 0;
+      background: transparent;
+      padding: 3px 0 3px 12px;
+      box-shadow: none;
+      text-align: left;
+    }
+    .billingCommitment.is-canceled {
+      border-left-color: #c4942a;
+      background: transparent;
+      box-shadow: none;
+    }
+    .billingCommitmentIdentity { display: flex; gap: 7px; align-items: baseline; }
+    .billingCommitmentIdentity span {
+      color: var(--echo-ink-accent-deep);
+      font: 800 9px/1 var(--echo-font-mono);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .billingCommitmentIdentity strong { color: var(--echo-ink-text); font-size: 13px; }
+    .billingCommitmentFacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--echo-ink-mute); font-size: 11px; }
+    .billingCommitmentFacts b { color: var(--echo-ink-text); }
+    .billingCommitment > p { flex-basis: 100%; margin: 0; color: var(--echo-ink-mute); font-size: 11px; font-weight: 600; line-height: 1.4; }
     .extractionReady .readySettings {
       display: flex;
-      position: fixed;
-      top: 18px;
-      right: 22px;
-      left: 22px;
-      z-index: 20;
-      width: auto;
-      margin: 0;
+      position: static;
+      order: -2;
+      z-index: auto;
+      width: 100%;
+      margin: 0 0 2px;
       align-items: center;
-      justify-content: space-between;
+      justify-content: flex-end;
       gap: 18px;
       border: 0;
       background: transparent;
@@ -762,10 +1054,10 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       gap: 7px;
       border: 0;
       border-radius: 999px;
-      background: rgba(255,255,255,0.76);
-      padding: 7px 10px 7px 12px;
-      box-shadow: 0 6px 20px rgba(26,58,143,0.06);
-      backdrop-filter: blur(12px);
+      background: transparent;
+      padding: 2px 0;
+      box-shadow: none;
+      backdrop-filter: none;
     }
     .extractionReady .readySettingLabel {
       position: static;
@@ -796,6 +1088,17 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     .extractionReady .setupPlanConfirmedCopy span { display: none; }
     .extractionReady .setupAccountCopy,
     .extractionReady .setupPlanConfirmedCopy { flex: 0 1 auto; }
+    .extractionReady .setupPlanConfirmed.has-lifecycle .setupPlanConfirmedCopy > span {
+      display: block;
+      max-width: 520px;
+      margin-top: 3px;
+      color: var(--echo-ink-mute);
+      font-size: 11px;
+      line-height: 1.35;
+    }
+    body:has(.billingCommitmentSlot.is-visible) .extractionReady .setupPlanConfirmed.has-lifecycle .setupPlanConfirmedCopy > span {
+      display: none;
+    }
     .extractionReady .setupAccountCopy strong,
     .extractionReady .setupPlanConfirmedCopy strong {
       color: var(--echo-ink-mute);
@@ -808,11 +1111,16 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       font-size: 11px;
     }
     .extractionReady .readySettings.is-checkout-pending {
+      top: 132px;
+      right: auto;
+      left: 50%;
+      width: min(760px, calc(100vw - 44px));
       align-items: flex-start;
+      transform: translateX(-50%);
     }
     .extractionReady .readySettings.is-checkout-pending .readyPlanSetting {
       display: block;
-      width: min(680px, calc(100vw - 260px));
+      width: 100%;
       overflow: visible;
       border: 0;
       border-radius: 0;
@@ -835,56 +1143,59 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     }
     .extractionReady .setupPlanCheckout {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      grid-template-rows: auto auto;
-      column-gap: 18px;
-      row-gap: 2px;
+      grid-template-columns: 1fr;
+      gap: 16px;
       align-items: center;
       margin: 0;
-      overflow: hidden;
-      border: 1px solid rgba(26,58,143,0.16);
-      border-radius: 18px;
-      background: rgba(255,255,255,0.94);
-      padding: 13px 15px 12px 18px;
-      box-shadow: 0 12px 32px rgba(26,58,143,0.12);
-      backdrop-filter: blur(16px);
+      overflow: visible;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .setupPlanCheckout {
+      width: min(760px, 100%);
+      margin-inline: auto;
     }
     .extractionReady .setupPlanCheckout::before {
-      display: block;
-      position: absolute;
-      inset: 0 auto 0 0;
-      width: 4px;
-      height: auto;
-      background: var(--echo-ink-primary);
-      opacity: 1;
+      display: none;
     }
     .extractionReady .setupPlanCheckout .setupPlanIntro {
       min-width: 0;
       padding: 0;
     }
     .extractionReady .setupPlanCheckout .setupPlanIntro h3 {
-      font-size: 16px;
+      font-size: 25px;
       line-height: 1.2;
       letter-spacing: -0.01em;
     }
     .extractionReady .setupPlanCheckout .setupPlanIntro p {
-      margin-top: 3px;
-      font-size: 11px;
-      line-height: 1.35;
+      max-width: 620px;
+      margin-top: 7px;
+      font-size: 14px;
+      line-height: 1.5;
     }
-    .extractionReady .setupPlanCheckout > .primary {
-      grid-column: 2;
-      grid-row: 1 / span 2;
-      min-height: 42px;
-      border-radius: 999px;
-      padding: 0 18px;
-      white-space: nowrap;
-      box-shadow: 0 7px 18px rgba(26,58,143,0.18);
+    .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; }
+    .checkoutStateDot { width: 9px; height: 9px; border-radius: 50%; background: #e2ad34; box-shadow: 0 0 0 5px rgba(226,173,52,0.14); }
+    .checkoutCommitment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
+    .checkoutCommitment > div { border: 0; border-radius: 12px; background: rgba(247,249,255,0.82); padding: 11px 12px; }
+    .checkoutCommitment dt { color: var(--echo-ink-faint); font: 800 9px/1 var(--echo-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
+    .checkoutCommitment dd { margin: 6px 0 0; color: var(--echo-ink-text); font-size: 14px; font-weight: 800; }
+    .checkoutActions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
+    .checkoutActions button { min-height: 48px; border-radius: 999px; }
+    .checkoutActions .secondary { border: 1px solid rgba(26,58,143,0.18); background: white; color: var(--echo-ink-primary); box-shadow: none; }
+    .checkoutPollStatus { margin: -4px 0 0; color: var(--echo-ink-mute); font-size: 12px; }
+    .checkoutPollStatus::before { content: "↻"; margin-right: 6px; color: var(--echo-ink-primary); font-weight: 900; }
+    .extractionReady .setupPlanCheckout .dataHandlingLink {
+      font-size: 10px;
+      font-weight: 700;
     }
     .extractionReady .setupPlanCheckout .setupPlanFoot {
-      justify-content: flex-start;
-      gap: 8px;
-      margin-top: 1px;
+      justify-content: space-between;
+      gap: 12px;
+      margin-top: 0;
     }
     .extractionReady .setupPlanCheckout .setupPlanFoot .textButton {
       min-height: 0;
@@ -906,11 +1217,14 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
     .extractionReady .readyExplain { text-align: center; }
     .extractionReady .readyExplain > p,
     .extractionReady .readySteps { display: none; }
+    .extractionReady .readyExplain > .readyDataLink { display: block; }
 
     /* Session review is a full canvas, not a floating legacy card ---------- */
     .sessionPicker {
-      width: 100vw;
-      max-width: none;
+      /* Percentage width follows the viewport's layout area, excluding classic
+         scrollbars on Linux. 100vw includes that scrollbar and overflows. */
+      width: 100%;
+      max-width: 100%;
       height: 100vh;
       max-height: none;
       margin: 0;
@@ -1032,8 +1346,96 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       box-shadow: none;
     }
     .exHeroActive .extractEndRow { border: 0; background: transparent; padding: 0; }
+    .exActivity {
+      margin: 0;
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .resultSummary {
+      margin: 18px 0 0;
+      color: var(--echo-ink-mute);
+      font: 700 12px/1.5 var(--echo-font-mono);
+    }
+
+    .recallPromptPrimary {
+      margin-top: 24px;
+      border: 0;
+      background: color-mix(in srgb, var(--echo-paper-white) 86%, var(--echo-note-blue) 14%);
+      box-shadow: none;
+    }
+    .recallAgentPrimary {
+      min-width: 180px;
+      border-color: var(--echo-ink-primary);
+      background: var(--echo-ink-primary);
+      color: white;
+    }
+    .recallMore {
+      margin-top: 18px;
+      border-top: 1px solid var(--echo-line-soft);
+      padding-top: 14px;
+    }
+    .recallMore > summary {
+      width: fit-content;
+      color: var(--echo-ink-mute);
+      font: 700 11px/1.4 var(--echo-font-mono);
+      cursor: pointer;
+    }
+    .recallMore .recallPromptList { margin-top: 14px; }
+    .tryCard.is-recalled {
+      border-color: rgba(44,143,104,0.42);
+      border-left-color: #257b59;
+      background: color-mix(in srgb, var(--echo-paper-white) 90%, #e7f5ed 10%);
+    }
+    .tryCard.is-recalled .launchStatus {
+      color: #257b59;
+      font-weight: 750;
+    }
+    .audit-memory-bridge {
+      max-width: 680px;
+      margin: 0 auto 22px;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+      line-height: 1.55;
+    }
+    .resultTop { border-top: 0; padding-top: 0; }
+    .tryCard,
+    .tryCard.is-recalled {
+      max-width: none;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+    }
+    .lifecycleState { align-self: start; width: min(760px, 100%); margin: 0 auto; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
+    .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; }
+    .lifecycleStatus > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--echo-note-blue); }
+    .lifecycleStatus .setupGlyph { width: 18px; height: 18px; }
+    .lifecycleState > h2,
+    .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; }
+    .lifecycleIntro { border-bottom: 0; padding-bottom: 0; }
+    .lifecycleState > p,
+    .lifecycleIntro > p:last-child { margin: 15px 0 0; max-width: 630px; color: var(--echo-ink-mute); font-size: 15px; line-height: 1.55; }
+    .lifecycleIntro .utilityEyebrow { margin-top: 22px; }
+    .lifecycleFacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
+    .lifecycleFacts > span { border: 1px solid rgba(26,58,143,0.10); border-radius: 12px; background: var(--echo-paper-soft); padding: 11px 12px; }
+    .lifecycleFacts small,
+    .lifecycleFacts strong { display: block; }
+    .lifecycleFacts small { color: var(--echo-ink-faint); font: 800 8px/1 var(--echo-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
+    .lifecycleFacts strong { margin-top: 6px; color: var(--echo-ink-text); font-size: 13px; }
+    .lifecyclePaused .tryCard { width: 100%; max-width: none; margin-top: 20px; }
+    .lifecyclePaused .tryCard > .tryTitle { font-size: clamp(30px, 3.4vw, 42px); }
+    .lifecycleResume { display: block; margin-top: 16px; border-top: 0; padding-top: 0; color: var(--echo-ink-mute); font-size: 12px; line-height: 1.5; }
+    .lifecycleResume strong { color: var(--echo-ink-text); font-size: 13px; }
 
     @media (max-width: 860px) {
+      .mvpConsentHero { grid-template-columns: 1fr; }
+      .mvpConsentPitch { text-align: center; }
+      .mvpConsentPitch .mvpKicker { margin-inline: auto; }
+      .mvpConsentPitch .mvpConsentIntro { margin-right: auto; margin-left: auto; }
+      .mvpTrustCard { grid-template-columns: 38px minmax(0, 1fr); }
+      .mvpTrustCard .dataHandlingLink { grid-column: 2; }
       .mvpPlanHabitat {
         grid-template-columns: 1fr;
         min-height: 0;
@@ -1044,7 +1446,7 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       .mvpHabitatEcho { width: min(66%, 360px); }
       .extractionReady .readySettings { flex-direction: column; gap: 9px; }
       body.readyMode:has(.readySettings.is-checkout-pending) main {
-        padding-top: 190px;
+        padding-top: 520px;
       }
       .extractionReady .readySettings.is-checkout-pending .readyAccountSetting { display: none; }
       .extractionReady .readySettings.is-checkout-pending .readyPlanSetting { width: 100%; }
@@ -1052,11 +1454,8 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
         grid-template-columns: 1fr;
         gap: 9px;
       }
-      .extractionReady .setupPlanCheckout > .primary {
-        grid-column: 1;
-        grid-row: auto;
-        width: 100%;
-      }
+      .checkoutCommitment,
+      .checkoutActions { grid-template-columns: 1fr; }
       .exHero.exHeroActive { grid-template-columns: 1fr; }
       .exHeroActive .exPlate { min-height: 440px; }
     }
@@ -1064,6 +1463,15 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       body.readyMode main,
       body.scanMode main,
       body.extractMode main { padding: 22px 14px 38px; }
+      .setupJourney { margin-bottom: 24px; }
+      .mvpConsentFooter { align-items: stretch; flex-direction: column; }
+      .mvpConsentFooter .mvpQuiet { align-self: flex-start; }
+      .lifecycleFacts { grid-template-columns: 1fr; }
+      .setupJourneyStep > b { font-size: 7px; letter-spacing: 0; }
+      .setupJourneyStep:not(:last-child)::after {
+        left: calc(50% + 14px);
+        width: calc(100% - 28px);
+      }
       .mvpConsent h2 { font-size: 42px; }
       .mvpPricingIntro h2 { font-size: 3.5rem; }
       .mvpPlanTabs { margin-bottom: 16px; }
@@ -1072,7 +1480,17 @@ export const SETUP_PAGE_STYLES_MVP = String.raw `
       .mvpHabitatScene { min-height: 310px; }
       .mvpHabitatDetails h3 { font-size: 3.25rem; }
       .mvpPlanPrice strong { font-size: 48px; }
-      .extractionReady .readyHero .exCopy h2 { font-size: 3.5rem; }
+      .extractionReady .readyHero {
+        grid-template-columns: 44px minmax(0, 1fr);
+        gap: 12px;
+      }
+      .extractionReady .readyMascot { width: 44px; }
+      .extractionReady .readyHero .exCopy h2 { font-size: 40px; }
+      .extractionReady .proofStrip,
+      .billingCommitmentSlot {
+        width: 100%;
+        margin-left: 0;
+      }
       .sessionPickerShell { width: calc(100% - 18px); }
       .sessionPickerHead h2 { font-size: 42px; }
     }