@font-face{font-family:Sana;src:url('assets/039c388c-SanaSans-Regular420.woff2')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;color:#292d34}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #216ad5;outline-offset:3px}svg{width:16px;height:16px;flex-shrink:0}.showcase{position:relative;isolation:isolate;width:100%;height:100%;padding:4% 4.3% 0;overflow:hidden;background:#cddae8}.ambient{position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(90deg,#fff0 0,#fff2 1.2%,#fff0 2.7%,#8193ae13 3.9%,#fff2 5%),radial-gradient(ellipse at 21% 90%,#d1a67d 0,transparent 40%),radial-gradient(ellipse at 78% 94%,#c8b3a1 0,transparent 35%),radial-gradient(ellipse at 75% 25%,#acc6e4 0,transparent 58%),linear-gradient(135deg,#b6c7e0,#e4e7e6 68%,#c2b5a7)}.ambient:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,#ffffff16 13px,#ffffff2a 20px,#52627b08 29px,transparent 37px);mix-blend-mode:soft-light}.app-window{display:flex;flex-direction:column;width:100%;height:79%;border:1px solid #ffffff60;border-radius:12px;background:#1d1e20;box-shadow:0 1px 2px #2130480a,0 12px 32px #21304812,0 38px 75px -35px #21304855;overflow:hidden}.cowork-screen{display:block;position:absolute;top:0;left:0;border:0;transform-origin:top left;background:#1d1e20}.app-window{position:relative}.showcase-caption{display:flex;justify-content:space-between;align-items:center;padding:22px 4px 0;gap:10px}.caption-kicker{font-size:7px;font-weight:500;letter-spacing:1.4px;color:#526277}.showcase-caption h2{font-family:Sana,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.12;letter-spacing:-.7px;color:#26384e;margin:9px 0 7px}.showcase-caption p{font-size:11px;line-height:1.5;color:#58697c;max-width:650px;margin:0}#replay{display:flex;gap:6px;align-items:center;align-self:flex-start;margin-top:27px;border:1px solid #67788b33;background:#ffffff28;border-radius:20px;padding:7px 12px;color:#596a7f;font-size:15px}#replay span{font-size:9px}.sample-label{position:absolute;bottom:10px;right:4.8%;font-size:7px;color:#627185;opacity:.8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes panel-in{from{opacity:0}to{opacity:1}}@media(max-width:950px){.showcase{padding:4% 3.5% 0}.showcase-caption{padding-top:17px}.showcase-caption h2{font-size:25px}.showcase-caption p{font-size:9px;max-width:470px}.sample-label{font-size:6px}.caption-kicker{font-size:6px}}@media(max-width:550px){.showcase{padding:18px 12px 0}.app-window{height:78%;border-radius:10px}.showcase-caption{padding:17px 2px 0;position:relative}.showcase-caption h2{font-size:24px;margin-top:8px;max-width:280px}.showcase-caption p{font-size:10px;line-height:1.55;max-width:300px}.caption-kicker{font-size:6px;letter-spacing:1px}#replay{position:absolute;right:0;top:-5px;margin-top:17px;width:27px;height:27px;padding:0;justify-content:center}#replay span{display:none}.sample-label{bottom:9px;right:16px;font-size:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Supplied meadow image, enlarged to crop its white screenshot border. */
.showcase{background:#879276}
.showcase .ambient{inset:-8%;background:#879276 url('assets/mist-meadow-background.png') center/cover no-repeat}
.showcase .ambient:after{background:linear-gradient(180deg,transparent 48%,rgb(25 40 22/.12) 66%,rgb(25 40 22/.6) 100%);mix-blend-mode:normal}
.showcase-caption h2{color:#fff}
.showcase-caption p{color:rgb(255 255 255/.9)}
.caption-kicker{color:rgb(255 255 255/.75)}
#replay{color:#fff;border-color:rgb(255 255 255/.35);background:rgb(255 255 255/.12);backdrop-filter:blur(12px)}
#replay:hover{background:rgb(255 255 255/.24)}
.sample-label{color:#fff;opacity:.65}
.showcase .app-window{border:0;border-radius:24px;background:#f7f8fa;box-shadow:0 8px 22px -8px rgb(20 31 17/.2),0 30px 68px -16px rgb(20 31 17/.35)}

/* Phone and small-tablet presentation. Keep captions outside the product viewport. */
@media(max-width:800px){
 .showcase{display:flex;flex-direction:column;gap:0;padding:14px 12px 12px}
 .showcase .app-window{flex:1;min-height:0;height:auto;border-radius:24px;box-shadow:0 12px 32px -12px #18201670}
 .showcase-caption{flex:none;min-height:148px;padding:20px 48px 12px 2px;align-items:flex-start;position:relative}
 .caption-kicker{font-size:8px;letter-spacing:1px;line-height:1.5;display:block}
 .showcase-caption h2{font-size:25px;line-height:1.06;letter-spacing:-.7px;margin:9px 0 8px;max-width:520px}
 .showcase-caption p{font-size:12px;line-height:1.45;max-width:560px}
 #replay{position:absolute;right:0;top:15px;align-self:auto;margin:0;width:44px;height:44px;padding:0;justify-content:center;font-size:21px}
 #replay span{display:none}
 .sample-label{position:static;display:block;flex:none;text-align:right;padding:1px 2px 0;font-size:8px;line-height:1.5}
}
@media(min-width:551px) and (max-width:800px){.showcase{padding:20px 20px 14px}.showcase-caption{min-height:130px}.showcase-caption h2{font-size:29px}}

/* The hero presents only the live workspace, without a narrative footer. */
.showcase{padding:4% 4.3%}
.app-window{height:100%}
@media(max-width:950px){.showcase{padding:4% 3.5%}}
@media(max-width:800px){.showcase{padding:14px 12px}.showcase .app-window{height:100%}}
@media(min-width:551px) and (max-width:800px){.showcase{padding:20px}}