/* The same SVG ribbons used by the mobile app. Decoration moves with its
   section instead of staying behind the text while the visitor scrolls. */
:root{--ribbon-top:url('assets/ribbon-top.svg');--ribbon-bottom:url('assets/ribbon-bottom.svg')}
.site-header{isolation:isolate;background-color:#030704db}.site-header:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--ribbon-top);background-repeat:no-repeat;background-size:480px 120px;background-position:right top;opacity:.28}
.hero{isolation:isolate}.hero:before{content:'';position:absolute;right:-30px;top:0;width:min(950px,95vw);height:270px;z-index:-1;pointer-events:none;background:var(--ribbon-top) right top/100% 100% no-repeat;opacity:.74}.hero:after{content:'';position:absolute;left:-40px;bottom:0;width:min(570px,65vw);height:90px;background:var(--ribbon-bottom) right bottom/100% 100% no-repeat;opacity:.3;z-index:-1;pointer-events:none}
.conversation-demo{background-image:var(--ribbon-top),var(--ribbon-bottom),linear-gradient(145deg,#18211b,#080f0b);background-size:100% 90px,100% 37px,100% 100%;background-repeat:no-repeat;background-position:right top,right bottom,0 0}
.pro-plan{background-image:var(--ribbon-top),var(--ribbon-bottom),radial-gradient(ellipse at 100% 0,#92b70c20,transparent 60%),linear-gradient(140deg,#182019,#0a100b);background-size:100% 85px,100% 42px,100% 100%,100% 100%;background-repeat:no-repeat;background-position:right top,right bottom,0 0,0 0}
.closing{background-image:var(--ribbon-top),var(--ribbon-bottom),linear-gradient(145deg,#0e180c,#060b06);background-size:100% 150px,100% 115px,100% 100%;background-repeat:no-repeat;background-position:right top,right bottom,0 0}.closing:after{display:none}
#launch-dialog{background-image:var(--ribbon-top),var(--ribbon-bottom),linear-gradient(145deg,#1b251d,#0b130d);background-size:100% 90px,100% 34px,100% 100%;background-repeat:no-repeat;background-position:right top,right bottom,0 0}
.document-main{position:relative;isolation:isolate}.document-main:before{content:'';position:absolute;top:0;right:-70px;width:min(740px,90vw);height:180px;z-index:-1;pointer-events:none;background:var(--ribbon-top) right top/100% 100% no-repeat;opacity:.53}.document-note{background-image:var(--ribbon-top),linear-gradient(145deg,#1a2519,#0b140d);background-size:100% 70px,100% 100%;background-position:right top,0 0;background-repeat:no-repeat}
.policy-main{max-width:780px}.policy-main>header h1{font-size:42px;line-height:1.15;letter-spacing:-1.7px}.policy-main small,.policy-main footer{color:#9eae95;font-size:12px}.policy-main nav{margin-top:28px;border:1px solid #c9e38528;background:linear-gradient(145deg,#182119,#0d140f);border-radius:14px;padding:20px}.policy-main nav a{display:block;font-size:13px;line-height:1.8;margin-block:5px}.policy-main section{scroll-margin-top:110px}.policy-main section p{font-size:14px;line-height:1.95}.policy-main footer{margin-top:35px;padding-top:20px;border-top:1px solid var(--line)}.policy-main a{overflow-wrap:anywhere}
@media(max-width:760px){.hero:before{right:-10px;width:95%;height:190px;opacity:.58}.hero:after{left:0;width:100%;height:60px;opacity:.22}.site-header:before{background-size:310px 100px;opacity:.23}.document-main:before{right:-10px;width:100%;height:140px;opacity:.42}.closing{background-size:100% 95px,100% 75px,100% 100%}.policy-main>header h1{font-size:34px;letter-spacing:-1px}}

/* Page ribbons bleed to the viewport edges, independently of content width. */
.hero:before,.hero:after,.document-main:before{left:calc((100% - 100vw)/2);right:auto;width:100vw;max-width:none;background-size:100% 100%}.hero:before{height:clamp(220px,22vw,380px);top:0}.hero:after{height:120px;bottom:0}.document-main:before{height:230px}.site-header:before{background-size:100% 180px}.hero:before,.document-main:before{mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)}
@media(max-width:760px){.hero:before{height:210px}.hero:after{height:75px}.document-main:before{height:165px}.site-header:before{background-size:100% 120px}}
/* Full-bleed decoration follows the usable width, excluding browser scrollbars. */
@supports(width:1cqw){body{container-type:inline-size}.hero:before,.hero:after,.document-main:before{left:calc((100% - 100cqw)/2);width:100cqw}}