:root{--bg:#fafbff;--ink:#171b31;--muted:#69718a;--blue:#5558e8;--violet:#8056de;--line:#e6e8f3;--pale:#f1f1ff;--green:#14896a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}.wrap{max-width:1240px;margin:auto;padding:0 24px}nav{height:76px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:900;font-size:28px;letter-spacing:-2px}.brand span{color:var(--blue)}.navlinks{display:flex;gap:28px;color:var(--muted);font-size:13px}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--blue);color:white;padding:13px 20px;font-weight:750;box-shadow:0 7px 18px #5558e822}.button.outline{background:white;color:var(--blue);border:1px solid #dcdff6;box-shadow:none}.hero{text-align:center;padding:50px 0 30px}.eyebrow{font-weight:800;color:var(--blue);font-size:11px;letter-spacing:2px;text-transform:uppercase}h1{font-size:clamp(44px,6vw,75px);letter-spacing:-.065em;line-height:1.02;margin:13px auto 18px;max-width:900px}h1 span{color:var(--blue)}.lead{font-size:18px;color:var(--muted);max-width:760px;margin:0 auto}.buttons{display:flex;justify-content:center;gap:10px;margin-top:24px;flex-wrap:wrap}.smallproof{color:#8b91a5;font-size:12px;margin-top:15px}.diagram{margin:38px auto 70px;display:grid;grid-template-columns:190px minmax(0,1fr) 190px;gap:18px;align-items:center}.side{display:grid;gap:15px}.sidebox{border:1px solid var(--line);border-radius:17px;background:white;padding:17px;box-shadow:0 8px 26px #27327609;text-align:left}.sidebox h4{margin:0 0 10px;font-size:13px}.sidebox p{font-size:12px;color:var(--muted);margin:0}.sidebox .item{font-size:12px;display:flex;gap:8px;align-items:center;padding:5px 0}.sidebox .item b{font-size:11px;background:var(--pale);color:var(--blue);padding:3px 6px;border-radius:5px}.arrow{font-size:23px;color:var(--blue);text-align:center}.workspace{background:white;border:1px solid #dcdff0;border-radius:23px;box-shadow:0 25px 75px #31378017;overflow:hidden;text-align:left}.worktop{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 17px}.worktop b{font-size:14px}.lock{font-size:10px;background:#e8f8f1;color:var(--green);border-radius:30px;padding:6px 9px;font-weight:800}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);padding:11px 14px}.tab{border:0;border-radius:8px;background:transparent;color:#7b8298;padding:8px 11px;font-size:12px}.tab.active{background:var(--pale);color:var(--blue);font-weight:800}.workbody{padding:19px;min-height:310px}.filegrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.filetile{border:1px solid var(--line);border-radius:12px;min-height:95px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#6e7890;text-align:center;padding:6px}.filetile strong{font-size:24px}.filetile[data-type=PDF] strong{color:#e35c70}.filetile[data-type=CAD] strong{color:#5866d8}.filetile[data-type=XLS] strong{color:#149a75}.filetile[data-type=IMG] strong{color:#d38a37}.filetile[data-type=VID] strong{color:#9d6bd8}.workfoot{display:flex;justify-content:space-between;gap:8px;padding:13px 18px;background:#fafaff;border-top:1px solid var(--line);font-size:11px;color:#737d95}.tools{display:flex;gap:6px;flex-wrap:wrap}.tool{font-size:11px;border:1px solid var(--line);padding:6px 8px;border-radius:7px;background:white;color:#606b83}.toolrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}.toolrow:last-child{border:0}.toolrow .ico{width:26px;height:26px;background:var(--pale);border-radius:8px;display:grid;place-items:center;color:var(--blue)}.muted{color:var(--muted)}.section{padding:80px 0}.section.alt{background:#f0f2ff}.section h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.055em;line-height:1.08;margin:8px 0 14px}.sectionhead{text-align:center;max-width:780px;margin:0 auto 35px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:25px}.card h3{margin:13px 0 6px;font-size:20px}.card p{color:var(--muted);font-size:14px;margin:0}.card .symbol{font-size:28px}.split{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.rights{border:1px solid var(--line);border-radius:18px;background:white;padding:24px;box-shadow:0 12px 40px #2732760c}.rightrow{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);gap:10px}.rightrow:last-child{border:0}.rightrow small{display:block;color:var(--muted)}.toggle{background:#dce0eb;width:43px;height:24px;border:0;border-radius:20px;position:relative;flex-shrink:0}.toggle:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}.toggle.on{background:var(--blue)}.toggle.on:after{left:22px}.alert{background:#fff3f3;color:#b54957;border:1px solid #ffd9df;padding:10px;border-radius:10px;font-size:12px;margin-top:15px}.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.step{background:white;border:1px solid var(--line);border-radius:15px;padding:23px}.step strong{color:var(--blue);font-size:12px}.step h3{margin:13px 0 5px}.step p{color:var(--muted);margin:0;font-size:13px}.final{text-align:center;background:linear-gradient(135deg,#5459df,#8254dd);color:white;padding:75px 20px}.final h2{max-width:800px;margin:0 auto 16px}.final p{color:#e2e3ff}.final .button{background:white;color:var(--blue)}footer{padding:28px 0;display:flex;justify-content:space-between;color:#8990a6;font-size:12px}.peoplelist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.person{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px}.person small{display:block;color:var(--muted)}.agentlist{display:grid;gap:9px}.agent{border:1px solid var(--line);padding:11px;border-radius:10px;font-size:12px}.agent small{display:block;color:var(--muted)}@media(max-width:1050px){.diagram{grid-template-columns:1fr}.side{grid-template-columns:repeat(2,1fr)}.arrow{display:none}}@media(max-width:650px){.navlinks{display:none}.side,.cards,.split,.stepgrid{grid-template-columns:1fr}.filegrid{grid-template-columns:repeat(3,1fr)}.workfoot{flex-wrap:wrap}.hero{padding-top:30px}footer{display:block}.diagram{margin-bottom:30px}}

/* ROOMZ default midnight-blue theme */
:root{--bg:#080e23;--ink:#f4f6ff;--muted:#a1abc9;--blue:#858bff;--violet:#9d85fa;--line:#293454;--pale:#202a50;--green:#7be0b7}
body{background:radial-gradient(ellipse at 50% -12%,#1a2854 0%,#080e23 52%);color:var(--ink)}
.sidebox,.workspace,.card,.rights,.step,.tool,.person,.agent,.filetile{background:#111b37;border-color:var(--line);color:var(--ink)}
.worktop,.tabs,.rightrow{border-color:var(--line)}.workfoot{background:#0d1731;border-color:var(--line);color:var(--muted)}
.section.alt{background:#0d1731}.button.outline{background:#131f3e;color:#d6d8ff;border-color:#394573}
.tab{color:#aab4d0}.tab.active{background:#28345f;color:#d5d7ff}
.filetile,.person,.agent{background:#172241}.filetile strong{color:#aeb7ff}
.sidebox .item b,.toolrow .ico{background:#26345e;color:#c2c6ff}.tool{background:#172241;color:#c2c9e0}
.lock{background:#143b37;color:#8aefc8}.alert{background:#402634;border-color:#6b3549;color:#ffc3d1}
.toggle{background:#46516c}.toggle.on{background:#777df4}
.smallproof,.sidebox p,.sidebox .item,.card p,.step p,.muted,.filetile,.worktop div[style],.workfoot,.person small,.agent small{color:var(--muted)!important}
.final{background:linear-gradient(125deg,#222e69,#5147a3)}
footer{color:var(--muted)}
.soon{display:inline-block;font-size:9px;letter-spacing:.08em;color:#f3d7a1;background:#493b2a;border:1px solid #695338;padding:2px 6px;border-radius:5px;vertical-align:middle;margin-left:5px;font-weight:850}
.below-workspace{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-self:start}.below-workspace .sidebox{height:100%}@media(max-width:1050px){.below-workspace{grid-column:1;grid-row:auto}}@media(max-width:650px){.below-workspace{grid-template-columns:1fr}}
.worktop{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}.worktop>.lock{justify-self:end;white-space:nowrap}.top-tabs{display:flex;align-items:center;justify-content:center;gap:5px}.top-tabs .tab{white-space:nowrap}@media(max-width:650px){.worktop{grid-template-columns:1fr auto}.top-tabs{grid-column:1 / -1;grid-row:2}.worktop>.lock{grid-column:2;grid-row:1}.lock{font-size:8px}.tabs{justify-content:center}}

/* Alpha label beneath the header logo */
.brand{position:relative;display:inline-block;line-height:1.05;padding-bottom:13px}.brand .brand-alpha{position:absolute;left:0;bottom:0;display:block;font-size:9px;line-height:1;font-weight:800;letter-spacing:2px;color:inherit;opacity:.75}


.mobile-diagram{display:none}
.mobile-diagram img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.file-path{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-bottom:13px;border:1px solid var(--line);background:var(--pale);border-radius:9px;font-size:12px;color:var(--muted)}
.file-path b{color:var(--blue);font-size:10px;letter-spacing:.09em}
.file-list{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.file-list-head,.file-list-row{display:grid;grid-template-columns:minmax(0,1fr) 65px;gap:12px;align-items:center;padding:8px 13px}
.file-list-head{background:var(--pale);color:var(--muted);font-size:11px;font-weight:800}
.file-list-row{border-top:1px solid var(--line);font-size:12px}
.file-list-name{display:flex;align-items:center;gap:12px;min-width:0;overflow-wrap:anywhere}
.list-icon{font-size:17px;color:var(--blue)}
.list-icon[data-type=PDF]{color:#e35c70}.list-icon[data-type=XLS]{color:#149a75}.list-icon[data-type=IMG]{color:#d38a37}.list-icon[data-type=VID]{color:#9d6bd8}
.file-list-type{color:var(--muted);font-size:10px}
@media(max-width:1050px){.diagram{display:none!important}.mobile-diagram{display:block;margin:30px auto 55px}}

/* Soft cyan diagram surfaces coordinated with the midnight-blue theme. */
.diagram{--ink:#171b31;--muted:#526f83;--blue:#387ca5;--line:#c7e4ed;--pale:#dff2f8;color:var(--ink)}
.diagram .sidebox,.diagram .workspace,.diagram .tool,.diagram .person,.diagram .agent,.diagram .filetile,.diagram .workfoot{background:#f0fbff;color:var(--ink);border-color:var(--line)}
.diagram .tab{color:var(--muted)}
.diagram .tab.active,.diagram .sidebox .item b,.diagram .toolrow .ico{background:var(--pale);color:var(--blue)}
.diagram .tool{color:var(--muted)}
@media(max-width:1050px){.diagram{display:grid!important}.mobile-diagram{display:none}}

/* Familiar desktop document icons, distinct for each file format. */
.diagram .filetile{background:transparent;border-color:transparent;min-height:116px;gap:5px;padding:8px 3px;color:var(--ink)!important;border-radius:8px}
.diagram .filetile:hover{background:#dff2f8;border-color:#b6dce9}
.desktop-file-icon{display:block;width:57px;height:64px;flex-shrink:0;filter:drop-shadow(0 2px 2px #163d5415)}
.filetile>span{font-size:10px;line-height:1.3;overflow-wrap:anywhere;color:#29445b}
.list-icon .desktop-file-icon{width:26px;height:30px;filter:none}

/* File transfers originate at Files in and land on the desktop. */
.file-transfer{position:fixed;z-index:100;pointer-events:none;will-change:transform,opacity}
.diagram .filetile.file-awaiting{visibility:hidden}
#files-in.transfer-active{box-shadow:0 0 0 2px #64cbe766,0 0 28px #64cbe733}
@media(prefers-reduced-motion:reduce){#files-in.transfer-active{box-shadow:none}}

/* Future integrations sit apart from the active workspace. */
.diagram .below-workspace{margin-top:38px;gap:18px}
.diagram .below-workspace .sidebox{background:#dcebf2;border-color:#b7cedb;color:#526e83;box-shadow:0 6px 20px #07132414}
.diagram .below-workspace .sidebox p,.diagram .below-workspace .tool{color:#627e92!important}
.diagram .below-workspace .tool{background:#e6f0f5;border-color:#c2d6e1}
.diagram .below-workspace .soon{background:#cadce7;border-color:#adc5d4;color:#627b91}
.person{display:flex;align-items:center;gap:10px}
.person-avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#d7eff7;color:#32637c;font-size:11px;font-weight:800;border:1px solid #b6d9e6}
.person-arrival{position:fixed;z-index:100;pointer-events:none;display:flex;align-items:center;gap:9px;padding:10px 12px;background:#f0fbff;border:1px solid #b6d9e6;border-radius:12px;color:#29445b;font-size:12px;box-shadow:0 8px 24px #07132444;white-space:nowrap}
.person.invite-awaiting{visibility:hidden}
#invite-humans.transfer-active{box-shadow:0 0 0 2px #64cbe766,0 0 28px #64cbe733}
@media(max-width:1050px){.diagram .below-workspace{margin-top:30px;grid-row:4}}

.demo-cursor{position:fixed;left:0;top:0;width:27px;height:34px;z-index:110;pointer-events:none;filter:drop-shadow(0 2px 3px #08182b66)}
.top-tabs .tab.demo-pressed{filter:brightness(.78);transform:scale(.96);background:#c5e1ec;color:#295a77}
.top-tabs .tab{transition:background .18s,filter .18s,transform .18s}

.diagram .below-workspace .sidebox>*{opacity:.5}
.person-arrival{white-space:normal;padding:10px;gap:10px;border-radius:10px;box-sizing:border-box;box-shadow:none;font-size:12px;color:#171b31}
.person-arrival small{display:block;color:#526f83;font-size:smaller}
.agent-arrival{display:block;padding:11px}
.agent.invite-awaiting{visibility:hidden}
#connect-agents.demo-pressed,#invite-humans.demo-pressed{filter:brightness(.78);transform:scale(.98)}
#connect-agents.transfer-active{box-shadow:0 0 0 2px #64cbe766,0 0 28px #64cbe733}

.peoplelist,.agentlist{display:grid;grid-template-columns:repeat(2,minmax(0,210px));gap:10px;justify-content:start}
.diagram .person,.diagram .agent{width:100%;min-height:64px;padding:10px;border-radius:10px;font-size:12px;line-height:1.4}
.diagram .person small,.diagram .agent small{font-size:10px;line-height:1.4}
.person-avatar{width:29px;height:29px;font-size:10px}
.team-work{text-align:center;color:#29445b;padding:12px 0}
.team-work h3{margin:4px 0 16px;font-size:16px}
.team-members{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:18px}
.team-chip{padding:6px 9px;border:1px solid #bfdce8;border-radius:20px;background:#e3f4fa;font-size:10px;animation:team-working 1s ease-in-out infinite alternate;animation-delay:calc(var(--worker)*.13s)}
.team-chip.ai{background:#eae8fa;border-color:#d2cceb}
.work-files{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.work-files .desktop-file-icon{width:36px;height:42px;animation:file-working 1s ease-in-out infinite alternate}
.work-progress{height:5px;border-radius:8px;background:#d2eaf3;overflow:hidden;width:180px;margin:16px auto}
.work-progress:after{content:"";display:block;background:#499abd;height:100%;animation:work-progress 3s linear forwards}
.final-result{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:25px;text-align:center;color:#29445b}
.done-badge{color:#167553;background:#daf5e9;border:1px solid #8fd4b6;padding:7px 20px;border-radius:22px;font-size:18px;font-weight:800;animation:done-pop .5s ease-out}
.result-document{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px}
#files-out.transfer-active{box-shadow:0 0 0 2px #64cbe766,0 0 28px #64cbe733}
@keyframes team-working{to{transform:translateY(-3px);background:#bfe4f2}}
@keyframes file-working{to{transform:translateY(4px)}}
@keyframes work-progress{from{width:0}to{width:100%}}
@keyframes done-pop{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@media(max-width:480px){.peoplelist,.agentlist{grid-template-columns:repeat(2,minmax(0,1fr))}.diagram .person{gap:6px;padding:8px}.person-avatar{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.team-chip,.work-files .desktop-file-icon,.done-badge,.work-progress:after{animation:none}}

.intensive-work{padding:0}
.intensive-work h3{margin:0 0 9px}
.intensive-work .team-members{margin-bottom:10px;gap:5px}
.intensive-work .team-chip{padding:4px 7px}
.discussion-stream{display:grid;gap:6px;max-width:440px;margin:0 auto 10px;text-align:left}
.discussion-bubble{justify-self:start;border-radius:10px 10px 10px 2px;background:#e0f1f8;border:1px solid #bedce8;padding:6px 10px;font-size:11px;animation:discussion-arrive .4s both;animation-delay:calc(var(--message)*.35s)}
.discussion-bubble.ai-message{justify-self:end;background:#eeeafa;border-color:#d8d0ed;border-radius:10px 10px 2px 10px}
.processing-files{display:flex;justify-content:center;gap:24px;margin:8px 0}
.processing-file{display:flex;flex-direction:column;align-items:center;font-size:9px;color:#526f83;animation:process-file .7s ease-in-out infinite alternate;animation-delay:calc(var(--worker)*.18s)}
.processing-file .desktop-file-icon{width:30px;height:35px}
.process-status{font-size:10px;display:flex;justify-content:center;align-items:center;gap:6px;margin:10px 0;color:#387ca5}
.busy-dot{width:9px;height:9px;border:2px solid #b9deed;border-top-color:#387ca5;border-radius:50%;animation:busy-spin .6s linear infinite}
.review-phases{display:flex;justify-content:center;gap:10px;font-size:9px;color:#8294a5;flex-wrap:wrap}
.review-phases .complete{color:#16826b}.review-phases .current{color:#387ca5;font-weight:800}
@keyframes discussion-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes process-file{to{transform:translateY(-5px) rotate(4deg)}}
@keyframes busy-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.discussion-bubble,.processing-file,.busy-dot{animation:none}}

.diagram .sidebox .item .list-dot{background:transparent;color:var(--muted);padding:0;width:12px;text-align:center;font-size:16px;line-height:1}

/* Prominent spinner communicates active processing. */
.busy-dot{width:23px;height:23px;flex-shrink:0;border:4px solid #b8dce9;border-top-color:#17658e;border-right-color:#479fc3;box-shadow:0 0 0 3px #e5f4fa;animation:busy-spin .8s linear infinite}
.process-status{font-size:11px;font-weight:650;gap:12px;min-height:32px;margin:12px 0;color:#265f7f}
@media(prefers-reduced-motion:reduce){.busy-dot{animation:none}}

/* Reserve room for the tallest panel throughout the full animation. */
.diagram .workbody{height:390px;min-height:390px;overflow:auto;scrollbar-gutter:stable}
@media(max-width:650px){.diagram .workbody{height:440px;min-height:440px}}

.demo-play{border:1px solid #b7d7e5;background:#e4f4fa;color:#32637c;border-radius:6px;padding:3px 7px;font-size:10px;white-space:nowrap}
.demo-motion-enabled .busy-dot{animation:busy-spin .8s linear infinite}
.demo-motion-enabled .discussion-bubble{animation:discussion-arrive .4s both;animation-delay:calc(var(--message)*.35s)}
.demo-motion-enabled .processing-file{animation:process-file .7s ease-in-out infinite alternate}
.demo-motion-enabled .team-chip{animation:team-working 1s ease-in-out infinite alternate}

@media(max-width:1050px){
 .diagram>.side:first-child{grid-row:1}
 .diagram>.side:last-child{grid-row:2}
 .diagram>.workspace{grid-row:3}
 .diagram>.below-workspace{grid-row:4}
}

/* Compact introduction brings the live demo into view sooner. */
.hero{padding:16px 0 20px}
.hero h1{font-size:clamp(30px,3.5vw,44px);line-height:1.06;margin:5px auto 10px;max-width:900px}
.hero>.lead{font-size:14px;line-height:1.45;max-width:800px}
.hero>.buttons{margin-top:12px}
.hero>.buttons .button{padding:9px 16px;font-size:13px}
.hero>.smallproof{margin-top:8px;font-size:10px}
.hero>.diagram{margin-top:20px}
@media(max-width:650px){.hero{padding-top:10px}.hero h1{font-size:30px}.hero>.lead{font-size:13px}.hero>.diagram{margin-top:18px}}

/* Phone layout keeps the screenshot's paired boxes and compact live workspace. */
@media(max-width:1050px){
 .wrap{padding-left:12px;padding-right:12px}
 nav{height:55px}.brand{font-size:23px}nav>.button{font-size:11px;padding:8px 11px}
 .hero{padding-top:8px;padding-bottom:12px}.hero h1{font-size:26px;margin:2px auto 8px}
 .hero>.lead{font-size:11px;line-height:1.4}.hero>.buttons{margin-top:9px}
 .hero>.buttons .button{font-size:11px;padding:7px 12px}
 .hero>.smallproof{font-size:8px;line-height:1.4;margin-top:6px}
 .hero>.diagram{margin:14px auto 22px;gap:8px}
 .diagram>.side{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
 .diagram .sidebox{padding:10px;border-radius:11px;min-width:0}
 .diagram .sidebox h4{font-size:10px;margin:0 0 6px;line-height:1.3}
 .diagram .sidebox p,.diagram .sidebox .item{font-size:9px;line-height:1.4}
 .diagram .sidebox .item{gap:4px;padding:2px 0}
 .diagram .sidebox .item .list-dot{width:8px;font-size:12px}
 .diagram>.workspace{zoom:.78;width:auto;min-width:0;max-width:100%;border-radius:16px}
 .diagram .workbody{height:300px;min-height:300px;padding:12px}
 .diagram .worktop{grid-template-columns:minmax(0,1fr) auto;padding:10px;gap:6px}
 .diagram .worktop b{font-size:12px}
 .diagram .worktop>div>div{font-size:9px!important}
 .diagram .top-tabs{grid-column:1;grid-row:2;justify-content:flex-start}
 .diagram .worktop>.lock{grid-column:2;grid-row:1 / 3;font-size:8px}
 .diagram .tabs{justify-content:flex-start;padding:6px 10px}
 .diagram .tab{font-size:11px;padding:6px 8px}
 .diagram .filegrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .diagram .filetile{min-height:96px}.desktop-file-icon{width:45px;height:53px}
 .filetile>span{font-size:9px}
 .diagram .peoplelist,.diagram .agentlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .diagram .person,.diagram .agent{min-height:60px;font-size:11px;padding:8px}
 .diagram .workfoot{padding:8px 10px;font-size:9px;flex-wrap:nowrap}
 .diagram>.below-workspace{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;gap:8px}
 .diagram .below-workspace .tool{font-size:8px;padding:3px 4px}.diagram .below-workspace .tools{gap:3px}
 .diagram .below-workspace .soon{font-size:7px;padding:1px 3px;margin-left:2px}
 .diagram .below-workspace p{margin-top:6px!important}
 .diagram .intensive-work h3{font-size:14px}.diagram .discussion-bubble{font-size:10px;padding:5px 8px}
 .diagram .processing-files{gap:15px;margin:5px 0}.diagram .process-status{margin:8px 0}
}

@media(max-width:1050px){
 .diagram{min-width:0;grid-template-columns:minmax(0,1fr)}
 .diagram>.workspace{width:auto;min-width:0;max-width:100%}
 .diagram .worktop{min-width:0}.diagram .worktop>div{min-width:0}
 .diagram .worktop b{font-size:11px}.diagram .lock{font-size:7px;padding:5px 6px}
 .diagram .workfoot{gap:4px;font-size:8px;flex-wrap:wrap}
 .diagram .person,.diagram .agent{overflow-wrap:anywhere}
 .diagram .team-members,.diagram .discussion-stream,.diagram .review-phases{min-width:0;max-width:100%}
 .diagram .processing-files{gap:10px}
}

.hero>.smallproof{margin:10px auto 0}
@media(max-width:1050px){nav{height:42px}.hero>.smallproof{margin-top:8px}.hero>.diagram{margin-bottom:10px}}

.collaboration-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:12px;align-items:stretch;text-align:left}
.collaboration-resources{min-width:0;display:flex;flex-direction:column;justify-content:center;background:#e9f6fb;border:1px solid #c5e2ed;border-radius:11px;padding:12px 8px}
.collaboration-resources .team-members{justify-content:center;margin-bottom:20px}
.discussion-panel{min-width:0;border-left:1px solid #c5e2ed;padding-left:10px}
.discussion-label{font-size:10px;color:#526f83;font-weight:800;margin-bottom:8px}
.discussion-panel .discussion-stream{gap:8px;margin:0}
.discussion-panel .discussion-bubble{width:100%;font-size:10px;overflow-wrap:anywhere;padding:7px;line-height:1.4}
@media(max-width:1050px){
 .collaboration-split{gap:7px}.collaboration-resources{padding:9px 5px}
 .collaboration-resources .team-chip{font-size:8px;padding:3px 5px}
 .discussion-panel{padding-left:6px}.discussion-panel .discussion-bubble{font-size:9px;padding:5px}
 .collaboration-resources .processing-files{gap:7px}.collaboration-resources .processing-file{font-size:8px}
}

/* Keep collaboration panels and their contents steady between work stages. */
.collaboration-split{height:220px;grid-template-rows:minmax(0,1fr)}
.collaboration-resources,.discussion-panel{height:100%;min-height:0;overflow:hidden}
.collaboration-resources{justify-content:flex-start}
.collaboration-resources .team-members{height:100px;min-height:100px;margin:0 0 12px;align-content:flex-start;align-items:flex-start}
.collaboration-resources .processing-files{height:65px;min-height:65px;margin:0;align-items:flex-start}
.discussion-panel .discussion-stream{height:188px;grid-template-rows:repeat(3,minmax(0,1fr));align-items:stretch}
.discussion-panel .discussion-bubble{height:100%;margin:0;display:flex;align-items:center}
.intensive-work h3{height:36px;display:flex;align-items:center;justify-content:center;margin:0 0 9px}
@media(max-width:1050px){
 .collaboration-split{height:210px}
 .collaboration-resources .team-members{height:105px;min-height:105px;margin-bottom:10px}
 .discussion-panel .discussion-stream{height:180px}
 .intensive-work h3{height:30px;margin-bottom:6px}
}

/* Alternating chat messages arrive sequentially from below. */
.discussion-panel .discussion-bubble{width:88%;justify-self:start;background:#dceff9;border-color:#b9d9eb;border-radius:10px 10px 10px 2px;animation:chat-message-arrive .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--message)*.6s)}
.discussion-panel .discussion-bubble.ai-message{justify-self:end;background:#f9e3ee;border-color:#ebc5d8;border-radius:10px 10px 2px 10px}
@keyframes chat-message-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.demo-motion-enabled .discussion-panel .discussion-bubble{animation:chat-message-arrive .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--message)*.6s)}
@media(prefers-reduced-motion:reduce){body:not(.demo-motion-enabled) .discussion-panel .discussion-bubble{animation:none}}

/* Consistent prominent headings across the diagram. */
.diagram .worktop .room-title,.diagram .sidebox h4{font-size:14px;font-weight:800;line-height:1.3}
.diagram .worktop .room-title{display:block;color:var(--ink);margin-bottom:3px}
@media(max-width:1050px){.diagram .worktop .room-title,.diagram .sidebox h4{font-size:11px;font-weight:800}}

.diagram .worktop .room-title,.diagram>.side .sidebox h4{font-size:21px}
@media(max-width:1050px){.diagram .worktop .room-title,.diagram>.side .sidebox h4{font-size:16.5px}}

.diagram .worktop .room-title{font-size:30.345px}
@media(max-width:1050px){.diagram .worktop .room-title{font-size:23.8425px}}

@media(max-width:1050px){.heading-arrow{display:none}}

.diagram .below-workspace .sidebox h4{font-size:21px;font-weight:800}
@media(max-width:1050px){.diagram .below-workspace .sidebox h4{font-size:16.5px}}

.desktop-spacer{height:56px}
@media(max-width:1050px){.desktop-spacer{height:40px}}

@media(min-width:651px) and (max-width:1050px){
 nav{height:48px}.navlinks{gap:15px;font-size:11px}
 .hero{padding-top:8px;padding-bottom:12px}
 .hero h1{font-size:30px;margin:2px auto 8px}
 .hero>.lead{font-size:12px;line-height:1.4;max-width:720px}
 .hero>.buttons{margin-top:9px}.hero>.buttons .button{font-size:12px;padding:8px 14px}
 .hero>.diagram{margin-top:14px}
 .diagram .workbody{height:300px;min-height:300px}
 .diagram .worktop{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .diagram .top-tabs{grid-column:2;grid-row:1;justify-content:center}
 .diagram .worktop>.lock{grid-column:3;grid-row:1;justify-self:end}
 .diagram .peoplelist,.diagram .agentlist{grid-template-columns:repeat(2,minmax(0,210px))}
}

/* Keep the mobile header in one row, with participant tabs in the middle. */
@media(max-width:650px){
 .diagram .worktop{grid-template-columns:minmax(0,1fr) auto auto;gap:5px;padding:9px 8px}
 .diagram .top-tabs{grid-column:2;grid-row:1;justify-content:center;gap:2px}
 .diagram .worktop>.lock{grid-column:3;grid-row:1;justify-self:end;font-size:6px;padding:5px}
 .diagram .top-tabs .tab{font-size:9px;padding:5px 4px}
 .diagram .worktop .room-title{font-size:21px}
}
/* Preserve the workspace dimensions while moving work headings nearer the divider. */
.desktop-spacer{height:12px}
.diagram .workbody{height:434px;min-height:434px;padding-top:8px}
@media(max-width:1050px){
 .desktop-spacer{height:8px}
 .diagram .workbody{height:332px;min-height:332px;padding-top:5px}
}
.intensive-work h3{margin-top:0;margin-bottom:5px;height:27px}

/* Output and agent connections sit directly beneath the private workspace. */
.diagram>.side:last-child{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.diagram>.below-workspace{grid-column:2;grid-row:3}
@media(max-width:1050px){
 .diagram>.side:first-child{grid-column:1;grid-row:1}
 .diagram>.workspace{grid-column:1;grid-row:2}
 .diagram>.side:last-child{grid-column:1;grid-row:3}
 .diagram>.below-workspace{grid-column:1;grid-row:4}
}

/* Equal side columns keep participant tabs at the true header center. */
@media(max-width:650px){
 .diagram .worktop{position:relative;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:5px;align-items:center}
 .diagram .worktop>div:first-child{grid-column:1;grid-row:1;min-width:0}
 .diagram .top-tabs{grid-column:2;grid-row:1;justify-self:center;justify-content:center;display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0}
 .diagram .top-tabs .tab{text-align:center;font-size:10px;padding:4px 6px;white-space:nowrap}
 .diagram .worktop>.lock{grid-column:3;grid-row:1;justify-self:end;max-width:100%;font-size:7px}
 .diagram .worktop .room-title{font-size:20px;line-height:1.15}
}

nav>.button{margin-left:auto}
nav .navlinks{margin-left:auto;margin-right:24px}
@media(max-width:1050px){nav>.button{font-size:11px;padding:7px 10px;white-space:nowrap}}

@media(min-width:1051px){
 .diagram>.side:first-child{grid-column:1;grid-row:1}
 .diagram>.workspace{grid-column:2;grid-row:1}
 .diagram>.side:last-child{grid-column:3;grid-row:1;grid-template-columns:1fr}
 .diagram>.below-workspace{grid-column:2;grid-row:2}
}