/* Public product previews. All records and actions are local demonstrations. */
#module-preview { outline: none; min-width: 0; }
#module-preview:focus-visible { outline: 3px solid var(--blue, #2563ed); outline-offset: -3px; }
.demo-shell { --demo-ink: var(--ink, #111e35); --demo-muted: var(--muted, #687487); --demo-line: var(--line, #e7ebf2); --demo-blue: var(--blue, #2563ed); display: grid; grid-template-columns: 172px minmax(0, 1fr); color: var(--demo-ink); background: #fff; border: 1px solid #e0e5ee; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 72px -42px #172c5860, 0 2px 8px #142b4b04; text-align: left; font-size: 15px; line-height: 1.6; animation: demo-enter 280ms ease both; }
.demo-shell * { box-sizing: border-box; }
.demo-shell svg { width: 20px; height: 20px; flex: 0 0 auto; }
.demo-shell button, .demo-shell input { font: inherit; }
.demo-shell button { cursor: pointer; }
.demo-shell button:focus-visible, .demo-shell input:focus-visible { outline: 3px solid #8ea9ff; outline-offset: 3px; }
.demo-shell p, .demo-shell h3, .demo-shell h4 { margin: 0; }
.demo-sidebar { background: #f8f9fc; border-right: 1px solid var(--demo-line); padding: 24px 14px 20px; display: flex; flex-direction: column; }
.demo-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 23px; font-weight: 750; letter-spacing: -1px; }
.demo-brand-mark { display: block; width: 27px; height: 27px; object-fit: contain; }
.demo-workspace-name { font-size: 12px; color: var(--demo-muted); margin: 32px 10px 12px; }
.demo-side-nav { display: grid; gap: 5px; }
.demo-side-nav > span { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 7px; font-size: 13px; color: #687487; }
.demo-side-nav svg { width: 17px; height: 17px; }
.demo-side-nav .demo-nav-active { color: #244db9; background: #eaf0fd; font-weight: 650; }
.demo-sidebar-bottom { margin-top: auto; padding: 28px 4px 0; display: flex; gap: 9px; align-items: center; }
.demo-sidebar-bottom strong, .demo-sidebar-bottom small { display: block; font-size: 11px; }
.demo-sidebar-bottom small { color: var(--demo-muted); font-size: 10px; }
.demo-person-avatar { display: grid; place-items: center; width: 29px; height: 29px; background: #e7eaf2; border-radius: 50%; color: #67728a; font-size: 11px; }
.demo-app { min-width: 0; }
.demo-topbar { height: 65px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--demo-line); padding: 0 27px; gap: 10px; }
.demo-topbar > span { display: flex; align-items: center; gap: 10px; }
.demo-topbar strong { font-size: 13px; font-weight: 550; letter-spacing: -.15px; }
.demo-topbar > span > svg { width: 17px; height: 17px; color: #8590a2; }
.demo-reset { display: inline-flex; align-items: center; gap: 8px; color: var(--demo-muted); border: 0; background: transparent; font-size: 12px !important; padding: 7px 0 7px 9px; white-space: nowrap; }
.demo-reset:hover { color: var(--demo-blue); }
.demo-reset > span { font-size: 18px; }
.demo-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 494px; }
.demo-canvas { padding: 25px 26px 24px; min-width: 0; background: #fff; }
.demo-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.demo-content-heading p { font-size: 12px; color: var(--demo-muted); margin-bottom: 5px; }
.demo-content-heading h3 { font-size: clamp(17px, 1.45vw, 22px); font-weight: 650; letter-spacing: -.65px; line-height: 1.55; }
.demo-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; border-radius: 5px; font-size: 11px; line-height: 1.6; color: #3658b9; background: #edf2ff; white-space: nowrap; font-weight: 550; }
.demo-pill-soft { color: #70748d; background: #f2f3f8; }
.demo-agent { background: #fafaff; border-left: 1px solid var(--demo-line); padding: 27px 21px 20px; display: flex; flex-direction: column; min-width: 0; }
.demo-agent-title { display: flex; align-items: center; gap: 10px; }
.demo-agent-symbol { width: 35px; height: 35px; display: grid; place-items: center; background: #ede9fc; border-radius: 10px; color: #7555d4; }
.demo-agent-title small { font-size: 9px; letter-spacing: 1.05px; color: #88849b; }
.demo-agent-title h4 { font-size: 16px; font-weight: 650; }
.demo-agent-presence { display: flex; align-items: center; gap: 6px; color: #77758e; font-size: 11px; margin-top: 20px; }
.demo-agent-presence > span { width: 5px; height: 5px; border-radius: 50%; background: #8c72dc; }
.demo-agent-prompt { font-size: 15px; line-height: 1.9; color: #4c536b; margin-top: 12px !important; }
.demo-agent-context { border-top: 1px solid #e9e7f1; margin-top: 24px; padding-top: 17px; display: grid; gap: 9px; }
.demo-agent-context > small { font-size: 11px; color: #9993a8; }
.demo-agent-context > span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #75738a; }
.demo-agent-context svg { width: 14px; height: 14px; }
.demo-action { display: flex; justify-content: center; align-items: center; gap: 7px; background: #6a52c7; color: #fff; border: 1px solid #6a52c7; border-radius: 7px; padding: 11px 9px; width: 100%; font-size: 13px !important; margin-top: 26px; transition: background 180ms, transform 180ms; }
.demo-action svg { width: 15px; height: 15px; }
.demo-action svg:last-child { margin-left: auto; }
.demo-action:hover { background: #5942b5; transform: translateY(-1px); }
.demo-action:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.demo-action-outcome { color: #6f5ca2; font-size: 12px; line-height: 1.8; margin-top: 11px !important; }
.demo-action-outcome:empty { display: none; }
.demo-agent-footnote { margin-top: auto; padding-top: 19px; color: #8f8b9e; font-size: 10px; }
.demo-support-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); border: 1px solid var(--demo-line); border-radius: 9px; min-height: 315px; overflow: hidden; }
.demo-inbox { background: #fcfcfe; border-right: 1px solid var(--demo-line); padding: 9px; }
.demo-inbox-item { padding: 13px 8px; display: flex; gap: 9px; margin-bottom: 4px; border-radius: 6px; }
.demo-inbox-active { background: #eef3fc; }
.demo-avatar { flex-shrink: 0; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; font-size: 11px; font-weight: 600; color: #677ed0; background: #dfe8fa; }
.demo-avatar-neutral { color: #9197a3; background: #edf0f4; }
.demo-inbox-item strong { font-size: 13px; }
.demo-inbox-item p { font-size: 11px; margin-top: 3px; color: #717d95; }
.demo-inbox-item small { font-size: 9px; color: #949cab; }
.demo-conversation { padding: 15px 17px; min-width: 0; }
.demo-conversation-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; border-bottom: 1px solid var(--demo-line); padding-bottom: 11px; gap: 10px; }
.demo-conversation-head > span { font-size: 10px; color: #8792a4; }
.demo-message { margin-top: 16px; }
.demo-message small { color: #9099a9; font-size: 10px; }
.demo-message p { background: #f5f6f9; border-radius: 0 9px 9px; padding: 10px 12px; font-size: 14px; line-height: 1.8; margin-top: 4px; }
.demo-draft { border: 1px dashed #ddd7f0; background: #fdfcff; border-radius: 7px; margin-top: 17px; padding: 12px; }
.demo-draft-ready { border-style: solid; background: #f9f6ff; }
.demo-draft-label { color: #7d64b7; font-size: 10px; display: flex; align-items: center; gap: 6px; }
.demo-draft-label svg { width: 13px; height: 13px; }
.demo-draft > p { font-size: 13px; line-height: 1.8; margin-top: 6px; color: #6c6880; }
.demo-source { display: block; font-size: 9px; color: #9a8db1; margin-top: 9px; }
.demo-compose { margin-top: 19px; border: 1px solid #e8ebf1; border-radius: 6px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #a0a7b4; gap: 10px; }
.demo-compose svg { width: 14px; height: 14px; }
.demo-editor { border: 1px solid var(--demo-line); border-radius: 9px; overflow: hidden; }
.demo-editor-toolbar { padding: 12px 20px; border-bottom: 1px solid var(--demo-line); display: flex; gap: 24px; color: #8d92a3; font-size: 11px; }
.demo-editor-toolbar span:first-child { color: #4c5c85; }
.demo-editor-body { padding: 23px 29px; min-height: 274px; }
.demo-topic-label { color: #9299a8; font-size: 10px; margin-bottom: 10px; }
.demo-editor h4 { font-size: 22px; font-weight: 600; line-height: 1.6; letter-spacing: -.6px; }
.demo-editor-lead { font-size: 14px; line-height: 1.9; color: #858b99; margin-top: 11px !important; }
.demo-editor-placeholder { margin-top: 25px; }
.demo-editor-placeholder > span { display: block; height: 7px; border-radius: 3px; background: #f0f2f7; margin: 13px 0; }
.demo-editor-placeholder > span:nth-child(2) { width: 92%; }
.demo-editor-placeholder > span:nth-child(3) { width: 68%; }
.demo-editor-placeholder p { font-size: 12px; color: #9890ad; margin-top: 23px; }
.demo-editor-foot { padding: 12px 20px; border-top: 1px solid var(--demo-line); font-size: 10px; color: #969ba9; display: flex; justify-content: space-between; }
.demo-outline { display: grid; gap: 14px; margin-top: 25px; }
.demo-outline > div { display: flex; align-items: baseline; gap: 14px; font-size: 14px; color: #55627b; }
.demo-outline b { font-size: 10px; color: #9c8fb8; font-weight: 500; }
.demo-product-summary { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--demo-line); padding-bottom: 20px; margin-bottom: 20px; }
.demo-product-object { width: 48px; height: 48px; background: #f0f3f9; display: grid; place-items: center; border-radius: 10px; color: #7084b0; }
.demo-product-object svg { width: 27px; height: 27px; }
.demo-product-summary strong { font-size: 16px; }
.demo-product-summary p { font-size: 11px; color: #949cab; margin-top: 3px; }
.demo-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.demo-costs > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.demo-costs > div > span { color: #7a8294; }
.demo-costs strong { font-weight: 550; white-space: nowrap; }
.demo-costs > .demo-cost-total { border-top: 1px solid var(--demo-line); margin-top: 12px; padding-top: 14px; }
.demo-price-card { border: 1px solid #e4e8f4; background: #f7f9ff; padding: 19px; border-radius: 9px; }
.demo-price-card label { display: flex; justify-content: space-between; font-size: 12px; color: #697d9e; }
.demo-price-card label span { color: #a0aec1; }
.demo-price-card input { width: 100%; min-width: 0; border: none; border-bottom: 1px solid #dce4f7; background: transparent; padding: 6px 0 9px; color: #234981; font-size: 31px; font-weight: 550; border-radius: 0; line-height: 1.4; }
.demo-price-card input[aria-invalid="true"] { border-color: #7b56be; }
.demo-margin-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.demo-margin-row > span { font-size: 12px; color: #7c899e; }
.demo-margin-row strong { font-size: 24px; color: #405e9c; font-weight: 550; }
.demo-margin-row small { font-size: 13px; padding-left: 2px; }
.demo-price-card > p { color: #8795ae; font-size: 10px; text-align: right; margin-top: 3px; }
.demo-calculation-note { color: #949aab; font-size: 10px; margin-top: 20px !important; }
.demo-inline-result { background: #f4f3fb; color: #786390; display: flex; align-items: flex-start; gap: 9px; border-radius: 7px; padding: 12px 14px; font-size: 12px; line-height: 1.85; margin-top: 18px; }
.demo-inline-result svg { width: 16px; height: 16px; margin-top: 2px; }
.demo-sales-request { display: flex; align-items: flex-start; gap: 13px; background: #f7f8fb; border-radius: 9px; padding: 17px 19px; margin-bottom: 18px; }
.demo-sales-request strong { font-size: 12px; }
.demo-sales-request p { font-size: 14px; color: #68758a; line-height: 1.8; margin-top: 4px; }
.demo-quote { border: 1px solid var(--demo-line); border-radius: 9px; padding: 20px 22px; }
.demo-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.demo-quote-head small, .demo-case-summary small { font-size: 10px; color: #949eae; }
.demo-quote h4 { font-size: 19px; font-weight: 600; margin-top: 4px; }
.demo-table-wrap { overflow-x: auto; max-width: 100%; }
.demo-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.demo-table th { font-size: 10px; color: #919baa; font-weight: 500; padding: 11px 12px 11px 0; white-space: nowrap; }
.demo-table td { padding: 15px 12px 15px 0; border-top: 1px solid #edf0f5; white-space: nowrap; }
.demo-table th:last-child, .demo-table td:last-child { text-align: right; padding-right: 0; }
.demo-quote-total { border-top: 1px solid var(--demo-line); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.demo-quote-total > span { font-size: 12px; color: #8a93a3; }
.demo-quote-total > strong { font-size: 24px; font-weight: 550; letter-spacing: -.8px; }
.demo-quote-note { font-size: 10px; color: #9a92ac; margin-top: 12px !important; }
.demo-ledger-summary { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0 23px; gap: 24px; }
.demo-ledger-summary > div > span { display: block; font-size: 12px; color: #8b93a2; }
.demo-ledger-summary strong { font-size: 34px; letter-spacing: -1px; font-weight: 550; line-height: 1.5; }
.demo-ledger-summary strong > small { font-size: 11px; font-weight: 400; color: #919baa; letter-spacing: 0; }
.demo-ledger { min-width: 460px; }
.demo-ledger th { background: #fafbfe; }
.demo-finance-note { display: flex; gap: 12px; background: #f6f8fc; border-radius: 8px; padding: 16px; margin-top: 24px; color: #778ba7; }
.demo-finance-note > svg { width: 19px; height: 19px; margin-top: 2px; }
.demo-finance-note strong { font-size: 13px; color: #68768e; font-weight: 550; }
.demo-finance-note p { font-size: 11px; color: #959eaf; margin-top: 4px; }
.demo-case-summary { display: flex; justify-content: space-between; align-items: center; padding: 19px 21px; background: #f7f8fb; border-radius: 9px; gap: 12px; }
.demo-case-summary h4 { font-size: 22px; font-weight: 600; margin-top: 4px; }
.demo-case-summary p { font-size: 12px; color: #8c96a7; margin-top: 5px; }
.demo-case-type { border: 1px solid #dce2ed; border-radius: 5px; color: #7a88a0; font-size: 11px; padding: 5px 9px; white-space: nowrap; }
.demo-case-timeline { padding: 20px 11px 0; }
.demo-step { display: flex; gap: 16px; position: relative; padding-bottom: 23px; }
.demo-step:not(:last-child)::after { content: ''; position: absolute; height: calc(100% - 26px); top: 29px; left: 13px; border-left: 1px solid #e6eaf3; }
.demo-step > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #f2f4f9; color: #919baa; font-size: 10px; flex: 0 0 auto; }
.demo-step strong { color: #747f94; font-size: 14px; font-weight: 550; }
.demo-step p { color: #9da5b3; font-size: 11px; margin-top: 3px; }
.demo-step-current > span { background: #eaf0ff; color: #627dca; }
.demo-step-current strong { color: #536fb4; }
.demo-step:last-child { padding-bottom: 0; }
.demo-shipping-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--demo-line); margin-bottom: 8px; }
.demo-shipping-summary > div > span { display: block; color: #8b96a7; font-size: 12px; }
.demo-shipping-summary strong { font-size: 35px; font-weight: 550; }
.demo-shipping-summary strong > small { font-size: 12px; color: #98a3b4; font-weight: 400; }
.demo-shipping-summary > span { display: flex; align-items: center; gap: 8px; color: #8b96a7; font-size: 11px; }
.demo-shipping-order { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; gap: 14px; border-bottom: 1px solid var(--demo-line); }
.demo-shipping-order > div { display: flex; align-items: center; gap: 13px; }
.demo-order-icon { width: 35px; height: 38px; color: #a1acc0; display: grid; place-items: center; }
.demo-order-icon svg { width: 25px; height: 25px; }
.demo-shipping-order strong { font-size: 14px; font-weight: 550; }
.demo-shipping-order p { font-size: 12px; color: #96a0b0; margin-top: 3px; }
.demo-packing-strip { display: flex; justify-content: space-between; gap: 8px; padding: 20px 3px 0; color: #a6adba; font-size: 11px; }
.demo-packing-current { color: #6b7db1; }
.demo-shipping-note { font-size: 12px; color: #9a9fb0; margin-top: 23px !important; }
.demo-new-content { animation: demo-enter 280ms ease both; }
@keyframes demo-enter { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (min-width: 1600px) { .demo-main-grid { grid-template-columns: minmax(0, 1fr) 280px; } .demo-canvas { padding: 30px 36px; } .demo-agent { padding: 30px 26px; } .demo-support-grid { grid-template-columns: 210px minmax(0, 1fr); } .demo-agent-prompt { font-size: 16px; } .demo-table { font-size: 15px; } .demo-message p, .demo-sales-request p, .demo-outline > div { font-size: 16px; } }
@media (max-width: 1200px) { .demo-shell { grid-template-columns: 148px minmax(0, 1fr); } .demo-main-grid { grid-template-columns: minmax(0, 1fr) 223px; } .demo-sidebar { padding-inline: 9px; } .demo-canvas { padding: 23px 20px; } .demo-agent { padding: 25px 18px; } .demo-support-grid { grid-template-columns: 140px minmax(0, 1fr); } .demo-inbox-item { gap: 6px; padding-inline: 5px; } .demo-inbox-item .demo-avatar { display: none; } .demo-conversation { padding: 13px; } .demo-content-heading { align-items: flex-start; } .demo-content-heading h3 { font-size: 18px; } .demo-pricing-grid { gap: 17px; } .demo-price-card { padding: 15px; } }
@media (max-width: 900px) { .demo-shell { grid-template-columns: minmax(0, 1fr); } .demo-sidebar { display: none; } .demo-main-grid { grid-template-columns: minmax(0, 1fr) 230px; } .demo-support-grid { grid-template-columns: minmax(0, 1fr); } .demo-inbox { display: none; } .demo-conversation { padding: 17px; } .demo-content-heading .demo-pill { display: none; } .demo-pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .demo-costs > div { padding: 6px 0; } .demo-costs > .demo-cost-total { margin-top: 6px; padding-top: 8px; } .demo-price-card { padding: 13px 17px; } .demo-price-card input { font-size: 25px; } .demo-margin-row { margin-top: 9px; } .demo-editor-body { padding: 20px; } .demo-editor h4 { font-size: 20px; } .demo-case-type { display: none; } }
@media (max-width: 640px) { .demo-shell { border-radius: 13px; } .demo-topbar { height: 56px; padding: 0 17px; } .demo-topbar strong { font-size: 11px; } .demo-reset { font-size: 11px !important; } .demo-topbar > span { gap: 7px; } .demo-main-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; } .demo-canvas { padding: 22px 18px; } .demo-content-heading { margin-bottom: 19px; } .demo-content-heading h3 { font-size: 18px; letter-spacing: -.5px; } .demo-content-heading p { font-size: 11px; } .demo-agent { border-left: none; border-top: 1px solid var(--demo-line); padding: 22px 20px; } .demo-agent-title { gap: 9px; } .demo-agent-title h4 { font-size: 16px; } .demo-agent-presence { margin-top: 13px; } .demo-agent-prompt { font-size: 15px; line-height: 1.9; margin-top: 8px !important; } .demo-agent-context { margin-top: 17px; padding-top: 13px; } .demo-action { margin-top: 20px; padding: 12px; font-size: 14px !important; } .demo-agent-footnote { padding-top: 11px; } .demo-support-grid { min-height: 0; } .demo-message p { font-size: 15px; } .demo-draft > p { font-size: 14px; } .demo-editor-body { padding: 21px; min-height: 255px; } .demo-editor h4 { font-size: 20px; } .demo-editor-lead { font-size: 14px; } .demo-editor-toolbar { gap: 19px; padding-inline: 17px; } .demo-editor-foot { padding-inline: 16px; gap: 10px; } .demo-pricing-grid { grid-template-columns: minmax(0, 1fr); } .demo-costs > div { font-size: 14px; } .demo-price-card { padding: 16px 19px; } .demo-price-card input { font-size: 31px; } .demo-margin-row strong { font-size: 28px; } .demo-price-card > p { font-size: 12px; } .demo-calculation-note { font-size: 11px; } .demo-ledger-summary { gap: 12px; } .demo-ledger-summary > div > span { font-size: 11px; } .demo-ledger-summary strong { font-size: 29px; } .demo-ledger-summary strong small { display: block; font-size: 10px; margin-top: 3px; } .demo-table-wrap { scrollbar-width: thin; } .demo-quote { padding: 18px 17px; } .demo-sales-request { padding: 15px; } .demo-quote h4 { font-size: 18px; } .demo-quote-total > strong { font-size: 22px; } .demo-case-summary { padding: 18px; } .demo-case-summary h4 { font-size: 21px; } .demo-step p { font-size: 12px; } .demo-shipping-summary > span { font-size: 10px; } .demo-shipping-order { gap: 7px; } .demo-shipping-order > div { gap: 5px; } .demo-shipping-order strong { font-size: 12px; } .demo-shipping-order p { font-size: 11px; } .demo-order-icon { width: 27px; } .demo-shipping-order .demo-pill { font-size: 10px; padding: 4px 7px; } .demo-packing-strip { font-size: 10px; } }
/* The homepage preview wrapper provides the single outer frame. */
.demo-shell { border: 0; border-radius: 0; box-shadow: none; }
/* Keep supporting labels legible even when the app preview sits inside a page. */
.demo-sidebar-bottom strong, .demo-sidebar-bottom small,
.demo-agent-title small, .demo-agent-presence, .demo-agent-context > small,
.demo-agent-footnote, .demo-pill, .demo-inbox-item p, .demo-inbox-item small,
.demo-conversation-head > span, .demo-message small, .demo-draft-label,
.demo-source, .demo-compose, .demo-topic-label, .demo-editor-toolbar,
.demo-editor-foot, .demo-product-summary p, .demo-price-card > p,
.demo-calculation-note, .demo-quote-head small, .demo-case-summary small,
.demo-table th, .demo-quote-note, .demo-finance-note p, .demo-case-type,
.demo-step > span, .demo-step p, .demo-shipping-summary > span,
.demo-packing-strip { font-size: 12px; }
.demo-agent-title small { font-size: 10px; letter-spacing: .7px; }
.demo-agent-footnote { font-size: 11px; }
.demo-action { font-size: 14px !important; }
.demo-agent-prompt, .demo-message p, .demo-draft > p, .demo-editor-lead,
.demo-outline > div, .demo-costs > div, .demo-sales-request p,
.demo-table, .demo-step strong { font-size: 16px; }
.demo-inbox-item strong, .demo-conversation-head, .demo-sales-request strong,
.demo-finance-note strong, .demo-shipping-order strong { font-size: 14px; }
.demo-workspace-name, .demo-sidebar-bottom small, .demo-topbar > span > svg,
.demo-content-heading p, .demo-inbox-item p, .demo-inbox-item small,
.demo-conversation-head > span, .demo-message small, .demo-compose,
.demo-topic-label, .demo-editor-toolbar, .demo-editor-lead,
.demo-editor-foot, .demo-product-summary p, .demo-price-card > p,
.demo-price-card label, .demo-price-card label span, .demo-margin-row > span,
.demo-calculation-note, .demo-quote-head small, .demo-case-summary small,
.demo-table th, .demo-quote-total > span, .demo-ledger-summary > div > span,
.demo-ledger-summary strong > small, .demo-finance-note p,
.demo-case-summary p, .demo-case-type, .demo-step p,
.demo-shipping-summary > div > span, .demo-shipping-summary strong > small,
.demo-shipping-summary > span, .demo-shipping-order p,
.demo-packing-strip, .demo-shipping-note { color: #657188; }
.demo-agent-title small, .demo-agent-presence, .demo-agent-context > small,
.demo-agent-context > span, .demo-agent-footnote, .demo-source,
.demo-editor-placeholder p, .demo-quote-note { color: #706282; }
.demo-pill-soft { color: #626b7d; }
@media (max-width: 1200px) and (min-width: 901px) { .demo-support-grid { grid-template-columns: 132px minmax(0, 1fr); } .demo-inbox-item p { font-size: 12px; } }
@media (max-width: 640px) { .demo-agent-prompt, .demo-message p, .demo-draft > p, .demo-editor-lead, .demo-outline > div, .demo-costs > div, .demo-sales-request p, .demo-step strong { font-size: 15px; } .demo-agent-footnote { font-size: 11px; } .demo-shipping-order .demo-pill, .demo-packing-strip { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .demo-shell, .demo-new-content { animation: none; } .demo-action { transition: none; } .demo-action:hover { transform: none; } }