/* Hero-only refinement. Keep all selectors inside the opening. */
/* Fade the composed scenery and glass once, never back into sharp scenery. */
.opening{mask-image:linear-gradient(#000 calc(100% - 70px),transparent)}
.opening .demo-frame{mask-image:none}
.opening .workspace{mask-image:linear-gradient(#000 calc(100% - 12px),transparent)}
.opening .demo-fade{background:transparent}
.opening .demo-fade:before{display:none}
.opening .nav .wordmark{gap:0;letter-spacing:0}
.opening .nav .wordmark img{width:132px;height:44px;object-fit:contain;object-position:left center}
.opening .hero{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);align-items:end;gap:76px;text-align:left;padding:50px 0 42px}
.opening .hero h1{font-size:clamp(78px,7.4vw,108px);line-height:1.04;letter-spacing:-.045em}
.opening .hero-aside{max-width:318px;padding-bottom:5px;justify-self:start}
.opening .hero p{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.02em;margin:0 0 17px;max-width:none;color:#263c31}
.opening .hero p span{display:block;margin-top:7px;font-size:13px;font-weight:400;line-height:1.65;max-width:290px;color:#344b3a}
.opening .hero p br{display:none}
.opening .hero-character{width:48px;height:48px;margin:0 0 10px 4px;transform:rotate(8deg)}
@keyframes heroSmileSettle{from{opacity:0;transform:translateY(8px) rotate(-16deg)}to{opacity:1;transform:rotate(8deg)}}
.js-motion .opening .hero.in-view .hero-character{animation:heroSmileSettle 1.3s var(--ease) .25s both}
.js-motion .opening .hero:not(.in-view) .hero-character{animation-play-state:paused}
.opening .demo-frame{padding:11px 11px 0;background:linear-gradient(125deg,#ffffff80,#e8f1ed16 48%,#afc6be40);border:1px solid #fffdf2c9;border-right-color:#47665766;border-bottom:0;box-shadow:inset 0 2px 1px #ffffffe0,inset 2px 0 2px #fffff366,inset -1px 0 1px #244a3d40,0 3px 5px #173c3338,0 22px 45px -30px #173c3390;backdrop-filter:blur(10px) saturate(1.15)}
.opening .workspace{grid-template-columns:182px minmax(0,1fr) 207px;height:518px;font-family:Manrope,sans-serif;background:transparent;color:#263b31}
.opening .room{margin-top:0;background:linear-gradient(125deg,#fbfdf7d6,#f4f9f0b8);border-color:#ffffffa6;box-shadow:0 1px 10px #244b3514}
.opening .room-header{height:55px;background:#ffffff50}
.opening .room-state{height:37px;background:#d9e4d250;color:#42543e;font-weight:500}
.opening .sidebar,.opening .context-panel{background:transparent;color:#304a39}
.opening .search,.opening .side-links,.opening .channels{color:#1b2d20;font-weight:500}
.opening .sidebar>small,.opening .side-people small{color:#1b2d20;font-weight:500}
.opening .channels .selected{background:#f7fff4a6;color:#223d2b;box-shadow:inset 0 1px 0 #fff9}
.opening .byline>span,.opening .byline .agent-label{color:#52634f;font-weight:500}
.opening .context-person small,.opening .context-note>span,.opening .context-note p{color:#1b2d20;font-weight:500}
.opening .context-decision p{color:#425840;font-weight:500}
.opening .context-title,.opening .context-person strong,.opening .context-note strong{color:#1b2d20;font-weight:600}
.opening .context-decision{background:#f7faed99;border-color:#fafff3b3;box-shadow:0 2px 4px #193b3014}
.opening .conversation{height:426px;padding:22px 24px 62px}
.opening .message{margin-bottom:17px}
.opening .message p{font-size:13px;line-height:1.6;font-weight:500}
.opening .byline strong{font-size:12px;font-weight:700}
.opening .source-chip{font-size:10px;padding:4px 7px;margin-top:8px;background:#f6faf080;color:#455a37;border-color:#647c4140;font-weight:500}
.opening .result-file{max-width:420px;padding:10px 13px;min-height:58px;background:#dce8cdad;border-color:#81956c66;box-shadow:inset 0 1px 0 #fff8}
.opening .result-file:hover{background:#dce8cdad}
.opening .result-file strong{font-size:12px;font-weight:700}
.opening .result-file small{font-size:10px;color:#425633;font-weight:500}
.opening .next-step{margin-left:43px;background:#eee1b8b8;border:0;padding:10px 12px;font-size:11px;gap:9px;color:#493c22}
.opening .next-step strong{font-weight:700}
.opening .hero-review-label{font-size:9px;margin-left:auto;color:#684e24;white-space:nowrap;font-weight:600}
.opening .hero-composer{position:absolute;bottom:17px;left:24px;right:24px;height:39px;border:1px solid #6e856740;border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:11px;color:#52634a;background:#f7fcf16b}
.opening .hero-composer>span:last-child{background:#e7ecdf;border-radius:50%;width:23px;height:23px;display:grid;place-items:center}
.opening .context-panel{padding:25px 17px}
.opening .context-title{font-size:11px;margin-bottom:22px}
.opening .context-person strong{font-size:12px}
.opening .context-person small{font-size:10px}
.opening .context-note{margin-top:24px}
.opening .context-note p,.opening .context-decision p{font-size:11px}
.opening .demo-fade{height:40px}
/* Stable shell and request. Only incoming updates leave at the loop seam. */
.js-motion .opening .demo-frame.has-entered{animation:none}
.js-motion .opening .stage-reveal.shown{animation:heroUpdateIn .65s var(--ease) both;animation-play-state:paused}
.js-motion .opening .is-active .stage-reveal.shown{animation-play-state:running}
@keyframes heroUpdateIn{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes heroUpdateOut{from{opacity:1}to{opacity:0}}
.js-motion .opening .demo-frame.is-resetting .stage-reveal.shown{animation:heroUpdateOut .9s ease both;animation-play-state:paused}
.js-motion .opening .demo-frame.is-resetting.is-active .stage-reveal.shown{animation-play-state:running}
@media(min-width:1700px){.opening .hero{padding-top:58px;padding-bottom:48px}.opening .hero h1{font-size:108px}}
@media(max-width:1100px){
.opening .hero{gap:38px;padding-top:44px;padding-bottom:36px;grid-template-columns:1.35fr 1fr}
.opening .hero h1{font-size:82px}
.opening .hero p{font-size:14px}
.opening .hero-aside{max-width:305px}
.opening .hero-character{width:46px;height:46px;margin-bottom:14px}
.opening .workspace{grid-template-columns:156px minmax(0,1fr);height:520px}
.opening .context-panel{display:none}
.opening .conversation{height:428px}
.opening .next-step{flex-wrap:nowrap}
}
@media(max-width:850px){
.opening .hero{gap:24px;grid-template-columns:1.2fr 1fr;padding:38px 0 33px}
.opening .hero h1{font-size:67px}
.opening .hero p{font-size:13px}
.opening .hero p span{font-size:12px}
.opening .hero-character{width:39px;height:39px;margin-bottom:12px}
.opening .hero .button{font-size:11px;gap:20px}
.opening .workspace{grid-template-columns:142px minmax(0,1fr);height:550px}
.opening .conversation{height:458px;padding-inline:18px}
.opening .next-step{margin-left:0}
.opening .hero-composer{left:18px;right:18px}
.opening .hero-review-label{display:none}
}
@media(max-width:650px){
.opening .nav .wordmark img{width:112px;height:40px}
.opening .hero{display:block;padding:30px 0 29px}
.opening .hero h1{font-size:clamp(49px,14.1vw,82px);line-height:1.045;letter-spacing:-.048em}
.opening .hero-aside{position:relative;max-width:none;width:100%;justify-self:stretch;padding:0;margin-top:20px}
.opening .hero p{max-width:290px;margin:0 0 19px;font-size:13px;line-height:1.65;padding-right:8px}
.opening .hero p span{max-width:260px;margin-top:5px;font-size:12px;line-height:1.65}
.opening .hero-character{position:absolute;right:5px;bottom:4px;width:43px;height:43px;margin:0}
.opening .hero .button{min-height:46px;padding:11px 19px;gap:23px}
.opening .demo-frame{padding:6px 6px 0;border-radius:14px 14px 0 0}
.opening .workspace{grid-template-columns:minmax(0,1fr);height:572px}
.opening .sidebar{display:none}
.opening .room-header{height:51px;padding-inline:14px}
.opening .room-state{height:48px;padding:7px 14px;display:flex;flex-direction:column;flex-wrap:nowrap;align-content:normal;align-items:flex-start;justify-content:center;gap:2px;font-size:9px}
.opening .state-text{font-size:9px}
.opening .conversation{height:473px;padding:19px 13px 58px}
.opening .message{gap:10px;margin-bottom:19px}
.opening .message>.avatar{width:28px;height:28px}
.opening .message p{font-size:12px;line-height:1.65}
.opening .byline{gap:8px}
.opening .byline strong{font-size:11px}
.opening .byline>span{font-size:9px}
.opening .source-chip{font-size:9px;margin-top:7px}
.opening .result-file{padding:9px;gap:9px;margin-top:10px}
.opening .result-file strong{font-size:11px}
.opening .result-file small{font-size:9px;line-height:1.6;max-width:185px}
.opening .file-arrow{display:none}
.opening .next-step{margin-left:0;font-size:10px;align-items:flex-start;padding:11px;gap:8px}
.opening .next-step .review-dot{margin-top:4px}
.opening .hero-composer{left:13px;right:13px;bottom:13px;height:36px;font-size:10px}
.opening .demo-fade{height:31px}
}
@media(max-width:360px){
.opening .nav .wordmark img{width:98px;height:38px}
.opening .hero p{font-size:12px;max-width:270px}
.opening .hero p span{font-size:11px;max-width:242px}
.opening .hero-character{width:37px;height:37px;right:1px}
.opening .workspace{height:597px}
.opening .conversation{height:498px}
.opening .message p{font-size:11.5px}
.opening .byline>span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.opening .hero-character{transform:rotate(8deg)}.js-motion .opening .stage-reveal.shown{opacity:1;translate:none}.opening .demo-frame.is-resetting .stage-reveal.shown{opacity:1}}