/* Lucid Phase 1. Observed primitives: source Home 4:1144 and mobile PDF.
   Onboarding role mappings are inferred; existing geometry and flows are retained. */
:root, [data-palette="bone"] {
  color-scheme: light;
  --f-display: var(--ld-font); --f-body: var(--ld-font);
  --f-editorial: var(--ld-font); --f-mono: var(--ld-font);
  --bg: var(--ld-white); --bg-2: var(--ld-neutral-25); --bg-card: var(--ld-white);
  --bg-sky: var(--ld-sky-100); --bg-olive: var(--ld-lime-100);
  --bg-clay: var(--ld-rose-300); --bg-sand: var(--ld-neutral-50);
  --ink: var(--ld-black); --ink-2: var(--ld-black-64); --ink-3: var(--ld-black-50);
  --rule: var(--ld-black-6); --rule-2: var(--ld-black-16);
  --accent: var(--ld-black); --accent-ink: var(--ld-white);
  --accent-2: var(--ld-lime-950); --accent-3: var(--ld-red-900); --accent-4: var(--ld-sky-300);
  --accent-pos: var(--ld-lime-950); --signal-neg: var(--ld-red-900); --signal-danger: var(--ld-red-900);
  --signal-warn: var(--ld-red-900); --signal-data: var(--ld-black); --hold-accent: var(--ld-black);
  --chart-line: var(--ld-lime-950); --chart-fill: var(--ld-lime-950);
  --terminal-fill: var(--ld-black); --terminal-ink: var(--ld-white);
  --alloc-cash: var(--ld-sky-300); --alloc-invest: var(--ld-lime-300); --alloc-crypto: var(--ld-rose-300);
}
body, .screen { font-family: var(--ld-font); font-size: 16px; font-weight: 400; }
.screen { font-synthesis: none; }
.screen, .screen * { font-feature-settings: "ss02" 1; font-variant-numeric: normal; }
/* The preview uses Regular and Medium; map legacy bold emphasis to Medium.
   No global font-size or number bucket override. */
.screen [style*="font-weight: 600"], .screen [style*="font-weight: 650"],
.screen [style*="font-weight: 700"], .screen [style*="font-weight: 800"] { font-weight: 500 !important; }
.ld-heading { letter-spacing: -.02em !important; line-height: 1.1 !important; }
.ld-money { white-space: nowrap; letter-spacing: normal !important; }
.ld-money > span { color: inherit !important; }
.screen .ld-button, .screen .ld-provider {
  border-radius: 24px !important; font-size: 16px !important; font-weight: 500 !important;
  min-height: 48px; letter-spacing: normal !important;
}
.screen .ld-button[data-size="large"] { min-height: 56px; padding: 12px 16px !important; line-height: 24px; border-radius: 28px !important; }
.screen .ld-button[data-kind="ghost"], .screen .ld-button[data-kind="quiet"] {
  background: var(--ld-black-4) !important; border-color: transparent !important;
}
.screen .ld-button:disabled { background: var(--ld-neutral-50) !important; color: var(--ld-black-32) !important; opacity: 1 !important; }
.screen .ld-button:disabled svg { color: inherit; stroke: currentColor; }
.screen .ld-field > div:last-child, .screen .ld-select {
  background: var(--ld-neutral-25) !important; border-radius: 16px !important; border-color: var(--ld-border) !important;
}
.screen input:not([type="range"]), .screen textarea, .screen select {
  font-family: var(--ld-font); font-size: 16px; color-scheme: light;
  border-radius: 12px; border-color: var(--ld-border);
}
.screen input::placeholder, .screen textarea::placeholder { color: var(--ld-muted); opacity: 1; }
.screen .ld-field:focus-within > div:last-child { box-shadow: inset 0 0 0 1px var(--ld-black-32); }
.screen button:focus-visible, .screen input:focus-visible, .screen select:focus-visible { outline: 2px solid var(--ld-black-64) !important; outline-offset: 2px; }
.screen .ld-choice { border-radius: 24px !important; background: var(--ld-white-50) !important; box-shadow: var(--ld-shadow-card); }
.screen .ld-choice[data-selected="true"] { background: var(--ld-neutral-25) !important; }
.screen .ld-segmented { border-radius: 24px !important; background: var(--ld-neutral-25); }
.screen .ld-segmented button { border-radius: 20px; border-left: none !important; }
.screen [role="dialog"], .screen .acct-card { border-radius: 24px !important; box-shadow: var(--ld-shadow-card); }
.screen [style*="border-radius: 16px 16px 0px 0px"],
.screen [style*="border-radius: 18px 18px 0px 0px"] { border-radius: 32px 32px 0 0 !important; }
.screen svg [stroke-linecap="square"] { stroke-linecap: round; stroke-linejoin: round; }
/* Keep the existing navigation's geometry and all five destinations. */
.screen .tabbar { background: var(--ld-white-64); border-color: var(--ld-border); }
.screen .tab .tlabel { font-size: 12px; text-transform: none; letter-spacing: normal; }
/* Comparison chrome belongs to the reviewer, not a second product palette. */
.cv-wrap, .cv-btn, .cv-select select { font-family: var(--ld-font); }

/* Existing first-run cards, retaining every row and action. */
.screen [data-get-started-card], .screen .ld-proposal-card {
  border-color: var(--ld-border) !important; border-radius: 24px !important;
  background: var(--ld-white-50) !important; box-shadow: var(--ld-shadow-card);
}
/* Preserve the imported glyph geometry contract while adapting its ink to light. */
.screen [data-get-started-action] img { filter: brightness(0) !important; }

/* Welcome shares web v1's agency motion and intelligence assets. */
.lucid-motion-logo { position: relative; display: block; overflow: hidden; flex: none; mix-blend-mode: multiply; }
.lucid-motion-logo-still { position: absolute; inset: 0; display: grid; place-items: center; }
/* Crop the original 1200 × 1016 render to the 230px symbol at (285, 393). */
.lucid-motion-logo-video { position: absolute; width: 521.73913%; height: 441.73913%; max-width: none; left: -123.91304%; top: -170.86957%; filter: invert(1); pointer-events: none; }
.ld-welcome-logo { mix-blend-mode: multiply; }
/* Bright pink/orange Expression palette, without a darkening overlay. */
.ld-welcome-gradient { display: inline-block; color: #F68118; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ld-welcome-gradient {
    background: linear-gradient(105deg, #E693E8 0%, #FF6DAA 32%, #F68118 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .ld-welcome-gradient { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
/* Reference halo stays local to the welcome CTA; the page remains white. */
.ld-sign-in-glow { position: relative; isolation: isolate; display: inline-flex; border-radius: 24px; }
/* Native source blur bounds relative to its 304.709 × 114.709 button. */
.ld-sign-in-glow::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -11.89856%; top: -31.54503%; width: 123.70983%; height: 170.82792%;
  background: url('lucid-sign-in-glow.svg') center / 100% 100% no-repeat;
}
.screen .ld-sign-in-glow .ld-button { border-radius: 24px !important; }
.ld-welcome-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ld-welcome-wash::before, .ld-welcome-wash::after { content: ''; position: absolute; pointer-events: none; }
.ld-welcome-wash::before { inset: -140px -200px auto; height: 600px; background: url('intelligence/mesh-wash.svg') center / 760px 488px no-repeat; opacity: .4; }
.ld-welcome-wash::after { inset: 80px -160px -160px; background: url('intelligence/pink.png') calc(50% - 120px) bottom / 600px 540px no-repeat, url('intelligence/orange.png') calc(50% + 170px) bottom / 520px 630px no-repeat; opacity: .38; mask-image: linear-gradient(transparent, #000 35%); animation: ld-welcome-drift 12s ease-in-out infinite alternate; }
@keyframes ld-welcome-drift { from { transform: translate3d(-10px, 16px, 0); } to { transform: translate3d(14px, -18px, 0); } }
/* Lucid white controls and verification icon tiles. */
.screen .ld-provider { background: var(--ld-white-64) !important; color: var(--ink); border: 0 !important; box-shadow: 0 4px 16px rgb(0 0 0 / 12%), inset 0 0 0 1px var(--ld-white-64); }
.screen .ld-field > div:last-child, .screen .ld-select, .screen .ld-phone-field { background: var(--ld-white) !important; border: 1px solid var(--ld-border) !important; border-radius: 24px !important; box-shadow: var(--ld-shadow-card); }
.screen .ld-field:focus-within > div:last-child, .screen .ld-phone-field:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.screen .ld-field input:focus-visible, .screen .ld-phone-field input:focus-visible { outline: none !important; }
.screen .ld-phone-field input { border-radius: inherit; }
.ld-verification-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 24px; }
.ld-verification-steps li { display: flex; align-items: center; gap: 16px; min-height: 37px; }
.ld-step-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--ld-white); color: var(--ld-black); border: 1px solid var(--ld-border); box-shadow: var(--ld-shadow-card); }
.ld-verification-steps h3 { font-size: 16px; line-height: 19px; font-weight: 500; margin: 0 0 4px; }
.ld-verification-steps p { font-size: 12px; line-height: 14px; color: var(--ink-3); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .lucid-motion-logo-video { display: none; }
  .ld-welcome-wash::after { animation: none; }
}

/* Income and amount selectors share web v1's neutral selection treatment. */
.screen .ld-pill { min-height: 44px; padding: 8px 12px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 24px !important; background: #fff !important; color: var(--ink) !important; border: 0 !important; box-shadow: none; }
.screen .ld-pill[aria-pressed="true"] { background: var(--ld-neutral-50) !important; }
.ld-wait-wash::after { animation: none; opacity: .42; }
.ld-agreement-card { margin-top: 20px; padding: 4px 16px 6px; border: 1px solid var(--ld-border); border-radius: 24px; background: #fff; box-shadow: var(--ld-shadow-card); overflow: hidden; }
.ld-agreement-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 8px; }
.ld-agreement-row + .ld-agreement-row { border-top: 1px solid var(--ld-border); }
.ld-agreement-check { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.ld-agreement-title { display: block; font-size: 16px; font-weight: 500; line-height: 1.25; }
.ld-agreement-description { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 4px; }
.ld-agreement-row > :last-child { min-height: 44px; justify-content: center; align-items: center; }
.ld-funding-tile { width: 100%; min-height: 88px; padding: 16px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 12px; align-items: center; text-align: left; color: var(--ink); font-family: var(--f-display); cursor: pointer; background: var(--ld-white-50); border: 1px solid var(--ld-border); border-radius: 24px; box-shadow: var(--ld-shadow-card); }
.ld-funding-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ld-neutral-25); display: grid; place-items: center; }
.ld-funding-icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
.ld-funding-copy { display: grid; gap: 4px; min-width: 0; }
.ld-funding-copy strong { font-size: 16px; font-weight: 500; line-height: 20px; }
.ld-funding-copy small { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--ink-3); }
.ld-funding-chevron { width: 20px; height: 20px; opacity: .5; transform: rotate(-90deg); }

/* Gray amount options with the requested black selected state. */
.screen .ld-amount-pill { background: var(--ld-neutral-50) !important; }
.screen .ld-amount-pill[aria-pressed="true"] { background: var(--ld-black) !important; color: var(--ld-white) !important; box-shadow: none; }

.ld-funding-icon svg { opacity: .64; }
.ld-connected-account { grid-template-columns: 48px minmax(0, 1fr) auto; }
.ld-connected-account .ld-funding-copy strong, .ld-connected-account .ld-funding-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-account-balance { font-size: 16px; font-weight: 500; line-height: 20px; color: var(--ink); white-space: nowrap; text-align: right; }

.ld-funding-options { display: grid; gap: 8px; margin-top: 8px; }

/* Layout only: welcome actions inherit the shared Lucid button variants. */
.ld-welcome-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ld-space-md); }

/* Final onboarding invitation uses the existing Lucid intelligence assets. */
.ld-text-bank { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.ld-text-bank-content { flex: 1; min-height: 0; padding: 6px 24px 8px; }
.ld-text-bank h1 { margin: 14px 0 0; font-family: var(--f-display); font-size: 32px; line-height: 1.1; letter-spacing: -.02em; font-weight: 500; }
.ld-text-bank h1:focus { outline: none; }
.ld-text-bank-description { margin: 12px 0 0; max-width: 33ch; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.ld-text-preview { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 32px 0 26px; margin-top: 28px; }
.ld-text-preview-wash { position: absolute; z-index: -1; inset: -26px -24px -20px; pointer-events: none; background: url('intelligence/mesh-wash.svg') center / 530px auto no-repeat; opacity: .65; mask-image: linear-gradient(transparent, var(--ld-black) 25%, var(--ld-black) 70%, transparent); }
.ld-text-bubble { max-width: 85%; padding: 14px 18px; font-size: 16px; line-height: 1.4; }
.ld-text-outgoing { align-self: flex-end; background: var(--ld-black); color: var(--ld-white); border-radius: 24px 24px 6px 24px; }
.ld-text-incoming { align-self: flex-start; background: var(--ld-white); border: 1px solid var(--ld-border); border-radius: 24px 24px 24px 6px; box-shadow: var(--ld-shadow-card); }
.ld-text-bank-note { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); text-align: center; }
.ld-text-bank-actions { flex: none; display: grid; gap: 8px; padding: 16px 24px 24px; }
.ld-text-skip { min-height: 44px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.ld-text-back { width: 44px; height: 44px; display: grid; place-items: center; margin: -16px 0 20px -12px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.ld-text-consent { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ld-text-consent p { margin: 0 0 18px; }
.ld-text-legal { display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 12px; }
.ld-text-legal a { color: var(--ink); text-underline-offset: 3px; }

/* Texting demo: compose, send, respond, then prepare an action. */
.ld-text-demo { position: relative; isolation: isolate; margin-top: 22px; }
.ld-demo-conversation { height: 320px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 1px 12px; scroll-padding-block: 12px; }
.ld-demo-conversation > * { flex-shrink: 0; transform-origin: bottom left; }
.ld-demo-conversation > .ld-text-outgoing { transform-origin: bottom right; }
.ld-demo-conversation::-webkit-scrollbar { display: none; }
.ld-text-demo .ld-text-bubble { padding: 12px 16px; font-size: 14px; }

/* Security uses the saved Lucid account tile and original 44 × 24 switch art. */
.ld-security-tile { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 8px; }
.ld-security-tile .ld-funding-icon img { width: 20px; height: 20px; opacity: .64; }
.ld-security-tile:disabled { opacity: 1; cursor: default; }
.ld-security-switch { display: block; position: relative; width: 44px; height: 24px; border-radius: 12px; }
.ld-security-switch > span { position: absolute; }
.ld-security-switch-on { left: -14px; top: -8px; }
.ld-security-switch-off { left: -4px; top: -2px; }
.ld-security-switch img { display: block; max-width: none; }

/* The conversation fills the invitation's remaining space above its fixed CTA. */
.ld-text-bank-content.is-invitation { display: flex; flex-direction: column; }
.is-invitation > :not(.ld-text-demo) { flex-shrink: 0; }
.is-invitation .ld-text-demo { flex: 1; min-height: 244px; display: flex; flex-direction: column; }
.is-invitation .ld-demo-conversation { flex: 1; min-height: 200px; height: 0; }
.ld-text-incoming { color: var(--ink); }

/* User-directed funding rate banner: Home suggestion artwork and glass treatment. */
.ld-funding-rate{position:relative;isolation:isolate;margin-top:var(--ld-space-sm);height:70px;padding:8px;overflow:hidden;border-radius:var(--ld-radius-card);background:#ef725f url('../app/assets/lucid-v2/home/gradient2-amber-balanced.png') 75% 52% / 150% auto no-repeat}
.ld-funding-rate-glass{display:flex;align-items:center;justify-content:center;height:100%;padding:0 16px;border-radius:var(--ld-radius-feature);background:rgb(238 121 109 / 72%);border:1px solid rgb(255 255 255 / 80%);box-shadow:inset 0 0 18px 5px rgb(255 255 255 / 80%),inset 0 0 3px rgb(255 255 255 / 80%);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--ld-white)}
.ld-funding-rate-glass strong{display:flex;align-items:baseline;gap:8px;font-family:var(--ld-font);font-size:32px;font-weight:500;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.ld-funding-rate-glass strong span{font-size:16px;letter-spacing:normal}
.ld-funding-rate + div{margin-top:8px !important;margin-bottom:8px !important}
.ld-funding-amount-heading{display:flex;align-items:center;margin:8px 0 8px}

/* Proposed failure-only passkey recovery. Reuses onboarding type and controls. */
.ld-passkey-heading:focus { outline: none; }
.ld-passkey-recovery { display: grid; gap: 8px; padding: 4px 0 8px; }
.ld-passkey-recovery p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ld-passkey-settings { margin-top: var(--ld-space-lg); }
.ld-passkey-guide { margin-top: var(--ld-space-xl); }
.ld-passkey-help-title .lucid-heading { line-height: 1.2 !important; text-wrap: wrap; }
.ld-passkey-help-section { display: grid; gap: var(--ld-space-lg); }
.ld-passkey-instruction { font-size: var(--ld-type-body); line-height: 24px; font-weight: 400; color: var(--ink); }
.ld-passkey-app-name { white-space: nowrap; }
.ld-passkey-app-name img { display: inline-block; width: 24px; height: 24px; border-radius: 5px; vertical-align: -6px; }
.ld-passkey-install { margin-top: var(--ld-space-lg); padding-top: var(--ld-space-lg); border-top: 1px solid var(--rule-2); }
.ld-passkey-guide p { margin: 0; font-size: var(--ld-type-body); line-height: 24px; color: var(--ink); }
.ld-passkey-saved { margin: 0; font-family: var(--ld-font); font-size: var(--ld-type-caption); line-height: 18px; font-weight: 400; color: var(--ink-2); text-align: center; }
.ld-passkey-download { border-radius: 999px; font-weight: 500; display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 18px; color: var(--ink); text-decoration: none; line-height: normal; }
.ld-passkey-download:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }