:root{--ink: #102033;--muted: #5b7390;--line: #dfe8f2;--line-2: #cbd9e8;--blue: #1aa9e8;--blue-deep: #0b89c9;--bg: #f6f9fc;--shadow-lg: 0 24px 70px rgba(16, 32, 51, .14);--shadow: 0 12px 30px -12px rgba(10, 42, 74, .18), 0 4px 8px -4px rgba(10, 42, 74, .08);--radius-lg: 18px;--device-body-aspect: 71.9 / 150;--screen-aspect: 1206 / 2622;--slack-aubergine: #4A154B;--slack-header-bg: #FFFFFF;--slack-header-ink: #1D1C1D;--slack-header-muted: #616061;--slack-header-line: #E8E8E8;--slack-msg-ink: #1D1C1D;--slack-time: #616061;--slack-link: #1264A3;--slack-composer-border: #E0E0E0;--slack-composer-bg: #F4F4F4;--slack-composer-placeholder: #696969}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;letter-spacing:0}a{color:inherit}.home,.demo-page{min-height:100vh;width:100%}.home{padding:64px clamp(20px,5vw,72px);position:relative;z-index:1}.hero-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:-2;pointer-events:none}.hero-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#f6fbffd1,#eaf4fbe0)}.home-hero{max-width:860px;margin:0 auto 32px}.eyebrow{margin:0 0 12px;color:var(--blue-deep);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}h1{margin:0;max-width:880px;font-size:clamp(40px,6vw,78px);line-height:.96;letter-spacing:0}.home-copy,.demo-intro p{max-width:660px;margin:20px 0 0;color:var(--muted);font-size:19px;line-height:1.55}.demo-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.demo-card{display:grid;gap:10px;padding:16px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 34px #10203314}.demo-card img{width:100%;aspect-ratio:1200 / 630;object-fit:cover;border-radius:6px}.demo-card strong{font-size:22px}.demo-card span{color:var(--muted);line-height:1.4}.demo-card .demo-channel{color:var(--blue-deep);font-weight:800;font-size:12px;text-transform:uppercase}.demo-page{display:grid;grid-template-columns:minmax(280px,560px) minmax(360px,460px);align-items:center;justify-content:center;gap:clamp(28px,6vw,88px);padding:clamp(22px,4vw,64px)}.demo-intro{align-self:center}.phone-shell{height:min(844px,calc(100vh - 64px));width:calc((71.9 / 150) * min(844px,calc(100vh - 64px)));max-width:100%;aspect-ratio:var(--device-body-aspect);border:12px solid #101828;border-radius:52px;background:#101828;box-shadow:0 34px 90px #10203347;overflow:hidden;position:relative;display:flex}.phone-shell:before{content:"";position:absolute;top:9px;left:50%;z-index:2;width:118px;height:25px;border-radius:0 0 18px 18px;background:#101828;transform:translate(-50%)}.slack-card{height:100%;width:100%;background:#fff;border:1px solid var(--line-2);border-radius:34px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}.slack-statusbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:9px 22px 4px;background:var(--slack-header-bg);color:var(--slack-header-ink)}.slack-statusbar .sb-time{font-size:13px;font-weight:700;letter-spacing:.2px}.slack-statusbar .sb-icons{display:flex;align-items:center;gap:6px}.sb-signal,.sb-wifi,.sb-batt{display:inline-block;background:var(--slack-header-ink)}.sb-signal{width:17px;height:11px;clip-path:polygon(0 100%,0 70%,25% 70%,25% 100%,35% 100%,35% 45%,60% 45%,60% 100%,70% 100%,70% 20%,95% 20%,95% 100%)}.sb-wifi{width:16px;height:12px;border-radius:1px;clip-path:polygon(50% 0,100% 50%,82% 66%,50% 30%,18% 66%,0 50%)}.sb-batt{width:22px;height:11px;border-radius:3px}.slack-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 16px 11px;background:var(--slack-header-bg);color:var(--slack-header-ink);border-bottom:1px solid var(--slack-header-line)}.slack-back{font-size:27px;line-height:1;color:var(--slack-link);font-weight:400}.slack-channel{display:flex;flex-direction:column;gap:1px}.slack-channel-name{display:inline-flex;align-items:center;gap:4px;color:var(--slack-header-ink);font-weight:800;font-size:16px}.slack-channel-name .hash{color:var(--slack-header-muted);font-weight:700}.slack-members{color:var(--slack-header-muted);font-size:12px;font-weight:400}.slack-body{flex:1 1 auto;min-height:0;padding:18px 18px 22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;background:#fff}.slack-composer{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 14px 16px;background:#fff}.composer-plus{font-size:22px;line-height:1;color:var(--slack-composer-placeholder);font-weight:400}.composer-input{flex:1 1 auto;height:40px;display:flex;align-items:center;padding:0 18px;border-radius:20px;border:1px solid var(--slack-composer-border);background:var(--slack-composer-bg);color:var(--slack-composer-placeholder);font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.composer-emoji{font-size:18px;line-height:1;color:var(--slack-composer-placeholder)}.msg{display:grid;grid-template-columns:36px 1fr;gap:12px}.avatar{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;overflow:hidden}.avatar.dash{background:transparent;overflow:visible}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.dash img{object-fit:contain}.msg-head{display:flex;align-items:baseline;gap:8px;min-width:0;margin-bottom:3px}.msg-name{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:800}.msg-tag{padding:1px 5px;border-radius:3px;background:#e8e8e8;color:#616061;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}.msg-time,.msg-edited{color:var(--slack-time);font-size:12px}.msg-edited{font-style:italic}.msg-text{color:var(--slack-msg-ink);font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}.msg-text .mention{padding:0 4px;border-radius:4px;color:var(--slack-link);background:#1264a31a;font-weight:700}.emoji{display:inline-block}.attachments{margin-top:8px}.attachment{margin:0}.attachment img{display:block;width:min(100%,300px);border:1px solid var(--line);border-radius:8px}.reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.reaction-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:#f7fbff;color:#1f3349;font-size:12px}.reaction-pill img{width:16px;height:16px}.divider-new{display:flex;align-items:center;gap:10px;color:#8a9bb0;font-size:12px;font-weight:700;text-transform:uppercase}.divider-new:before,.divider-new:after{content:"";height:1px;flex:1;background:var(--line)}.demo-footer{grid-column:1 / -1;justify-self:center}.demo-footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:8px;color:#fff;background:var(--blue-deep);font-weight:800;text-decoration:none}body>main{position:relative;z-index:1}.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:14.5px;letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;text-decoration:none}.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 20px -8px #1aa9e899,inset 0 1px #ffffff40}.btn-blue:hover{transform:translateY(-1px);background:var(--blue-deep);color:#fff}.demo-stage{padding:28px 16px 80px;background:transparent;min-height:100vh}@media(min-width:768px){.demo-stage{display:flex;flex-direction:column;align-items:center;padding:56px 16px 96px}}.demo-copy{max-width:560px;margin:0 auto 32px;text-align:center}.demo-eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:12px;display:inline-flex;align-items:center;gap:8px}.demo-eyebrow:before{content:"";width:18px;height:1.5px;background:var(--blue);display:inline-block}.demo-headline{font-size:clamp(28px,5vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:700;color:var(--ink);margin:0 0 12px}.demo-blurb{font-size:16px;line-height:1.5;color:#3c5a7a;max-width:50ch;margin:0 auto}.demo-cta{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:10px}.demo-cta-sub{font-size:13.5px;color:#fff;letter-spacing:.02em;font-weight:500;text-shadow:0 0 4px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.9)}.demo-cta-sub a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}.demo-stage .phone-shell{display:contents}.demo-stage .phone-shell .slack-card{transform:none}@media(min-width:768px){.demo-stage .phone-shell{display:block;width:390px;height:calc(390px * 150 / 71.9);aspect-ratio:var(--device-body-aspect);padding:14px;background:#0b1220;border-radius:54px;box-shadow:0 30px 80px #0b122059,inset 0 0 0 2px #1b2740,0 0 0 8px #0b12200a;position:relative;overflow:hidden;border:0}.demo-stage .phone-shell:before{content:"";position:absolute;top:25px;left:50%;transform:translate(-50%);width:115px;height:34px;background:#000;border-radius:17px;z-index:4}.demo-stage .phone-shell .slack-card{height:100%;transform:none;border-radius:40px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.demo-stage .phone-shell .slack-card::-webkit-scrollbar{display:none}.demo-stage .phone-shell .slack-statusbar{height:56px;padding-top:0;padding-bottom:0;align-items:center}.demo-cta-sub{color:#5b7390;text-shadow:none;font-weight:400}.demo-cta-sub a{color:var(--blue-deep);text-shadow:none}}@media(max-width:767px){.demo-stage{padding:20px 12px 64px}.demo-headline{font-size:26px;letter-spacing:-.02em}.demo-blurb{font-size:14.5px}.demo-copy{margin-bottom:22px}.demo-cta-sub{color:#5b7390;text-shadow:none;font-weight:400}.demo-cta-sub a{color:var(--blue-deep);text-shadow:none}}.og-preview{width:1200px;height:630px;display:grid;grid-template-columns:1fr 280px;gap:50px;align-items:center;padding:56px 66px;background-image:linear-gradient(135deg,#f6fbffcc,#eaf4fbb8),url(/og/hero-bg-still.jpg);background-size:cover,cover;background-position:center,center}.og-preview h1{font-size:74px}.og-preview p{color:var(--muted);font-size:24px;line-height:1.35}.og-preview span{color:var(--blue-deep);font-weight:800}.mini-phone{height:560px;width:calc(560px * (71.9 / 150));aspect-ratio:var(--device-body-aspect);justify-self:center;position:relative;overflow:hidden;border:11px solid #101828;border-radius:46px;background:#fff;box-shadow:0 24px 68px #10203338;display:flex;flex-direction:column}.mini-phone .slack-body{flex:1 1 auto;min-height:0}.mini-phone:before{content:"";position:absolute;top:18px;left:50%;transform:translate(-50%);width:78px;height:23px;border-radius:11.5px;background:#000;z-index:4}.mini-phone .slack-statusbar{height:40px;padding-top:0;padding-bottom:0;align-items:center}.mini-phone .slack-statusbar .sb-icons{display:none}@media(max-width:760px){.home{padding:36px 18px}h1{font-size:42px}.demo-page{display:block;padding:0;background:#fff}.demo-intro{padding:28px 18px 18px}.demo-intro p{font-size:17px}.phone-shell{width:100%;height:auto;min-height:70vh;border:0;border-radius:0;box-shadow:none;background:#fff}.phone-shell:before{display:none}.slack-card{border:0;border-radius:0;box-shadow:none}.slack-body{height:auto;min-height:60vh;overflow:visible}.demo-footer{padding:0 18px 28px}.demo-footer a{width:100%}}
