.business-demo-page { --demo-accent:#155eef; --demo-soft:#eff4ff; background:#f4f7fb; }
.business-demo-page--violet { --demo-accent:#6938ef; --demo-soft:#f4f3ff; }
.business-demo-page--amber { --demo-accent:#b54708; --demo-soft:#fffaeb; }
.business-demo-page--green { --demo-accent:#067647; --demo-soft:#ecfdf3; }
.business-demo-page #aff-im-root { display:none!important; }
.business-demo-shell { width:min(1380px,calc(100% - 40px)); margin:0 auto; padding:28px 0 64px; }
.business-demo-switcher { margin-bottom:24px; padding:6px; display:flex; gap:4px; overflow-x:auto; background:#fff; border:1px solid #e4e7ec; border-radius:12px; box-shadow:0 6px 18px rgba(16,24,40,.05); scrollbar-width:none; }
.business-demo-switcher::-webkit-scrollbar { display:none; }
.business-demo-switcher a { padding:9px 13px; color:#667085; border-radius:8px; font-size:11px; font-weight:750; text-decoration:none; white-space:nowrap; }
.business-demo-switcher a:hover,.business-demo-switcher a.is-active { color:var(--demo-accent); background:var(--demo-soft); }
.business-demo-heading { margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.business-demo-heading > div:first-child > span { color:var(--demo-accent); font-size:10px; font-weight:800; letter-spacing:.08em; }
.business-demo-heading h1 { margin:7px 0 8px; color:#101828; font-size:clamp(30px,3.8vw,46px); letter-spacing:-.04em; }
.business-demo-heading p { max-width:760px; margin:0; color:#667085; font-size:13px; line-height:1.7; }
.business-demo-heading__actions { display:flex; align-items:center; gap:10px; }
.business-demo-heading__actions span { color:#667085; font-size:10px; white-space:nowrap; }
.business-demo-heading__actions button { min-height:40px; padding:0 14px; color:var(--demo-accent); background:#fff; border:1px solid #d0d5dd; border-radius:9px; font-weight:750; cursor:pointer; }
.business-demo-layout { display:grid; grid-template-columns:minmax(0,1fr) 245px; align-items:start; gap:18px; }
.business-demo-window { min-width:0; position:relative; overflow:hidden; background:#e9eef6; border:1px solid #d0d5dd; border-radius:18px; box-shadow:0 24px 60px rgba(16,24,40,.14); }
.business-demo-browserbar { height:44px; padding:0 14px; display:flex; align-items:center; gap:6px; color:#667085; background:#fff; border-bottom:1px solid #e4e7ec; font-size:9px; }
.business-demo-browserbar > i { width:8px; height:8px; background:#f97066; border-radius:50%; }
.business-demo-browserbar > i:nth-child(2) { background:#fdb022; }.business-demo-browserbar > i:nth-child(3) { background:#32d583; }
.business-demo-browserbar > span { margin-left:8px; flex:1; text-align:center; }
.business-demo-browserbar > em { color:var(--demo-accent); font-style:normal; font-weight:800; }
.business-demo-app { min-height:650px; display:grid; grid-template-columns:126px minmax(0,1fr); background:#f7f9fc; }
.business-demo-sidebar { padding:20px 12px; display:flex; flex-direction:column; gap:4px; background:#102a56; }
.business-demo-sidebar strong { margin:0 8px 14px; color:#fff; font-size:14px; }
.business-demo-sidebar span { padding:8px 10px; color:#b2ccff; border-radius:7px; font-size:9px; transition:background 180ms ease,color 180ms ease; }
.business-demo-sidebar span.is-current { color:#fff; background:rgba(255,255,255,.14); }
.business-demo-content { min-width:0; padding:18px; }
.business-demo-apphead { margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.business-demo-apphead small,.business-demo-apphead h2 { display:block; }.business-demo-apphead small { color:var(--demo-accent); font-size:8px; font-weight:800; }.business-demo-apphead h2 { margin:3px 0 0; color:#101828; font-size:20px; }
.business-demo-apphead button { padding:9px 11px; color:#fff; background:var(--demo-accent); border:0; border-radius:7px; font-size:9px; font-weight:750; }
.business-demo-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.business-demo-metrics article { min-width:0; padding:12px; background:#fff; border:1px solid #e4e7ec; border-radius:9px; transition:transform 240ms ease,border-color 240ms ease,box-shadow 240ms ease; }
.business-demo-metrics small,.business-demo-metrics strong,.business-demo-metrics span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.business-demo-metrics small { color:#667085; font-size:8px; }.business-demo-metrics strong { margin-top:5px; color:#1d2939; font-size:15px; }.business-demo-metrics span { margin-top:5px; color:#98a2b3; font-size:7px; }
.business-demo-tablecard,.business-demo-detail { margin-top:10px; padding:13px; background:#fff; border:1px solid #e4e7ec; border-radius:10px; transition:transform 280ms ease,border-color 280ms ease,box-shadow 280ms ease; }
.business-demo-sectionhead { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.business-demo-sectionhead span,.business-demo-sectionhead h3 { display:block; }.business-demo-sectionhead span { color:var(--demo-accent); font-size:7px; font-weight:800; }.business-demo-sectionhead h3 { margin:3px 0 0; color:#344054; font-size:12px; }.business-demo-sectionhead > b { color:#98a2b3; font-size:7px; }
.business-demo-tablewrap { overflow-x:auto; border:1px solid #eaecf0; border-radius:8px; }
.business-demo-table { width:100%; }.business-demo-tablewrap table { width:100%; min-width:620px; border-collapse:collapse; }
.business-demo-tablewrap th,.business-demo-tablewrap td { padding:8px 9px; text-align:left; border-bottom:1px solid #eaecf0; color:#475467; font-size:8px; white-space:nowrap; }
.business-demo-tablewrap th { color:#667085; background:#f8fafc; font-weight:750; }.business-demo-tablewrap tr:last-child td { border-bottom:0; }.business-demo-tablewrap tr.is-target { transition:background 240ms ease; }
.business-demo-detailgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; background:#eaecf0; border:1px solid #eaecf0; border-radius:8px; gap:1px; }
.business-demo-detailgrid > div { min-width:0; padding:10px; background:#fff; }.business-demo-detailgrid small,.business-demo-detailgrid strong { display:block; }.business-demo-detailgrid small { color:#98a2b3; font-size:7px; }.business-demo-detailgrid strong { margin-top:5px; overflow:hidden; color:#344054; font-size:8px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.business-demo-flow { margin-top:10px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.business-demo-flow article { min-width:0; padding:10px; display:flex; gap:8px; background:#fff; border:1px solid #e4e7ec; border-radius:9px; transition:transform 220ms ease,border-color 220ms ease,background 220ms ease; }
.business-demo-flow i { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; color:#667085; background:#f2f4f7; border-radius:6px; font-size:7px; font-style:normal; font-weight:800; }.business-demo-flow strong,.business-demo-flow span { display:block; }.business-demo-flow strong { color:#344054; font-size:8px; }.business-demo-flow span { margin-top:3px; color:#98a2b3; font-size:6px; line-height:1.4; }
.business-demo-window.demo-stage-2 .business-demo-metrics article { border-color:#84adff; box-shadow:0 8px 20px rgba(21,94,239,.12); transform:translateY(-3px); }
.business-demo-window.demo-stage-3 .business-demo-tablecard { border-color:#84adff; box-shadow:0 10px 24px rgba(21,94,239,.12); transform:scale(1.01); }.business-demo-window.demo-stage-3 tr.is-target { background:var(--demo-soft); }
.business-demo-window.demo-stage-4 .business-demo-detail { border-color:#84adff; box-shadow:0 10px 24px rgba(21,94,239,.12); transform:scale(1.01); }
.business-demo-flow article.is-active { border-color:var(--demo-accent); background:var(--demo-soft); transform:translateY(-3px); }.business-demo-flow article.is-active i { color:#fff; background:var(--demo-accent); }
.business-demo-pointer { position:absolute; left:55%; top:25%; z-index:5; opacity:0; pointer-events:none; transition:left 650ms cubic-bezier(.2,.8,.2,1),top 650ms cubic-bezier(.2,.8,.2,1),opacity 180ms ease; }.business-demo-pointer.is-visible { opacity:1; }.business-demo-pointer i { width:0;height:0;display:block;border-top:16px solid #101828;border-right:11px solid transparent;transform:rotate(-18deg);filter:drop-shadow(0 2px 2px #fff); }.business-demo-pointer span { margin:2px 0 0 8px;padding:4px 6px;display:block;color:#fff;background:#101828;border-radius:5px;font-size:7px;white-space:nowrap; }
.business-demo-story { padding:17px; position:sticky; top:92px; background:#fff; border:1px solid #e4e7ec; border-radius:14px; box-shadow:0 8px 24px rgba(16,24,40,.06); }.business-demo-story > span { margin-bottom:8px; display:block; color:var(--demo-accent); font-size:9px; font-weight:800; letter-spacing:.08em; }
.business-demo-story button { width:100%; padding:11px 8px; display:grid; grid-template-columns:auto 1fr; gap:9px; text-align:left; background:transparent; border:0; border-bottom:1px solid #eaecf0; cursor:pointer; opacity:.55; }.business-demo-story button.is-active { opacity:1; }.business-demo-story button i { grid-row:span 2; color:#98a2b3; font-size:8px; font-style:normal; font-weight:800; }.business-demo-story button.is-active i { color:var(--demo-accent); }.business-demo-story button b { color:#344054;font-size:10px;}.business-demo-story button small { color:#98a2b3;font-size:8px; }.business-demo-story p { margin:13px 0 0;color:#667085;font-size:9px;line-height:1.6; }
.business-demo-next { margin-top:22px;padding:24px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e4e7ec;border-radius:15px; }.business-demo-next > div { margin-right:auto; }.business-demo-next span { color:var(--demo-accent);font-size:9px;font-weight:800;}.business-demo-next h2 { margin:5px 0 0;color:#1d2939;font-size:20px; }
@media (max-width:1050px) { .business-demo-layout { grid-template-columns:1fr; }.business-demo-story { position:static;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}.business-demo-story > span,.business-demo-story > p { grid-column:1/-1; }.business-demo-story button { border:1px solid #eaecf0;border-radius:8px; } }
@media (max-width:760px) { .business-demo-shell { width:calc(100% - 24px); }.business-demo-heading { align-items:flex-start;flex-direction:column; }.business-demo-heading__actions { width:100%;justify-content:space-between; }.business-demo-app { grid-template-columns:1fr; }.business-demo-sidebar { display:none; }.business-demo-content { padding:13px; }.business-demo-metrics,.business-demo-detailgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }.business-demo-flow { display:flex;overflow-x:auto; }.business-demo-flow article { min-width:135px; }.business-demo-story { grid-template-columns:1fr; }.business-demo-story > span,.business-demo-story > p { grid-column:auto; }.business-demo-next { align-items:stretch;flex-direction:column; }.business-demo-next > div { margin:0 0 8px; }.business-demo-next .public-btn { justify-content:center; }.business-demo-pointer { display:none; } }
@media (max-width:440px) { .business-demo-heading__actions { align-items:flex-start;flex-direction:column; }.business-demo-heading__actions button { width:100%; }.business-demo-metrics { grid-template-columns:1fr 1fr; }.business-demo-apphead button { display:none; } }
@media (prefers-reduced-motion:reduce) { .business-demo-pointer,.business-demo-metrics article,.business-demo-tablecard,.business-demo-detail,.business-demo-flow article { transition:none; } }