/* Readable product examples, followed by the process that supports them. */
.applications .use-panel {grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:44px 48px;min-height:0;align-items:center;padding:44px 0 32px}
.use-copy,.use-visual {min-width:0}
.applications .use-copy h3 {font-size:clamp(28px,2.7vw,42px);line-height:1.35;margin:19px 0 22px;letter-spacing:-1.2px}
.applications .use-copy>p {font-size:15px;line-height:1.9;max-width:390px}
.use-visual {color:#1b3054;font-size:13px;line-height:1.6}
.example-window {border:1px solid #ffffff38;border-radius:14px;background:#f8faff;overflow:hidden;box-shadow:0 24px 55px -25px #03132b99}
.example-chrome {display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid #e1e7f0;background:#fff}
.example-dots {display:flex;gap:4px;flex-shrink:0}
.example-dots i {width:6px;height:6px;border-radius:50%;background:#d6deeb}
.example-dots i:first-child {background:#f4b68f}
.example-window-brand {font-size:13px;font-weight:700;color:#234b9f;letter-spacing:-.3px}
.example-window-brand>span {font-size:10px;font-weight:400;color:#758298;letter-spacing:0;margin-left:5px}
.example-sample {margin-left:auto;color:#758298;font-size:9px;white-space:nowrap}
.example-screen {padding:24px;min-height:475px;background:#f8faff}
.example-screen[hidden] {display:none}
.screen-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.screen-eyebrow {font-size:9px;letter-spacing:.75px;color:#758399;font-weight:500;line-height:1.6}
.screen-heading h4 {font-size:20px;line-height:1.45;letter-spacing:-.6px;font-weight:600;margin:5px 0 0;color:#1b3054}
.screen-time {font-size:12px;font-variant-numeric:tabular-nums;color:#697c9a}
.order-overview {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.order-overview>div {padding:13px 15px;border:1px solid #dfe7f4;border-radius:8px;background:white}
.order-overview>div>span {font-size:10px;color:#677991}
.order-overview strong {display:block;font-size:27px;letter-spacing:-1px;font-weight:600;margin-top:4px;color:#1e438d}
.order-overview strong small {font-size:10px;letter-spacing:0;color:#6c7b92;font-weight:400;margin-left:4px}
.order-overview .order-attention {background:#fff6ed;border-color:#f2d9c4}
.order-attention strong {color:#ae541f}
.sample-orders {border:1px solid #dfe6f1;border-radius:8px;overflow:hidden;background:white}
.sample-order {display:grid;grid-template-columns:1.15fr .9fr 1fr;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid #e9edf4;font-size:11px}
.sample-order strong {font-size:11px;font-weight:600;color:#2a456b}
.sample-order small {display:block;font-size:9px;color:#7b879b;margin-top:2px}
.sample-order.table-labels {border:0;background:#f1f5fb;color:#7b879b;padding-block:9px;font-size:9px}
.sample-order.flagged {background:#fffbf5}
.status-pill {display:inline-block;border-radius:5px;background:#edf3fa;color:#476084;font-size:9px;line-height:1.5;padding:4px 7px;font-weight:500;white-space:nowrap}
.status-pill.orange {background:#fff0df;color:#a9541c}
.screen-ai-card {margin-top:18px;border-radius:9px;padding:15px 16px 0;background:#eaf0ff;border:1px solid #c9d8fc}
.screen-ai-label {display:flex;align-items:center;gap:7px;color:#2552b8;font-size:11px;font-weight:600}
.screen-ai-label>span {font-size:21px;line-height:1}
.screen-ai-card>p {font-size:12px;line-height:1.75;color:#506581;margin:10px 0 12px}
.screen-drilldown {border-top:1px solid #d0ddf7}
.screen-drilldown>summary {display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:12px 0;font-size:11px;font-weight:600;color:#2455c7}
.screen-drilldown>summary::-webkit-details-marker {display:none}
.screen-drilldown>summary>span {font-size:17px;transition:transform .2s}
.screen-drilldown>summary:hover>span {transform:translate(2px,-2px)}
.screen-drilldown[open]>summary>span {transform:rotate(90deg)}
.screen-drilldown>summary:focus-visible {outline:2px solid #2455e7;outline-offset:3px;border-radius:2px}
.screen-detail {border-top:1px solid #d3dff4;padding:13px 0 16px}
.screen-detail p {font-size:11px;line-height:1.8;color:#58708f;margin:10px 0}
.transfer-route {display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;font-size:12px}
.transfer-route small {display:block;font-size:9px;color:#6f819b;margin-top:4px}
.transfer-route>strong {font-size:11px;font-weight:600;color:#2455c7}
.example-caption {font-size:10px;color:#a9bddf;line-height:1.7;text-align:center;margin:14px 8px 0}

/* A conversation with the relevant business information alongside it. */
.example-screen.sales-screen {padding:0;background:#fff}
.zalo-topbar {display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid #e1e7f0;font-size:10px;color:#70829a}
.zalo-wordmark {font-size:22px;letter-spacing:-1px;font-weight:700;color:#0876ef}
.zalo-agent {margin-left:auto;padding:3px 7px;background:#edf3ff;border-radius:4px;color:#3563b6;font-size:9px}
.conversation-layout {display:grid;grid-template-columns:140px minmax(0,1fr)}
.conversation-list {padding-top:13px;border-right:1px solid #e1e7f0;background:#fbfcfe}
.conversation-search {font-size:8px;color:#8391a5;margin:0 9px 15px;background:#edf1f7;border-radius:5px;padding:7px 8px}
.conversation-selected,.conversation-other {display:flex;align-items:center;gap:8px;padding:13px 9px}
.conversation-selected {background:#eaf2ff;border-left:2px solid #2677e8;padding-left:7px}
.conversation-list strong {display:block;font-size:9px;font-weight:500;color:#344b6d}
.conversation-list small {display:block;font-size:8px;color:#8794a8;margin-top:4px}
.chat-avatar {display:grid;place-items:center;border-radius:50%;height:29px;width:29px;flex-shrink:0;background:#dbeaff;color:#2f6ec4;font-size:11px;font-weight:500}
.chat-avatar.muted {background:#e9edf3;color:#7f8da2}
.conversation-header {display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid #e7edf5}
.conversation-header strong {display:block;font-size:11px;font-weight:600}
.conversation-header small {display:block;font-size:8px;color:#8492a8}
.chat-menu {margin-left:auto;color:#6683b3;font-size:21px}
.chat-body {padding:12px 16px 16px;background:#eff3f9}
.chat-date {font-size:8px;color:#8390a5;text-align:center;margin:0 0 13px}
.customer-bubble {font-size:11px;line-height:1.8;border:1px solid #e1e6ef;padding:11px 13px;border-radius:0 10px 10px 10px;background:white;color:#354b6b;margin-right:24px;box-shadow:0 2px 4px #12233a03}
.chat-context {margin:16px 0 12px}
.chat-context>.screen-eyebrow {font-size:8px}
.chat-context>div {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}
.chat-context>div>span {background:#fff;border:1px solid #d9e3f4;border-radius:6px;padding:8px;font-size:8px;color:#6f7e96}
.chat-context b {display:block;font-size:10px;font-weight:600;color:#3e619c;margin-bottom:3px}
.agent-bubble {padding:11px 13px;background:#deebff;border:1px solid #c3d9fc;border-radius:10px 0 10px 10px;margin-left:14px}
.draft-label {color:#3164b4;font-size:9px;font-weight:600}
.draft-label>span {font-size:13px;margin-right:4px}
.agent-bubble p {margin:7px 0 0;font-size:11px;line-height:1.85;color:#28446b}
.agent-bubble strong {font-weight:600}
.sales-drilldown {border:0;margin-left:14px}
.sales-drilldown>summary {padding-bottom:6px;font-size:10px}
.draft-note {text-align:right;font-size:8px;margin:4px 0 0;color:#7e8da4}
.quote-details {margin:0;font-size:10px;line-height:1.7}
.quote-details>div {display:flex;justify-content:space-between;gap:15px;padding:7px 0;border-bottom:1px solid #d8e2f4}
.quote-details dt {color:#71819b}
.quote-details dd {margin:0;font-weight:500;text-align:right;color:#284979}

/* Numbers and their explanation share one view. */
.period-pill {font-size:9px;border:1px solid #dce5f2;border-radius:5px;white-space:nowrap;padding:5px 8px;color:#75869e;background:white}
.insight-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.insight-metrics>div {border:1px solid #dde5f1;border-radius:7px;background:white;padding:12px 11px}
.insight-metrics>div>span:first-child {font-size:9px;color:#75849a}
.insight-metrics strong {display:block;font-size:28px;font-weight:600;line-height:1.5;letter-spacing:-1px;color:#1e438d;margin:6px 0 5px}
.insight-metrics small {font-size:11px;font-weight:400;letter-spacing:0}
.metric-change {display:block;font-size:8px;line-height:1.6}
.metric-change.positive {color:#4a7c70}
.metric-change.negative {color:#b46139}
.insight-chart {margin-top:18px;border:1px solid #e0e7f2;border-radius:8px;padding:15px;background:white}
.chart-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.chart-top strong {font-size:10px;font-weight:500;color:#627796}
.chart-top>span {font-size:8px;color:#8593a9;display:flex;align-items:center;gap:5px}
.chart-top i {height:5px;width:5px;background:#446dd8;border-radius:2px}
.chart-top i.profit-dot {background:#eca373;margin-left:6px}
.chart-comparison {display:grid;grid-template-columns:65px 1fr;gap:13px;align-items:center;margin-top:13px}
.chart-comparison>span {font-size:9px;color:#7b8aa0}
.chart-comparison>div {background:repeating-linear-gradient(90deg,#edf1f7 0,#edf1f7 1px,transparent 1px,transparent 25%);padding:2px 0}
.chart-bar {position:relative;height:18px;border-radius:0 3px 3px 0}
.chart-bar b {font-size:8px;font-weight:500;line-height:18px;white-space:nowrap}
.chart-bar.revenue {background:#446dd8;text-align:right;color:white;padding-right:7px}
.chart-bar.revenue.before {width:83.333%;background:#9eb5ef}
.chart-bar.revenue.current {width:100%}
.chart-bar.profit {background:#eca373;margin-top:5px;height:7px}
.chart-bar.profit b {position:absolute;left:calc(100% + 7px);top:-5px;color:#977054}
.chart-bar.profit.before {width:20.833%;background:#f4c9a8}
.chart-bar.profit.current {width:20%}

/* The workflow now follows the example, with less visual weight. */
.use-panel>.example-workflow {grid-column:1/-1;max-width:none;background:transparent;border:0;border-top:1px solid #496295;padding:25px 0 0;margin-top:1px}
.example-workflow .workflow-top {margin-bottom:18px;font-size:9px}
.example-workflow .workflow-steps {display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:center}
.example-workflow .flow-node {padding:16px 13px;gap:10px;min-height:82px;box-shadow:none}
.example-workflow .flow-node strong {font-size:12px;line-height:1.65}
.example-workflow .node-label {font-size:8px;letter-spacing:.7px}
.example-workflow .node-count {font-size:9px}
.example-workflow .node-icon {font-size:20px;flex-shrink:0}
.example-workflow .flow-line {height:1px;width:22px;margin:0}
.example-workflow .flow-line>span {width:8px;height:1px;animation:none}
.example-workflow .workflow-note {font-size:10px;margin-top:19px;letter-spacing:0;text-align:center}
.applications .control-principles {margin-top:0;padding-top:23px}
.applications .use-visual details[open] .screen-detail {animation:example-detail-in .25s ease-out}
@keyframes example-detail-in {from {opacity:.2;transform:translateY(-5px)} to {opacity:1;transform:translateY(0)}}

@media(min-width:1500px) {.applications .use-panel {gap:44px 70px}.example-screen {padding:28px}.conversation-layout {grid-template-columns:170px minmax(0,1fr)}.conversation-list strong {font-size:10px}.conversation-list small {font-size:9px}.customer-bubble,.agent-bubble p {font-size:12px}.chat-body {padding:16px 23px 19px}}
@media(max-width:1100px) {.applications .use-panel {grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:35px 30px}.example-screen {padding:18px}.conversation-layout {grid-template-columns:115px minmax(0,1fr)}.conversation-list .chat-avatar {display:none}.conversation-selected,.conversation-other {padding-block:16px}.applications .use-copy h3 {font-size:29px}.applications .use-copy>p {font-size:14px}.example-workflow .node-count {display:none}}
@media(max-width:900px) {.applications .use-panel {grid-template-columns:1fr;gap:30px}.applications .use-copy {max-width:590px}.applications .use-copy h3 {font-size:35px}.applications .use-copy>p {max-width:580px}.example-screen {padding:25px;min-height:0}.conversation-layout {grid-template-columns:145px minmax(0,1fr)}.conversation-list .chat-avatar {display:grid}.conversation-list strong {font-size:10px}.customer-bubble,.agent-bubble p {font-size:12px}.example-workflow .flow-node {padding:13px 10px}.example-workflow .node-icon {display:none}}
@media(max-width:600px) {.applications .use-panel {padding-top:29px;gap:27px}.applications .use-copy h3 {font-size:29px;letter-spacing:-1px;margin-block:15px 19px}.applications .use-copy>p {font-size:14px;margin-bottom:21px}.example-window {border-radius:10px;margin-inline:-7px}.example-chrome {padding:11px 12px;gap:8px}.example-window-brand {font-size:12px}.example-window-brand>span {font-size:8px;margin-left:3px}.example-dots {gap:3px}.example-dots i {height:4px;width:4px}.example-sample {font-size:8px}.example-screen {padding:17px 12px}.screen-heading h4 {font-size:18px}.screen-heading {margin-bottom:16px}.screen-eyebrow {font-size:8px}.order-overview {gap:8px;margin-bottom:15px}.order-overview>div {padding:10px}.order-overview>div>span {font-size:9px}.order-overview strong {font-size:25px}.order-overview strong small {font-size:8px;display:block;margin:0;letter-spacing:0}.sample-order {gap:5px;padding:11px 8px;font-size:9px;grid-template-columns:1.1fr .85fr 1fr}.sample-order strong {font-size:10px}.sample-order small {font-size:8px}.sample-order.table-labels {font-size:8px}.status-pill {font-size:8px;padding:4px 5px}.screen-ai-card {padding:13px 11px 0;margin-top:14px}.screen-ai-label {font-size:10px;gap:5px}.screen-ai-card>p {font-size:11px}.screen-drilldown>summary {font-size:10px}.transfer-route {gap:8px;font-size:11px}.transfer-route small {font-size:8px}.transfer-route>strong {font-size:10px}.example-caption {font-size:9px;margin:12px 0 0}.zalo-topbar {padding:10px 13px;gap:10px;font-size:9px}.zalo-wordmark {font-size:21px}.zalo-agent {font-size:8px}.conversation-layout {grid-template-columns:1fr}.conversation-list {display:none}.conversation-header {padding:12px}.chat-body {padding:12px}.customer-bubble,.agent-bubble p {font-size:12px}.chat-context>div>span {font-size:9px}.draft-note {font-size:8px}.sales-drilldown>summary {font-size:11px}.quote-details {font-size:9px}.insight-metrics {gap:6px}.insight-metrics>div {padding:9px 7px}.insight-metrics>div>span:first-child {font-size:8px;display:block;min-height:26px}.insight-metrics strong {font-size:24px;letter-spacing:-.8px}.insight-metrics small {font-size:9px}.metric-change {font-size:7px;line-height:1.7}.period-pill {font-size:8px;padding:4px 6px}.insight-chart {padding:12px 10px}.chart-top {gap:8px}.chart-top strong {font-size:9px}.chart-top>span {font-size:7px;gap:4px}.chart-comparison {grid-template-columns:57px 1fr;gap:7px}.chart-comparison>span {font-size:8px}.use-panel>.example-workflow {padding-top:23px}.example-workflow .workflow-steps {grid-template-columns:1fr}.example-workflow .flow-node {min-height:67px;padding:12px 15px;gap:14px}.example-workflow .node-icon {display:block}.example-workflow .node-count {display:block}.example-workflow .flow-line {height:15px;width:1px;margin-left:25px}.example-workflow .flow-line>span {height:7px;width:1px}.example-workflow .workflow-note {font-size:9px;line-height:1.8}.applications .control-principles {gap:12px}.applications .control-principles p {font-size:12px}}
@media(prefers-reduced-motion:reduce) {.applications .use-visual details[open] .screen-detail {animation:none}.screen-drilldown>summary>span {transition:none}}