/* The platform film is isolated from the approved marketing-page design. */
.platform-demo { --os-ink:#26303e; --os-muted:#7d8797; --os-line:#e7eaf0; position:relative; padding:18px 18px 0; border:1px solid #e1e5ed; border-radius:12px; background:#edf0f5; color:var(--os-ink); }
.os-window { display:grid; grid-template-columns:190px minmax(0,1fr); overflow:hidden; background:#fff; border:1px solid #dfe4ec; border-radius:8px; box-shadow:0 14px 36px -24px #283c6544,0 1px 4px #1b315408; font-size:14px; line-height:1.5; }
.os-sidebar { display:flex; flex-direction:column; min-width:0; padding:25px 12px 16px; border-right:1px solid var(--os-line); background:#f9fafc; }
.os-wordmark { margin-left:12px; font-size:25px; color:#253042; }
.os-business { display:flex; align-items:center; gap:9px; padding:14px 9px; margin:23px 0 16px; border:1px solid #e2e6ed; border-radius:6px; background:#fff; }
.os-business-avatar { display:grid; place-items:center; flex-shrink:0; width:29px; height:32px; border-radius:5px; background:#2c3a48; color:#fff; font-family:Georgia,serif; font-size:20px; }
.os-business strong { display:block; font-size:13px; font-weight:550; }
.os-business div > span { display:block; margin-top:1px; font-size:12px; color:#8b94a2; white-space:nowrap; }
.os-chevron { margin-left:auto; color:#9aa2af; font-size:14px; }
.os-navigation { display:flex; flex-direction:column; gap:3px; }
.os-nav-item { display:flex; align-items:center; gap:10px; min-height:37px; padding:8px 10px; border:0; border-radius:5px; background:transparent; color:#6e7b8e; font-size:13px; line-height:1.4; text-align:left; }
.os-nav-item .icon { width:16px; height:16px; color:#929bad; stroke-width:1.45; }
button.os-nav-item:hover { color:#3d4c65; background:#eff2f7; }
.os-nav-item.is-active { background:#eaf0f9; color:#425879; font-weight:500; }
.os-nav-item.is-active .icon { color:#687fa3; }
.os-nav-count { display:grid; place-items:center; width:17px; height:18px; margin-left:auto; border-radius:4px; background:#e7edf7; font-size:12px; color:#6981a7; }
.os-nav-divider { height:1px; background:var(--os-line); margin:14px 10px; }
.os-knowledge-new { font-size:12px; color:#587e70; margin-left:auto; }
.os-sidebar-bottom { margin-top:auto; padding:28px 10px 0; }
.os-sidebar-bottom > span { display:flex; gap:9px; align-items:center; font-size:12px; color:#959eac; }
.os-sidebar-bottom .icon { width:14px; height:14px; }
.os-user { display:flex; align-items:center; gap:10px; padding-top:19px; margin-top:18px; border-top:1px solid var(--os-line); }
.os-user > span { display:grid; place-items:center; width:29px; height:29px; border:1px solid #dfe4ed; border-radius:50%; color:#8290a5; background:#eff2f7; font-size:12px; }
.os-user strong { display:block; font-size:12px; font-weight:500; color:#626f81; }
.os-user small { display:block; font-size:12px; color:#a2aab7; }
.os-main { min-width:0; }
.os-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; height:54px; padding:0 28px; border-bottom:1px solid var(--os-line); color:#929aa8; font-size:12px; }
.os-breadcrumb { display:flex; gap:12px; }
.os-breadcrumb > span { color:#c0c6cf; }
.os-breadcrumb strong { font-weight:450; color:#647185; }
.os-topbar-right { display:flex; align-items:center; gap:8px; }
.os-topbar-right .icon { width:14px; height:14px; color:#929eaf; }
.os-topbar-divider { height:15px; width:1px; background:#e0e5ed; margin-inline:12px; }
.os-viewport { position:relative; height:700px; isolation:isolate; overflow:hidden; }
.os-overview { padding:28px 30px; }
.os-page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:25px; }
.os-page-heading p { font-size:12px; color:#7c8798; margin-bottom:5px; }
.os-page-heading h3 { font-size:27px; line-height:1.2; font-weight:500; letter-spacing:-.045em; }
.os-period { display:flex; align-items:center; gap:7px; border:1px solid #e5e9f0; border-radius:5px; padding:6px 9px; color:#7a8698; font-size:12px; }
.os-period .icon { width:13px; height:13px; }
.os-metrics { display:grid; grid-template-columns:1fr 1fr 1.12fr; margin-bottom:26px; padding-bottom:25px; border-bottom:1px solid var(--os-line); }
.os-metrics > div { min-width:0; padding-inline:22px; border-left:1px solid var(--os-line); }
.os-metrics > div:first-child { padding-left:0; border:0; }
.os-metrics > div:last-child { padding-right:0; }
.os-metrics > div > span { display:flex; align-items:center; gap:7px; color:#6e7b8e; font-size:12px; }
.os-metrics .icon { width:13px; height:13px; color:#aab2be; }
.os-metrics strong { display:block; font-size:34px; line-height:1.2; letter-spacing:-.045em; font-weight:450; margin-top:9px; font-variant-numeric:tabular-nums; }
.os-metrics strong > span { font-size:.78em; }
.os-metrics small { display:block; margin-top:5px; font-size:12px; color:#9aa3b0; }
.os-metrics .os-negative { color:#a87862; }
.os-negative > span:last-child { color:#9aa3b0; margin-left:3px; }
.os-overview-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; }
.os-revenue-panel, .os-priority-panel { min-width:0; border:1px solid var(--os-line); border-radius:7px; }
.os-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:49px; padding:14px 17px; border-bottom:1px solid #eef0f5; }
.os-panel-heading h4 { font-size:14px; font-weight:500; letter-spacing:-.01em; }
.os-panel-heading > span { color:#a0a8b5; font-size:12px; }
.os-sales-graph { display:flex; height:160px; padding:22px 18px 0 14px; gap:10px; }
.os-sales-axis { display:flex; flex-direction:column; justify-content:space-between; flex-shrink:0; padding-bottom:20px; font-size:12px; color:#b0b7c3; }
.os-sales-plot { position:relative; flex:1; min-width:0; }
.os-sales-grid { position:absolute; inset:0 0 22px; border-top:1px dashed #e8ecf3; border-bottom:1px solid #e8ecf3; }
.os-sales-grid::after { content:''; position:absolute; top:50%; width:100%; border-top:1px dashed #e8ecf3; }
.os-sales-bars { position:absolute; inset:0; display:flex; justify-content:space-around; gap:9px; }
.os-sales-bars > span { position:relative; display:flex; justify-content:flex-end; flex-direction:column; align-items:center; width:26px; padding-bottom:22px; }
.os-sales-bars i { display:block; height:var(--bar); width:100%; border-radius:3px 3px 0 0; background:#aab9d7; }
.os-sales-bars > span:nth-last-child(2) i { background:#637fae; }
.os-sales-bars small { position:absolute; bottom:0; font-size:12px; color:#a4aeba; }
.os-chart-key { display:flex; align-items:center; gap:6px; padding:20px 18px 17px; font-size:12px; color:#929dab; }
.os-chart-key > span:first-child { display:block; width:6px; height:6px; background:#aab9d7; border-radius:2px; }
.os-chart-key-source { margin-left:auto; color:#b2b9c3; }
.os-queue-count { display:grid; place-items:center; width:18px; height:18px; border-radius:4px; background:#f0f3f8; }
.os-priority-content { padding:18px; }
.os-category { display:flex; align-items:center; gap:6px; color:#7e8fa8; font-size:12px; }
.os-category .icon { width:13px; height:13px; }
.os-priority-content h4 { font-size:23px; line-height:1.2; font-weight:450; letter-spacing:-.04em; margin-top:12px; }
.os-priority-content p { max-width:270px; margin-top:10px; color:#66758a; font-size:14px; line-height:1.65; }
.os-primary-action { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:36px; border:1px solid #35465e; border-radius:5px; padding:8px 12px; background:#35465e; color:#fff; font-size:14px; line-height:1.4; font-weight:450; transition:background 140ms,transform 120ms; }
.os-primary-action:hover { background:#25364f; }
.os-primary-action .icon { width:13px; height:13px; }
.os-primary-action:active, .os-primary-action.os-pressed { transform:scale(.98); background:#1b2a41; }
.os-priority-content .os-primary-action { width:100%; margin-top:17px; }
.os-work-strip { display:none; align-items:center; gap:20px; margin-top:23px; padding:15px 0; border-top:1px solid var(--os-line); font-size:12px; color:#8d98a8; }
.os-work-strip > span:first-child { display:flex; align-items:center; gap:7px; }
.os-work-strip .icon { width:14px; height:14px; }
.os-work-strip > div { display:flex; align-items:center; gap:7px; color:#738198; }
.os-work-avatar { display:grid; place-items:center; width:20px; height:20px; border-radius:4px; background:#eef2f8; color:#8295b3; font-size:12px; }
.os-work-status { padding-left:8px; color:#a3aab7; }
.os-work-owner { margin-left:auto; color:#a3aab7; }
/* All detail states occupy the same drawer inside the persistent workspace. */
.os-backdrop { position:absolute; z-index:1; inset:0; background:#35415618; }
.os-detail { position:absolute; z-index:2; inset:0 0 0 auto; width:min(540px,76%); display:flex; flex-direction:column; border-left:1px solid #e1e6ef; background:#fff; box-shadow:-14px 0 38px -24px #25334d44; }
.os-detail.os-opening { animation:os-drawer-in 550ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes os-drawer-in { from { transform:translateX(35px); opacity:.5; } to { transform:translateX(0); opacity:1; } }
.os-detail-top { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; height:48px; padding:0 24px; border-bottom:1px solid #eef0f4; font-size:12px; color:#8e99a9; }
.os-detail-top > span { display:flex; align-items:center; gap:8px; }
.os-detail-icon { display:grid; place-items:center; width:21px; height:21px; background:#f0f3f9; border-radius:4px; color:#8496b3; }
.os-detail-icon .icon { width:13px; height:13px; }
.os-close { display:grid; place-items:center; width:25px; height:25px; padding:0; background:transparent; border:0; border-radius:4px; color:#a6afbd; }
.os-close:hover { background:#f2f4f8; color:#54627a; }
.os-close .icon { width:15px; height:15px; }
.os-detail-heading { padding:21px 25px 18px; flex-shrink:0; }
.os-detail-status { display:inline-flex; align-items:center; font-size:12px; line-height:1.4; color:#8b98ac; margin-bottom:6px; }
.os-detail-heading h3 { font-size:27px; font-weight:500; letter-spacing:-.045em; line-height:1.2; }
.os-detail-heading p { margin-top:6px; font-size:12px; color:#99a2b0; }
.os-detail-tabs { display:flex; align-items:center; gap:23px; flex-shrink:0; min-height:40px; padding-inline:25px; border-bottom:1px solid var(--os-line); }
.os-detail-tabs button { position:relative; height:40px; padding:0; border:0; background:transparent; color:#a2aab6; font-size:12px; }
.os-detail-tabs button[aria-selected='true'] { color:#506887; }
.os-detail-tabs button[aria-selected='true']::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#6d84ac; }
.os-detail-reference { margin-left:auto; color:#b5bdc9; font-size:12px; }
.os-detail-body { position:relative; flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#d8deea transparent; padding:22px 25px; }
.os-pane.os-pane-enter { animation:os-pane-in 350ms ease both; }
@keyframes os-pane-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.os-evidence-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.os-evidence-head > div > span { font-size:12px; color:#738096; }
.os-evidence-head strong { display:block; font-size:37px; font-weight:450; line-height:1.1; letter-spacing:-.05em; margin-top:6px; }
.os-evidence-head strong small { font-size:.68em; margin-left:1px; }
.os-evidence-change { font-size:13px; color:#a47462; text-align:right; }
.os-evidence-change small { display:block; font-size:12px; color:#adb5c1; margin-top:4px; }
.os-retention-chart { margin-top:14px; }
.os-retention-chart svg { display:block; width:100%; height:86px; overflow:visible; }
.os-retention-grid { fill:none; stroke:#eef1f6; stroke-width:1; }
.os-retention-area { fill:url('#os-retention-fill'); }
.os-retention-line { fill:none; stroke:#8399bf; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.os-retention-chart circle { fill:#6d88b2; stroke:#fff; stroke-width:2; }
.os-retention-chart > div { display:flex; justify-content:space-between; font-size:12px; color:#acb5c2; margin-top:4px; }
.os-evidence-note { margin-top:18px; }
.os-evidence-note strong { font-size:14px; font-weight:450; letter-spacing:-.01em; }
.os-evidence-note p { font-size:14px; line-height:1.7; color:#6e7b8e; margin-top:5px; }
.os-source-list { margin-top:18px; border-top:1px solid #edf0f5; padding-top:12px; }
.os-source-list > span { display:block; font-size:12px; color:#a2acbb; margin-bottom:8px; }
.os-source-list > div { display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.6; color:#8491a5; padding-block:3px; }
.os-source-list .icon { width:12px; height:12px; color:#a0afc6; }
.os-source-list div > span { margin-left:auto; color:#abb4c3; }
.os-field-label { display:block; font-size:12px; color:#a0a9b8; line-height:1.5; }
.os-plan-description h4 { font-size:18px; font-weight:450; letter-spacing:-.035em; margin-top:6px; }
.os-plan-description p { font-size:14px; color:#6e7b8e; line-height:1.65; margin-top:6px; max-width:380px; }
.os-plan-properties { padding:0; margin:17px 0 19px; border-top:1px solid #edf0f5; }
.os-plan-properties > div { display:grid; grid-template-columns:95px 1fr; gap:14px; border-bottom:1px solid #edf0f5; padding:9px 0; font-size:12px; line-height:1.6; }
.os-plan-properties dt { color:#9ca6b5; }
.os-plan-properties dd { margin:0; color:#68788e; }
.os-plan-owners > div { display:flex; align-items:center; gap:9px; margin-top:12px; }
.os-owner-avatar { display:grid; place-items:center; flex-shrink:0; width:27px; height:27px; border-radius:6px; background:#eff3fa; color:#8399bd; font-size:12px; }
.os-owner-north { background:#eef1ee; color:#879588; }
.os-plan-owners strong { display:block; font-weight:500; font-size:12px; color:#637186; }
.os-plan-owners p > span { display:block; font-size:12px; margin-top:2px; color:#a2acba; }
.os-plan-boundary { display:flex; align-items:flex-start; gap:7px; margin-top:17px; font-size:12px; line-height:1.6; color:#acb5c1; }
.os-plan-boundary .icon { width:13px; height:13px; margin-top:2px; }
.os-detail-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; min-height:67px; padding:14px 25px; border-top:1px solid var(--os-line); background:#fff; }
.os-footer-context { display:flex; align-items:center; gap:6px; font-size:12px; color:#a2acba; }
.os-footer-context .icon { width:12px; height:12px; }
.os-detail-footer .os-primary-action { min-width:124px; }
.os-approved-pane { padding-top:27px; text-align:center; }
.os-approval-symbol { display:grid; place-items:center; width:40px; height:40px; margin:0 auto 18px; border:1px solid #dfebe4; border-radius:50%; color:#648476; background:#f4f8f5; }
.os-approval-symbol .icon { width:21px; height:21px; }
.os-approved-pane > h4 { font-size:23px; font-weight:450; letter-spacing:-.04em; }
.os-approved-pane > p { font-size:14px; color:#6e7b8e; line-height:1.7; max-width:260px; margin:9px auto 0; }
.os-approval-tasks { margin:25px auto; padding:14px 18px; max-width:360px; border:1px solid #e7ecf1; border-radius:6px; text-align:left; }
.os-approval-tasks > div { display:flex; align-items:center; gap:9px; padding-block:8px; color:#6e7b8e; font-size:12px; }
.os-task-check .icon { width:13px; height:13px; color:#89a292; }
.os-approval-foot { font-size:12px; color:#aeb7c3; }
.os-primary-action:disabled { background:#f1f5f2; border-color:#e2eae4; color:#688575; cursor:default; }
.os-time-transition { position:absolute; z-index:5; inset:0; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:15px; background:#f6f8fcf5; color:#4c5e7a; backdrop-filter:blur(6px); }
.os-time-transition > span:not(.os-time-rule) { font-size:25px; letter-spacing:-.035em; }
.os-time-transition small { color:#97a5ba; font-size:12px; }
.os-time-rule { width:32px; height:1px; background:#a1b1cb; margin-bottom:6px; }
.os-outcome-heading > div { display:flex; align-items:center; gap:17px; margin-top:12px; }
.os-outcome-heading strong { font-size:39px; font-weight:450; line-height:1.2; color:#536e98; letter-spacing:-.045em; }
.os-outcome-heading strong > small { font-size:19px; margin-left:5px; }
.os-outcome-heading div > span { font-size:12px; color:#8c9aad; line-height:1.7; }
.os-outcome-heading span > small { font-size:12px; color:#aab4c2; }
.os-result-bars { margin-top:24px; }
.os-result-bars > div + div { margin-top:17px; }
.os-result-bars > div > span { display:flex; justify-content:space-between; font-size:12px; color:#6e7b8e; }
.os-result-bars strong { font-weight:450; font-size:13px; color:#60758f; }
.os-result-track { width:100%; height:24px; background:#f4f6fa; border-radius:3px; margin-top:7px; overflow:hidden; }
.os-result-track i { display:block; height:100%; border-radius:3px; }
.os-result-invited { background:#8da3c6; }
.os-result-comparison { background:#c9d3e3; }
.os-result-bars small { display:block; margin-top:5px; font-size:12px; color:#a7b1c0; }
.os-next-decision { margin-top:23px; padding-top:18px; border-top:1px solid #e8edf4; }
.os-next-decision h4 { font-size:17px; letter-spacing:-.03em; font-weight:450; margin-top:5px; }
.os-next-decision p { font-size:14px; line-height:1.7; color:#6e7b8e; margin-top:6px; }
.os-result-footnote { font-size:12px; line-height:1.65; color:#adb6c4; margin-top:17px; }
.os-toast { position:absolute; z-index:7; right:17px; bottom:80px; max-width:calc(100% - 34px); display:flex; align-items:flex-start; gap:12px; padding:15px 18px; background:#fff; border:1px solid #dfe7e8; border-radius:7px; box-shadow:0 10px 32px #243b5420; }
.os-toast > span { display:grid; place-items:center; width:23px; height:23px; flex-shrink:0; border-radius:50%; background:#edf5f0; color:#759581; }
.os-toast .icon { width:13px; height:13px; }
.os-toast strong { display:block; font-size:12px; font-weight:500; color:#607b70; }
.os-toast p { margin-top:3px; color:#9aa7a1; font-size:12px; line-height:1.6; }
.os-toast.os-toast-enter { animation:os-pane-in 350ms ease both; }
.os-pointer { position:absolute; top:0; left:0; z-index:9; width:19px; height:25px; pointer-events:none; will-change:transform; }
.os-pointer svg { display:block; width:100%; height:100%; fill:#22262d; stroke:#fff; stroke-width:1.3; stroke-linejoin:round; filter:drop-shadow(0 1px 1px #17203230); transform-origin:2px 2px; }
.os-pointer.os-pointer-down svg { transform:scale(.89); }
.os-player { display:flex; align-items:center; gap:9px; min-height:59px; color:#8b97aa; }
.os-player button { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; padding:0; border:0; border-radius:4px; background:transparent; color:#687c9a; }
.os-player button:hover { background:#e1e7f0; }
.os-player .icon { width:15px; height:15px; }
.os-play-icon { display:none; fill:currentColor; stroke:none; }
.platform-demo.os-paused .os-play-icon { display:block; }
.platform-demo.os-paused .os-pause-icon { display:none; }
.os-player-label { min-width:132px; font-size:12px; }
.os-player input { flex:1; min-width:0; appearance:none; height:22px; background:transparent; cursor:pointer; --os-position:0%; }
.os-player input::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,#879dbe var(--os-position),#d8e0ec var(--os-position)); }
.os-player input::-moz-range-track { height:2px; background:#d8e0ec; }
.os-player input::-moz-range-progress { height:2px; background:#879dbe; }
.os-player input::-webkit-slider-thumb { appearance:none; width:7px; height:7px; border:0; border-radius:50%; background:#8196b7; margin-top:-2.5px; }
.os-player input::-moz-range-thumb { width:7px; height:7px; border:0; border-radius:50%; background:#8196b7; }
.os-player-time { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:72px; text-align:right; }
.os-sample-label { font-size:12px; margin-left:15px; color:#9ca7b8; }
.os-no-script { font-size:12px; color:#8594aa; padding:12px; }
@media (min-width:1450px) { .os-window { grid-template-columns:205px minmax(0,1fr); } .os-overview { padding:32px 36px; } .os-sidebar { padding-inline:15px; } .os-nav-item { font-size:14px; } .os-detail { width:550px; } .os-priority-content p { font-size:14px; } .os-priority-content { padding:20px; } }
@media (max-width:1150px) { .os-window { grid-template-columns:170px minmax(0,1fr); } .os-sidebar { padding-inline:8px; } .os-business { gap:7px; padding-inline:7px; } .os-business div > span { font-size:12px; letter-spacing:-.02em; } .os-chevron { display:none; } .os-nav-item { gap:8px; padding-inline:8px; font-size:12px; } .os-overview { padding:25px 23px; } .os-topbar { padding-inline:23px; } .os-metrics > div { padding-inline:17px; } .os-metrics strong { font-size:30px; } .os-metrics .icon { display:none; } .os-metrics .os-negative > span:last-child { display:none; } .os-overview-grid { gap:15px; grid-template-columns:1.1fr 1fr; } .os-priority-content { padding:16px; } .os-priority-content h4 { font-size:22px; } .os-work-owner { display:none; } .os-work-strip { gap:14px; } .os-work-status { display:none; } .os-sample-label { display:none; } .os-detail { width:min(510px,84%); } }
@media (max-width:950px) { .os-window { grid-template-columns:155px minmax(0,1fr); } .os-sidebar { padding-inline:6px; } .os-business { gap:7px; padding-inline:5px; } .os-business-avatar { width:26px; } .os-business div > span { font-size:12px; letter-spacing:-.04em; } .os-nav-item { gap:7px; font-size:12px; padding-inline:6px; } .os-nav-item .icon { width:14px; height:14px; } .os-viewport { height:730px; } .os-overview { padding:25px 22px; } .os-overview-grid { grid-template-columns:1fr; gap:16px; } .os-sales-graph { height:140px; padding-top:18px; } .os-chart-key { padding-block:12px; } .os-priority-panel .os-panel-heading { display:none; } .os-priority-content { display:grid; grid-template-columns:1fr auto; gap:7px 18px; align-items:center; } .os-category { grid-column:1 / -1; } .os-priority-content h4 { font-size:20px; margin:2px 0; } .os-priority-content h4 br { display:none; } .os-priority-content p { margin:0; grid-column:1 / -1; max-width:none; padding-right:10px; } .os-priority-content .os-primary-action { grid-area:2 / 2; margin:0; width:auto; } .os-work-strip { display:none; } .os-metrics { margin-bottom:20px; padding-bottom:22px; } .os-metrics strong { font-size:27px; } .os-metrics > div { padding-inline:12px; } .os-metrics small { font-size:12px; } .os-metrics > div > span { font-size:12px; min-height:34px; align-items:flex-start; } .os-detail { width:100%; border-left:0; } .os-detail-body { padding:25px 28px; } .os-detail-heading { padding:22px 28px; } .os-detail-tabs { padding-inline:28px; } .os-detail-top { padding-inline:28px; } .os-detail-footer { padding-inline:28px; } .os-retention-chart svg { height:100px; } .os-evidence-note { margin-top:22px; } .os-source-list { margin-top:23px; } .os-plan-properties { margin-block:23px; } .os-plan-properties > div { padding-block:11px; } .os-result-bars { margin-top:28px; } }
@media (max-width:760px) { .platform-demo { padding:10px 10px 0; } .os-window { grid-template-columns:1fr; } .os-sidebar { display:none; } .os-viewport { height:700px; } .os-topbar { padding-inline:22px; } .os-overview { padding:25px 24px; } .os-metrics > div > span { min-height:0; } .os-metrics { margin-top:3px; } .os-metrics strong { font-size:31px; } .os-overview-grid { gap:20px; } .os-revenue-panel { min-height:225px; } .os-sales-graph { height:155px; } .os-priority-content { padding:20px; } .os-detail { width:min(530px,100%); } .os-player-label { min-width:126px; } }
@media (max-width:560px) { .platform-demo { margin-inline:-10px; padding:7px 7px 0; border-radius:8px; } .os-topbar { padding-inline:17px; height:47px; } .os-topbar-right { font-size:12px; } .os-topbar-divider,.os-topbar-right > .icon:last-child { display:none; } .os-viewport { height:690px; } .os-overview { padding:23px 18px; } .os-page-heading { gap:12px; margin-bottom:23px; } .os-page-heading h3 { font-size:24px; } .os-page-heading p { font-size:12px; } .os-period { padding:5px 7px; font-size:12px; } .os-period .icon { display:none; } .os-metrics { padding-bottom:21px; margin-bottom:21px; } .os-metrics > div { padding-inline:9px; } .os-metrics > div > span { min-height:34px; line-height:1.45; font-size:12px; } .os-metrics strong { font-size:25px; margin-top:6px; } .os-metrics small { font-size:12px; line-height:1.4; } .os-metrics > div:first-child > small { max-width:80px; } .os-overview-grid { gap:16px; } .os-revenue-panel { min-height:220px; } .os-panel-heading { min-height:45px; padding:12px 15px; } .os-sales-graph { height:143px; } .os-chart-key { padding:13px 15px; } .os-priority-content { grid-template-columns:1fr; gap:8px; padding:17px; } .os-priority-content h4 { font-size:21px; } .os-priority-content p { padding:0; line-height:1.6; } .os-priority-content .os-primary-action { grid-area:auto; width:100%; margin-top:5px; } .os-detail-top { padding-inline:20px; height:43px; } .os-detail-heading { padding:20px; } .os-detail-heading h3 { font-size:26px; } .os-detail-tabs { padding-inline:20px; } .os-detail-body { padding:20px; } .os-detail-footer { padding:13px 20px; min-height:66px; } .os-footer-context { font-size:12px; } .os-detail-footer .os-primary-action { min-width:115px; } .os-retention-chart svg { height:85px; } .os-evidence-note { margin-top:20px; } .os-source-list { margin-top:20px; } .os-source-list div > span { font-size:12px; } .os-plan-properties { margin-block:17px; } .os-plan-properties > div { grid-template-columns:75px 1fr; gap:10px; padding-block:10px; } .os-plan-description h4 { font-size:18px; } .os-plan-owners p > span { font-size:12px; } .os-plan-boundary { display:none; } .os-approved-pane { padding-top:25px; } .os-approved-pane > h4 { font-size:22px; } .os-approval-tasks { padding:13px 10px; } .os-outcome-heading > div { gap:13px; } .os-outcome-heading strong { font-size:37px; } .os-result-bars { margin-top:24px; } .os-next-decision { margin-top:22px; } .os-toast { right:12px; bottom:77px; max-width:calc(100% - 24px); padding:13px; } .os-pointer { width:17px; height:23px; } .os-player { flex-wrap:wrap; gap:0 7px; padding-block:7px; min-height:66px; } .os-player-label { min-width:0; flex:1; font-size:12px; } .os-player input { flex:none; order:2; width:100%; height:18px; margin:0 3px; } .os-player-time { min-width:70px; font-size:12px; } .os-player button { width:27px; height:27px; } }
@media (prefers-reduced-motion:reduce) { .os-pointer { display:none !important; } .os-detail.os-opening,.os-pane.os-pane-enter,.os-toast.os-toast-enter { animation:none; } }