.demo-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 84% 12%, rgba(106, 82, 169, .13), transparent 28%),
    radial-gradient(ellipse at 8% 50%, rgba(45, 129, 135, .08), transparent 30%),
    #090e16;
}

.demo-wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.demo-header .header-inner { min-height: 76px; }
.demo-nav { display: flex; align-items: center; gap: 28px; color: #bbc7d5; font-size: 12px; font-weight: 650; }
.demo-nav > a:first-child:hover, .demo-footer a:hover { color: var(--green); }
.demo-nav .nav-cta { padding: 10px 15px; }

.demo-intro { padding-block: 64px 25px; }
.demo-intro .eyebrow { margin-bottom: 16px; }
.demo-intro h1 { max-width: 860px; margin-bottom: 18px; font-size: clamp(46px, 6vw, 70px); line-height: 1.02; }
.demo-intro h1 em { color: var(--green); }
.demo-lede { max-width: 660px; margin: 0; color: #aab8c8; font-size: 15px; line-height: 1.8; }

.demo-disclosure { display: flex; align-items: flex-start; gap: 13px; margin-block: 5px 20px; padding: 15px 18px; border: 1px solid rgba(187, 161, 255, .24); border-radius: 8px; background: rgba(29, 27, 45, .6); }
.disclosure-mark { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(187, 161, 255, .12); color: #c9b5ff; }
.demo-disclosure p { margin: 0; color: #bac5d3; font-size: 12px; line-height: 1.65; }
.demo-disclosure strong { color: #e8e0ff; }

.demo-app-section { padding-bottom: 68px; }
.demo-app { overflow: hidden; border: 1px solid rgba(153, 177, 209, .22); border-radius: 13px; background: linear-gradient(145deg, rgba(15, 24, 37, .98), rgba(11, 18, 28, .98)); box-shadow: 0 30px 80px rgba(0, 0, 0, .34), 0 0 70px rgba(83, 71, 145, .07); }
.demo-app-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid rgba(166, 187, 215, .12); }
.demo-app-brand { display: flex; align-items: center; gap: 11px; }
.app-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(125, 230, 210, .29); border-radius: 10px; background: rgba(125, 230, 210, .07); color: var(--green); font-size: 16px; }
.demo-app-brand strong, .demo-app-brand small { display: block; }
.demo-app-brand strong { color: #e8eff7; font-size: 12px; }
.demo-app-brand small { margin-top: 1px; color: #8d9bae; font-size: 10px; }
.demo-reset { padding: 8px 10px; border: 1px solid rgba(160, 181, 208, .2); border-radius: 6px; background: transparent; color: #b7c3d0; font-size: 10px; cursor: pointer; }
.demo-reset:hover { border-color: rgba(125, 230, 210, .45); color: var(--green); }

.demo-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-bottom: 1px solid rgba(166, 187, 215, .12); background: rgba(20, 30, 45, .52); }
.workspace-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #c2a7ff; box-shadow: 0 0 14px rgba(194, 167, 255, .4); }
.workspace-name strong, .workspace-name small { display: block; }
.workspace-name strong { color: #e8eff7; font-size: 12px; }
.workspace-name small { color: #8998aa; font-size: 9px; }
.demo-views { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid rgba(159, 181, 208, .13); border-radius: 8px; background: rgba(5, 11, 18, .4); }
.demo-view-button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: #95a4b5; font-size: 11px; font-weight: 650; cursor: pointer; }
.demo-view-button:hover { color: #e8eff7; }
.demo-view-button.is-active { background: #273347; color: #eaf2f8; box-shadow: inset 0 0 0 1px rgba(180, 199, 225, .09); }
.simulation-label { display: inline-flex; align-items: center; gap: 7px; color: #91a0b1; font-size: 9px; white-space: nowrap; }
.simulation-label span { color: var(--green); font-size: 8px; }

.demo-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 22px; border-bottom: 1px solid rgba(166, 187, 215, .12); }
.metric-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 49px; padding: 9px 12px; border: 1px solid rgba(159, 181, 208, .13); border-radius: 7px; background: rgba(255, 255, 255, .018); }
.metric-card span { color: #9aa9ba; font-size: 10px; }
.metric-card strong { color: #edf2f8; font-size: 18px; font-weight: 650; }
.metric-card .metric-green { color: var(--green); }
.metric-card .metric-violet { color: #c2a7ff; }
.metric-card .metric-small { font-size: 11px; }

.demo-panel[hidden] { display: none; }
.mail-layout { display: grid; grid-template-columns: minmax(250px, .74fr) minmax(0, 1.65fr); min-height: 440px; }
.mail-list { padding: 19px 14px 16px; border-right: 1px solid rgba(166, 187, 215, .12); }
.mail-list-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 14px; }
.mail-list-heading h2, .calendar-heading h2 { margin: 0; color: #edf2f8; font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: -.03em; }
.panel-kicker { margin: 0 0 3px; color: #8292a6; font-size: 8px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.mail-count { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: rgba(187, 161, 255, .14); color: #c8b3ff; font-size: 9px; font-weight: 700; }
.mail-row { display: grid; width: 100%; grid-template-columns: 31px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.mail-row + .mail-row { margin-top: 4px; }
.mail-row:hover { background: rgba(255, 255, 255, .035); }
.mail-row.is-selected { border-color: rgba(125, 230, 210, .22); background: linear-gradient(105deg, rgba(125, 230, 210, .08), rgba(187, 161, 255, .055)); }
.mail-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; font-size: 8px; font-weight: 750; }
.avatar-green { background: rgba(125, 230, 210, .12); color: #8cebdc; }
.avatar-violet { background: rgba(187, 161, 255, .13); color: #c8b3ff; }
.avatar-amber { background: rgba(246, 191, 111, .13); color: #f4c47e; }
.mail-row-copy { display: block; min-width: 0; }
.mail-row-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.mail-row-top strong { overflow: hidden; color: #dce6f0; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-top time { color: #77879a; font-size: 8px; }
.mail-row-subject { display: block; overflow: hidden; margin-top: 5px; color: #aab7c7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-bottom { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: #8493a5; font-size: 9px; }
.priority-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; }
.dot-normal { background: #8de5d2; }
.dot-high { background: #f1ba6a; box-shadow: 0 0 10px rgba(241, 186, 106, .32); }
.dot-review { background: #c2a7ff; box-shadow: 0 0 10px rgba(194, 167, 255, .27); }
.list-rule-note { display: flex; align-items: flex-start; gap: 8px; margin: 19px 6px 0; padding: 11px 10px; border-top: 1px solid rgba(166, 187, 215, .12); color: #8998aa; font-size: 8px; line-height: 1.6; }
.ai-mini { color: #c2a7ff; font-size: 12px; line-height: 1.1; }

.mail-detail { min-width: 0; padding: 25px clamp(20px, 3.2vw, 42px) 28px; }
.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(166, 187, 215, .13); }
.detail-heading h3 { margin: 4px 0 8px; color: #f0f4fa; font-family: var(--serif); font-size: clamp(20px, 2.5vw, 27px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; }
.detail-from { margin: 0; color: #94a4b6; font-size: 10px; }
.priority-badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(125, 230, 210, .22); border-radius: 99px; background: rgba(125, 230, 210, .07); color: #9de9dc; font-size: 8px; font-weight: 700; white-space: nowrap; }
.priority-badge.is-high { border-color: rgba(242, 191, 111, .27); background: rgba(242, 191, 111, .08); color: #f0c47f; }
.message-content { margin: 20px 0; padding: 15px 16px; border: 1px solid rgba(159, 181, 208, .12); border-radius: 8px; background: rgba(255, 255, 255, .018); color: #b8c4d2; font-size: 11px; line-height: 1.8; }
.message-content p { margin: 0; }
.message-content p + p { margin-top: 8px; }
.analysis-card { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 17px; padding: 12px; border-left: 2px solid #bba1ff; border-radius: 0 7px 7px 0; background: rgba(187, 161, 255, .065); }
.analysis-icon { color: #c5b1ff; font-size: 13px; }
.analysis-card strong { display: block; margin-bottom: 3px; color: #dbd1f5; font-size: 10px; }
.analysis-card p { margin: 0; color: #aeb8c8; font-size: 10px; line-height: 1.6; }
.response-card { padding: 13px 14px; border: 1px solid rgba(125, 230, 210, .14); border-radius: 7px; background: rgba(125, 230, 210, .035); }
.response-label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #8ce2d3; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.response-label span { color: #c2a7ff; font-size: 11px; }
.response-card p { margin: 0; color: #bac8d2; font-size: 11px; line-height: 1.75; }
.detail-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.demo-action { min-height: 39px; padding: 0 14px; border: 1px solid rgba(125, 230, 210, .32); border-radius: 6px; background: rgba(125, 230, 210, .11); color: #a7f0e2; font-size: 10px; font-weight: 700; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.demo-action:hover { transform: translateY(-1px); border-color: var(--green); background: rgba(125, 230, 210, .17); }
.demo-action:disabled { cursor: default; opacity: .7; transform: none; }
.demo-action-secondary { border-color: rgba(187, 161, 255, .3); background: rgba(187, 161, 255, .09); color: #d0bdff; }
.action-note { margin: 0; color: #78899d; font-size: 9px; }
.flow-status { display: flex; align-items: center; gap: 8px; margin: 13px 0 0; color: #9caabc; font-size: 10px; }
.flow-status .status-check { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(125, 230, 210, .12); color: #99ecdc; font-size: 9px; }
.flow-status .status-wait { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(242, 191, 111, .12); color: #f3c47c; font-size: 9px; }
.conversation-thread { display: grid; gap: 8px; margin: 16px 0; }
.thread-message { max-width: 94%; padding: 10px 12px; border: 1px solid rgba(159, 181, 208, .12); border-radius: 8px 8px 8px 2px; background: rgba(255, 255, 255, .025); color: #b8c4d2; font-size: 9px; line-height: 1.65; }
.thread-message.assistant { justify-self: end; border-color: rgba(125, 230, 210, .14); border-radius: 8px 8px 2px 8px; background: rgba(125, 230, 210, .04); }
.thread-message.customer { border-color: rgba(187, 161, 255, .14); }
.thread-label { display: block; margin-bottom: 4px; color: #89e4d5; font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.thread-message.customer .thread-label { color: #c6b3ff; }
.empty-detail { margin: 40px auto; color: #94a4b6; text-align: center; }

.calendar-panel { min-height: 440px; padding: 23px clamp(20px, 3.5vw, 40px) 30px; }
.calendar-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 19px; border-bottom: 1px solid rgba(166, 187, 215, .13); }
.calendar-demo-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(187, 161, 255, .2); border-radius: 99px; color: #c6b3ff; font-size: 8px; }
.calendar-content { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 17px; margin-top: 20px; }
.calendar-date-card { display: flex; min-height: 196px; flex-direction: column; align-items: center; justify-content: center; padding: 16px; border: 1px solid rgba(187, 161, 255, .2); border-radius: 9px; background: radial-gradient(ellipse at 50% 0%, rgba(187, 161, 255, .11), transparent 62%), rgba(255,255,255,.02); text-align: center; }
.calendar-month { color: #c2a7ff; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.calendar-day { margin-top: 7px; color: #f0f4fa; font-family: var(--serif); font-size: 41px; font-weight: 400; line-height: 1; }
.calendar-time { margin-top: 9px; color: #99ecdc; font-size: 12px; font-weight: 700; }
.calendar-date-caption { margin-top: 7px; color: #94a4b6; font-size: 8px; }
.calendar-status-card { min-width: 0; padding: 17px; border: 1px solid rgba(159, 181, 208, .13); border-radius: 9px; background: rgba(255, 255, 255, .018); }
.calendar-status-top { display: flex; align-items: center; gap: 8px; }
.calendar-status-top strong { color: #dbe5ef; font-size: 11px; }
.calendar-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px rgba(125, 230, 210, .42); }
.calendar-status-card > p { margin: 9px 0 14px; color: #9eacbc; font-size: 10px; line-height: 1.65; }
.calendar-empty-state, .calendar-booked-state { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border-radius: 7px; background: rgba(187, 161, 255, .06); color: #acb8c7; font-size: 8px; line-height: 1.6; }
.empty-calendar-icon { color: #c2a7ff; font-size: 15px; }
.calendar-booked-state { border: 1px solid rgba(125, 230, 210, .15); background: rgba(125, 230, 210, .045); }
.booked-check { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(125, 230, 210, .14); color: #9ceada; }
.calendar-booked-state strong, .calendar-booked-state small { display: block; }
.calendar-booked-state strong { color: #b9efe5; font-size: 8px; }
.calendar-booked-state small { margin-top: 3px; color: #93a8b2; font-size: 8px; }
.calendar-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.calendar-rules > div { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-top: 1px solid rgba(166, 187, 215, .13); }
.rule-symbol { color: #c2a7ff; font-family: var(--serif); font-size: 12px; }
.calendar-rules strong, .calendar-rules small { display: block; }
.calendar-rules strong { color: #cdd8e4; font-size: 10px; }
.calendar-rules small { margin-top: 4px; color: #8c9bae; font-size: 9px; line-height: 1.5; }

.demo-app-foot { display: flex; align-items: flex-start; gap: 9px; padding: 13px 22px; border-top: 1px solid rgba(166, 187, 215, .12); background: rgba(5, 10, 17, .3); }
.demo-app-foot > span { color: #c2a7ff; font-size: 12px; }
.demo-app-foot p { margin: 0; color: #8292a5; font-size: 8px; line-height: 1.6; }
.demo-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 0 84px; }
.demo-cta .eyebrow { margin-bottom: 11px; }
.demo-cta h2 { margin: 0; color: #edf2f8; font-size: clamp(32px, 4vw, 45px); line-height: 1.08; }
.demo-cta h2 em { color: var(--green); }
.demo-cta .button { white-space: nowrap; }
.demo-footer { border-top: 1px solid rgba(202, 217, 239, .12); background: #060a10; }
.demo-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 63px; color: #8998aa; font-size: 9px; }
.demo-footer a { color: #c3cdd9; }
.demo-toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(410px, calc(100vw - 32px)); padding: 13px 16px; transform: translateY(14px); border: 1px solid rgba(125, 230, 210, .27); border-radius: 8px; background: #13241f; box-shadow: 0 14px 38px rgba(0,0,0,.35); color: #c9f4eb; font-size: 10px; line-height: 1.6; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.demo-toast.is-visible { transform: translateY(0); opacity: 1; }
.noscript-note { width: min(1120px, calc(100% - 64px)); margin: 0 auto 30px; color: #ffc7a8; font-size: 12px; }

/* Familiar mail-client layout, styled for the MS Digital Solution brand. */
.demo-client-layout { display: grid; grid-template-columns: 202px minmax(0, 1fr); min-height: 550px; }
.demo-sidebar { display: flex; flex-direction: column; padding: 17px 11px 13px; border-right: 1px solid rgba(166, 187, 215, .13); background: linear-gradient(180deg, rgba(21, 31, 47, .92), rgba(13, 21, 32, .93)); }
.sidebar-workspace { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 8px 15px; border-bottom: 1px solid rgba(166, 187, 215, .12); }
.sidebar-workspace > span:nth-child(2) { min-width: 0; }
.sidebar-workspace strong, .sidebar-workspace small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-workspace strong { color: #e2eaf3; font-size: 11px; }
.sidebar-workspace small { margin-top: 2px; color: #8797aa; font-size: 9px; }
.workspace-menu-mark { margin-left: auto; color: #8b9bae; font-size: 12px; }
.sidebar-section-label { margin: 20px 8px 8px; color: #72849a; font-size: 8px; font-weight: 750; letter-spacing: .13em; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav-button { display: grid; grid-template-columns: 19px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 37px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #9dabbc; font-size: 10px; text-align: left; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.sidebar-nav-button:hover { background: rgba(255,255,255,.045); color: #edf2f8; }
.sidebar-nav-button.is-active { border-color: rgba(125, 230, 210, .13); background: linear-gradient(90deg, rgba(125, 230, 210, .11), rgba(125, 230, 210, .045)); color: #d8f5ee; box-shadow: inset 2px 0 #7de6d2; }
.sidebar-nav-icon { color: #94a7ba; font-size: 13px; text-align: center; }
.sidebar-nav-button.is-active .sidebar-nav-icon { color: var(--green); }
.sidebar-count { min-width: 18px; padding: 2px 5px; border-radius: 99px; background: rgba(166, 187, 215, .1); color: #aebccd; font-size: 8px; text-align: center; }
.sidebar-rule-card { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 11px 9px; border: 1px solid rgba(187, 161, 255, .16); border-radius: 7px; background: rgba(187, 161, 255, .045); }
.sidebar-ai-mark { color: #c2a7ff; font-size: 12px; }
.sidebar-rule-card strong { display: block; color: #d8cff0; font-size: 9px; }
.sidebar-rule-card p { margin: 4px 0 0; color: #8f9daf; font-size: 8px; line-height: 1.55; }
.rule-status-dot { width: 6px; height: 6px; margin: 3px 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(125,230,210,.4); }
.sidebar-disclaimer { margin: 10px 7px 0; color: #718197; font-size: 8px; line-height: 1.5; }
.demo-client-main { min-width: 0; background: rgba(8, 14, 22, .42); }
.demo-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; padding: 12px 22px; border-bottom: 1px solid rgba(166, 187, 215, .12); background: rgba(20, 30, 45, .3); }
.demo-workspace-bar .panel-kicker { margin-bottom: 3px; }
.demo-workspace-bar h2 { margin: 0; color: #edf2f8; font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: -.025em; }
.demo-workspace-bar .simulation-label { padding: 6px 9px; border: 1px solid rgba(125, 230, 210, .16); border-radius: 99px; background: rgba(125, 230, 210, .035); }

.dashboard-panel { padding: 21px clamp(15px, 2.5vw, 28px) 27px; }
.dashboard-greeting { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.dashboard-greeting > div:first-child { min-width: 0; }
.dashboard-greeting h3 { margin: 0 0 6px; color: #eff3f8; font-family: var(--serif); font-size: clamp(21px, 2.4vw, 28px); font-weight: 400; letter-spacing: -.025em; }
.dashboard-greeting > div > p:last-child { max-width: 465px; margin: 0; color: #9baabd; font-size: 11px; line-height: 1.6; }
.dashboard-rule-callout { display: flex; align-items: flex-start; gap: 9px; flex: 0 0 auto; padding: 10px 12px; border: 1px solid rgba(187, 161, 255, .15); border-radius: 7px; background: rgba(187, 161, 255, .04); }
.callout-icon { color: #c5b1ff; font-size: 12px; }
.dashboard-rule-callout strong, .dashboard-rule-callout small { display: block; }
.dashboard-rule-callout strong { color: #d8cff0; font-size: 9px; }
.dashboard-rule-callout small { margin-top: 4px; color: #95a2b3; font-size: 8px; line-height: 1.5; }

.overview-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 17px; }
.overview-card { min-width: 0; padding: 11px 12px 10px; border: 1px solid rgba(159, 181, 208, .14); border-radius: 7px; background: linear-gradient(145deg, rgba(25, 35, 51, .83), rgba(15, 23, 35, .9)); color: #edf2f8; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.overview-card:hover { transform: translateY(-2px); border-color: rgba(125, 230, 210, .32); background: linear-gradient(145deg, rgba(30, 43, 61, .95), rgba(17, 27, 40, .98)); }
.overview-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #a0aec0; font-size: 10px; }
.overview-icon { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 5px; background: rgba(255,255,255,.045); color: #b4c2d1; font-size: 10px; }
.overview-card > strong { display: block; margin-top: 8px; color: #edf2f8; font-size: 25px; font-weight: 650; line-height: 1; }
.overview-card > small { display: block; overflow: hidden; margin-top: 6px; color: #8392a5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.urgent-overview { border-top: 2px solid rgba(242, 191, 111, .52); }
.urgent-overview .overview-icon, .urgent-overview > strong { color: #f0c47f; }
.review-overview { border-top: 2px solid rgba(187, 161, 255, .55); }
.review-overview .overview-icon, .review-overview > strong { color: #c6b3ff; }
.routine-overview { border-top: 2px solid rgba(125, 230, 210, .45); }
.routine-overview .overview-icon, .routine-overview > strong { color: #9de9dc; }
.calendar-overview { border-top: 2px solid rgba(142, 180, 227, .4); }
.calendar-overview .overview-icon { color: #a9c9ee; }

.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.dashboard-card { min-width: 0; padding: 12px; border: 1px solid rgba(159, 181, 208, .13); border-radius: 7px; background: rgba(255,255,255,.018); }
.dashboard-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dashboard-card-heading .panel-kicker { margin-bottom: 3px; font-size: 6px; }
.dashboard-card-heading h3 { margin: 0; color: #dce5ee; font-family: var(--serif); font-size: 15px; font-weight: 400; letter-spacing: -.01em; }
.dashboard-pill { flex: 0 0 auto; padding: 4px 7px; border: 1px solid transparent; border-radius: 99px; font-size: 8px; font-weight: 650; white-space: nowrap; }
.pill-urgent { border-color: rgba(242, 191, 111, .18); background: rgba(242, 191, 111, .07); color: #efc47f; }
.pill-review { border-color: rgba(187, 161, 255, .18); background: rgba(187, 161, 255, .07); color: #c9b7ff; }
.pill-routine { border-color: rgba(125, 230, 210, .16); background: rgba(125, 230, 210, .06); color: #9ce7da; }
.pill-calendar { border-color: rgba(142, 180, 227, .17); background: rgba(142, 180, 227, .06); color: #abc9eb; }
.dashboard-task { display: grid; width: 100%; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 8px; border: 1px solid rgba(159, 181, 208, .1); border-radius: 6px; background: rgba(6, 11, 18, .28); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.dashboard-task:hover { border-color: rgba(125, 230, 210, .24); background: rgba(125, 230, 210, .035); }
.task-avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; font-size: 7px; font-weight: 750; }
.task-copy { display: block; min-width: 0; }
.task-copy strong, .task-copy small, .task-summary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-copy strong { color: #d9e3ed; font-size: 10px; font-weight: 650; }
.task-copy small { margin-top: 3px; color: #8998aa; font-size: 9px; }
.task-summary { margin-top: 5px; color: #a2b1c1; font-size: 9px; }
.task-open { color: #91e5d6; font-size: 9px; font-weight: 700; white-space: nowrap; }
.dashboard-card:nth-child(2) .task-open { color: #c4b1ff; }
.dashboard-card:nth-child(4) .task-open { color: #a9c9ee; }

@media (max-width: 820px) {
  .demo-wrap { width: calc(100% - 40px); }
  .demo-intro { padding-top: 49px; }
  .demo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mail-layout { grid-template-columns: 1fr; }
  .mail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 15px 13px; border-right: 0; border-bottom: 1px solid rgba(166, 187, 215, .12); }
  .mail-list-heading { grid-column: 1 / -1; padding: 0 5px 5px; }
  .mail-row { grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 10px 7px; }
  .mail-avatar { width: 25px; height: 25px; }
  .mail-row-top strong { font-size: 9px; }
  .mail-row-top time { display: none; }
  .mail-row-subject { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 27px; }
  .mail-row-bottom { font-size: 7px; }
  .list-rule-note { grid-column: 1 / -1; margin: 7px 5px 0; padding: 9px 0 0; }
  .calendar-content { grid-template-columns: 125px minmax(0, 1fr); }
  .demo-client-layout { grid-template-columns: 174px minmax(0, 1fr); }
  .demo-sidebar { padding-inline: 8px; }
  .dashboard-greeting { align-items: flex-start; flex-direction: column; gap: 12px; }
  .dashboard-rule-callout { align-self: stretch; }
  .overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .demo-wrap { width: calc(100% - 32px); }
  .demo-header .header-inner { width: calc(100% - 32px); min-height: 68px; }
  .demo-nav > a:first-child { display: none; }
  .demo-nav { gap: 11px; font-size: 9px; }
  .demo-nav .nav-cta { padding: 8px 10px; }
  .demo-intro { padding-block: 43px 20px; }
  .demo-intro h1 { font-size: clamp(42px, 12vw, 58px); }
  .demo-lede { font-size: 13px; }
  .demo-disclosure { margin-bottom: 14px; padding: 12px; }
  .demo-disclosure p { font-size: 10px; }
  .demo-app-section { padding-bottom: 52px; }
  .demo-app { border-radius: 10px; }
  .demo-app-top { padding: 12px; }
  .demo-reset { max-width: 108px; padding: 7px 8px; font-size: 8px; }
  .demo-workspace-bar { flex-wrap: wrap; gap: 10px; padding: 11px 12px; }
  .workspace-name { flex: 1 1 calc(50% - 10px); }
  .simulation-label { order: 2; width: 100%; padding-left: 2px; font-size: 8px; }
  .demo-views { order: 1; }
  .demo-view-button { min-height: 30px; padding-inline: 10px; font-size: 9px; }
  .demo-metrics { gap: 7px; padding: 10px 11px; }
  .metric-card { min-height: 43px; padding: 7px 8px; }
  .metric-card span { font-size: 8px; }
  .metric-card strong { font-size: 15px; }
  .metric-card .metric-small { font-size: 9px; }
  .mail-list { padding: 12px 8px; gap: 3px; }
  .mail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mail-row { display: block; padding: 8px 6px; }
  .mail-avatar { margin-bottom: 6px; }
  .mail-row-top { display: block; }
  .mail-row-top strong { display: block; }
  .mail-row-subject { margin-top: 4px; font-size: 9px; }
  .mail-row-bottom { margin-top: 5px; font-size: 8px; }
  .mail-detail { padding: 18px 14px 20px; }
  .detail-heading { gap: 8px; }
  .detail-heading h3 { font-size: 21px; }
  .priority-badge { padding: 5px 7px; font-size: 7px; }
  .message-content { margin-block: 15px; padding: 12px; font-size: 10px; }
  .analysis-card { padding: 10px; }
  .calendar-panel { min-height: 0; padding: 18px 13px 21px; }
  .calendar-heading { align-items: flex-start; flex-direction: column; }
  .calendar-content { grid-template-columns: 88px minmax(0, 1fr); gap: 9px; margin-top: 12px; }
  .calendar-date-card { min-height: 178px; padding: 10px 5px; }
  .calendar-day { font-size: 34px; }
  .calendar-time { font-size: 10px; }
  .calendar-date-caption { font-size: 7px; }
  .calendar-status-card { padding: 11px; }
  .calendar-status-top strong { font-size: 9px; }
  .calendar-status-card > p { font-size: 8px; }
  .calendar-rules { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .calendar-rules > div { padding: 9px 5px; }
  .demo-app-foot { padding: 11px 12px; }
  .demo-app-foot p { font-size: 7px; }
  .demo-cta { align-items: flex-start; flex-direction: column; gap: 20px; padding-bottom: 58px; }
  .demo-cta h2 { font-size: 37px; }
  .demo-footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; min-height: 68px; padding-block: 11px; }
  .demo-footer-inner span { font-size: 8px; }
  .demo-toast { right: 12px; bottom: 12px; }
  .noscript-note { width: calc(100% - 32px); }
  .demo-client-layout { grid-template-columns: 1fr; min-height: 0; }
  .demo-sidebar { padding: 8px 9px; border-right: 0; border-bottom: 1px solid rgba(166, 187, 215, .13); }
  .sidebar-workspace, .sidebar-section-label, .sidebar-rule-card, .sidebar-disclaimer { display: none; }
  .sidebar-nav { display: flex; gap: 4px; }
  .sidebar-nav-button { display: flex; justify-content: center; gap: 6px; min-height: 35px; flex: 1 1 0; padding: 0 5px; font-size: 8px; }
  .sidebar-nav-button.is-active { box-shadow: inset 0 -2px var(--green); }
  .sidebar-nav-icon { font-size: 11px; }
  .sidebar-count { min-width: 15px; padding: 1px 4px; font-size: 7px; }
  .demo-workspace-bar { min-height: 58px; padding: 9px 12px; }
  .demo-workspace-bar h2 { font-size: 19px; }
  .dashboard-panel { padding: 15px 11px 18px; }
  .dashboard-greeting { margin-bottom: 13px; }
  .dashboard-greeting h3 { font-size: 22px; }
  .dashboard-rule-callout { padding: 8px 10px; }
  .overview-cards { gap: 6px; margin-bottom: 11px; }
  .overview-card { padding: 9px; }
  .overview-card-top { font-size: 9px; }
  .overview-card > strong { font-size: 20px; }
  .overview-card > small { font-size: 8px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 7px; }
  .dashboard-card { padding: 10px; }
  .task-copy strong { font-size: 9px; }
  .task-copy small, .task-summary, .task-open { font-size: 8px; }
}

/* Brighter, Outlook-like product preview while keeping the brand accents. */
.demo-page {
  color-scheme: light;
  background:
    radial-gradient(ellipse at 84% 12%, rgba(151, 126, 221, .12), transparent 30%),
    radial-gradient(ellipse at 8% 50%, rgba(75, 182, 169, .09), transparent 32%),
    #f4f7fb;
  color: #1d2939;
}
.demo-page .site-header { border-color: #dce4ed; background: rgba(248, 250, 253, .8); }
.demo-page .brand-mark { border-color: rgba(16, 128, 111, .3); color: #147d70; }
.demo-page .brand-mark > span { color: #8066c9; }
.demo-page .brand-name { color: #253247; }
.demo-page .demo-nav { color: #526176; }
.demo-page .demo-nav > a:first-child:hover { color: #147d70; }
.demo-page .demo-nav .nav-cta { border-color: rgba(20, 125, 112, .28); color: #147d70; }
.demo-page .demo-nav .nav-cta:hover { border-color: #147d70; background: #147d70; color: #fff; }
.demo-page .demo-intro h1 { color: #1d2939; }
.demo-page .demo-intro h1 em { color: #168878; }
.demo-page .eyebrow { color: #147d70; }
.demo-page .demo-lede { color: #526176; }
.demo-page .demo-disclosure { border-color: #ded9ef; background: rgba(255, 255, 255, .88); box-shadow: 0 4px 18px rgba(25, 42, 65, .035); }
.demo-page .disclosure-mark { background: #f0ebfc; color: #7459bc; }
.demo-page .demo-disclosure p { color: #506075; }
.demo-page .demo-disclosure strong { color: #322b48; }

.demo-page .demo-app { border-color: #d7e0ea; background: #fff; box-shadow: 0 26px 64px rgba(37, 54, 78, .12), 0 0 55px rgba(99, 84, 151, .045); }
.demo-page .demo-app-top { border-color: #e3e9f0; background: #fff; }
.demo-page .app-mark { border-color: #c9e9e2; background: #eef9f6; color: #168878; }
.demo-page .demo-app-brand strong { color: #253247; }
.demo-page .demo-app-brand small { color: #7b8797; }
.demo-page .demo-reset { border-color: #d5dee8; background: #fff; color: #536177; }
.demo-page .demo-reset:hover { border-color: #75c8ba; background: #f3fbf9; color: #147d70; }

.demo-page .demo-client-layout { background: #fff; }
.demo-page .demo-sidebar { border-color: #e0e7ef; background: linear-gradient(180deg, #f5f8fc, #f0f4f9); }
.demo-page .sidebar-workspace { border-color: #e0e7ef; }
.demo-page .sidebar-workspace strong { color: #29364a; }
.demo-page .sidebar-workspace small { color: #77869a; }
.demo-page .workspace-menu-mark { color: #718097; }
.demo-page .sidebar-section-label { color: #77869a; }
.demo-page .sidebar-nav-button { color: #59677c; }
.demo-page .sidebar-nav-button:hover { background: #eaf0f6; color: #253247; }
.demo-page .sidebar-nav-button.is-active { border-color: #d3ebe5; background: linear-gradient(90deg, #e5f5f1, #edf8f6); color: #126e63; box-shadow: inset 2px 0 #168878; }
.demo-page .sidebar-nav-icon { color: #68788d; }
.demo-page .sidebar-nav-button.is-active .sidebar-nav-icon { color: #168878; }
.demo-page .sidebar-count { background: #e3eaf2; color: #506075; }
.demo-page .sidebar-rule-card { border-color: #e0d9f2; background: #f7f4fd; }
.demo-page .sidebar-ai-mark { color: #765dbb; }
.demo-page .sidebar-rule-card strong { color: #3c3555; }
.demo-page .sidebar-rule-card p { color: #68758a; }
.demo-page .rule-status-dot { background: #168878; }
.demo-page .sidebar-disclaimer { color: #768397; }
.demo-page .demo-client-main { background: #fff; }
.demo-page .demo-workspace-bar { border-color: #e4eaf0; background: #fbfcfe; }
.demo-page .demo-workspace-bar h2 { color: #253247; }
.demo-page .demo-workspace-bar .simulation-label { border-color: #cde9e3; background: #f0faf7; color: #557166; }
.demo-page .demo-workspace-bar .simulation-label span { color: #168878; }

.demo-page .dashboard-greeting h3 { color: #253247; }
.demo-page .dashboard-greeting > div > p:last-child { color: #59687c; }
.demo-page .dashboard-rule-callout { border-color: #e1daf2; background: #f8f6fd; }
.demo-page .callout-icon { color: #765dbb; }
.demo-page .dashboard-rule-callout strong { color: #3c3555; }
.demo-page .dashboard-rule-callout small { color: #68758a; }
.demo-page .overview-card { border-color: #dfe6ee; background: linear-gradient(145deg, #fff, #f8fafc); color: #253247; box-shadow: 0 2px 8px rgba(37, 54, 78, .025); }
.demo-page .overview-card:hover { border-color: #b8ddd5; background: linear-gradient(145deg, #fff, #f3faf8); }
.demo-page .overview-card-top { color: #58677b; }
.demo-page .overview-icon { background: #eef2f7; color: #596b80; }
.demo-page .overview-card > strong { color: #253247; }
.demo-page .overview-card > small { color: #68778b; }
.demo-page .urgent-overview { border-top-color: #e4b761; }
.demo-page .urgent-overview .overview-icon, .demo-page .urgent-overview > strong { color: #a96908; }
.demo-page .review-overview { border-top-color: #a894db; }
.demo-page .review-overview .overview-icon, .demo-page .review-overview > strong { color: #7359b5; }
.demo-page .routine-overview { border-top-color: #79cbbb; }
.demo-page .routine-overview .overview-icon, .demo-page .routine-overview > strong { color: #147d70; }
.demo-page .calendar-overview { border-top-color: #8baed7; }
.demo-page .calendar-overview .overview-icon { color: #507daf; }
.demo-page .dashboard-card { border-color: #dfe6ee; background: #fff; box-shadow: 0 2px 9px rgba(37, 54, 78, .025); }
.demo-page .dashboard-card-heading h3 { color: #2c394d; }
.demo-page .pill-urgent { border-color: #f0dfc1; background: #fff8eb; color: #95610e; }
.demo-page .pill-review { border-color: #e2daf3; background: #f7f4fd; color: #7057ad; }
.demo-page .pill-routine { border-color: #d1ebe5; background: #f0faf7; color: #147568; }
.demo-page .pill-calendar { border-color: #d8e4f1; background: #f2f7fc; color: #4b729e; }
.demo-page .dashboard-task { border-color: #e5eaf0; background: #f8fafc; }
.demo-page .dashboard-task:hover { border-color: #c0e3dc; background: #f2faf8; }
.demo-page .task-copy strong { color: #2b394d; }
.demo-page .task-copy small { color: #6c7b8f; }
.demo-page .task-summary { color: #56667b; }
.demo-page .task-open { color: #147d70; }
.demo-page .dashboard-card:nth-child(2) .task-open { color: #7057ad; }
.demo-page .dashboard-card:nth-child(4) .task-open { color: #4b729e; }

.demo-page .mail-list { border-color: #e2e8ef; background: #f9fbfd; }
.demo-page .mail-list-heading h2, .demo-page .calendar-heading h2 { color: #253247; }
.demo-page .panel-kicker { color: #6f7e91; }
.demo-page .mail-count { background: #eee9fa; color: #7057ad; }
.demo-page .mail-row:hover { background: #eff4f8; }
.demo-page .mail-row.is-selected { border-color: #cce6df; background: linear-gradient(105deg, #eaf7f4, #f2effb); }
.demo-page .avatar-green { background: #e2f5ef; color: #147568; }
.demo-page .avatar-violet { background: #eee9fa; color: #7057ad; }
.demo-page .avatar-amber { background: #fff1d7; color: #95600e; }
.demo-page .mail-row-top strong { color: #2b394d; }
.demo-page .mail-row-top time { color: #7a8797; }
.demo-page .mail-row-subject { color: #536278; }
.demo-page .mail-row-bottom { color: #64748a; }
.demo-page .dot-normal { background: #168878; }
.demo-page .dot-high { background: #c68925; box-shadow: 0 0 8px rgba(198, 137, 37, .2); }
.demo-page .dot-review { background: #8168c3; box-shadow: 0 0 8px rgba(129, 104, 195, .18); }
.demo-page .list-rule-note { border-color: #e2e8ef; color: #65748a; }
.demo-page .ai-mini { color: #765dbb; }
.demo-page .detail-heading { border-color: #e2e8ef; }
.demo-page .detail-heading h3 { color: #253247; }
.demo-page .detail-from { color: #64748a; }
.demo-page .priority-badge { border-color: #cde9e3; background: #eff9f6; color: #147568; }
.demo-page .priority-badge.is-high { border-color: #f0dfc1; background: #fff8eb; color: #95610e; }
.demo-page .message-content { border-color: #e2e8ef; background: #f7f9fc; color: #425168; }
.demo-page .analysis-card { border-color: #a894db; background: #f6f3fc; }
.demo-page .analysis-card strong { color: #463b67; }
.demo-page .analysis-card p { color: #58667b; }
.demo-page .response-card { border-color: #cde9e3; background: #f2faf8; }
.demo-page .response-label { color: #147568; }
.demo-page .response-card p { color: #425b57; }
.demo-page .demo-action { border-color: #9bd8cd; background: #eaf7f4; color: #126e63; }
.demo-page .demo-action:hover { border-color: #68bcae; background: #ddf2ed; }
.demo-page .demo-action-secondary { border-color: #d3c8ec; background: #f3effb; color: #684fa8; }
.demo-page .action-note { color: #6e7d91; }
.demo-page .flow-status { color: #56667b; }
.demo-page .flow-status .status-check { background: #e1f4ef; color: #147568; }
.demo-page .flow-status .status-wait { background: #fff4df; color: #97600c; }
.demo-page .thread-message { border-color: #e0e7ef; background: #f7f9fc; color: #425168; }
.demo-page .thread-message.assistant { border-color: #cde9e3; background: #f1faf7; }
.demo-page .thread-message.customer { border-color: #e0d9f2; background: #f7f4fd; }
.demo-page .thread-label { color: #147568; }
.demo-page .thread-message.customer .thread-label { color: #7057ad; }
.demo-page .empty-detail { color: #65748a; }

.demo-page .calendar-demo-badge { border-color: #e0d9f2; color: #7057ad; }
.demo-page .calendar-heading { border-color: #e2e8ef; }
.demo-page .calendar-date-card { border-color: #ded8ef; background: radial-gradient(ellipse at 50% 0%, rgba(156, 134, 215, .12), transparent 62%), #faf9fd; }
.demo-page .calendar-month { color: #7057ad; }
.demo-page .calendar-day { color: #253247; }
.demo-page .calendar-time { color: #147d70; }
.demo-page .calendar-date-caption { color: #6b798d; }
.demo-page .calendar-status-card { border-color: #dfe6ee; background: #fff; }
.demo-page .calendar-status-top strong { color: #2b394d; }
.demo-page .calendar-status-dot { background: #168878; box-shadow: 0 0 8px rgba(22, 136, 120, .2); }
.demo-page .calendar-status-card > p { color: #58677b; }
.demo-page .calendar-empty-state { background: #f4f1fb; color: #536278; }
.demo-page .empty-calendar-icon { color: #765dbb; }
.demo-page .calendar-booked-state { border-color: #cde9e3; background: #f0faf7; }
.demo-page .booked-check { background: #ddf3ed; color: #147568; }
.demo-page .calendar-booked-state strong { color: #25584f; }
.demo-page .calendar-booked-state small { color: #5e786f; }
.demo-page .calendar-rules > div { border-color: #e2e8ef; }
.demo-page .rule-symbol { color: #765dbb; }
.demo-page .calendar-rules strong { color: #344256; }
.demo-page .calendar-rules small { color: #65748a; }
.demo-page .demo-app-foot { border-color: #e2e8ef; background: #f7f9fc; }
.demo-page .demo-app-foot > span { color: #765dbb; }
.demo-page .demo-app-foot p { color: #66758a; }
.demo-page .demo-cta h2 { color: #253247; }
.demo-page .demo-cta h2 em { color: #168878; }
.demo-page .demo-cta .button-primary { background: #168878; color: #fff; box-shadow: 0 4px 16px rgba(22, 136, 120, .18); }
.demo-page .demo-cta .button-primary:hover { background: #116f63; color: #fff; }
.demo-page .demo-footer { border-color: #dce4ed; background: #eef2f7; }
.demo-page .demo-footer-inner { color: #65748a; }
.demo-page .demo-footer a { color: #3e4d62; }
.demo-page .demo-footer a:hover { color: #147d70; }
.demo-page .demo-toast { border-color: #bfe3da; background: #eff9f6; box-shadow: 0 14px 38px rgba(37, 54, 78, .16); color: #25584f; }
.demo-page .noscript-note { color: #8f5417; }

@media (max-width: 560px) {
  .demo-page .sidebar-nav-button.is-active { box-shadow: inset 0 -2px #168878; }
}