/* Independent artwork and vector icons; the reference image is never rendered. */
.hubchat-logo{width:1.95rem;height:1.95rem;object-fit:contain;flex:none}
.brand-icon,.ui-icon{object-fit:contain;flex:none}
.service-icon{height:3.2rem}
.windows-card{background:#f3faff url('/landing/assets/blue-folds.webp') center/cover no-repeat}
.mac-card{background:#fafbfd url('/landing/assets/white-folds.webp') center/cover no-repeat}
.privacy-art img{width:100%;height:12.5rem;object-fit:contain;mix-blend-mode:multiply}

/* The preview scales as a single application frame, including its real text. */
.product-demo{container-type:inline-size;aspect-ratio:721/359;background:#fff;color:#162238;overflow:hidden}
.product-demo button,.product-demo input{font:inherit;letter-spacing:inherit;color:inherit}
.product-demo button{border:0;background:none;padding:0}
.product-demo .ui-icon{width:1.8cqw;height:1.8cqw}
.demo-windowbar{height:2.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 .95cqw;background:linear-gradient(#f3f5f7,#ecf0f3);border-bottom:1px solid #e3e8ee}
.traffic-lights{display:flex;gap:.6cqw}.traffic-lights i{width:.9cqw;height:.9cqw;border-radius:50%;background:#ff6059}.traffic-lights i:nth-child(2){background:#ffbd2e}.traffic-lights i:nth-child(3){background:#29c840}
.window-controls{display:flex;gap:2.2cqw;opacity:.6}.window-controls .ui-icon{width:1.05cqw;height:1.05cqw}
.demo-body{height:47.3cqw;display:grid;grid-template-columns:19.7% 34.5% 45.8%;font-size:1.08cqw;line-height:1.4}
.demo-sidebar{min-width:0;background:linear-gradient(110deg,#fbfcfe,#f4f7fb);border-right:1px solid #e4eaf2;padding:1.1cqw 1cqw}
.demo-brand{display:flex;align-items:center;gap:1.05cqw;height:3.5cqw;margin:0 1cqw 1cqw;font-size:1.28cqw;color:#101824}.demo-brand .hubchat-logo{width:2.3cqw;height:2.3cqw}
.demo-service{width:100%;display:flex;align-items:center;gap:1.05cqw;min-height:3.55cqw;text-align:left;border-radius:.8cqw!important;padding:.55cqw 1.05cqw!important;white-space:nowrap}.demo-service.selected{background:#e3efff}.demo-service:hover{background:#edf3fc}.demo-service.selected:hover{background:#e3efff}.demo-service .brand-icon,.demo-service .ui-icon{width:2.05cqw;height:2.05cqw}.demo-service span{min-width:0;overflow:hidden;text-overflow:ellipsis}.demo-service small{margin-left:auto;width:1.55cqw;height:1.55cqw;display:grid;place-items:center;background:#dce9fd;color:#426aaf;border-radius:50%;font-size:.95cqw;font-weight:600}.demo-add{margin-top:1cqw}
.demo-inbox{min-width:0;overflow:hidden;border-right:1px solid #e4eaf2;padding:1.25cqw .95cqw .5cqw}
.demo-inbox-title{display:flex;justify-content:space-between;align-items:center;margin:.15cqw 1.05cqw 1.15cqw}.demo-inbox-title h3{font-size:1.52cqw;color:#151c28;font-weight:650;letter-spacing:-.03em}.demo-inbox-title .ui-icon{width:1.4cqw;height:1.4cqw}
.demo-search{height:2.8cqw;border-radius:2cqw;background:#f0f3f7;display:flex;align-items:center;gap:.55cqw;margin:0 .8cqw .7cqw;padding:0 .8cqw}.demo-search .ui-icon{width:1.25cqw;height:1.25cqw}.demo-search input{width:100%;min-width:0;outline-offset:1px;border:0;background:none;font-size:1.02cqw}.product-demo input::placeholder{color:#7b89a2;opacity:1}
.conversation-list{display:flex;flex-direction:column;gap:.05cqw}.conversation{position:relative;display:flex;align-items:center;gap:1.15cqw;text-align:left;width:100%;height:5.33cqw;padding:.5cqw 1.1cqw!important;border-radius:.7cqw}.conversation.active{background:#e5f0ff!important}.conversation:hover{background:#f4f7fb}.demo-avatar{width:3.6cqw;height:3.6cqw;border-radius:50%;flex:none;background-image:url('/landing/assets/avatar-atlas.webp');background-size:300% 200%;background-repeat:no-repeat;position:relative}.avatar-0{background-position:0 0}.avatar-1{background-position:50% 0}.avatar-2{background-position:100% 0}.avatar-3{background-position:0 100%}.avatar-4{background-position:50% 100%}.avatar-5{background-position:100% 100%}.team-avatar,.group-avatar{display:grid;place-items:center;background-image:none;background-color:#16223c}.team-avatar .hubchat-logo{width:2.5cqw;height:2.5cqw;filter:grayscale(1) brightness(0) invert(1)}.group-avatar{background-color:#7773ec}.group-avatar .ui-icon{width:2.3cqw;height:2.3cqw;filter:brightness(0) invert(1)}
.conversation-copy{display:flex;flex-direction:column;min-width:0;gap:.28cqw}.conversation-copy strong{font-weight:600;font-size:1.07cqw;padding-right:2.8cqw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.conversation-copy>span{font-size:1.03cqw;color:#72829e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation>time{position:absolute;right:1.05cqw;top:1.15cqw;font-size:.98cqw;color:#7384a3}.demo-empty{padding:2cqw;color:#74829a}
.demo-chat{min-width:0;min-height:0;display:flex;flex-direction:column;background:linear-gradient(110deg,#fff,#fcfdff)}
.demo-chat-header{height:6.15cqw;flex:none;border-bottom:1px solid #e9edf3;display:flex;align-items:center;gap:.85cqw;padding:0 1.75cqw}.demo-chat-header .demo-avatar{width:3.2cqw;height:3.2cqw}.demo-chat-header .avatar-0::after{content:'';position:absolute;right:0;bottom:0;width:.7cqw;height:.7cqw;background:#35bb8a;border:1px solid #fff;border-radius:50%}.demo-chat-header strong{display:block;font-size:1.08cqw;font-weight:600}.online-status{display:block;font-size:.94cqw;color:#4c998a}.chat-tools{display:flex;align-items:center;gap:2.6cqw;margin-left:auto}.chat-tools button{display:grid;place-items:center;width:1.9cqw;height:2.2cqw}.chat-tools .ui-icon{width:1.6cqw;height:1.6cqw}
.demo-messages{min-height:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1.1cqw;overflow:auto;scrollbar-width:thin;padding:2.6cqw 1.85cqw .6cqw;font-size:1.1cqw;scrollbar-color:#d7e2ef transparent}
.chat-bubble{max-width:86%;padding:1.15cqw 1.55cqw;background:#edf2f8;border-radius:.8cqw;line-height:1.7;flex:none;overflow-wrap:anywhere}.chat-date{align-self:center;font-size:.68cqw;color:#adb8c9;margin:-.8cqw 0 -.7cqw}.chat-bubble.sent{align-self:flex-end;background:#cfe8ff;border-bottom-right-radius:.1cqw;display:flex;align-items:baseline;gap:1.5cqw}.bubble-meta{display:inline-flex;gap:.4cqw;font-size:.85cqw;color:#7893b0;white-space:nowrap}.bubble-meta .ui-icon{width:1.1cqw;height:1.1cqw;align-self:center}.chat-bubble.attachment{display:flex;align-items:center;gap:.95cqw;align-self:flex-end;margin-right:13cqw;width:20.4cqw;padding:.9cqw 1.2cqw;line-height:1.4}.attachment strong{font-size:1.03cqw;font-weight:550;display:block}.attachment small{font-size:.8cqw;color:#7a8aa3;display:block}.chat-bubble time{color:#7b8ba7;font-size:.8cqw;float:right;align-self:flex-end;margin-left:1.5cqw;line-height:1.5}.attachment time{margin-left:auto;font-size:.75cqw}.pdf-icon{width:2.4cqw;height:3cqw;border-radius:.2cqw;background:#f45458;color:#fff;display:grid;place-items:center;font-size:.75cqw;font-weight:600;flex:none;clip-path:polygon(0 0,70% 0,100% 25%,100% 100%,0 100%)}.user-demo-message{display:block!important}
.demo-compose{display:flex;gap:.7cqw;align-items:center;padding:1cqw 1.25cqw 1.15cqw;flex:none}.compose-field{display:flex;align-items:center;gap:1.2cqw;border:1px solid #dfe6ef;border-radius:1.1cqw;height:4.1cqw;padding:0 1.3cqw;flex:1;min-width:0;background:#fff}.compose-field input{min-width:0;width:100%;border:0;background:none;font-size:1.06cqw}.compose-icons{display:flex;gap:1.1cqw}.demo-compose>button{height:4.1cqw;width:3.65cqw;background:#f0f3f7;border-radius:.9cqw;display:grid;place-items:center}.demo-compose>button .ui-icon{width:2.05cqw;height:2.05cqw}

/* Live notification and note components sit above independent artwork. */
.notification-art{container-type:inline-size;aspect-ratio:291/214;width:100%;overflow:hidden;background:#cfe7ff url('/landing/assets/notification-flow.webp') center/cover no-repeat;display:grid;align-items:center;min-width:0}
.toast-list{width:71%;margin-left:20.5%;display:grid;gap:2cqw;padding-block:6.5cqw}.sample-toast{position:relative;display:flex;align-items:center;gap:3.6cqw;min-height:18.8cqw;padding:2.8cqw 3.7cqw;background:linear-gradient(120deg,#ffffffee,#f8fbffda);border:1px solid #ffffffb8;border-radius:3cqw;box-shadow:0 1.3cqw 3.5cqw #355b9430;color:#24344b;font-size:2.6cqw;line-height:1.45}.sample-toast>.brand-icon{width:8cqw;height:8cqw}.sample-toast>div{min-width:0}.sample-toast strong{display:block;font-size:2.75cqw;font-weight:650;white-space:nowrap}.toast-app{font-size:2.5cqw;color:#63718b}.sample-toast p{font-size:2.65cqw;white-space:nowrap;letter-spacing:-.03em}.sample-toast time{position:absolute;right:3.7cqw;top:3.2cqw;font-size:2.4cqw;color:#7d8aa0;white-space:nowrap}
.notes-art{container-type:inline-size;aspect-ratio:156/214;display:grid;place-items:center;min-width:0;background:radial-gradient(ellipse at 40% 60%,#ddd3c2,#f5eee2 50%,#fffdf8 85%)}
.sample-notebook{width:83%;border:1px solid #fff;border-radius:5cqw;background:linear-gradient(110deg,#fff,#fdfefe);box-shadow:0 6cqw 12cqw #62524035,0 1cqw 2cqw #62524012;color:#263348;padding:6cqw 6.5cqw 4cqw;font-size:4.6cqw}
.notebook-head{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding-bottom:6cqw}.notebook-head strong{font-size:5.4cqw;font-weight:650}.notebook-head>span{display:flex;gap:5cqw}.notebook-head .ui-icon{width:5.5cqw;height:5.5cqw}.notebook-item{display:flex;align-items:center;gap:5cqw;padding:4.5cqw 0;border-top:1px solid #edf0f3}.notebook-item strong{display:block;font-size:4.55cqw;font-weight:500;white-space:nowrap}.notebook-item time{font-size:3.9cqw;color:#8490a4;white-space:nowrap}.note-file{width:6.8cqw;height:7.6cqw;flex:none;display:grid;place-items:center;background:#fff8e9;border-radius:1.6cqw}.note-file .ui-icon{width:6.3cqw;height:6.3cqw;filter:invert(53%) sepia(95%) saturate(876%) hue-rotate(2deg) brightness(119%) contrast(105%)}.note-file.orange{background:#fff4e7}.note-file.red,.note-file.pink{background:#fff0ef}.note-file.red .ui-icon,.note-file.pink .ui-icon{filter:invert(55%) sepia(67%) saturate(1900%) hue-rotate(319deg) brightness(110%) contrast(97%)}
@media(max-width:650px){.service-icon{height:2.4rem}.privacy-art img{height:8.5rem}.notification-art,.notes-art{min-height:15.5rem;width:100%;aspect-ratio:auto}.notification-art{background-position:center}.toast-list{width:83%;margin-left:9%}.sample-toast{padding:4cqw 3.7cqw;min-height:23cqw;font-size:3cqw}.sample-toast strong{font-size:3.1cqw}.toast-app{font-size:2.85cqw}.sample-toast p{font-size:2.9cqw}.sample-toast time{font-size:2.55cqw;top:4cqw}.sample-notebook{width:84%}}