* { box-sizing: border-box; }
body { margin: 0; background: #efefef; }
.preview-back { position: fixed; top: 24px; left: 24px; color: #555; font: 13px system-ui; }
.ld-phone { position: relative; width: 393px; height: 852px; margin: 24px auto; background: var(--ld-surface); border-radius: 48px; overflow: hidden; isolation: isolate; }
.lucid button, .lucid input { font: inherit; color: inherit; }
.lucid button { appearance: none; cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
.lucid button:focus-visible, .lucid input:focus-visible, .lucid a:focus-visible { outline: 2px solid var(--ld-text); outline-offset: 4px; }
.lucid button:active { opacity: .7; }
.lucid p, .lucid h1, .lucid h2 { margin: 0; font-weight: inherit; }
.ld-asset { display: block; max-width: none; flex-shrink: 0; }
.ld-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.ld-scroll::-webkit-scrollbar { display: none; }
.ld-wash { position: absolute; left: -176px; top: -196px; pointer-events: none; }
.ld-wash-fade { position: absolute; top: 80px; left: 0; right: 0; height: 180px; background: linear-gradient(transparent,white); pointer-events: none; }
.ld-status { position: relative; height: 62px; font: 700 17px/20px -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: -.4px; }
.ld-time { position: absolute; top: 22.33px; left: 16px; width: 122px; text-align: center; }
.ld-status > img { position: absolute; right: 35px; top: 25.5px; }
.ld-content { position: relative; padding: 32px var(--ld-screen-gutter) var(--ld-scroll-end); display: flex; flex-direction: column; gap: var(--ld-screen-section-gap); }
.ld-header { display: flex; justify-content: space-between; height: 48px; }
.lucid .ld-icon-button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ld-radius-card); background: var(--ld-white-64); box-shadow: var(--ld-shadow-control); }
.ld-icon-slot { width: 20px; height: 20px; position: relative; display: block; }
.ld-bell-slot img { position: absolute; top: -.5px; left: 0; }
.ld-home-slot img { position: absolute; top: 2.625px; left: 2.625px; }
.ld-overview, .ld-balance { display: flex; flex-direction: column; gap: var(--ld-space-lg); }
.ld-total { display: flex; flex-direction: column; gap: var(--ld-space-md); }
.ld-trim { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ld-balance-label { font-weight: 400; color: var(--ld-muted); letter-spacing: .32px; line-height: 1; }
.lucid .ld-balance-value { font-size: var(--ld-type-balance); line-height: 1; white-space: nowrap; }
.ld-change { display: flex; align-items: center; gap: var(--ld-space-sm); height: 24px; color: var(--ld-gain); letter-spacing: .32px; }
.ld-arrow-badge { width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; background: var(--ld-lime-100); }
.ld-arrow-badge img { transform: rotate(-45deg); }
.ld-instant { display: flex; gap: var(--ld-space-sm); align-items: center; }
.ld-chip { border: 1px solid var(--ld-border); border-radius: 16px; height: 32px; padding: 0 12px; display: flex; align-items: center; color: var(--ld-muted); font-size: var(--ld-type-small); box-shadow: 0 4px 8px rgb(0 0 0 / 8%); background: var(--ld-surface); }
.ld-chip strong { color: var(--ld-text); font-weight: 500; }
.lucid .ld-info { width: 24px; height: 32px; display: flex; align-items: center; }
.ld-chart { display: flex; flex-direction: column; gap: var(--ld-space-md); }
.ld-graph { position: relative; height: 228px; }
.ld-graph img { position: absolute; left: -19.5px; top: 0; }
.ld-divider { height: var(--ld-divider-width); background: var(--ld-border); }
.ld-ranges { display: flex; justify-content: space-between; gap: 0; }
.ld-ranges button { border-radius: 18px; padding: 0 12px; height: 36px; color: var(--ld-muted); font-size: var(--ld-type-small); white-space: nowrap; }
.ld-ranges button[aria-pressed=true] { color: var(--ld-text); border: 1px solid var(--ld-border); box-shadow: var(--ld-shadow-card); background: var(--ld-surface); }
.ld-accounts { display: grid; gap: var(--ld-space-sm); }
.lucid .ld-card { background: var(--ld-white-50); border: 0; outline: 1px solid var(--ld-border); outline-offset: -1px; border-radius: var(--ld-radius-card); box-shadow: var(--ld-shadow-card); }
.lucid .ld-account { display: flex; gap: var(--ld-space-sm); align-items: center; padding: calc(var(--ld-space-md) + 1px); min-height: 82px; width: 100%; }
.ld-tile { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--ld-radius-tile); background: var(--ld-neutral-25); display: grid; place-items: center; }
.ld-account-icon { opacity: .64; }
.ld-account-name { display: flex; flex-direction: column; gap: var(--ld-space-sm); flex: 1; min-width: 0; color: var(--ld-muted); margin-left: var(--ld-space-sm); }
.ld-account-detail { font-size: var(--ld-type-caption); color: var(--ld-gain); line-height: 1; letter-spacing: .24px; white-space: nowrap; }
.ld-pill { border-radius: 10px; background: var(--ld-lime-100); padding: 4px 8px; align-self: flex-start; }
.ld-account-value { font-size: var(--ld-type-value); white-space: nowrap; }
.ld-chevron { position: relative; width: 16px; height: 16px; flex: 0 0 16px; opacity: .5; display: block; }
.ld-chevron img { position: absolute; left: 5.525px; top: 2.725px; }
.ld-section { display: flex; flex-direction: column; gap: var(--ld-section-heading-gap); scroll-margin-top: 24px; }
.ld-section h2 { font-size: var(--ld-type-body); color: var(--ld-muted); line-height: 1; letter-spacing: .32px; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ld-list-card { padding: calc(var(--ld-card-padding) + var(--ld-divider-width)); display: flex; flex-direction: column; gap: var(--ld-space-md); }
.ld-list { display: flex; flex-direction: column; }
.lucid .ld-list-row { display: flex; gap: var(--ld-space-md); align-items: center; width: 100%; min-height: 48px; }
.ld-list-row + .ld-list-row { position: relative; margin-top: var(--ld-list-row-gap); padding-top: calc(var(--ld-list-row-gap) + var(--ld-divider-width)); }
.ld-list-row + .ld-list-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--ld-divider-width); background: var(--ld-border); }
.ld-row-copy { display: flex; flex-direction: column; gap: var(--ld-space-sm); min-width: 0; flex: 1; }
.ld-row-copy > span, .ld-row-copy > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-row-copy small { font-weight: 400; font-size: var(--ld-type-small); color: var(--ld-muted); }
.ld-row-values { display: flex; flex-direction: column; gap: var(--ld-space-sm); text-align: right; white-space: nowrap; }
.ld-row-values small { font-size: var(--ld-type-small); }
.ld-gain { color: var(--ld-gain); } .ld-loss { color: var(--ld-loss); }
.ld-microsoft { width: 20px; height: 20px; mask: url('../assets/home/group-group.svg') 0 0 / 20px 20px no-repeat; }
.ld-invesco { width: 20px; height: 20px; position: relative; }
.ld-invesco img { position: absolute; top: 3px; left: 0; mask: url('../assets/home/group-group2.svg') 0 .002px / 20px 12.683px no-repeat; }
.lucid .ld-secondary { width: 100%; min-height: 48px; display: grid; place-items: center; border-radius: var(--ld-radius-card); background: var(--ld-black-4); line-height: 20px; padding: 8px 16px; }
.ld-brief-orb { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.ld-orb-sphere { position: absolute; top: 2px; left: 2px; }
.ld-orb-symbol { position: absolute; top: 14px; left: 14px; }
.ld-orb-alert .ld-orb-symbol { top: 16.444px; left: 16.611px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%)); }
.ld-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; letter-spacing: .24px; color: var(--ld-muted); white-space: nowrap; }
.ld-brief-row .ld-row-copy { gap: 8px; }
.ld-brief-row .ld-row-copy small { line-height: 1; font-weight: 500; letter-spacing: .28px; }
.ld-brief-row { gap: 16px; }
.lucid .ld-suggestion { position: relative; overflow: hidden; height: 272px; border-radius: var(--ld-radius-feature); background: var(--ld-neutral-25); }
.ld-suggestion-art { position: absolute; width: 361px; height: 565px; left: 50%; transform: translateX(-50%); top: -105px; }
.ld-suggestion-art > .ld-suggestion-image { position: absolute; width: 361px; height: 565px; object-fit: cover; }
.ld-amber-one { position: absolute; left: -29px; top: 262px; }
.ld-amber-two { position: absolute; left: -139px; top: 146px; }
.ld-estimate-back { position: absolute; top: 183px; left: 81px; width: 199px; height: 80px; border-radius: 20px; background: rgb(255 255 255 / 24%); backdrop-filter: blur(16px); }
.ld-estimate { position: absolute; top: 151px; left: 62px; padding: 24px; display: flex; gap: 16px; border-radius: 25px; background: var(--ld-white-50); backdrop-filter: blur(20px); }
.ld-estimate-copy { display: flex; flex-direction: column; gap: 16px; white-space: nowrap; }
.ld-estimate-copy strong { font-size: 36px; line-height: 1; font-weight: 500; }
.ld-estimate-copy small { font-size: 14px; color: var(--ld-muted); font-weight: 400; letter-spacing: .28px; line-height: 1; }
.ld-estimate-arrow { width: 31px; height: 31px; flex-shrink: 0; display: grid; place-items: center; background: var(--ld-surface); border-radius: 16px; }
.ld-estimate-arrow img { transform: rotate(-90deg); }
.ld-suggestion-caption { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; padding: 24px; gap: 16px; background: rgb(255 255 255 / 8%); backdrop-filter: blur(40px); }
.ld-suggestion-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ld-suggestion-copy strong { font-size: 18px; color: white; line-height: 1; letter-spacing: .36px; font-weight: 500; white-space: nowrap; }
.ld-suggestion-copy small { font-size: 14px; color: var(--ld-white-64); line-height: 1; font-weight: 400; letter-spacing: .28px; white-space: nowrap; }
.ld-suggestion-next { border-radius: 16px; padding: 8px; background: rgb(255 255 255 / 16%); }
.ld-suggestion-next .ld-chevron { opacity: 1; }
.ld-bottom-fade { position: absolute; pointer-events: none; bottom: 0; left: 0; right: 0; height: 202px; backdrop-filter: blur(4px); background: linear-gradient(180deg,transparent 0%,rgb(255 255 255 / 15%) 20%,rgb(255 255 255 / 50%) 45%,rgb(255 255 255 / 78%) 70%,rgb(255 255 255 / 90%) 100%); }
.ld-dock-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--ld-bottom-control-inset); padding-bottom: calc(var(--ld-bottom-control-inset) + var(--ld-safe-bottom)); }
.ld-dock { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border: 0; border-radius: var(--ld-radius-dock); background: var(--ld-white-32); backdrop-filter: blur(16px); box-shadow: var(--ld-shadow-dock),inset 0 0 0 1px var(--ld-white-64),inset 0 1px 0 rgb(255 255 255 / 60%); }
.ld-composer { height: 52px; display: flex; align-items: center; position: relative; }
.lucid .ld-ask { flex: 1; height: 52px; padding-left: 16px; color: var(--ld-muted); }
.lucid .ld-voice-button { position: absolute; right: 6px; top: 8px; width: 36px; height: 36px; border-radius: 18px; }
.ld-voice-art { position: relative; width: 36px; height: 36px; display: block; }
.ld-voice-glow { position: absolute; left: -23px; top: -7px; transform: scaleY(-1); }
.ld-voice-orb { display: block; width: 36px; height: 36px; position: relative; overflow: hidden; border-radius: 18px; background: var(--ld-rose-300); transform: scaleY(-1); }
.ld-voice-layer { position: absolute; }
.ld-voice-layer-1 { left: 9px; top: -9px; } .ld-voice-layer-2 { left: -45px; top: -56px; }
.ld-voice-layer-3 { left: 14px; top: -12px; } .ld-voice-layer-4 { left: 23px; top: -20px; }
.ld-voice-layer-5 { left: -35px; top: 3px; } .ld-voice-layer-6 { left: -45px; top: 20px; }
.ld-voice-layer-7 { left: 8px; top: -24px; } .ld-voice-layer-8 { left: -34px; top: -40px; }
.ld-voice-layer-9 { left: -71px; top: 13px; } .ld-voice-layer-10 { left: 23px; top: -38px; }
.ld-voice-icon { position: absolute; left: 12px; top: 12px; width: 12px; height: 12px; transform: scaleY(-1); }
.ld-voice-icon img { position: absolute; left: -2.875px; top: -.875px; }
.ld-tabs { display: flex; padding: 4px; border: 0; border-radius: 36px; background: var(--ld-white-50); box-shadow: inset 0 0 0 1px rgb(240 239 235 / 49%),0 4px 10px rgb(85 81 75 / 16%); }
.ld-tabs button { min-width: 56px; flex: 1; height: 64px; border-radius: 32px; display: grid; place-items: center; opacity: .64; }
.ld-tabs button[aria-current] { background: var(--ld-black-6); opacity: 1; }
/* Observed compact state 4:3082; direction and motion use dock-scroll.js. */
.ld-compact .ld-bottom-fade { height: 112px; }
.ld-compact .ld-dock-wrap { height: 160px; display: flex; align-items: flex-end; justify-content: center; }
.ld-compact .ld-dock { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; width: 264px; }
.ld-compact .ld-composer { position: absolute; inset: 0; height: 0; }
.ld-compact .ld-ask { display: none; }
.ld-compact .ld-voice-button { top: 10px; right: -48px; }
.ld-compact .ld-tabs { background: var(--ld-white-32); backdrop-filter: blur(16px); border: 0; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--ld-white-64),0 4px 10px rgb(85 81 75 / 16%); }
.ld-compact .ld-tabs button { flex: 0 0 64px; height: 48px; border-radius: 24px; }
.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Proposed prototype feedback, dialog and narrow layouts; not agency-specified states. */
.ld-toast { position: absolute; top: 66px; left: 24px; right: 24px; z-index: 5; padding: 12px 16px; border: 1px solid var(--ld-border); border-radius: 16px; background: white; box-shadow: var(--ld-shadow-card); font-size: 14px; line-height: 1.35; }
.ld-toast:empty { display: none; }
.ld-dialog { width: min(361px, calc(100% - 32px)); max-height: 80dvh; margin: auto; padding: 24px; border: 1px solid var(--ld-border); border-radius: 24px; background: white; box-shadow: var(--ld-shadow-dock); }
.ld-dialog::backdrop { background: rgb(0 0 0 / 24%); backdrop-filter: blur(4px); }
.ld-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ld-dialog h2 { font-size: 24px; }
.lucid .ld-close { font-size: 14px; text-decoration: underline; padding: 10px 0; }
.ld-dialog p { line-height: 1.45; margin-bottom: 16px; }
.ld-dialog .ld-secondary + .ld-secondary { margin-top: 8px; }
.ld-dialog-note { font-size: 12px; color: var(--ld-muted); }
.ld-dialog label { display: block; margin-bottom: 8px; }
.ld-dialog input { border: 1px solid var(--ld-muted); border-radius: 12px; padding: 12px; width: 100%; margin-bottom: 16px; background: white; }
.ld-dialog .ld-row-values { font-size: 14px; }
.ld-dialog .ld-list { margin-bottom: 16px; }
@media (max-width: 640px) { .preview-back { position: static; display: block; padding: 16px; text-align: center; } .ld-phone { margin: 0 auto 24px; } }
@media (max-width: 394px) { .preview-back { display: none; } .ld-phone { width: 100%; height: 100dvh; min-height: 0; margin: 0; border-radius: 0; } }
@media (max-width: 374px) {
 .ld-phone .ld-balance-value { font-size: 48px; }  .ld-phone .ld-ranges button { padding: 0 8px; }
 .ld-phone .ld-account-value { font-size: 15px; }  .ld-phone .ld-account-name { margin-left: 0; }
 .ld-phone .ld-list-card { padding: calc(var(--ld-card-padding-compact) + var(--ld-divider-width)); }  .ld-phone .ld-list-row { gap: 8px !important; }
 .ld-phone .ld-row-values small { font-size: 12px; }  .ld-phone .ld-row-meta { font-size: 10px; gap: 2px; }
 .ld-phone .ld-row-copy > span { font-size: 14px; }  .ld-phone .ld-suggestion-copy strong { font-size: 16px; }
 .ld-phone .ld-suggestion-copy small { font-size: 12px; }  .ld-phone .ld-suggestion-caption { padding: 16px; gap: 8px; }
 .ld-phone.ld-compact .ld-dock { margin-right: 36px; width: 232px; }  .ld-phone.ld-compact .ld-tabs button { flex-basis: 56px; }
 .ld-phone.ld-compact .ld-voice-button { right: -40px; }
}

/* Fade the blur in below the time-range labels, matching the source render. */
.ld-bottom-fade { mask-image: linear-gradient(transparent, #000 28%); }
.ld-scroll { z-index: 0; }
.ld-bottom-fade { z-index: 1; backdrop-filter: none; mask-image: none; }
.ld-dock-wrap { z-index: 2; }
.ld-compact .ld-tabs { position: relative; isolation: isolate; background: transparent; backdrop-filter: none; }
.ld-compact .ld-tabs::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ld-white-32); backdrop-filter: blur(16px); }
.ld-compact .ld-tabs button { position: relative; }
/* Source titles extend 9px into a 16px gap. Limit that extension on narrower layouts. */
@media (min-width: 375px) { .ld-brief-row .ld-row-copy > span { width: calc(100% + 10px); overflow: hidden; } }

/* Proposed interaction safeguards shared by both extracted screen families. */
.ld-dialog { overflow-wrap: anywhere; }
.ld-dialog-head h2 { min-width: 0; }
.lucid .ld-close { flex-shrink: 0; min-width: 44px; min-height: 44px; text-align: right; }
.ld-toast { pointer-events: none; }
/* Shared scroll contract: overlays own safe-area padding; content clears them once. */
.ld-phone {
 --ld-safe-bottom: 0px;
 --ld-top-occlusion: 0px;
 --ld-bottom-occlusion: 0px;
 --ld-scroll-end: calc(var(--ld-content-end) + max(var(--ld-safe-bottom), var(--ld-bottom-occlusion)));
}
.ld-scroll {
 scroll-padding-top: calc(var(--ld-top-occlusion) + var(--ld-focus-clearance));
 scroll-padding-bottom: var(--ld-scroll-end);
}
@media (max-width: 394px) { .ld-phone { --ld-safe-bottom: env(safe-area-inset-bottom, 0px); } }
.lucid .ld-info, .lucid .ld-voice-button, .ld-ranges button { position: relative; }
.lucid .ld-voice-button { position: absolute; }
.ld-info::after, .ld-voice-button::after, .ld-ranges button::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%,44px); height: max(100%,44px); transform: translate(-50%,-50%); }

/* Range labels share a row; expand vertically without overlapping neighbors. */
.ld-ranges button::after { width: 100%; }

/* Proposed content states. Surface and external spacing belong to the composition. */
.ld-feedback { display: grid; gap: var(--ld-space-md); min-width: 0; padding: var(--ld-card-padding); overflow-wrap: anywhere; }
.ld-feedback-title { font-size: var(--ld-type-body); line-height: 1.3; }
.ld-feedback-description { font-size: var(--ld-type-small); line-height: 1.5; color: var(--ld-muted); }
.ld-feedback-placeholder { height: 12px; border-radius: 6px; background: var(--ld-black-6); }

/* Home uses the same reversible dock motion and composer fade as Invest. */
#home .ld-ask{transition:opacity 160ms ease-out}
#home.ld-compact .ld-ask{display:block;opacity:0;pointer-events:none}
#home.ld-compact .ld-dock{margin-right:48px}
@media(max-width:374px){#home.ld-compact .ld-dock{margin-right:36px}}
@media(prefers-reduced-motion:reduce){#home .ld-ask{transition:none}}