@echomem/mcp 1.4.21 → 1.4.23

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

@@ -0,0 +1,1079 @@
+// Final MVP onboarding layer. It deliberately mirrors the public Echo pricing,
+// login, and report surfaces instead of introducing another local-only design system.
+export const SETUP_PAGE_STYLES_MVP = String.raw `
+    body.readyMode,
+    body.scanMode,
+    body.extractMode {
+      background:
+        radial-gradient(circle, rgba(26,58,143,0.12) 0 1.2px, transparent 1.5px) 0 0 / 22px 22px,
+        var(--echo-paper-canvas);
+    }
+    body.readyMode main,
+    body.scanMode main,
+    body.extractMode main {
+      width: 100%;
+      min-height: 100vh;
+      margin: 0;
+      padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 64px);
+    }
+    main > header { display: none; }
+    #app.state { color: transparent; }
+    body.readyMode #app,
+    body.scanMode #app,
+    body.extractMode #app {
+      width: 100%;
+      min-height: calc(100vh - clamp(56px, 10vw, 128px));
+    }
+
+    /* Permission ------------------------------------------------------------ */
+    .mvpConsentStage {
+      display: grid !important;
+      place-items: center;
+    }
+    .mvpConsent {
+      display: flex;
+      width: min(620px, 100%);
+      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));
+    }
+    .mvpKicker {
+      margin: 0;
+      color: var(--echo-ink-seal);
+      font: 700 10px/1 var(--echo-font-mono);
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+    }
+    .mvpConsent h2 {
+      max-width: 560px;
+      margin: 20px 0 0;
+      color: var(--echo-ink-text);
+      font-size: clamp(42px, 4.3vw, 58px);
+      font-weight: 500;
+      line-height: 0.96;
+      letter-spacing: -0.06em;
+    }
+    .mvpConsentIntro {
+      max-width: 490px;
+      margin: 38px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: clamp(16px, 2vw, 19px);
+      line-height: 1.6;
+    }
+    .mvpPrivacy {
+      margin: 22px 0 0;
+      color: var(--echo-ink-faint);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .mvpConsentCheck {
+      display: flex;
+      max-width: 520px;
+      margin: 30px 0 0;
+      align-items: flex-start;
+      gap: 11px;
+      color: var(--echo-ink-mute);
+      font-size: 14px;
+      line-height: 1.4;
+      text-align: left;
+      cursor: pointer;
+    }
+    .mvpConsentCheck input {
+      width: 19px;
+      height: 19px;
+      margin: 0;
+      flex: 0 0 19px;
+      accent-color: var(--echo-ink-primary);
+    }
+    .mvpPrimary {
+      display: flex;
+      width: min(500px, 100%);
+      min-height: 58px;
+      margin-top: 46px;
+      padding: 0 24px;
+      align-items: center;
+      justify-content: space-between;
+      border: 0;
+      border-radius: 999px;
+      background: var(--echo-ink-primary);
+      box-shadow: 0 7px 0 color-mix(in srgb, var(--echo-ink-primary) 77%, black);
+      color: white;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .mvpPrimary:disabled {
+      box-shadow: 0 5px 0 #aeb3c6;
+      opacity: 0.48;
+    }
+    .mvpQuiet {
+      display: block;
+      width: fit-content;
+      margin: 30px auto 0;
+      border: 0;
+      background: transparent;
+      color: var(--echo-ink-mute);
+      box-shadow: none;
+      font-size: 15px;
+      font-weight: 700;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    .mvpConsent .consentFine {
+      min-height: 20px;
+      margin: 14px 0 0;
+      color: var(--echo-ink-seal);
+      font-size: 13px;
+    }
+
+    /* Local auth follows the public login surface ------------------------- */
+    body.readyMode:has(.localAuthWelcome) {
+      background: var(--echo-paper-canvas);
+    }
+    .localAuthStage,
+    .localAuthWelcomeStage {
+      width: 100%;
+      min-height: calc(100vh - clamp(56px, 10vw, 128px));
+    }
+    .localAuthWelcome {
+      width: min(440px, 100%);
+      gap: 14px;
+    }
+    .localAuthWelcome .srOnly {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    .localAuthOrbScene {
+      width: 96px;
+      height: 112px;
+      margin-bottom: 8px;
+    }
+    .localAuthOrb {
+      width: 60px;
+      height: 60px;
+    }
+    .localAuthOrb::before,
+    .localAuthOrb::after { top: 26px; }
+    .localAuthOrb::before { left: 22px; }
+    .localAuthOrb::after { right: 22px; }
+    .localAuthWelcomeCopy { gap: 8px; }
+    .localAuthWelcomeCopy h2 {
+      font-size: 40px;
+      line-height: 1;
+    }
+    .localAuthWelcomeCopy p {
+      max-width: 390px;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .localAuthWelcomeForm {
+      width: min(440px, 100%);
+      gap: 12px;
+    }
+    .localAuthEmailCapsule {
+      min-height: 54px;
+      grid-template-columns: minmax(0, 1fr) 44px;
+      padding: 5px 6px 5px 18px;
+    }
+    .localAuthEmailCapsule button {
+      width: 42px;
+      height: 42px;
+      font-size: 20px;
+    }
+    .localAuthSpinner {
+      width: 15px;
+      height: 15px;
+      border: 2px solid rgba(255,255,255,0.42);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: localAuthSpin 700ms linear infinite;
+    }
+    @keyframes localAuthSpin { to { transform: rotate(360deg); } }
+    .localAuthConsent {
+      width: min(360px, calc(100% - 24px));
+      grid-template-columns: 16px minmax(0, 1fr);
+      gap: 9px;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+    .localAuthConsent input {
+      width: 16px;
+      height: 16px;
+    }
+    .localAuthWelcomeForm .localAuthStatus {
+      width: min(360px, calc(100% - 24px));
+      justify-self: center;
+      text-align: center;
+    }
+    .localAuthOtpWelcome {
+      width: min(440px, 100%);
+      gap: 14px;
+    }
+    .localAuthOtpForm { width: 100%; gap: 12px; }
+    .localAuthOtpForm .localAuthStatus:not(.is-error),
+    .localAuthPassphraseForm .localAuthStatus:not(.is-error) { display: none; }
+    .localAuthOtpCells { gap: 8px; }
+    .localAuthOtpCells input {
+      min-height: 52px;
+      aspect-ratio: auto;
+      border-radius: 10px;
+      font-size: 22px;
+    }
+    .localAuthVerifyWide,
+    .localAuthBackWide,
+    .localAuthPassphraseSubmit {
+      width: 100%;
+      min-height: 44px;
+      border-radius: 999px;
+      justify-content: center;
+    }
+    .localAuthPassphraseWelcome { width: min(440px, 100%); }
+    .localAuthPassphraseWelcome .localAuthWelcomeCopy p { max-width: 420px; }
+    .localAuthPassphraseForm { width: 100%; gap: 12px; }
+    .localAuthPassphraseForm .localAuthField { gap: 0; }
+    .localAuthPassphraseForm .localAuthField > span {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+    }
+    .localAuthPassphraseForm .localAuthField input {
+      min-height: 52px;
+      border: 1px solid var(--echo-glass-border-strong);
+      border-radius: 12px;
+      background: var(--echo-paper-white);
+      box-shadow: var(--echo-shadow-soft);
+    }
+    .localAuthPassphraseForm .localAuthStatus {
+      justify-self: center;
+      text-align: center;
+    }
+
+    /* Reading --------------------------------------------------------------- */
+    .scanLoading {
+      display: grid !important;
+      place-items: center;
+    }
+    .mvpReading {
+      display: flex;
+      width: min(460px, 100%);
+      flex-direction: column;
+      align-items: center;
+      color: var(--echo-ink-text);
+      text-align: center;
+    }
+    .mvpReadingAnimation {
+      width: 176px !important;
+      height: 176px !important;
+      margin: 0 auto 18px;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      transform: none;
+    }
+    .mvpReading .scanMascotFrames {
+      width: 100%;
+      height: 100%;
+    }
+    .mvpReading .scanMascotFrame {
+      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 {
+      margin: 13px 0 0;
+      color: var(--echo-ink-faint);
+      font: 500 12px/1.5 var(--echo-font-mono);
+    }
+    .mvpReadingProgress {
+      width: min(260px, 100%);
+      height: 3px;
+      margin: 18px 0 0;
+      background: rgba(26,58,143,0.12);
+    }
+
+    /* Pricing copied from the public Echo habitat -------------------------- */
+    .planGateStage {
+      display: grid !important;
+      place-items: start center;
+    }
+    .planGateDecision {
+      width: 100%;
+      color: var(--echo-ink-text);
+      text-align: left;
+    }
+    .mvpPricing {
+      width: 100%;
+    }
+    .mvpPricingIntro {
+      display: block;
+      width: min(960px, 100%);
+      margin: 20px auto 30px;
+      text-align: center;
+    }
+    .mvpPricingIntro > span {
+      color: var(--echo-ink-seal);
+      font: 700 10px/1 var(--echo-font-mono);
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+    }
+    .mvpPricingIntro h2 {
+      margin: 10px 0 0;
+      color: var(--echo-ink-text);
+      font-size: 4.6rem;
+      font-weight: 450;
+      line-height: 0.92;
+      letter-spacing: -0.07em;
+    }
+    .mvpPricingDiscovery {
+      margin: 18px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 15px;
+    }
+    .mvpPricingDiscovery strong { color: var(--echo-ink-primary); }
+    .mvpPlanTabs {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      width: min(640px, 100%);
+      margin: 0 auto 30px;
+      padding: 6px;
+      border: 1px solid rgba(26,58,143,0.18);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.75);
+      box-shadow: 0 9px 25px rgba(34,45,74,0.08);
+    }
+    .mvpPlanTab {
+      display: flex;
+      min-height: 48px;
+      padding: 0 18px;
+      align-items: center;
+      justify-content: center;
+      gap: 9px;
+      border: 0;
+      border-radius: 999px;
+      background: transparent;
+      box-shadow: none;
+      color: var(--echo-ink-mute);
+      cursor: pointer;
+      font: 650 16px/1 var(--echo-font-body);
+    }
+    .mvpPlanTab b {
+      font: 650 12px/1 var(--echo-font-mono);
+      opacity: 0.66;
+    }
+    .mvpPlanTab[aria-selected="true"] {
+      background: white;
+      color: var(--echo-ink-primary);
+      box-shadow: 0 5px 14px rgba(31,61,132,0.13);
+      transform: translateY(-1px);
+    }
+    .mvpPlanHabitat {
+      --habitat-bg: #fff7e6;
+      --habitat-sky: #ddf3ff;
+      --habitat-accent: #d89a1c;
+      display: grid;
+      grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
+      width: min(980px, 100%);
+      min-height: 410px;
+      margin: 0 auto;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--habitat-accent) 26%, white);
+      border-radius: 34px;
+      background: var(--habitat-bg);
+      box-shadow: 0 28px 60px rgba(28,40,72,0.14);
+    }
+    .mvpPlanHabitat[data-plan="pro"] {
+      --habitat-bg: #eaf1ff;
+      --habitat-sky: #c9e6ff;
+      --habitat-accent: #2446a8;
+    }
+    .mvpPlanHabitat[data-plan="power"] {
+      --habitat-bg: #fff1c7;
+      --habitat-sky: #ffe2d5;
+      --habitat-accent: #a6402d;
+    }
+    .mvpHabitatScene {
+      position: relative;
+      min-height: 410px;
+      overflow: hidden;
+      background:
+        radial-gradient(circle at 23% 18%, rgba(255,255,255,0.88) 0 8%, transparent 24%),
+        linear-gradient(158deg, var(--habitat-sky), var(--habitat-bg) 65%);
+      isolation: isolate;
+    }
+    .mvpHabitatScene::before {
+      position: absolute;
+      inset: 0;
+      z-index: -2;
+      background-image: radial-gradient(circle, color-mix(in srgb, var(--habitat-accent) 23%, transparent) 1.2px, transparent 1.4px);
+      background-size: 22px 22px;
+      content: "";
+      opacity: 0.35;
+    }
+    .mvpHabitatScene::after {
+      position: absolute;
+      right: -5%;
+      bottom: -18%;
+      left: -5%;
+      z-index: -1;
+      height: 49%;
+      border-top: 1px solid color-mix(in srgb, var(--habitat-accent) 18%, transparent);
+      background: color-mix(in srgb, var(--habitat-bg) 78%, white);
+      content: "";
+      transform: skewY(-2deg);
+    }
+    .mvpHabitatWindow {
+      position: absolute;
+      top: 11%;
+      left: 10%;
+      width: 30%;
+      aspect-ratio: 1 / 1.28;
+      border: 8px solid rgba(255,255,255,0.8);
+      border-radius: 90px 90px 20px 20px;
+      background: linear-gradient(180deg, white, var(--habitat-sky));
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--habitat-accent) 14%, transparent), 0 14px 30px rgba(32,46,78,0.08);
+    }
+    .mvpHabitatShelf {
+      position: absolute;
+      top: 31%;
+      right: 8%;
+      display: flex;
+      width: 31%;
+      height: 12%;
+      padding: 0 9%;
+      align-items: flex-end;
+      gap: 5px;
+      border-bottom: 8px solid color-mix(in srgb, var(--habitat-accent) 50%, #754f31);
+    }
+    .mvpHabitatShelf i {
+      display: block;
+      width: 15%;
+      height: 54%;
+      border-radius: 3px 3px 0 0;
+      background: var(--habitat-accent);
+      transform: rotate(-3deg);
+    }
+    .mvpHabitatShelf i:nth-child(2) { height: 77%; background: #f1b84a; transform: rotate(2deg); }
+    .mvpHabitatShelf i:nth-child(3) { height: 66%; background: #68b9c4; }
+    .mvpHabitatShelf i:nth-child(4) { height: 88%; background: #f19a87; transform: rotate(3deg); }
+    .mvpHabitatShelf i:nth-child(5) { height: 61%; background: white; }
+    .mvpHabitatRug {
+      position: absolute;
+      right: 10%;
+      bottom: 8%;
+      left: 10%;
+      height: 24%;
+      border: 2px solid color-mix(in srgb, var(--habitat-accent) 18%, transparent);
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--habitat-accent) 12%, white);
+      transform: rotate(-2deg);
+    }
+    .mvpHabitatEcho {
+      position: absolute;
+      bottom: 0;
+      left: 49%;
+      z-index: 2;
+      display: block;
+      width: min(62%, 310px);
+      height: auto;
+      filter: drop-shadow(0 20px 25px rgba(25,41,72,0.18));
+      object-fit: contain;
+      transform: translateX(-50%);
+    }
+    .mvpHabitatDetails {
+      display: flex;
+      padding: 32px 38px;
+      flex-direction: column;
+      justify-content: center;
+      background: rgba(255,255,255,0.7);
+      backdrop-filter: blur(12px);
+    }
+    .mvpPlanIdentity {
+      display: flex;
+      min-height: 26px;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--habitat-accent);
+      font: 700 10px/1 var(--echo-font-mono);
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+    }
+    .mvpPlanIdentity b {
+      padding: 8px 11px;
+      border-radius: 999px;
+      background: var(--echo-ink-primary);
+      color: white;
+      font-size: 8px;
+      letter-spacing: 0.08em;
+    }
+    .mvpHabitatDetails h3 {
+      margin: 14px 0 7px;
+      color: var(--echo-ink-text);
+      font-size: 3.5rem;
+      font-weight: 450;
+      line-height: 0.94;
+      letter-spacing: -0.06em;
+    }
+    .mvpPlanPromise {
+      min-height: 38px;
+      margin: 0;
+      color: var(--habitat-accent);
+      font: 650 22px/1.12 var(--echo-font-script), cursive;
+    }
+    .mvpPlanPrice {
+      display: flex;
+      margin-top: 18px;
+      align-items: flex-end;
+      gap: 13px;
+    }
+    .mvpPlanPrice strong {
+      color: var(--echo-ink-text);
+      font-size: 48px;
+      line-height: 0.9;
+      letter-spacing: -0.065em;
+    }
+    .mvpPlanPrice span {
+      padding-bottom: 5px;
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      line-height: 1.35;
+    }
+    .mvpPacksLabel {
+      margin: 17px 0 9px;
+      color: var(--echo-ink-faint);
+      font: 700 9px/1 var(--echo-font-mono);
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+    }
+    .mvpPlanFacts {
+      display: grid;
+      gap: 8px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    .mvpPlanFacts li {
+      display: grid;
+      grid-template-columns: 18px 1fr;
+      gap: 9px;
+      color: var(--echo-ink-mute);
+      font-size: 14px;
+      line-height: 1.35;
+    }
+    .mvpPlanFacts .setupGlyph { width: 16px; height: 16px; color: #2f9d62; }
+    .mvpPlanCta {
+      display: flex;
+      width: 100%;
+      min-height: 52px;
+      margin: 20px 0 0;
+      padding: 0 24px;
+      align-items: center;
+      justify-content: space-between;
+      border: 0;
+      border-radius: 999px;
+      background: var(--echo-ink-primary);
+      box-shadow: 0 8px 0 color-mix(in srgb, var(--echo-ink-primary) 77%, black);
+      color: white;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .mvpPlanStatus {
+      min-height: 20px;
+      margin: 18px 0 0;
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      text-align: center;
+    }
+    .planGateAccount {
+      position: fixed;
+      top: 20px;
+      left: 22px;
+      z-index: 20;
+      width: auto;
+      max-width: min(360px, calc(100vw - 44px));
+      margin: 0;
+      border: 0;
+    }
+    .planGateAccount .setupAccountCard {
+      justify-content: start;
+      margin: 0;
+      border: 1px solid rgba(26,58,143,0.10);
+      border-radius: 999px;
+      background: rgba(255,255,255,0.78);
+      padding: 8px 10px 8px 14px;
+      box-shadow: 0 6px 20px rgba(26,58,143,0.07);
+      backdrop-filter: blur(12px);
+    }
+    .planGateAccount .setupAccountAvatar,
+    .planGateAccount .setupAccountCopy span { display: none; }
+    .planGateAccount .setupAccountCopy { flex: 0 1 auto; }
+    .planGateAccount .setupAccountCopy strong {
+      color: var(--echo-ink-mute);
+      font-size: 13px;
+      font-weight: 500;
+    }
+    .planGateAccount .setupAccountCopy small {
+      display: block;
+      margin-bottom: 2px;
+      color: var(--echo-ink-faint);
+      font: 700 8px/1 var(--echo-font-mono);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .planGateAccount .setupAccountChange { min-height: 34px; }
+
+    /* Found sessions: one message, one next action -------------------------- */
+    .readyDecision.extractionReady {
+      overflow: visible;
+      width: min(920px, 100%);
+      padding-top: 58px;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .readyDecision.extractionReady::before,
+    .exHero::before { display: none; }
+    .extractionReady .readyEyebrow { display: none; }
+    .extractionReady .readyHero {
+      display: flex;
+      width: 100%;
+      padding: 14px 0 0;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      border: 0;
+      background: transparent;
+      text-align: center;
+    }
+    .extractionReady .readyMascot {
+      width: 82px;
+      height: auto;
+      filter: drop-shadow(0 16px 22px rgba(26,58,143,0.16));
+    }
+    .extractionReady .readyHero .exCopy h2 {
+      max-width: 760px;
+      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;
+    }
+    .extractionReady .readyHero .exCopy h2 strong {
+      color: var(--echo-ink-primary);
+      -webkit-text-fill-color: var(--echo-ink-primary);
+      font-weight: 650;
+    }
+    .extractionReady .readyHero .exSub {
+      max-width: 590px;
+      margin: 18px auto 0;
+      font-size: 15px;
+      line-height: 1.5;
+      text-align: center;
+    }
+    .extractionReady .proofStrip {
+      width: fit-content;
+      min-height: 36px;
+      margin: 20px auto 0;
+      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);
+    }
+    .extractionReady .readyGo {
+      width: min(560px, 100%);
+      margin: 24px auto 0;
+      padding: 0;
+      justify-items: center;
+      background: transparent;
+    }
+    .extractionReady .readyDecision .actions,
+    .extractionReady .actions {
+      width: 100%;
+      justify-content: center;
+    }
+    .extractionReady .actions .primary {
+      width: 100%;
+      min-height: 60px;
+      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;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+      color: var(--echo-ink-mute);
+    }
+    .extractionReady .ctaMeta {
+      margin-top: 14px;
+      justify-content: center;
+      color: var(--echo-ink-faint);
+      font-size: 11px;
+    }
+    .extractionReady .readySettings {
+      display: flex;
+      position: fixed;
+      top: 18px;
+      right: 22px;
+      left: 22px;
+      z-index: 20;
+      width: auto;
+      margin: 0;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      border: 0;
+      background: transparent;
+    }
+    .extractionReady .readySetting {
+      display: flex;
+      width: auto;
+      align-items: center;
+      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);
+    }
+    .extractionReady .readySettingLabel {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      clip: auto;
+      clip-path: none;
+      color: var(--echo-ink-faint);
+      font: 700 9px/1 var(--echo-font-mono);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .extractionReady .setupAccountCard,
+    .extractionReady .setupPlanConfirmed {
+      display: flex;
+      margin: 0;
+      align-items: center;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+    }
+    .extractionReady .setupAccountAvatar,
+    .extractionReady .setupAccountCopy small,
+    .extractionReady .setupAccountCopy span,
+    .extractionReady .setupPlanConfirmedIcon,
+    .extractionReady .setupPlanConfirmedCopy span { display: none; }
+    .extractionReady .setupAccountCopy,
+    .extractionReady .setupPlanConfirmedCopy { flex: 0 1 auto; }
+    .extractionReady .setupAccountCopy strong,
+    .extractionReady .setupPlanConfirmedCopy strong {
+      color: var(--echo-ink-mute);
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .extractionReady .textButton {
+      min-height: 32px;
+      padding: 0 8px;
+      font-size: 11px;
+    }
+    .extractionReady .readySettings.is-checkout-pending {
+      align-items: flex-start;
+    }
+    .extractionReady .readySettings.is-checkout-pending .readyPlanSetting {
+      display: block;
+      width: min(680px, calc(100vw - 260px));
+      overflow: visible;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .extractionReady .readySettings.is-checkout-pending .readyPlanSetting > .readySettingLabel {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .extractionReady .readySettings.is-checkout-pending .setupPlanSlot {
+      margin: 0;
+    }
+    .extractionReady .setupPlanCheckout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-rows: auto auto;
+      column-gap: 18px;
+      row-gap: 2px;
+      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);
+    }
+    .extractionReady .setupPlanCheckout::before {
+      display: block;
+      position: absolute;
+      inset: 0 auto 0 0;
+      width: 4px;
+      height: auto;
+      background: var(--echo-ink-primary);
+      opacity: 1;
+    }
+    .extractionReady .setupPlanCheckout .setupPlanIntro {
+      min-width: 0;
+      padding: 0;
+    }
+    .extractionReady .setupPlanCheckout .setupPlanIntro h3 {
+      font-size: 16px;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+    }
+    .extractionReady .setupPlanCheckout .setupPlanIntro p {
+      margin-top: 3px;
+      font-size: 11px;
+      line-height: 1.35;
+    }
+    .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);
+    }
+    .extractionReady .setupPlanCheckout .setupPlanFoot {
+      justify-content: flex-start;
+      gap: 8px;
+      margin-top: 1px;
+    }
+    .extractionReady .setupPlanCheckout .setupPlanFoot .textButton {
+      min-height: 0;
+      padding: 2px 0;
+      color: var(--echo-ink-mute);
+      font-size: 10px;
+      font-weight: 700;
+    }
+    .extractionReady .setupPlanCheckout .setupPlanFoot span {
+      font-size: 10px;
+    }
+    .extractionReady .readyFoot {
+      width: min(620px, 100%);
+      margin: 12px auto 0;
+      border: 0;
+      padding: 0;
+      opacity: 0.68;
+    }
+    .extractionReady .readyExplain { text-align: center; }
+    .extractionReady .readyExplain > p,
+    .extractionReady .readySteps { display: none; }
+
+    /* Session review is a full canvas, not a floating legacy card ---------- */
+    .sessionPicker {
+      width: 100vw;
+      max-width: none;
+      height: 100vh;
+      max-height: none;
+      margin: 0;
+      border: 0;
+      border-radius: 0;
+      background:
+        radial-gradient(circle, rgba(26,58,143,0.10) 0 1.1px, transparent 1.4px) 0 0 / 22px 22px,
+        var(--echo-paper-canvas);
+      box-shadow: none;
+    }
+    .sessionPicker::backdrop { background: var(--echo-paper-canvas); }
+    .sessionPickerShell {
+      width: min(980px, calc(100% - 32px));
+      height: 100vh;
+      max-height: none;
+      margin: 0 auto;
+      background: transparent;
+    }
+    .sessionPickerHead {
+      padding: clamp(28px, 5vw, 54px) 8px 24px;
+      border: 0;
+      background: transparent;
+    }
+    .sessionPickerHead > div > span { color: var(--echo-ink-seal); }
+    .sessionPickerHead h2 {
+      margin-top: 10px;
+      color: var(--echo-ink-text);
+      font-size: clamp(42px, 6vw, 70px);
+      font-weight: 450;
+      letter-spacing: -0.06em;
+    }
+    .sessionPickerHead p { margin-top: 12px; font-size: 14px; }
+    .sessionPickerClose {
+      border: 0;
+      background: rgba(255,255,255,0.72);
+      box-shadow: 0 4px 14px rgba(26,58,143,0.09);
+    }
+    .sessionPickerToolbar,
+    .sessionPickerActions,
+    .sessionPickerFoot {
+      border: 0;
+      background: transparent;
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+    .sessionPickerListWrap {
+      border: 1px solid rgba(26,58,143,0.12);
+      border-radius: 24px;
+      background: rgba(255,255,255,0.72);
+      box-shadow: 0 14px 36px rgba(26,58,143,0.08);
+    }
+    .sessionPickerList { background: transparent; padding: 8px; }
+    .sessionPickerRow {
+      margin: 0;
+      border: 0;
+      border-bottom: 1px solid rgba(26,58,143,0.08);
+      border-radius: 0;
+      background: transparent;
+      padding: 14px 12px;
+    }
+    .sessionPickerRow:last-child { border-bottom: 0; }
+    .sessionPickerRow.is-selected { background: rgba(234,241,255,0.72); }
+    .sessionPickerFoot {
+      padding-top: 18px;
+      padding-bottom: 24px;
+    }
+    .sessionPickerFoot .primary {
+      border: 0;
+      border-radius: 999px;
+      box-shadow: 0 6px 0 color-mix(in srgb, var(--echo-ink-primary) 77%, black);
+    }
+
+    /* Extraction: let the existing animated plate carry the page ----------- */
+    .exHero {
+      width: min(1180px, 100%);
+      min-height: calc(100vh - clamp(56px, 10vw, 128px));
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .exHero.exHeroActive {
+      grid-template-columns: minmax(320px, 0.72fr) minmax(460px, 1.28fr);
+      align-items: center;
+    }
+    .exHeroActive #exText { padding: clamp(20px, 4vw, 44px); }
+    .exHeroActive .workbench {
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+    }
+    .exHeroActive .utilityEyebrow { display: none; }
+    .exHeroActive .workbench h2 {
+      color: var(--echo-ink-text) !important;
+      -webkit-text-fill-color: var(--echo-ink-text);
+      background: none;
+      font-size: clamp(46px, 6vw, 76px);
+      font-weight: 450;
+      letter-spacing: -0.06em !important;
+    }
+    .exHeroActive .workbench h2 strong {
+      color: var(--echo-ink-primary);
+      -webkit-text-fill-color: var(--echo-ink-primary);
+      font-weight: 650;
+    }
+    .exHeroActive .exPlate { min-height: min(72vh, 720px); }
+    .exHeroActive .exMeter {
+      margin-top: 28px;
+      border: 0;
+      background: transparent;
+      padding: 0;
+    }
+    .exHeroActive .exMeter strong { color: var(--echo-ink-primary); }
+    .exHeroActive .exCurrent {
+      border: 0;
+      background: rgba(255,255,255,0.58);
+      box-shadow: none;
+    }
+    .exHeroActive .extractEndRow { border: 0; background: transparent; padding: 0; }
+
+    @media (max-width: 860px) {
+      .mvpPlanHabitat {
+        grid-template-columns: 1fr;
+        min-height: 0;
+        border-radius: 28px;
+      }
+      .mvpHabitatScene { min-height: 390px; }
+      .mvpHabitatDetails { padding: 28px 24px 34px; }
+      .mvpHabitatEcho { width: min(66%, 360px); }
+      .extractionReady .readySettings { flex-direction: column; gap: 9px; }
+      body.readyMode:has(.readySettings.is-checkout-pending) main {
+        padding-top: 190px;
+      }
+      .extractionReady .readySettings.is-checkout-pending .readyAccountSetting { display: none; }
+      .extractionReady .readySettings.is-checkout-pending .readyPlanSetting { width: 100%; }
+      .extractionReady .setupPlanCheckout {
+        grid-template-columns: 1fr;
+        gap: 9px;
+      }
+      .extractionReady .setupPlanCheckout > .primary {
+        grid-column: 1;
+        grid-row: auto;
+        width: 100%;
+      }
+      .exHero.exHeroActive { grid-template-columns: 1fr; }
+      .exHeroActive .exPlate { min-height: 440px; }
+    }
+    @media (max-width: 560px) {
+      body.readyMode main,
+      body.scanMode main,
+      body.extractMode main { padding: 22px 14px 38px; }
+      .mvpConsent h2 { font-size: 42px; }
+      .mvpPricingIntro h2 { font-size: 3.5rem; }
+      .mvpPlanTabs { margin-bottom: 16px; }
+      .mvpPlanTab { min-height: 46px; padding: 0 8px; font-size: 13px; }
+      .mvpPlanTab b { font-size: 10px; }
+      .mvpHabitatScene { min-height: 310px; }
+      .mvpHabitatDetails h3 { font-size: 3.25rem; }
+      .mvpPlanPrice strong { font-size: 48px; }
+      .extractionReady .readyHero .exCopy h2 { font-size: 3.5rem; }
+      .sessionPickerShell { width: calc(100% - 18px); }
+      .sessionPickerHead h2 { font-size: 42px; }
+    }
+`;