/* Homepage capability previews. Keep all presentation changes inside the hero. */
body.home-page .banner {
    padding-top: 128px;
    padding-bottom: 64px;
    background: radial-gradient(ellipse at 76% 32%, #e2edff 0, transparent 55%),
        linear-gradient(180deg, #f8fbff 0%, #eef4ff 72%, #f8fbff 100%);
}

body.home-page .banner .tabs {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    margin-top: 36px;
    padding: 4px;
    border: 1px solid #dfe6f0;
    border-radius: 12px;
    background: #e9eef7;
    box-shadow: none;
}

body.home-page .banner .tabs > .tab {
    position: relative;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5d6b80;
    font-weight: 500;
    font-size: 15px;
    line-height: 42px;
    font-family: inherit;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

body.home-page .banner .tabs > .tab:hover {
    background: #f4f7fc;
    color: #2563eb;
}

body.home-page .banner .tabs > .tab.active {
    background: #fff;
    color: #245fdb;
    box-shadow: 0 1px 4px #1d355b14;
}

body.home-page .banner :is(.tab, [role="button"], button):focus-visible {
    outline: 2px solid #3974ee;
    outline-offset: 3px;
}

body.home-page .banner .imgs-area {
    width: 100%;
    max-width: 1160px;
    margin-top: 24px;
    padding: 0;
    perspective: 3000px;
    -webkit-perspective: 3000px;
}

body.home-page .banner .imgs {
    width: 100%;
    padding: 7px;
    border: 1px solid #dce5f3;
    border-radius: 17px;
    background: #ffffffb8;
    box-shadow: 0 24px 60px -24px #254b8240, 0 3px 10px #254b8208;
    transform: scale(1.1) rotateX(24deg) translateY(6px);
    transition: transform 0.3s ease-out;
    /* Let Chrome re-rasterize text at the current tilt/scale instead of
       enlarging a bitmap cached before the animation. */
    will-change: auto;
}

body.home-page .banner .imgs > .img {
    position: relative;
    width: 100%;
    height: var(--banner-showcase-height, 580px) !important;
    aspect-ratio: auto;
    border: 1px solid #e2e8f1;
    border-radius: 10px;
    background: #f5f7fb;
    box-shadow: none;
}

body.home-page .banner .imgs > .img[hidden] { display: none !important; }
body.home-page .banner .imgs > .img.active { animation: capability-enter 220ms ease-out; }

body.home-page .banner .imgs > .img > .crm-showcase-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 1135px !important;
    height: 580px !important;
    transform: scale(var(--banner-showcase-scale, 1));
    transform-origin: top left;
}

@supports (zoom: 1) {
    body.home-page .banner .imgs > .img > .crm-showcase-app {
        /* Fit in layout space so text is painted at its displayed size;
           an inner scale() otherwise adds another bitmap resampling pass. */
        zoom: var(--banner-showcase-scale, 1);
        transform: none;
    }
}

body.home-page .banner .bottom-cover,
body.home-page .banner .imgs > .img::before,
body.home-page .banner .imgs > .img::after { display: none; }

body.home-page .banner :is(.crm-product-shell, .finance-shell) {
    background: #f5f7fb;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-variant-numeric: tabular-nums;
}

body.home-page .banner .crm-product-topbar {
    height: 58px;
    gap: 28px;
    padding: 0 22px;
    border-bottom: 1px solid #e6ebf2;
    background: #fff;
    box-shadow: none;
}

body.home-page .banner .crm-product-nav { gap: 25px; }
body.home-page .banner .crm-product-nav span { line-height: 58px; font-size: 13px; }
body.home-page .banner .crm-product-nav span:nth-child(n + 6):not(.active) { display: none; }
body.home-page .banner .crm-product-profile { background: none; border: 0; box-shadow: none; }
body.home-page .banner .crm-product-profile::before { display: none; }

body.home-page .banner :is(.crm-product-main, .oa-work-main, .progress-work-main) {
    height: calc(100% - 58px);
    gap: 16px;
    padding: 20px;
    background: #f5f7fb;
}

body.home-page .banner :is(.crm-product-panel, .crm-dashboard-metric,
    .dashboard-event-card, .crm-dashboard-detail, .oa-work-header, .oa-summary-card,
    .oa-app-panel, .oa-attendance-panel, .oa-app-group, .oa-app-item,
    .progress-board-panel, .progress-insight-panel, .progress-task-card,
    .finance-title-strip, .finance-board, .finance-analysis-panel, .finance-focus-panel,
    .finance-score-card, .finance-health-card, .finance-structure-card, .finance-tax-card) {
    border-color: #e5eaf2;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

body.home-page .banner :is(.crm-dashboard-metric.selected, .dashboard-event-card.selected,
    .service-session-item.active, .marketing-channel-item.active, .oa-app-item.active,
    .progress-task-card.active, .finance-health-card.active) {
    border-color: #c5d6f7;
    background: #f3f7ff;
    box-shadow: none;
}

body.home-page .banner :is(.crm-dashboard-metric, .dashboard-event-card).selected::after { display: none; }
body.home-page .banner :is(h3, h4) { font-weight: 600; }
body.home-page .banner :is(.crm-dashboard-metric, .service-session-item, .marketing-channel-item) { cursor: pointer; }
body.home-page .banner :is(.crm-dashboard-metric, .service-session-item, .marketing-channel-item):hover { border-color: #a9c3f2; }

/* CRM: make the customer event and its detail the main content. */
body.home-page .banner .crm-dashboard-section { padding: 16px; }
body.home-page .banner .crm-dashboard-head { margin-bottom: 14px; }
body.home-page .banner .crm-dashboard-filters > :nth-child(n + 5) { display: none; }
body.home-page .banner .crm-dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.home-page .banner .crm-dashboard-metric { min-height: 78px; padding: 14px; }
body.home-page .banner .crm-dashboard-metric:nth-child(n + 5) { display: none; }
body.home-page .banner .crm-dashboard-metric strong { font-size: 25px; line-height: 30px; font-weight: 600; }
body.home-page .banner .dashboard-metric-icon { border: 0; box-shadow: none; background: #eef3fd; color: #4a75bd; }
body.home-page .banner .crm-dashboard-calendar,
body.home-page .banner .crm-dashboard-lower { display: none; }
body.home-page .banner .crm-dashboard-events { flex: 1; min-height: 0; padding: 16px; }
body.home-page .banner .crm-dashboard-event-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
body.home-page .banner .crm-dashboard-section-title { margin-bottom: 14px; }
body.home-page .banner .crm-dashboard-event-grid { height: calc(100% - 36px); }
body.home-page .banner .crm-dashboard-day-events { padding: 0; border: 0; background: transparent; min-height: 0; }
body.home-page .banner .day-event-head,
body.home-page .banner .event-status-tabs { display: none; }
body.home-page .banner .dashboard-event-card { min-height: 70px; padding: 12px 14px; border-width: 0 0 1px; border-radius: 0; margin-top: 0; }
body.home-page .banner .dashboard-event-card > div { display: flex; align-items: center; gap: 16px; min-width: 0; }
body.home-page .banner .dashboard-event-card strong { white-space: nowrap; }
body.home-page .banner .dashboard-event-card p { margin: 0; gap: 10px; white-space: nowrap; }
body.home-page .banner .dashboard-event-card::before { display: none; }
body.home-page .banner .dashboard-event-card em { display: none; }
body.home-page .banner .crm-dashboard-detail { padding: 18px; background: #f7f9fd; }
body.home-page .banner .detail-head > div > span,
body.home-page .banner .detail-live { display: none; }
body.home-page .banner .detail-mini-chart { box-shadow: none; background: none; }

/* Service: the conversation is the focus, without a second promotional header. */
body.home-page .banner .service-hero-panel,
body.home-page .banner .marketing-hero-panel { display: none; }
body.home-page .banner .service-center-grid { grid-template-columns: 228px minmax(0, 1fr) 238px; gap: 14px; }
body.home-page .banner .service-session-list { padding: 16px 10px; }
body.home-page .banner .service-session-item { border-radius: 6px; box-shadow: none; padding: 14px 8px; }
body.home-page .banner .service-avatar { border-radius: 9px; box-shadow: none; background: #eaf0fb; color: #3c6dc7; }
body.home-page .banner .service-chat-panel { padding: 18px; }
body.home-page .banner .service-chat-body { gap: 20px; padding-top: 22px; }
body.home-page .banner .service-message span { display: block; max-width: 88%; font-size: 13px; line-height: 1.8; box-shadow: none; padding: 10px 12px; }
body.home-page .banner .service-insight-panel > .crm-product-panel { padding: 16px; }
body.home-page .banner .service-profile-tags { display: none; }

/* Marketing: keep the existing channel view, remove competing card effects. */
body.home-page .banner .marketing-grid { grid-template-columns: 222px minmax(0, 1fr) 242px; gap: 14px; }
body.home-page .banner :is(.marketing-channel-panel, .marketing-campaign-panel, .marketing-fission-card, .marketing-field-card) { padding: 18px; }
body.home-page .banner .marketing-channel-item { padding: 16px 12px; border-radius: 6px; box-shadow: none; }
body.home-page .banner .marketing-channel-item p { display: none; }
body.home-page .banner .marketing-trend { border: 0; border-bottom: 1px solid #e6ebf2; border-radius: 0; background: #f8faff; box-shadow: none; }
body.home-page .banner .marketing-trend::before,
body.home-page .banner .marketing-trend::after,
body.home-page .banner .marketing-trend i::after { display: none; }
body.home-page .banner .marketing-trend i { max-width: 22px; background: #8eafea; box-shadow: none; border-radius: 3px 3px 0 0; }
body.home-page .banner .marketing-trend .current i { background: #3976e8; }
body.home-page .banner .marketing-fission-score { background: #f2f7fc; border-radius: 6px; }

/* HR and collaboration share the same restrained workspace treatment. */
body.home-page .banner .oa-user-card p,
body.home-page .banner .oa-user-card > div > span,
body.home-page .banner .oa-app-item p,
body.home-page .banner .oa-app-item em,
body.home-page .banner .oa-contract-panel { display: none; }
body.home-page .banner .oa-work-header { grid-template-columns: minmax(0, 1fr) repeat(3, 170px); padding: 14px; }
body.home-page .banner .oa-summary-card { border: 0; border-left: 1px solid #e6ebf2; border-radius: 0; }
body.home-page .banner .oa-app-panel,
body.home-page .banner .oa-attendance-panel { padding: 18px; }
body.home-page .banner .oa-app-group { margin-top: 18px; border: 0; padding: 0; }
body.home-page .banner .oa-app-list { gap: 12px; margin-top: 12px; grid-auto-rows: 56px; }
body.home-page .banner .oa-app-item { min-height: 56px; height: 56px; gap: 10px; padding: 12px; }
body.home-page .banner .oa-app-item > span { border-radius: 8px; background: #edf3fd; box-shadow: none; }
body.home-page .banner .oa-app-item strong { font-size: 13px; }
body.home-page .banner .oa-overview { display: none; }
body.home-page .banner .oa-calendar { position: static; min-height: 0; margin-top: 18px; }
body.home-page .banner .oa-calendar-days { grid-template-rows: repeat(5, 24px); gap: 3px; }
body.home-page .banner .oa-calendar-days span { height: 24px; }
body.home-page .banner .oa-clock-hero { min-height: 116px; }
body.home-page .banner .progress-work-main { grid-template-columns: minmax(0, 1fr) 226px; }
body.home-page .banner .progress-column { background: #f6f8fc; border-color: #e8edf4; box-shadow: none; }
body.home-page .banner .progress-column-summary,
body.home-page .banner .progress-add-task,
body.home-page .banner .progress-ai-card { display: none; }
body.home-page .banner .progress-task-card { border-left-width: 1px; padding: 14px 12px; }
body.home-page .banner .progress-task-card > b { display: none; }
body.home-page .banner .progress-task-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.home-page .banner .progress-now-card { background: #edf4ff; color: #285eb6; box-shadow: none; }
body.home-page .banner .progress-now-card :is(strong, p, span) { color: inherit; }
body.home-page .banner .progress-now-card h3 { color: inherit; }
body.home-page .banner .progress-now-meter { background: #dbe7fa; }

/* Finance: keep the board unobstructed; open the existing assistant on demand. */
body.home-page .banner .finance-sidebar { background: #fff; border-right: 1px solid #e6ebf2; }
body.home-page .banner .finance-main { padding: 18px; gap: 14px; }
body.home-page .banner .finance-title-strip { border: 0; padding: 0 2px; background: transparent; }
body.home-page .banner .finance-title-strip p,
body.home-page .banner .finance-section-head p,
body.home-page .banner .finance-score-card p { display: none; }
body.home-page .banner .finance-board { padding: 18px; }
body.home-page .banner .finance-health-grid { margin-top: 16px; gap: 12px; }
body.home-page .banner .finance-health-card { background: #f8fafd; }
body.home-page .banner .finance-score-card { background: #f1f6ff; }
body.home-page .banner .finance-score-card::after { display: none; }
body.home-page .banner .finance-analysis-panel { border: 0; }
body.home-page .banner .finance-analysis-table td { height: 36px; }
body.home-page .banner .finance-content-grid { flex: 1; min-height: 0; }
body.home-page .banner .finance-bottom-grid { display: none; }
body.home-page .banner .finance-focus-item p { display: none; }
body.home-page .banner .finance-robot-float { display: block; width: 380px; border-color: #d8e3f5; box-shadow: 0 16px 50px #253c6526; }
body.home-page .banner .finance-robot-launcher { box-shadow: 0 4px 12px #3976e82b; }
body.home-page .banner .finance-robot-tags span { cursor: pointer; }

@keyframes capability-enter {
    from { opacity: .6; }
    to { opacity: 1; }
}

@media (max-width: 900px) {
    body.home-page .banner { padding-top: 108px; padding-bottom: 40px; }
    body.home-page .banner .tabs { max-width: 100%; }
    body.home-page .banner .tabs > .tab { padding-inline: 17px; }
}

@media (max-width: 640px) {
    body.home-page .banner { padding: 96px 20px 32px; }
    body.home-page .banner .text-content > h1 { font-size: clamp(26px, 6.5vw, 32px); line-height: 1.4; text-wrap: balance; }
    body.home-page .banner .text-content > .msg { font-size: 14px; }
    body.home-page .banner .tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 3px; margin-top: 30px; padding: 4px; overflow: visible; }
    body.home-page .banner .tabs > .tab { min-width: 0; height: 40px; padding: 0 8px; font-size: 13px; line-height: 40px; border: 0; }
    body.home-page .banner .imgs-area { margin-top: 16px; }
    body.home-page .banner .imgs { padding: 4px; border-radius: 12px; }
    body.home-page .banner .imgs > .img { height: 450px !important; border-radius: 8px; }
    body.home-page .banner .imgs > .img > .crm-showcase-app { width: 100% !important; height: 100% !important; zoom: 1; transform: none; }
    body.home-page .banner .crm-product-topbar { height: 48px; padding: 0 14px; gap: 10px; }
    body.home-page .banner .crm-product-nav,
    body.home-page .banner .crm-product-profile,
    body.home-page .banner .progress-top-actions { display: none; }
    body.home-page .banner .crm-product-logo { width: 67px; height: 25px; }
    body.home-page .banner :is(.crm-product-main, .oa-work-main, .progress-work-main) { height: calc(100% - 48px); padding: 12px; gap: 12px; }
    body.home-page .banner .crm-dashboard-head { margin-bottom: 10px; }
    body.home-page .banner .crm-dashboard-filters { display: none; }
    body.home-page .banner .crm-dashboard-section { padding: 12px; }
    body.home-page .banner .crm-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.home-page .banner .crm-dashboard-metric { min-height: 64px; padding: 10px; gap: 8px; }
    body.home-page .banner .crm-dashboard-metric strong { font-size: 21px; line-height: 25px; }
    body.home-page .banner .dashboard-metric-icon { display: none; }
    body.home-page .banner .crm-dashboard-events { padding: 12px; }
    body.home-page .banner .crm-dashboard-section-title { margin-bottom: 2px; }
    body.home-page .banner .crm-dashboard-event-grid { display: block; }
    body.home-page .banner .crm-dashboard-detail,
    body.home-page .banner .day-event-head,
    body.home-page .banner .event-status-tabs { display: none; }
    body.home-page .banner .dashboard-event-card { min-height: 48px; padding: 10px 0; gap: 6px; }
    body.home-page .banner .dashboard-event-card strong { font-size: 12px; }
    body.home-page .banner .dashboard-event-card p { gap: 8px; font-size: 10px; }
    body.home-page .banner .dashboard-event-card p { display: none; }
    body.home-page .banner .dashboard-event-card b { font-size: 10px; padding-inline: 6px; }
    body.home-page .banner .service-center-grid { display: block; height: 100%; }
    body.home-page .banner .service-session-list,
    body.home-page .banner .service-insight-panel { display: none; }
    body.home-page .banner .service-chat-panel { height: 100%; padding: 14px; }
    body.home-page .banner .service-chat-head h3 { font-size: 13px; }
    body.home-page .banner .service-message span { font-size: 12px; max-width: 95%; }
    body.home-page .banner .service-reply-box { padding: 10px; font-size: 11px; }
    body.home-page .banner .marketing-grid { display: block; height: 100%; }
    body.home-page .banner .marketing-channel-panel,
    body.home-page .banner .marketing-side-stack { display: none; }
    body.home-page .banner .marketing-campaign-panel { height: 100%; padding: 14px; }
    body.home-page .banner .marketing-trend { height: 160px; }
    body.home-page .banner .marketing-card-head p { display: none; }
    body.home-page .banner .oa-work-header { display: flex; padding: 12px; }
    body.home-page .banner .oa-summary-card { display: none; }
    body.home-page .banner .oa-work-grid { display: block; }
    body.home-page .banner .oa-attendance-panel,
    body.home-page .banner .oa-app-group.compact { display: none; }
    body.home-page .banner .oa-app-panel { height: 100%; padding: 14px; }
    body.home-page .banner .oa-app-group { margin-top: 12px; }
    body.home-page .banner .oa-app-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 60px; gap: 8px; }
    body.home-page .banner .oa-app-item { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 60px; height: 60px; padding: 6px 2px; gap: 4px; }
    body.home-page .banner .oa-app-item strong { font-size: 11px; white-space: nowrap; }
    body.home-page .banner .oa-app-item > span { width: 28px; height: 28px; }
    body.home-page .banner .progress-work-main { display: block; }
    body.home-page .banner .progress-insight-panel,
    body.home-page .banner .progress-board-score,
    body.home-page .banner .progress-filter-row { display: none; }
    body.home-page .banner .progress-board-panel { height: 100%; padding: 12px; }
    body.home-page .banner .progress-board-head h3 { font-size: 14px; }
    body.home-page .banner .progress-board-head > div > span { display: none; }
    body.home-page .banner .progress-flow { display: block; height: auto; padding-top: 12px; }
    body.home-page .banner .progress-column { min-height: 0; padding: 12px; }
    body.home-page .banner .progress-column:not(:first-child) { display: none; }
    body.home-page .banner .progress-milestone-head { grid-template-columns: 40px minmax(0, 1fr) auto; }
    body.home-page .banner .progress-task-card { padding: 12px; }
    body.home-page .banner .finance-sidebar,
    body.home-page .banner .finance-top-actions,
    body.home-page .banner .finance-filter-bar,
    body.home-page .banner .finance-section-head,
    body.home-page .banner .finance-focus-panel,
    body.home-page .banner .finance-bottom-grid { display: none; }
    body.home-page .banner .finance-workspace { width: 100%; }
    body.home-page .banner .finance-topbar { height: 48px; padding-inline: 14px; }
    body.home-page .banner .finance-main { padding: 12px; gap: 12px; }
    body.home-page .banner .finance-title-strip { min-height: 26px; }
    body.home-page .banner .finance-title-strip h3 { font-size: 14px; }
    body.home-page .banner .finance-title-strip h3 span { display: none; }
    body.home-page .banner .finance-board { padding: 12px; }
    body.home-page .banner .finance-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
    body.home-page .banner :is(.finance-score-card, .finance-health-card) { display: block; min-height: 70px; padding: 12px; }
    body.home-page .banner .finance-health-card p { display: none; }
    body.home-page .banner .finance-content-grid { display: block; margin-top: 12px; }
    body.home-page .banner .finance-analysis-table th:nth-child(n + 3),
    body.home-page .banner .finance-analysis-table td:nth-child(n + 3) { display: none; }
    body.home-page .banner .finance-analysis-table td { font-size: 10px; height: 28px; }
    body.home-page .banner .finance-robot-float { width: calc(100% - 16px); left: 8px; right: 8px; bottom: 54px; }
    body.home-page .banner .finance-robot-launcher { right: 12px; bottom: 12px; width: 36px; height: 36px; }
    body.home-page .banner .finance-robot-launcher span { display: none; }
}