[hidden], template {display: none;}
@font-face {font-family: webflow-icons; src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype"); font-weight: normal; font-style: normal;}
[class^="w-icon-"], [class*=" w-icon-"] {speak: none; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-weight: normal; line-height: 1; font-family: webflow-icons !important;}
* {box-sizing: border-box;}
[data-nav-menu-open] {text-align: center; background: #c8c8c8; min-width: 200px; position: absolute; top: 100%; left: 0; right: 0; overflow: visible; display: block !important;}
@keyframes spin { 
  0% {transform: rotate(0);} 
  100% {transform: rotate(360deg);} 
}
.wf-layout-layout {display: grid;}
@font-face {font-family: Newtitle; src: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc35c_NewTitle-Extralight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap;}
@font-face {font-family: Newtitle; src: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc36e_NewTitle-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap;}
@font-face {font-family: Newtitle; src: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc35a_NewTitle-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap;}
@font-face {font-family: Newtitle; src: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc35e_NewTitle-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: Newtitle; src: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc35d_NewTitle-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: Segoeuithis; src: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc35b_segoeuithis.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap;}
.modular-nav-logo-link {opacity: 1; padding-left: 0; transition: opacity .4s;}
.modular-nav-logo-link:hover {opacity: .8;}
.modular-menu-line-bottom {background-color: var(--_semantics---background-invert); border-radius: 10px; width: 100%; height: 2px; padding: 0; display: block;}
.modular-nav-buttons-wrap {grid-column-gap: .6rem; grid-row-gap: .6rem; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); justify-content: flex-end; align-items: center; display: flex;}
.modular-nav-menu-right {grid-column-gap: 10px; grid-row-gap: 10px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; align-items: center; display: flex;}
.modular-nav-link {grid-column-gap: 5px; grid-row-gap: 5px; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); justify-content: center; align-items: center; padding: 10px; font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; transition: color .4s; display: flex; position: relative;}
.modular-nav-link:hover {color: var(--_semantics---primary); text-decoration: none;}
.modular-nav-link.modular-nav-link-big {justify-content: flex-start; align-items: stretch;}
.modular-nav-menu-button {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); background-color: #fff0; border-radius: 10px; width: 48px; height: 48px; padding: .7rem; transition: background-color .4s;}
.modular-nav-01-menu {flex: 1; justify-content: space-between; align-items: center; margin-left: 1.5rem; display: flex; position: static;}
.modular-menu-icon-wrap {flex-flow: column; justify-content: center; align-items: center; width: 26px; height: 100%; display: flex;}
.modular-nav-01 {background-color: #ddd0; align-items: center; width: 100%; min-height: 80px; line-height: 1.2; display: flex; position: sticky; top: 0;}
.modular-menu-line-top {background-color: var(--_semantics---background-invert); border-radius: 2px; width: 100%; height: 2px; padding: 0; display: block;}
.modular-logo-image {flex: none; width: auto; height: 100%; display: block;}
.modular-menu-line-middle {background-color: var(--_semantics---background-invert); border-radius: 10px; width: 100%; height: 2px; margin-top: .4rem; margin-bottom: .4rem; padding: 0; display: block;}
.modular-nav-logo-wrap {flex-wrap: nowrap; width: auto; height: 1.2rem; display: flex;}
.modular-nav-01-menu-links {flex-flow: row; justify-content: flex-start; align-items: center; display: flex;}
.modular-nav-badge {background-color: var(--_semantics---background-invert); color: var(--_semantics---background-default); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 100px; justify-content: center; align-items: center; width: 16px; height: 16px; padding: 3px; display: flex;}
.demo-ds-gray-background {background-color: var(--_semantics---background-v2);}
.demo-paragraph-container {margin-top: 5px; margin-bottom: 10px;}
.modular-subscribe-1 {width: 100%; max-width: 340px; margin-bottom: 0;}
.modular-h3-heading {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h3--h3-font-size); line-height: var(--_typography---h3--h3-line-height); font-weight: var(--_typography---h3--h3-font-weight); letter-spacing: var(--_typography---h3--h3-letter-spacing); margin-top: 0; margin-bottom: 10px;}
.modular-h3-heading.modular-color-inherit {color: inherit;}
.demo-button-holder {grid-row-gap: 20px; background-color: var(--_semantics---background-v2); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 12px; flex-direction: column; justify-content: flex-start; align-items: center; padding: 2em; display: flex;}
.hero-link-arrow {opacity: .8; justify-content: flex-start; align-items: center; width: 14px; height: 100%; display: flex;}
.link-block-underline {background-color: var(--_semantics---border); width: 100%; height: 1px; margin-top: 2px; display: none;}
.demo-ds-left-panel {grid-row-gap: 25px; flex-direction: column; width: 100%; max-height: 100vh; padding: 2em 1em; display: flex; position: sticky; top: 0; overflow: auto;}
.nav-link-background {z-index: -1; background-color: var(--_semantics---background-default); border-radius: 100px; display: none; position: absolute; inset: 0%;}
.demo-grid-4-col {grid-column-gap: 2em; grid-row-gap: 2em; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; display: grid;}
.design-system {width: 100%; height: 100%;}
.button-grid {grid-column-gap: 30px; grid-row-gap: 16px; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; margin-top: 2em; display: grid;}
.modular-button {grid-column-gap: 5px; grid-row-gap: 5px; border: 2px solid var(--_semantics---background-invert); border-radius: var(--_sizes---border-radius--button); background-color: var(--_semantics---background-invert); font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---text-invert); font-size: var(--_typography---body--body-font-size); line-height: 1; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; flex-direction: row; justify-content: center; align-items: center; padding: .5rem 2rem; text-decoration: none; transition: border-color .4s, box-shadow .4s, background-color .4s, color .4s; display: flex; position: relative;}
.modular-button:hover {border-color: var(--_semantics---background-invert); background-color: var(--_semantics---primary-selected); box-shadow: inset 0 100px 5px 0 var(--_ui-styles---shadow--shadow-5), 0 4px 8px 0 var(--_ui-styles---shadow--shadow-5), 0 2px 6px 0 var(--_ui-styles---shadow--shadow-5), 1px 0 2px 0 var(--_ui-styles---shadow--shadow-5); color: var(--_semantics---on-primary-selected); text-decoration: none;}
.modular-button.modular-subscribe-1-btn {background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); padding-top: 8px; padding-bottom: 8px;}
.modular-button.modular-subscribe-1-btn:hover {background-color: var(--_semantics---primary-selected); box-shadow: none; color: var(--_semantics---on-primary-selected);}
.modular-button.modular-subscribe-2-btn {background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); padding-top: 8px; padding-bottom: 8px;}
.modular-button.modular-subscribe-2-btn:hover {background-color: var(--_semantics---primary-selected); box-shadow: none; color: var(--_semantics---on-primary-selected);}
.modular-link {z-index: 1; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color .4s; position: relative; overflow: hidden;}
.modular-link:hover {color: var(--_semantics---primary-selected); text-decoration: none;}
.modular-link.modular-link-footer {color: var(--_semantics---text);}
.modular-link.modular-link-footer:hover {color: var(--_semantics---primary);}
.notification-subscribe-box {background-color: #fff3; background-image: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dc084_White-Arrow.svg"); background-position: 50%; background-repeat: no-repeat; background-size: 13px; border-radius: 3px; width: 24px; height: 24px;}
.modular-richtext {color: var(--_semantics---text); width: 100%; font-size: 16px; line-height: 1.5;}
.modular-richtext p {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: 1.5; font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-bottom: 10px;}
.modular-richtext h2 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height); font-weight: var(--_typography---h2--h2-font-weight); letter-spacing: var(--_typography---h2--h2-letter-spacing); margin-top: 20px; margin-bottom: 10px;}
.modular-richtext h3 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h3--h3-font-size); line-height: var(--_typography---h3--h3-line-height); font-weight: var(--_typography---h3--h3-font-weight); letter-spacing: var(--_typography---h3--h3-letter-spacing); margin-top: 20px; margin-bottom: 10px;}
.modular-richtext h4 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h4--h4-font-size); line-height: var(--_typography---h4--h4-line-height); font-weight: var(--_typography---h4--h4-font-weight); letter-spacing: var(--_typography---h4--h4-letter-spacing); margin-top: 20px; margin-bottom: 10px;}
.modular-richtext h5 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h5--h5-font-size); line-height: var(--_typography---h5--h5-line-height); font-weight: var(--_typography---h5--h5-font-weight); letter-spacing: var(--_typography---h5--h5-letter-spacing); margin-top: 15px; margin-bottom: 10px;}
.modular-richtext h6 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h6--h6-font-size); line-height: var(--_typography---h6--h6-line-height); font-weight: var(--_typography---h6--h6-font-weight); letter-spacing: var(--_typography---h6--h6-letter-spacing); margin-top: 15px; margin-bottom: 10px;}
.modular-richtext li {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: 1.5; font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.modular-richtext blockquote {border-left: 3px solid var(--_semantics---border); font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---font-size--medium); font-style: italic; line-height: 1.3; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 1em; margin-bottom: 1rem; padding: 1rem;}
.modular-richtext figcaption {opacity: .5; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--small); font-style: italic; line-height: 1.3; font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.modular-richtext ul {color: #333; margin-top: 0; margin-bottom: 10px; padding-left: 40px; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; list-style-type: disc;}
.modular-richtext h1 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h1--h1-font-size); line-height: var(--_typography---h1--h1-line-height); font-weight: var(--_typography---h1--h1-font-weight); letter-spacing: var(--_typography---h1--h1-letter-spacing); margin-top: 20px; margin-bottom: 10px;}
.modular-richtext figure {margin-bottom: 20px;}
.modular-richtext img {width: 100%; min-width: 100%;}
.modular-richtext a {color: var(--_semantics---primary); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); text-decoration: none;}
.modular-richtext a:hover {text-decoration: underline;}
.modular-richtext ol {font-size: var(--_typography---body--body-font-size); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 0; margin-bottom: 10px; padding-left: 40px; list-style-type: decimal;}
.modular-richtext strong {font-weight: 600;}
.demo-title {font-family: var(--_ui-styles---fonts--text); text-transform: uppercase; background-color: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; line-height: 1.5;}
.modular-text-l {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-top: 0; margin-bottom: 0; font-size: 22px; font-weight: 400; line-height: 1.2;}
.notification-banner {grid-column-gap: 1em; grid-row-gap: 1em; background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); flex-direction: row; justify-content: center; align-items: center; width: 100%; padding: 10px 2em; font-size: 14px; display: flex;}
.notification-banner.notification-side-content {justify-content: space-between;}
.notification-button-transparent {grid-column-gap: 10px; grid-row-gap: 10px; color: #fff; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); flex-direction: row; justify-content: center; align-items: center; display: flex;}
.notification-button-transparent:hover {color: #ffffffe6;}
.demo-style-guide-box-holder {grid-row-gap: 30px; background-color: var(--_semantics---background-v2); border-radius: 12px; flex-direction: column; justify-content: space-between; align-items: center; padding: 2em; display: flex;}
.demo-ds-left-panel-holder {background-color: var(--_semantics---background-v2); align-items: flex-start; width: 170px; min-width: 170px; display: none;}
.sg-notifications-box {flex-direction: row; justify-content: flex-start; align-items: flex-start; width: 100%; display: flex;}
.demo-ds-box {padding: 2em 1em;}
.demo-ds-box.demo-no-padding-top {padding-top: 0;}
.modular-link-color {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; transition: color .35s;}
.modular-link-color:hover {color: var(--_semantics---primary); text-decoration: none;}
.demo-ds-modulify-box {grid-column-gap: 20px; grid-row-gap: 20px; background-color: var(--_semantics---background-v2); border-radius: 12px; flex-direction: column; justify-content: space-between; padding: 2em; display: flex;}
.demo-ds-modulify-box.margin-top {margin-top: 2em;}
.demo-grid-2-col {grid-column-gap: 2em; grid-row-gap: 2em; grid-template-rows: auto; grid-template-columns: 1fr 1fr; display: grid;}
.modular-subscribe-1-form {z-index: 1; width: 100%; position: relative;}
.demo-ds {font-family: var(--_ui-styles---fonts--text); display: flex;}
.demo-ds-tab-holder {background-color: var(--_semantics---background-default); color: var(--_semantics---background-invert); border-radius: 5px; width: 100%; padding: 3px 7px; font-size: 12px; transition-property: background-color; transition-duration: .675s;}
.demo-ds-tab-holder:hover {background-color: var(--_semantics---background-v3); color: var(--_semantics---background-invert);}
.demo-ds-panel-title {opacity: .5; color: var(--_semantics---text-v2); margin-bottom: 4px; font-size: 14px;}
.demo-ds-hero-holder {grid-row-gap: 20px; flex-direction: column; padding: 2em; display: flex;}
.demo-ds-title-holder {grid-column-gap: 4px; grid-row-gap: 4px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex;}
.modular-h1-heading {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h1--h1-font-size); line-height: var(--_typography---h1--h1-line-height); font-weight: var(--_typography---h1--h1-font-weight); letter-spacing: var(--_typography---h1--h1-letter-spacing); margin-top: 0; margin-bottom: 10px;}
.modular-link-inline {color: var(--_semantics---on-primary); flex-direction: row; justify-content: center; align-items: center; line-height: 1; text-decoration: underline;}
.modular-link-inline:hover {color: var(--_semantics---on-primary);}
.headings-container {grid-column-gap: 2em; grid-row-gap: 2em; flex-direction: column; margin-top: 30px; display: flex;}
.modular-logos-01-grid {grid-column-gap: 0em; grid-row-gap: 0em; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid;}
.font-details-holder {grid-row-gap: 20px; flex-direction: column; justify-content: space-between; display: flex;}
.modular-vertical-flex {grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex;}
.modular-button-icon {color: inherit; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); width: auto; height: 17px; display: none;}
.demo-nav-01 {z-index: 2; position: relative;}
.modular-nav-link-wrap {justify-content: flex-start; align-items: center; padding-left: 3px; padding-right: 3px; display: flex;}
.modular-nav-link-wrap.hide {display: none;}
.modular-nav-05 {font-family: var(--_ui-styles---fonts--text); background-color: #fff0; align-items: center; width: 100%; margin-top: 10px; margin-bottom: 10px; font-size: 16px; font-weight: 400; line-height: 1.2; display: flex; position: sticky;}
.modular-nav-05-container {justify-content: center; align-items: center; min-width: 700px; max-width: none; height: 60px; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 10px; display: flex; position: relative;}
.modular-nav-05-menu {grid-column-gap: 10px; grid-row-gap: 10px; background-color: #fff0; flex: 1; justify-content: flex-end; align-items: center; padding-left: 5em; display: flex; position: static;}
.modular-nav-05-menu-links {flex-flow: row; flex: 1; justify-content: flex-end; align-items: center; display: flex;}
.modular-nav-link-icon-wrap {flex-flow: column; justify-content: flex-start; align-items: center; width: 24px; min-width: 24px; height: 100%; display: flex;}
.modular-nav-link-text-wrap {grid-column-gap: 5px; grid-row-gap: 5px; flex-flow: column; justify-content: center; align-items: flex-start; display: flex;}
.modular-grey-text {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text-v2); font-size: 16px; font-weight: 400; line-height: 1.3;}
.dropdown-icon {width: 12px; height: 8px; margin-top: auto; margin-bottom: auto; margin-right: 0; position: relative;}
.modular-dropdown-list {background-color: #fff0; position: absolute; top: 120%; left: 0; right: 0;}
.modular-dropdown {background-color: #fff0; flex-flow: column; justify-content: flex-start; align-items: center; display: flex; position: static;}
.modular-dropdown-list-detail {justify-content: center; align-items: flex-start; max-width: 100%; margin-top: 2px; padding-left: 2em; padding-right: 2em; display: flex;}
.modular-nav-big-menu {border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); box-shadow: 0 0 0 1px var(--_semantics---border); flex-flow: row; justify-content: space-between; align-items: center; width: 100%; padding: 1rem; display: flex; position: relative;}
.modular-big-menu-grid {grid-column-gap: 0px; grid-row-gap: 0px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid;}
.modular-big-menu-links-wrap {border-right: 1px solid var(--_semantics---border); flex-flow: column; justify-content: flex-start; align-items: stretch; margin-right: 1rem; padding-right: 1rem; display: flex;}
.modular-big-menu-in-right {grid-column-gap: 1rem; grid-row-gap: 1rem; flex-flow: column; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; justify-content: flex-start; align-items: stretch; display: flex;}
.modular-nav-link-with-image {grid-column-gap: 14px; grid-row-gap: 14px; background-color: var(--_primitives---opacity--transparent); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); text-align: left; border-radius: 8px; grid-template-rows: auto; grid-template-columns: .75fr 1fr; grid-auto-columns: 1fr; justify-content: flex-start; align-items: stretch; font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; transition: opacity .4s; display: grid;}
.modular-nav-link-with-image:hover {opacity: .8; color: var(--_semantics---text);}
.modular-nav-link-big-image {aspect-ratio: 1; border-radius: var(--_sizes---border-radius--small); object-fit: cover; width: 6rem; min-width: 6rem; height: 6rem; min-height: 6rem; max-height: 6rem;}
.modular-big-menu-title-wrap {padding-bottom: 10px; padding-left: 10px;}
.modular-margin-top-bottom {justify-content: flex-start; align-items: center; margin-top: 5px; margin-bottom: 5px; display: flex;}
.modular-hero-link {grid-column-gap: 8px; grid-row-gap: 8px; background-color: var(--_semantics---background-invert); box-shadow: inset 0 -100px 5px 0 var(--_primitives---opacity--transparent); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text-invert); text-transform: none; border-radius: 100px; flex-direction: row; justify-content: flex-start; align-items: center; padding: 2px 8px; font-size: 14px; font-weight: 400; text-decoration: none; transition: box-shadow .4s, background-color .4s, color .4s; display: flex;}
.modular-hero-link:hover {background-color: var(--_semantics---primary-selected); box-shadow: inset 0 -100px 5px 0 var(--_primitives---opacity--neutral-dark-10); color: var(--_semantics---on-primary-selected); text-decoration: none;}
.modular-hero-link-badge-wrap {color: var(--_semantics---on-primary-selected); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); background-color: #fff3; border-radius: 100px; flex-flow: row; justify-content: center; align-items: center; height: 100%; margin-left: -6px; padding: 6px 12px; display: flex;}
.modular-hero-play-icon {z-index: 1; pointer-events: none; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%;}
.modular-hero-description {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text-v2); text-wrap: balance; max-width: 710px; margin-bottom: 0; font-size: 22px; font-weight: 400; line-height: 1.3;}
.modular-play-icon-holder {-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: #0000001a; border: 1px solid #ffffff26; border-radius: 200px; justify-content: center; align-items: center; width: 92px; height: 92px; transition: border-color .5s, transform .475s cubic-bezier(.175, .885, .32, 1.275); display: flex;}
.modular-play-icon-holder:hover {border-color: #ffffff9c; transform: scale(1.1);}
.modular-hero-link-arrow-black {justify-content: center; align-items: center; width: 14px; height: 100%; display: flex;}
.modular-hero-heading {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---hero--hero-font-size); line-height: var(--_typography---hero--hero-line-height); font-weight: var(--_typography---hero--hero-font-weight); letter-spacing: var(--_typography---hero--hero-letter-spacing); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 10px; transform: perspective(260px)perspective(300px);}
.modular-hero-image, .modular-grid-content {width: 100%;}
.modular-section-hero-bg {z-index: -1; background-color: var(--_semantics---background-v2); background-image: var(--_semantics---background-v2); pointer-events: none; position: absolute; inset: 0%;}
.modular-container {z-index: 2; width: 100%; max-width: 1170px; margin-left: auto; margin-right: auto; padding: 5em 2em; position: relative;}
.modular-container.modular-no-padding-bottom {padding-bottom: 0;}
.modular-container.modular-no-padding-bottom.no-padding-top {padding-top: 0;}
.modular-container.modular-nav-container {flex-flow: row; justify-content: center; align-items: center; padding-top: 0; padding-bottom: 0; display: flex;}
.modular-hero-white-link {grid-column-gap: 8px; grid-row-gap: 8px; border: 1px solid var(--_primitives---opacity--neutral-dark-10); background-color: var(--_semantics---background-default); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---primary-selected); text-transform: none; border-radius: 100px; flex-direction: row; justify-content: flex-start; align-items: center; padding: 1px 8px 1px 7px; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .4s, box-shadow .4s, background-color .4s, color .4s; display: flex;}
.modular-hero-white-link:hover {border-color: var(--_semantics---border-active); text-decoration: none;}
.demo-hero-02-small-container {flex-direction: column; align-items: center; width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; display: flex; position: relative;}
.modular-play-icon-lightbox {pointer-events: auto; color: #fff; justify-content: center; align-items: center; display: flex;}
.modular-hero-link-arrow-icon {width: 100%; height: auto;}
.modular-hero-02-content {grid-column-gap: 1em; grid-row-gap: 1em; text-align: center; flex-direction: column; align-items: center; display: flex;}
.modular-hero-link-02-badge-wrap {grid-column-gap: 5px; grid-row-gap: 5px; background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; border-radius: 100px; flex-direction: row; justify-content: center; align-items: center; height: 100%; margin-left: -6px; padding: 6px 12px; transition: box-shadow .4s, background-color .4s, color .4s; display: flex;}
.modular-small-container {text-align: center; flex-direction: column; align-items: center; width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; padding: 3em 2em; display: flex; position: relative;}
.modular-logos-grid-content {padding-top: 1em; padding-bottom: 1em;}
.logos-image {color: var(--_semantics---text); object-fit: contain; justify-content: center; align-items: flex-start; width: 100%; max-width: 140px; height: 100%; max-height: 25px; display: flex;}
.modular-logos-02-grid {grid-column-gap: 0em; grid-row-gap: 0em; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid;}
.modular-icon-card {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---primary-selected); flex-flow: column; justify-content: center; align-items: center; width: 70px; min-width: 70px; max-width: 70px; padding: 10px; display: flex; position: relative; overflow: hidden;}
.modular-icon {aspect-ratio: 1; color: var(--_semantics---primary-selected); object-fit: contain; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: auto; display: flex;}
.modular-h2-heading {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height); font-weight: var(--_typography---h2--h2-font-weight); letter-spacing: var(--_typography---h2--h2-letter-spacing); margin-top: 0; margin-bottom: 10px;}
.modular-margin-top {margin-top: var(--_sizes---spacing--medium);}
.modular-text-center {text-align: center;}
.modular-features-image-wrap {z-index: 1; aspect-ratio: 1; border-radius: var(--_sizes---border-radius--medium); flex-flow: column; justify-content: flex-end; align-items: flex-start; width: 100%; display: flex; position: relative; overflow: hidden;}
.modular-features-image {width: 100%; height: 100%;}
.modular-features-small-image-wrap {object-fit: contain; width: 50%; padding: 2em; position: absolute;}
.modular-features-small-image {object-fit: contain; width: 100%; display: none; position: relative;}
.modular-list-holder {grid-column-gap: 20px; grid-row-gap: 20px; flex-flow: column; width: 100%; display: flex;}
.modular-list-item-with-icon {grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: row; justify-content: flex-start; align-items: stretch; width: 100%; display: flex;}
.modular-list-item-icon {grid-column-gap: 5px; grid-row-gap: 5px; border-radius: var(--_sizes---border-radius--xlarge); background-color: var(--_semantics---primary-selected); color: #fff; text-transform: none; background-image: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dbeae_White-Check.svg"); background-position: 50%; background-repeat: no-repeat; background-size: 14px; flex-direction: row; justify-content: center; align-items: center; width: 22px; min-width: 22px; height: 22px; min-height: 22px; font-weight: 500; transition: box-shadow .4s, background-color .4s, color .4s; display: flex;}
.modular-list-item-text {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-top: 0; margin-bottom: 0; font-size: 16px; font-weight: 400; line-height: 1.3;}
.modular-margin-top-small {margin-top: var(--_sizes---spacing--small);}
.modular-list-item-text-wrap {grid-column-gap: 3px; grid-row-gap: 3px; flex-flow: column; justify-content: center; align-items: flex-start; height: 100%; min-height: 24px; display: flex;}
.modular-list-item-icon-wrapper {flex-flow: column; justify-content: flex-start; align-items: flex-start; height: 100%; display: flex;}
.modular-features-image-bg {z-index: -1; background-color: #0000; position: absolute; inset: 0%;}
.demo---hero-heading {transform-origin: 50% 100%; color: #000; text-wrap: balance; transform-style: preserve-3d; margin-top: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 92px; font-weight: 600; line-height: 1.2; transform: perspective(260px)perspective(300px);}
.demo---hero {z-index: 1; margin-top: -80px; padding-top: 80px; position: relative;}
.demo-nav-card-title {margin-bottom: 5px; font-weight: 600;}
.demo-nav-card-summary {color: #6b7280;}
.nav-demo {background-color: var(--_semantics---background-default); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); align-items: center; min-height: 80px; padding-left: 2rem; padding-right: 2rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 16px; line-height: 1.2; display: flex; position: sticky; top: 0;}
.nav-demo-container {justify-content: center; align-items: center; width: 100%; max-width: 1170px; height: 100%; margin-left: auto; margin-right: auto; display: flex; position: relative;}
.nav-demo-logo {position: relative;}
.nav-demo-full-menu {background-color: #0000; flex-flow: column; justify-content: center; align-items: flex-end; width: 100%; margin-top: 1px; display: flex; position: relative;}
.nav-demo-menu-links {grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: row; justify-content: flex-end; align-items: center; display: flex;}
.demo-nav-menu-wrap {justify-content: flex-end; align-items: center; display: none;}
.demo-nav-menu {background-color: #fff; border-radius: 10px; flex-flow: row; justify-content: flex-end; align-items: center; padding: 20px; display: flex; position: relative; box-shadow: 0 0 0 1px #0000001a;}
.demo-nav-grid {grid-column-gap: 1em; grid-row-gap: 1em; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid;}
.demo-nav-card-link {grid-column-gap: 20px; grid-row-gap: 20px; color: #000; border-radius: 18px; justify-content: flex-start; align-items: center; width: 100%; padding: 10px; font-size: 15px; transition: all .35s; display: flex;}
.demo-nav-card-link:hover {box-shadow: 0 7px 20px #0000001a;}
.demo-nav-link-content {flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex;}
.demo-nav-card-image {border-radius: 10px; width: 130px; min-width: 130px;}
.demo-component-title {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---heading); margin-top: 0; margin-bottom: 20px; font-size: 26px; line-height: 1.2; position: absolute; inset: -33px auto auto 10px;}
.demo-box {z-index: 1; background-color: #1da1f20d; background-image: linear-gradient(133deg, #1da1f208, #fff0); border-radius: 5px; width: 100%; max-width: 98%; margin-left: auto; margin-right: auto; padding: 5px; position: relative; box-shadow: 0 7px 20px #1da1f20d;}
.demo-box-wrap {background-color: var(--_semantics---background-default); border-radius: 4px; padding: 5px; line-height: 1.3;}
.modular-footer-07-logo-link {opacity: 1; height: 35px; transition-property: opacity;}
.modular-footer-07-logo-link:hover {opacity: .8;}
.modular-footer-08-links-holder {grid-column-gap: 1em; grid-row-gap: 1em; flex-flow: row; flex: 1; justify-content: flex-start; align-items: center; display: flex;}
.modular-footer-08-brand-content {grid-column-gap: 1em; grid-row-gap: 1em; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex;}
.modular-footer-08-follow {grid-column-gap: 1em; grid-row-gap: 1em; flex-flow: row; justify-content: flex-start; align-items: center; font-size: 18px; display: flex;}
.modular-footer-08-grid {grid-column-gap: 1em; grid-row-gap: 1em; justify-content: space-between; display: flex; overflow: hidden;}
.modular-footer-08-copyright-link {color: var(--_semantics---text); margin-right: 0; padding-left: 0; padding-right: 0; font-weight: 500; transition: color .35s;}
.modular-footer-08-copyright-link:hover {color: var(--_semantics---primary-selected);}
.demo-footer-08-social-icon {filter: brightness(0%); width: 24px; min-width: 24px; height: 24px; min-height: 24px; display: inline-block; position: relative;}
.modular-footer-08-social-media-icons {grid-column-gap: 15px; grid-row-gap: 15px; flex-direction: row; justify-content: flex-start; align-items: flex-start; display: flex;}
.demo-footer-08-social-media-link {z-index: 1; border-radius: 6px; width: 25px; height: auto; transition: opacity .35s; position: relative;}
.demo-footer-08-social-media-link:hover {opacity: .6;}
.demo-footer {font-family: var(--_ui-styles---fonts--text); margin-top: 10em; padding-top: 2em; padding-bottom: 2em; font-size: 16px; line-height: 1.2;}
.demo-footer-links {grid-column-gap: 2em; grid-row-gap: 2em; border-bottom: 1px solid var(--_semantics---border); flex-flow: row; justify-content: space-between; align-items: center; margin-bottom: 2em; padding-bottom: 2em; display: flex;}
.demo-footer-link {z-index: 1; color: var(--_semantics---text); font-size: 18px; font-weight: 400; text-decoration: none; transition: color .4s; position: relative; overflow: hidden;}
.demo-footer-link:hover {color: #a1a1a1;}
.modular-h4-heading {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h4--h4-font-size); line-height: var(--_typography---h4--h4-line-height); font-weight: var(--_typography---h4--h4-font-weight); letter-spacing: var(--_typography---h4--h4-letter-spacing); margin-top: 0; margin-bottom: 10px;}
.modular-h5-heading {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h5--h5-font-size); line-height: var(--_typography---h5--h5-line-height); font-weight: var(--_typography---h5--h5-font-weight); letter-spacing: var(--_typography---h5--h5-letter-spacing); margin-top: 0; margin-bottom: 0;}
.modular-h5-heading.inherit-color {color: inherit;}
.modular-h6-heading {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h6--h6-font-size); line-height: var(--_typography---h6--h6-line-height); font-weight: var(--_typography---h6--h6-font-weight); letter-spacing: var(--_typography---h6--h6-letter-spacing); margin-top: 0; margin-bottom: 0;}
.modular-text {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-top: 0; margin-bottom: 0; font-size: 16px; font-weight: 400; line-height: 1.3;}
.modular-text.modular-color-inherit {color: inherit;}
.modular-text.modular-semibold-font {font-weight: 600;}
.modular-margin-bottom-large {margin-bottom: var(--_sizes---spacing--large);}
.modular-button-link {grid-column-gap: 5px; grid-row-gap: 5px; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---background-invert); font-size: var(--_typography---body--body-font-size); line-height: 1px; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); flex-flow: row; justify-content: center; align-items: center; padding: 12px; text-decoration: none; transition: color .4s; display: flex;}
.modular-button-link:hover {color: var(--_semantics---primary-selected); text-decoration: none;}
.modular-tabs {flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; display: flex;}
.modular-tabs-content {padding-top: var(--_sizes---spacing--large); width: 100%; overflow: visible;}
.modular-tabs-nav {grid-column-gap: 3px; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-v2); flex-direction: row; justify-content: flex-start; align-items: stretch; padding: 2px; line-height: 1; display: flex; overflow: hidden;}
.modular-tab-link-badge {border: 1px solid var(--_semantics---border); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 100px; margin-bottom: 0; margin-left: 4px; padding: 3px 5px 2px; display: inline-block; position: relative; top: -1px;}
.modular-tab-link {border: 0px none var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); background-color: #0000; justify-content: center; align-items: center; padding: 10px 15px; font-size: 16px; font-weight: 400; line-height: 1; text-decoration: none; transition: all .35s; display: flex; position: relative;}
.modular-tab-link:hover {opacity: .7; color: var(--_semantics---text); background-color: #0000; text-decoration: none;}
.modular-tab-link.w--current {border: 1px none var(--_semantics---border); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert);}
.modular-tab-link.w--current:hover {opacity: 100;}
.modular-tab-link.modular-tab-link-active {border: 0px none var(--_semantics---border); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert);}
.modular-tab-link.modular-tab-link-active:hover {opacity: 100;}
.modular-tab-pane {width: 100%; overflow: visible;}
.modular-cta-small-image {width: 60%;}
.modular-cta-image {border-radius: var(--_sizes---border-radius--small); object-fit: cover; object-position: 0% 0%; min-width: 100%; height: 100%;}
.modular-cta-card {z-index: 1; border-radius: var(--_sizes---border-radius--large); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); width: 100%; position: relative; overflow: hidden;}
.modular-text-wrap {text-wrap: balance;}
.modular-subscribers-images {flex-flow: row; justify-content: flex-start; align-items: flex-start; display: flex;}
.modular-subscriber-image {border: 1px solid var(--_semantics---border-active); object-fit: cover; border-radius: 100px; width: 38px; min-width: 38px; height: 38px;}
.modular-subscriber-image.modular-subscriber-image-2nd, .modular-subscriber-image.modular-subscriber-image-3rd {margin-left: -10px;}
.modular-subscribers-wrap {grid-column-gap: 10px; grid-row-gap: 10px; color: var(--_semantics---text); flex-flow: row; justify-content: flex-start; align-items: center; font-size: 16px; display: flex;}
.modular-subscribers-wrap.modular-subscribers-wrap-hero, .modular-subscribers-wrap.modular-subscribers-wrap-boxed-hero, .modular-subscribers-wrap.modular-subscribers-wrap-cta {color: var(--_semantics---text);}
.utility-page-wrap {justify-content: center; align-items: center; width: 100vw; max-width: 100%; height: 80vh; max-height: 100%; display: flex;}
.utility-page-content {text-align: center; flex-direction: column; width: 260px; display: flex;}
.utility-page-form {flex-direction: column; align-items: stretch; display: flex;}
.demo-page-wrapper {background-color: var(--_semantics---background-default); color: var(--_semantics---text); ---mode--collection-0c7f892c-d171-d507-5073-a50692f45a72: base; ---mode--collection-98e2b715-422e-d2e5-3c26-269cb37dad82: base; --_primitives---opacity--transparent: #fff0; --_primitives---opacity--neutral-dark-10: #0000001a; --_primitives---opacity--neutral-dark-20: #0003; --_primitives---opacity--neutral-dark-15: #00000026; --_primitives---opacity--neutral-dark-40: #0006; --_primitives---neutral--neutral-50: white; --_primitives---primary--primary-100: #e7f4f3; --_primitives---primary--primary-200: #d2eae7; --_primitives---primary--primary-400: #68b9af; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #217c71; --_primitives---primary--primary-700: #0f3d38; --_primitives---primary--primary-800: #0d2e29; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #fce9eb; --_primitives---tertiary--tertiary-200: #fad4d7; --_primitives---tertiary--tertiary-400: #ec727b; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #5a161b; --_primitives---tertiary--tertiary-600: #b62d37; --_primitives---tertiary--tertiary-800: #421214; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #f2fafc; --_primitives---quaternary--quaternary-200: #e6f5fa; --_primitives---quaternary--quaternary-400: #a9dded; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #6aa4b6; --_primitives---quaternary--quaternary-700: #34515a; --_primitives---quaternary--quaternary-800: #273c43; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary-600); --_primitives---secondary--secondary-100: #fdf5ee; --_primitives---secondary--secondary-200: #fdebde; --_primitives---secondary--secondary-400: #f7bc8f; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #c1804d; --_primitives---secondary--secondary-700: #5e3e26; --_primitives---secondary--secondary-800: #462f1c; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #fffef8; --_primitives---neutral--neutral-200: #eeeee2; --_primitives---neutral--neutral-300: #cdcbc1; --_primitives---neutral--neutral-400: #b0aea2; --_primitives---neutral--neutral-500: #777569; --_primitives---neutral--neutral-600: #58564d; --_primitives---neutral--neutral-700: #3f3d34; --_primitives---neutral--neutral-800: #2a2921; --_primitives---neutral--neutral-900: #13120f; --_primitives---opacity--neutral-light-5: #ffffff0d; --_primitives---opacity--neutral-light-10: #ffffff1a; --_primitives---opacity--neutral-light-15: #ffffff26; --_primitives---opacity--neutral-light-20: #fff3; --_primitives---opacity--neutral-light-30: #ffffff4d; --_primitives---opacity--neutral-light-40: #fff6; --_primitives---opacity--neutral-light-50: #ffffff80; --_primitives---opacity--neutral-light-60: #fff9; --_primitives---opacity--neutral-dark-5: #0000000d; --_primitives---opacity--neutral-dark-30: #0000004d; --_primitives---opacity--neutral-dark-50: #00000080; --_primitives---opacity--neutral-dark-60: #0009; --_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.field-label {display: none;}
.m-nav-wrap {z-index: 99; width: 100%; font-size: 16px; font-weight: 400; line-height: 1.2; position: sticky; top: 0;}
.modular-section {z-index: 1; background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; position: relative;}
.demo-box-holder {border: 1px dashed var(--_semantics---border-active); flex-flow: column; align-items: stretch; width: 100%; height: 100%; padding: 5px; display: flex; position: relative;}
.demo-box-holder.horizontal {flex-flow: row;}
.demo-box-holder.margin-top {margin-top: 2rem;}
.demo-box-holder.demo-grid-7-col {grid-column-gap: 16px; grid-row-gap: 16px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid;}
.modular-section-hero {z-index: 1; background-color: var(--_semantics---background-default); width: 100%; position: relative;}
.demo-ds-wrap-with-margin {border: 1px solid #c04ceb; margin: 1em 20px 2em; padding: 10px;}
.modular-section-hero-bg-inside {position: absolute; inset: 0%;}
.modular-section-secondary {background-color: var(--_semantics---background-v2); width: 100%;}
.modular-section-special-1, .modular-section-special-2 {background-color: var(--_semantics---background-v2); color: var(--_semantics---text); width: 100%;}
.modular-active-card-link {z-index: 1; border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); width: 100%; text-decoration: none; transition: background-color .35s; position: relative; overflow: hidden;}
.modular-active-card-link:hover {text-decoration: none;}
.modular-active-card-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-card {z-index: 1; border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-default); box-shadow: 0 2px 4px 0 var(--_primitives---opacity--neutral-dark-20), 0 1px 2px -1px var(--_primitives---opacity--neutral-dark-20), 0 0 0 1px var(--_primitives---opacity--neutral-dark-20); color: var(--_semantics---text); width: 100%; position: relative;}
.modular-card.modular-card-full-rounded {border-radius: 200px;}
.modular-opacity-50-pct {opacity: .5;}
.modular-card-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-bento-grid-card-1st {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.modular-bento-grid-card-1-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-bento-grid-card-2nd {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.modular-bento-grid-card-2-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-bento-grid-card-3rd {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.modular-bento-grid-card-3-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-bento-grid-card-4th {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.modular-bento-grid-card-4-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-bento-grid-card-5th {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.modular-bento-grid-card-5-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-hero-heading-2nd {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; font-size: 150px; font-weight: 500; line-height: 1.2; transform: perspective(260px)perspective(300px);}
.modular-hero-description-2nd {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); text-wrap: balance; max-width: 710px; margin-bottom: 0; font-size: 22px; font-weight: 400; line-height: 1.3;}
.modular-badge {grid-column-gap: .3rem; grid-row-gap: .3rem; background-color: var(--_semantics---background-default); box-shadow: inset 0 0 0 1px var(--_semantics---border); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 100px; justify-content: flex-start; align-items: center; padding: .4rem; display: flex;}
.modular-badge-image {color: var(--_semantics---text); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); object-fit: contain; border-radius: 100px; width: 20px; height: 20px;}
.modular-badges-wrap {grid-column-gap: 10px; grid-row-gap: 10px; font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); flex-flow: wrap; justify-content: flex-start; align-items: center; display: flex;}
.modular-subtitle {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-top: 0; margin-bottom: 0; font-size: 16px; font-weight: 600; line-height: 1.2;}
.demo-top-bottom-padding {padding-top: 2em; padding-bottom: 2em;}
.demo-bento-grid {grid-column-gap: 1em; grid-row-gap: 1em; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; margin-top: 1em; display: grid;}
.modular-bento-grid-tall-img-wrap {flex: 1; width: 100%; min-height: 200px; position: relative;}
.modular-bento-grid-tall-img {object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%;}
.modular-bento-grid-tall, .modular-bento-grid-normal {flex-flow: column; width: 100%; height: 100%; display: flex;}
.modular-bento-grid-normal-img-wrap {flex: 1; width: 100%; min-height: 200px; position: relative;}
.modular-bento-grid-normal-img {object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%;}
.demo-bento-grid-wide-horizontal {flex-flow: row; justify-content: flex-start; align-items: center; width: 100%; height: 100%; display: flex;}
.modular-bento-grid-wide-img-wrap {flex: 1; width: 100%; height: 100%; min-height: 200px; position: relative;}
.modular-bento-grid-wide-img {object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%;}
.modular-bento-grid-card-1-img-holder {display: block; position: absolute; inset: 0%;}
.modular-demo-bento-grid-img-h {aspect-ratio: 1; max-width: 50px; position: relative;}
.modular-bento-grid-card-2-img-holder, .modular-bento-grid-card-3-img-holder, .modular-bento-grid-card-4-img-holder, .modular-bento-grid-card-5-img-holder, .modular-bento-grid-card-6-img-holder {display: block; position: absolute; inset: 0%;}
.modular-bento-grid-card-6th {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.modular-bento-grid-card-6-bg {z-index: -1; position: absolute; inset: 0%;}
.demo-width-100-x150 {grid-column-gap: 5px; grid-row-gap: 5px; flex-flow: column; flex: 1; width: 100px; height: 100%; min-height: 150px; display: flex;}
.modular-bento-card-content {padding: var(--_sizes---spacing--medium); text-wrap: balance;}
.modular-content-flex-vertical {grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: column; display: flex;}
.modular-icon-card-bg {z-index: -1; position: absolute; inset: 0%;}
.demo-card-holder {min-height: 110px;}
.demo-box-stretched {flex: 1; display: flex;}
.modular-big-card {z-index: 1; border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-default); box-shadow: 0 2px 4px 0 var(--_primitives---opacity--neutral-dark-20), 0 1px 2px -1px var(--_primitives---opacity--neutral-dark-20), 0 0 0 1px var(--_primitives---opacity--neutral-dark-20); color: var(--_semantics---text); width: 100%; position: relative;}
.modular-big-card-bg {z-index: -1; position: absolute; inset: 0%;}
.demo-form-holder {grid-row-gap: 20px; background-color: var(--_semantics---background-v2); border-radius: 12px; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 2em; display: flex;}
.modular-form-block {width: 100%; margin-bottom: 0;}
.modular-form {grid-column-gap: var(--_sizes---gaps--regular); grid-row-gap: var(--_sizes---gaps--regular); flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; display: flex;}
.modular-field-label {opacity: .8; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: 14px; font-weight: 400; line-height: 1.2;}
.modular-form-input {border: 1px solid var(--_primitives---opacity--neutral-dark-15); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); box-shadow: 0 2px 6px 0 var(--_ui-styles---shadow--shadow-5); outline-offset: 0px; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); outline: 0 #000001; height: auto; margin-top: 0; margin-bottom: 0; padding: 8px 12px; font-size: 16px; font-weight: 400; line-height: 1.2; transition: border .35s, background-color .35s;}
.modular-form-input:hover, .modular-form-input:focus {border-color: var(--_semantics---border-active); background-color: var(--_semantics---background-default); outline-offset: 0px; outline: 0 #000001;}
.modular-form-input::placeholder {color: var(--_primitives---opacity--neutral-dark-40); font-weight: 400;}
.modular-form-input.modular-form-textarea {min-height: 110px; padding-top: 12px;}
.modular-form-input.modular-subscribe-1-input {border-color: var(--_semantics---border); border-radius: var(--_sizes---border-radius--xlarge); height: 60px; padding-right: 110px;}
.modular-form-input.modular-subscribe-1-input:focus {border-color: var(--_semantics---border-active); background-color: var(--_semantics---background-default);}
.modular-form-input.modular-subscribe-2-input {border-color: var(--_semantics---border); border-radius: var(--_sizes---border-radius--xlarge); color: var(--_semantics---text); height: 60px; padding-right: 110px;}
.modular-form-input.modular-subscribe-2-input:focus {border-color: var(--_semantics---border-active); background-color: var(--_semantics---background-default);}
.modular-form-checkbox {border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); width: 16px; height: 16px; margin-top: 0; margin-right: 5px; transition: background-position .35s, background-color .35s;}
.modular-form-checkbox:hover {background-color: var(--_semantics---background-v2);}
.modular-form-radio-button {border: 1px solid var(--_semantics---border); background-color: var(--_semantics---background-default); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 50%; width: 16px; height: 16px; margin-top: 0; margin-left: -20px; transition: border .35s, background-color .35s;}
.modular-form-radio-button:hover {background-color: var(--_semantics---background-v2);}
.modular-form-field-wrap {grid-column-gap: 5px; grid-row-gap: 5px; flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; margin-bottom: 0; display: flex;}
.modular-success-message-1 {border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); padding: 16px; font-size: 16px; line-height: 1.2;}
.modular-error-message-1 {border: 1px solid var(--_semantics---border-active); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); margin-top: 10px; padding: 12px; font-size: 14px; font-weight: 400; line-height: 1.2;}
.modular-checkbox-field {flex-flow: row; justify-content: flex-start; align-items: center; margin-bottom: 0; padding-left: 20px; display: flex;}
.modular-subscribe-1-button-wrap {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); padding: 6px; display: flex; position: absolute; inset: 0% 0% 0% auto;}
.modular-simple-text {line-height: inherit; font-size: inherit; color: inherit; margin-top: 0; margin-bottom: 0;}
.modular-active-card {z-index: 1; border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); width: 100%; position: relative;}
.modular-hero-image-wrap {width: 100%; position: relative;}
.modular-button-bg, .modular-button-2-bg {z-index: -1; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); position: absolute; inset: 0%;}
.demo-grid-1-col {grid-column-gap: 1em; grid-row-gap: 1em; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; display: grid;}
.demo-flex-h {grid-column-gap: 1em; grid-row-gap: 1em; flex-flow: wrap; display: flex;}
.modular-button-link-icon {color: inherit; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); width: auto; height: 17px;}
.modular-bento-mask-bottom {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(to top, #0000 0%, #000 15%); mask-image: linear-gradient(to top, #0000 0%, #000 15%);}
.modular-bento-mask-top {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(#0000 0%, #000 15%); mask-image: linear-gradient(#0000 0%, #000 15%);}
.modular-bento-mask-right {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(to left, #0000 0%, #000 15%); mask-image: linear-gradient(to left, #0000 0%, #000 15%);}
.modular-bento-mask-left {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(to right, #0000 0%, #000 15%); mask-image: linear-gradient(to right, #0000 0%, #000 15%);}
.demo-bento-grid-wide-vertical {flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; height: 100%; display: flex;}
.demo-width-100-x150-copy {grid-column-gap: 5px; grid-row-gap: 5px; flex-flow: column; flex: 1; width: 100%; height: 100%; min-height: 150px; display: flex;}
.demo-icons {grid-column-gap: 2em; grid-row-gap: 2em; flex-flow: wrap; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: flex;}
.modular-icon-holder {justify-content: flex-start; align-items: center; width: 100%; height: auto; display: flex;}
.modular-plus-icon {color: var(--_semantics---primary-selected); width: 100%; height: 100%;}
.modular-plus-icon-holder {justify-content: center; align-items: center; width: 100%; height: 100%; display: flex;}
.modular-cta-image-wrap {border-radius: var(--_sizes---border-radius--medium); background-color: #00000008; flex-flow: row; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; padding: 5px; display: flex; position: relative;}
.demo-width-40x40 {width: 40px; height: 40px;}
.modular-icon-card-small-100pct {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); color: var(--_semantics---primary-selected); flex-flow: column; justify-content: center; align-items: center; width: 100%; min-width: 100%; max-width: 100%; height: 100%; padding: 2px; display: flex; position: relative; overflow: hidden;}
.demo-dark-panel {background-color: var(--_semantics---background-default); padding: 20px;}
.modular-subscribe-2 {width: 100%; max-width: 340px; margin-bottom: 0;}
.modular-subscribe-2-form {z-index: 1; width: 100%; position: relative;}
.modular-subscribe-2-button-wrap {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); padding: 6px; display: flex; position: absolute; inset: 0% 0% 0% auto;}
.modular-success-message-2 {border: 1px solid var(--_semantics---border-active); background-color: var(--_semantics---background-default); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); padding: 16px; font-size: 16px; line-height: 1.2;}
.modular-error-message-2 {border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); color: var(--_semantics---text); margin-top: 10px; padding: 12px; font-size: 14px; font-weight: 400; line-height: 1.2;}
.modular-cta-card-bg {z-index: -1; position: absolute; inset: 0%;}
.demo-padding-t-r-l {padding-top: 2em; padding-left: 2em; padding-right: 2em;}
.demo-small-image {width: 40%; position: absolute; inset: auto auto 5% 5%;}
.demo-phone-img-holder {aspect-ratio: 1 / 2.12; background-color: #5353530d; flex-flow: row; width: 200px; display: flex; position: relative;}
.demo-phone-images-flex {grid-column-gap: 2em; grid-row-gap: 2em; flex-flow: wrap; display: flex;}
.modular-section-footer {background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%;}
.modular-link-wrap {justify-content: flex-start; align-items: flex-start; display: flex;}
.modular-nav-background {z-index: -1; background-color: var(--_semantics---background-default); position: absolute; inset: 0%;}
.modular-nav-small-background {z-index: -1; border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); box-shadow: inset 0 0 0 1px var(--_primitives---opacity--neutral-dark-15); position: absolute; inset: 0%;}
.modular-nav {background-color: #ddd0; align-items: center; width: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; display: flex; position: sticky; top: 0;}
.demo-nav-holder {grid-column-gap: 60px; grid-row-gap: 60px; flex-flow: column; justify-content: space-between; margin-top: 2em; display: flex;}
.modular-logo-wrap {height: 100%; display: flex;}
.modular-big-nav-link-wrap {justify-content: flex-start; align-items: center; padding-left: 3px; padding-right: 3px; display: flex;}
.nav-big-dropdown-wrap {width: 100%;}
.modular-opacity-70-pct {opacity: .7;}
.modular-header-container {text-align: left; text-wrap: balance; flex-flow: column; justify-content: flex-start; align-items: center; max-width: 700px; margin-left: auto; margin-right: auto; display: flex;}
.modular-header-container.modular-left-header-container {text-align: left; justify-content: flex-start; align-items: flex-start; margin-left: 0;}
.modular-bento-grid-card-special {z-index: 1; border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; overflow: hidden;}
.modular-bento-grid-card-special-bg {z-index: -1; position: absolute; inset: 0%;}
.modular-text-left {text-align: left;}
.modular-subtitle-wrap {margin-bottom: 10px;}
.modular-hero-icon, .modular-app-icon {width: 100%;}
.demo-black-logos, .demo-white-logos {grid-column-gap: 10px; grid-row-gap: 10px; background-color: var(--_semantics---background-v2); flex-flow: column; padding: 5px; display: flex;}
.demo-phone-image {opacity: 1; object-fit: cover; object-position: 50% 0%; width: 100%; height: 100%; display: inline-block; position: absolute; inset: 0%;}
.demo-grid-5-col {grid-column-gap: 2em; grid-row-gap: 2em; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; display: grid;}
.modular-hero-play-gradient {z-index: -1; background-color: #0000001f; position: absolute; inset: 0%;}
.modular-stars {grid-column-gap: 3px; grid-row-gap: 3px; display: flex;}
.modular-rating {grid-column-gap: 8px; grid-row-gap: 8px; flex-flow: column; display: flex;}
.modular-video-play-box {z-index: 1; grid-column-gap: 10px; grid-row-gap: 10px; pointer-events: auto; text-wrap: balance; flex-flow: column; justify-content: flex-end; align-items: center; display: flex; position: relative;}
.modular-play-icon {color: inherit; width: 30px; min-width: 30px; height: auto;}
.modular-video-play-content-wrap {grid-column-gap: 10px; grid-row-gap: 10px; justify-content: flex-start; align-items: center; padding: 10px 30px 10px 10px; display: flex;}
.star-icon {width: 100%; height: 100%; position: relative;}
.modular-video-person-image-wrap {border-style: none; border-width: 0; border-radius: 100px; justify-content: center; align-items: center; width: 60px; min-width: 60px; height: 60px; min-height: 60px; display: flex; position: relative; overflow: hidden;}
.modular-star {z-index: 1; color: var(--_semantics---primary-selected); width: 30px; height: 30px; padding: 5px; position: relative;}
.modular-video-play {justify-content: center; align-items: center; min-width: 200px; text-decoration: none; display: flex; position: relative; inset: 0%;}
.modular-video-play:hover {text-decoration: none;}
.modular-home-video-play-icon {pointer-events: none; color: #fff; background-color: #0003; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%;}
.modular-video-person-image {object-fit: cover; width: 100%; height: 100%;}
.modular-star-bg {z-index: -1; background-color: var(--_semantics---background-invert); opacity: .15; border-radius: 8px; position: absolute; inset: 0%;}
.modular-text-small {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-top: 0; margin-bottom: 0; font-size: 14px; font-weight: 400;}
.modular-text-small.modular-grey-color {color: var(--_semantics---text-v2);}
.modular-play-lightbox-2 {z-index: 1; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%;}
.modular-lightbox-2-overlay {z-index: -1; background-color: #00000026; position: absolute; inset: 0%;}
.modular-lightbox-2-wrap {z-index: 1; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0%;}
.modular-video-play-relative {position: relative;}
.modular-right-arrow-wrap {flex-flow: row; justify-content: center; align-items: center; width: 100%; height: auto; display: flex;}
.modular-right-arrow {aspect-ratio: 1; object-fit: contain; width: 100%; height: auto;}
.modular-richtext-wrap {width: 100%;}
.modular-flex-text-center {text-align: center; flex-flow: column; justify-content: flex-start; align-items: center; display: flex;}
.modular-hero-anim-load-6th {display: block;}
.modular-button-secondary {grid-column-gap: 5px; grid-row-gap: 5px; border: 2px solid var(--_semantics---background-invert); border-radius: var(--_sizes---border-radius--button); background-color: var(--_semantics---background-default); font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: 1; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; flex-direction: row; justify-content: center; align-items: center; padding: .5rem 2rem; text-decoration: none; transition: box-shadow .4s, background-color .4s, border-color .4s; display: flex; position: relative;}
.modular-button-secondary:hover {border-color: var(--_semantics---border-active); text-decoration: none;}
.modular-button-active-card {grid-column-gap: 5px; grid-row-gap: 5px; border: 2px solid var(--_semantics---background-invert); border-radius: var(--_sizes---border-radius--button); background-color: var(--_semantics---primary-selected); font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---on-primary-selected); font-size: var(--_typography---body--body-font-size); line-height: 1; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; flex-direction: row; justify-content: center; align-items: center; padding: .5rem 2rem; text-decoration: none; transition: border-color .4s, box-shadow .4s, background-color .4s, color .4s; display: flex; position: relative;}
.modular-button-active-card:hover {background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); text-decoration: none;}
.modular-button-link-active {grid-column-gap: 5px; grid-row-gap: 5px; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: 1px; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); flex-flow: row; justify-content: center; align-items: center; padding: 12px; text-decoration: none; transition: color .4s; display: flex;}
.modular-button-link-active:hover {color: var(--_semantics---primary-selected); text-decoration: none;}
.modular-integration-icon {aspect-ratio: 1; color: var(--_semantics---text); object-fit: contain; width: 100%; height: auto;}
.modular-integration-01-icon-holder {width: 60%;}
.modular-integration-01-link {z-index: 1; aspect-ratio: 1; border: 1px solid var(--_semantics---primary-selected); border-radius: var(--_sizes---border-radius--small); background-color: var(--_primitives---neutral--neutral-50); opacity: 1; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; transition: opacity .4s; display: flex; position: relative; overflow: hidden;}
.modular-integration-01-link:hover {opacity: .8;}
.demo-integrations-grid {grid-column-gap: 1em; grid-row-gap: 1em; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid;}
.demo-app-icon {max-width: 100px;}
.radio-button-label {color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); margin-bottom: 0; margin-left: 5px;}
.radio-button-field {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); justify-content: flex-start; align-items: center; display: flex;}
.demo-grid-6-col {grid-column-gap: 2em; grid-row-gap: 2em; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; display: grid;}
.demo-playground-text-loading {flex-flow: row; height: 30px; display: flex;}
.playground-text-loading {background-color: #7773;}
.modular-text-big {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 10px; font-size: 130px; font-weight: 600; line-height: 1.2; transform: perspective(260px)perspective(300px);}
.modular-text-extrabig {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 0; font-size: 200px; font-weight: 600; line-height: 1.2; transform: perspective(260px)perspective(300px);}
.modular-tab-links-cms {grid-column-gap: 3px; grid-row-gap: 3px; flex-flow: row; justify-content: flex-start; align-items: center; display: flex;}
.modular-footer-logo-wrap {flex-wrap: nowrap; width: auto; height: 1.2rem; display: flex;}
.modular-footer-logo-link {opacity: 1; padding-left: 0; transition: opacity .4s;}
.modular-footer-logo-link:hover {opacity: .8;}
.demo-bento-bg-holder {margin-bottom: 50px;}
.modular-button-link-active-icon {color: inherit; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); width: auto; height: 17px;}
.demo-nav-holders {grid-column-gap: 3rem; grid-row-gap: 3rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; height: 100%; display: grid;}
.demo-logo-holders {grid-column-gap: 40px; grid-row-gap: 40px; flex-flow: column; justify-content: space-between; align-items: stretch; height: 100%; display: flex;}
.modular-light-grey-text {opacity: .7; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text-v2); font-size: 16px; font-weight: 400; line-height: 1.3;}
.div-block {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-modes-demo {grid-column-gap: 10px; grid-row-gap: 10px; justify-content: flex-start; align-items: center; display: flex;}
.demo-mode-item {--_primitives---opacity--transparent: #fff0; --_primitives---opacity--neutral-dark-10: #0000001a; --_primitives---opacity--neutral-dark-20: #0003; --_primitives---opacity--neutral-dark-15: #00000026; --_primitives---opacity--neutral-dark-40: #0006; --_primitives---neutral--neutral-50: white; --_primitives---primary--primary-100: #e7f4f3; --_primitives---primary--primary-200: #d2eae7; --_primitives---primary--primary-400: #68b9af; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #217c71; --_primitives---primary--primary-700: #0f3d38; --_primitives---primary--primary-800: #0d2e29; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #fce9eb; --_primitives---tertiary--tertiary-200: #fad4d7; --_primitives---tertiary--tertiary-400: #ec727b; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #5a161b; --_primitives---tertiary--tertiary-600: #b62d37; --_primitives---tertiary--tertiary-800: #421214; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #f2fafc; --_primitives---quaternary--quaternary-200: #e6f5fa; --_primitives---quaternary--quaternary-400: #a9dded; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #6aa4b6; --_primitives---quaternary--quaternary-700: #34515a; --_primitives---quaternary--quaternary-800: #273c43; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary-600); --_primitives---secondary--secondary-100: #fdf5ee; --_primitives---secondary--secondary-200: #fdebde; --_primitives---secondary--secondary-400: #f7bc8f; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #c1804d; --_primitives---secondary--secondary-700: #5e3e26; --_primitives---secondary--secondary-800: #462f1c; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #fffef8; --_primitives---neutral--neutral-200: #eeeee2; --_primitives---neutral--neutral-300: #cdcbc1; --_primitives---neutral--neutral-400: #b0aea2; --_primitives---neutral--neutral-500: #777569; --_primitives---neutral--neutral-600: #58564d; --_primitives---neutral--neutral-700: #3f3d34; --_primitives---neutral--neutral-800: #2a2921; --_primitives---neutral--neutral-900: #13120f; --_primitives---opacity--neutral-light-5: #ffffff0d; --_primitives---opacity--neutral-light-10: #ffffff1a; --_primitives---opacity--neutral-light-15: #ffffff26; --_primitives---opacity--neutral-light-20: #fff3; --_primitives---opacity--neutral-light-30: #ffffff4d; --_primitives---opacity--neutral-light-40: #fff6; --_primitives---opacity--neutral-light-50: #ffffff80; --_primitives---opacity--neutral-light-60: #fff9; --_primitives---opacity--neutral-dark-5: #0000000d; --_primitives---opacity--neutral-dark-30: #0000004d; --_primitives---opacity--neutral-dark-50: #00000080; --_primitives---opacity--neutral-dark-60: #0009; flex-flow: column; justify-content: center; align-items: center;}
.demo-mode-item.base-light {--_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.primary-light {--_semantics---background-invert: var(--_primitives---primary--primary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---primary--primary-100); --_semantics---background-v2: var(--_primitives---primary--primary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---primary--primary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---primary--primary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.secondary-light {--_semantics---background-invert: var(--_primitives---secondary--secondary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---secondary); --_semantics---background-default: var(--_primitives---secondary--secondary-100); --_semantics---background-v2: var(--_primitives---secondary--secondary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---secondary--secondary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---secondary--secondary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.third-light {--_semantics---background-invert: var(--_primitives---tertiary--tertiary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---tertiary--tertiary); --_semantics---background-default: var(--_primitives---tertiary--tertiary-100); --_semantics---background-v2: var(--_primitives---tertiary--tertiary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---tertiary--tertiary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---tertiary--tertiary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.fourth-light {--_primitives---opacity--transparent: #fff0; --_primitives---opacity--neutral-dark-10: #0000001a; --_primitives---opacity--neutral-dark-20: #0003; --_primitives---opacity--neutral-dark-15: #00000026; --_primitives---opacity--neutral-dark-40: #0006; --_primitives---neutral--neutral-50: white; --_primitives---primary--primary-100: #e7f4f3; --_primitives---primary--primary-200: #d2eae7; --_primitives---primary--primary-400: #68b9af; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #217c71; --_primitives---primary--primary-700: #0f3d38; --_primitives---primary--primary-800: #0d2e29; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #fce9eb; --_primitives---tertiary--tertiary-200: #fad4d7; --_primitives---tertiary--tertiary-400: #ec727b; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #5a161b; --_primitives---tertiary--tertiary-600: #b62d37; --_primitives---tertiary--tertiary-800: #421214; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #f2fafc; --_primitives---quaternary--quaternary-200: #e6f5fa; --_primitives---quaternary--quaternary-400: #a9dded; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #6aa4b6; --_primitives---quaternary--quaternary-700: #34515a; --_primitives---quaternary--quaternary-800: #273c43; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary-600); --_primitives---secondary--secondary-100: #fdf5ee; --_primitives---secondary--secondary-200: #fdebde; --_primitives---secondary--secondary-400: #f7bc8f; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #c1804d; --_primitives---secondary--secondary-700: #5e3e26; --_primitives---secondary--secondary-800: #462f1c; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #fffef8; --_primitives---neutral--neutral-200: #eeeee2; --_primitives---neutral--neutral-300: #cdcbc1; --_primitives---neutral--neutral-400: #b0aea2; --_primitives---neutral--neutral-500: #777569; --_primitives---neutral--neutral-600: #58564d; --_primitives---neutral--neutral-700: #3f3d34; --_primitives---neutral--neutral-800: #2a2921; --_primitives---neutral--neutral-900: #13120f; --_primitives---opacity--neutral-light-5: #ffffff0d; --_primitives---opacity--neutral-light-10: #ffffff1a; --_primitives---opacity--neutral-light-15: #ffffff26; --_primitives---opacity--neutral-light-20: #fff3; --_primitives---opacity--neutral-light-30: #ffffff4d; --_primitives---opacity--neutral-light-40: #fff6; --_primitives---opacity--neutral-light-50: #ffffff80; --_primitives---opacity--neutral-light-60: #fff9; --_primitives---opacity--neutral-dark-5: #0000000d; --_primitives---opacity--neutral-dark-30: #0000004d; --_primitives---opacity--neutral-dark-50: #00000080; --_primitives---opacity--neutral-dark-60: #0009; --_semantics---background-invert: var(--_primitives---quaternary--quaternary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---quaternary--quaternary); --_semantics---background-default: var(--_primitives---quaternary--quaternary-100); --_semantics---background-v2: var(--_primitives---quaternary--quaternary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---quaternary--quaternary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #000001; --_semantics---background-v3: var(--_primitives---quaternary--quaternary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.base-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.primary-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---primary--primary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---primary--primary-100); --_semantics---background-v2: var(--_primitives---primary--primary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---primary--primary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---primary--primary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.secondary-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---secondary--secondary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---secondary); --_semantics---background-default: var(--_primitives---secondary--secondary-100); --_semantics---background-v2: var(--_primitives---secondary--secondary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---secondary--secondary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---secondary--secondary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.third-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---tertiary--tertiary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---tertiary--tertiary); --_semantics---background-default: var(--_primitives---tertiary--tertiary-100); --_semantics---background-v2: var(--_primitives---tertiary--tertiary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---tertiary--tertiary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---tertiary--tertiary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-item.fourth-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---quaternary--quaternary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---quaternary--quaternary); --_semantics---background-default: var(--_primitives---quaternary--quaternary-100); --_semantics---background-v2: var(--_primitives---quaternary--quaternary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---quaternary--quaternary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #000001; --_semantics---background-v3: var(--_primitives---quaternary--quaternary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-modes-demo-light {grid-column-gap: 10px; grid-row-gap: 10px; border: 1px solid var(--_semantics---border); background-color: var(--_semantics---background-default); --_primitives---opacity--transparent: #fff0; --_primitives---opacity--neutral-dark-10: #0000001a; --_primitives---opacity--neutral-dark-20: #0003; --_primitives---opacity--neutral-dark-15: #00000026; --_primitives---opacity--neutral-dark-40: #0006; --_primitives---neutral--neutral-50: white; --_primitives---primary--primary-100: #e7f4f3; --_primitives---primary--primary-200: #d2eae7; --_primitives---primary--primary-400: #68b9af; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #217c71; --_primitives---primary--primary-700: #0f3d38; --_primitives---primary--primary-800: #0d2e29; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #fce9eb; --_primitives---tertiary--tertiary-200: #fad4d7; --_primitives---tertiary--tertiary-400: #ec727b; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #5a161b; --_primitives---tertiary--tertiary-600: #b62d37; --_primitives---tertiary--tertiary-800: #421214; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #f2fafc; --_primitives---quaternary--quaternary-200: #e6f5fa; --_primitives---quaternary--quaternary-400: #a9dded; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #6aa4b6; --_primitives---quaternary--quaternary-700: #34515a; --_primitives---quaternary--quaternary-800: #273c43; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary-600); --_primitives---secondary--secondary-100: #fdf5ee; --_primitives---secondary--secondary-200: #fdebde; --_primitives---secondary--secondary-400: #f7bc8f; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #c1804d; --_primitives---secondary--secondary-700: #5e3e26; --_primitives---secondary--secondary-800: #462f1c; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #fffef8; --_primitives---neutral--neutral-200: #eeeee2; --_primitives---neutral--neutral-300: #cdcbc1; --_primitives---neutral--neutral-400: #b0aea2; --_primitives---neutral--neutral-500: #777569; --_primitives---neutral--neutral-600: #58564d; --_primitives---neutral--neutral-700: #3f3d34; --_primitives---neutral--neutral-800: #2a2921; --_primitives---neutral--neutral-900: #13120f; --_primitives---opacity--neutral-light-5: #ffffff0d; --_primitives---opacity--neutral-light-10: #ffffff1a; --_primitives---opacity--neutral-light-15: #ffffff26; --_primitives---opacity--neutral-light-20: #fff3; --_primitives---opacity--neutral-light-30: #ffffff4d; --_primitives---opacity--neutral-light-40: #fff6; --_primitives---opacity--neutral-light-50: #ffffff80; --_primitives---opacity--neutral-light-60: #fff9; --_primitives---opacity--neutral-dark-5: #0000000d; --_primitives---opacity--neutral-dark-30: #0000004d; --_primitives---opacity--neutral-dark-50: #00000080; --_primitives---opacity--neutral-dark-60: #0009; --_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50); border-radius: 5px; justify-content: flex-start; align-items: center; padding: 10px; display: flex;}
.demo-modes-demo-dark {grid-column-gap: 10px; grid-row-gap: 10px; border: 1px solid var(--_semantics---border); background-color: var(--_semantics---background-default); --_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50); border-radius: 5px; justify-content: flex-start; align-items: center; padding: 10px; display: flex;}
.demo-mode-item-in {padding: 5px; display: none;}
.demo-mode-wrap {border: 1px solid var(--_semantics---background-invert); background-color: var(--_semantics---background-default); cursor: pointer; --_primitives---opacity--transparent: #fff0; --_primitives---opacity--neutral-dark-10: #0000001a; --_primitives---opacity--neutral-dark-20: #0003; --_primitives---opacity--neutral-dark-15: #00000026; --_primitives---opacity--neutral-dark-40: #0006; --_primitives---neutral--neutral-50: white; --_primitives---primary--primary-100: #e7f4f3; --_primitives---primary--primary-200: #d2eae7; --_primitives---primary--primary-400: #68b9af; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #217c71; --_primitives---primary--primary-700: #0f3d38; --_primitives---primary--primary-800: #0d2e29; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #fce9eb; --_primitives---tertiary--tertiary-200: #fad4d7; --_primitives---tertiary--tertiary-400: #ec727b; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #5a161b; --_primitives---tertiary--tertiary-600: #b62d37; --_primitives---tertiary--tertiary-800: #421214; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #f2fafc; --_primitives---quaternary--quaternary-200: #e6f5fa; --_primitives---quaternary--quaternary-400: #a9dded; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #6aa4b6; --_primitives---quaternary--quaternary-700: #34515a; --_primitives---quaternary--quaternary-800: #273c43; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary-600); --_primitives---secondary--secondary-100: #fdf5ee; --_primitives---secondary--secondary-200: #fdebde; --_primitives---secondary--secondary-400: #f7bc8f; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #c1804d; --_primitives---secondary--secondary-700: #5e3e26; --_primitives---secondary--secondary-800: #462f1c; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #fffef8; --_primitives---neutral--neutral-200: #eeeee2; --_primitives---neutral--neutral-300: #cdcbc1; --_primitives---neutral--neutral-400: #b0aea2; --_primitives---neutral--neutral-500: #777569; --_primitives---neutral--neutral-600: #58564d; --_primitives---neutral--neutral-700: #3f3d34; --_primitives---neutral--neutral-800: #2a2921; --_primitives---neutral--neutral-900: #13120f; --_primitives---opacity--neutral-light-5: #ffffff0d; --_primitives---opacity--neutral-light-10: #ffffff1a; --_primitives---opacity--neutral-light-15: #ffffff26; --_primitives---opacity--neutral-light-20: #fff3; --_primitives---opacity--neutral-light-30: #ffffff4d; --_primitives---opacity--neutral-light-40: #fff6; --_primitives---opacity--neutral-light-50: #ffffff80; --_primitives---opacity--neutral-light-60: #fff9; --_primitives---opacity--neutral-dark-5: #0000000d; --_primitives---opacity--neutral-dark-30: #0000004d; --_primitives---opacity--neutral-dark-50: #00000080; --_primitives---opacity--neutral-dark-60: #0009; border-radius: 4px; flex-flow: row; justify-content: flex-start; align-items: stretch; width: 26px; height: 18px; padding: 0; transition: all .35s; display: flex;}
.demo-mode-wrap:hover {transform: scale(1.1);}
.demo-mode-wrap.base-light {--_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.primary-light {--_semantics---background-invert: var(--_primitives---primary--primary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---primary--primary-100); --_semantics---background-v2: var(--_primitives---primary--primary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---primary--primary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---primary--primary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.secondary-light {--_semantics---background-invert: var(--_primitives---secondary--secondary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---secondary); --_semantics---background-default: var(--_primitives---secondary--secondary-100); --_semantics---background-v2: var(--_primitives---secondary--secondary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---secondary--secondary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---secondary--secondary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.third-light {--_semantics---background-invert: var(--_primitives---tertiary--tertiary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---tertiary--tertiary); --_semantics---background-default: var(--_primitives---tertiary--tertiary-100); --_semantics---background-v2: var(--_primitives---tertiary--tertiary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---tertiary--tertiary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---tertiary--tertiary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.fourth-light {--_primitives---opacity--transparent: #fff0; --_primitives---opacity--neutral-dark-10: #0000001a; --_primitives---opacity--neutral-dark-20: #0003; --_primitives---opacity--neutral-dark-15: #00000026; --_primitives---opacity--neutral-dark-40: #0006; --_primitives---neutral--neutral-50: white; --_primitives---primary--primary-100: #e7f4f3; --_primitives---primary--primary-200: #d2eae7; --_primitives---primary--primary-400: #68b9af; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #217c71; --_primitives---primary--primary-700: #0f3d38; --_primitives---primary--primary-800: #0d2e29; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #fce9eb; --_primitives---tertiary--tertiary-200: #fad4d7; --_primitives---tertiary--tertiary-400: #ec727b; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #5a161b; --_primitives---tertiary--tertiary-600: #b62d37; --_primitives---tertiary--tertiary-800: #421214; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #f2fafc; --_primitives---quaternary--quaternary-200: #e6f5fa; --_primitives---quaternary--quaternary-400: #a9dded; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #6aa4b6; --_primitives---quaternary--quaternary-700: #34515a; --_primitives---quaternary--quaternary-800: #273c43; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary-600); --_primitives---secondary--secondary-100: #fdf5ee; --_primitives---secondary--secondary-200: #fdebde; --_primitives---secondary--secondary-400: #f7bc8f; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #c1804d; --_primitives---secondary--secondary-700: #5e3e26; --_primitives---secondary--secondary-800: #462f1c; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #fffef8; --_primitives---neutral--neutral-200: #eeeee2; --_primitives---neutral--neutral-300: #cdcbc1; --_primitives---neutral--neutral-400: #b0aea2; --_primitives---neutral--neutral-500: #777569; --_primitives---neutral--neutral-600: #58564d; --_primitives---neutral--neutral-700: #3f3d34; --_primitives---neutral--neutral-800: #2a2921; --_primitives---neutral--neutral-900: #13120f; --_primitives---opacity--neutral-light-5: #ffffff0d; --_primitives---opacity--neutral-light-10: #ffffff1a; --_primitives---opacity--neutral-light-15: #ffffff26; --_primitives---opacity--neutral-light-20: #fff3; --_primitives---opacity--neutral-light-30: #ffffff4d; --_primitives---opacity--neutral-light-40: #fff6; --_primitives---opacity--neutral-light-50: #ffffff80; --_primitives---opacity--neutral-light-60: #fff9; --_primitives---opacity--neutral-dark-5: #0000000d; --_primitives---opacity--neutral-dark-30: #0000004d; --_primitives---opacity--neutral-dark-50: #00000080; --_primitives---opacity--neutral-dark-60: #0009; --_semantics---background-invert: var(--_primitives---quaternary--quaternary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---quaternary--quaternary); --_semantics---background-default: var(--_primitives---quaternary--quaternary-100); --_semantics---background-v2: var(--_primitives---quaternary--quaternary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---quaternary--quaternary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #000001; --_semantics---background-v3: var(--_primitives---quaternary--quaternary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.base-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---neutral--neutral-900); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---neutral--neutral-100); --_semantics---background-v2: var(--_primitives---neutral--neutral-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---neutral--neutral-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---neutral--neutral-300); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.primary-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---primary--primary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---primary); --_semantics---background-default: var(--_primitives---primary--primary-100); --_semantics---background-v2: var(--_primitives---primary--primary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---primary--primary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---primary--primary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.secondary-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---secondary--secondary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_semantics---secondary); --_semantics---background-default: var(--_primitives---secondary--secondary-100); --_semantics---background-v2: var(--_primitives---secondary--secondary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---secondary--secondary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---secondary--secondary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.third-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---tertiary--tertiary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---tertiary--tertiary); --_semantics---background-default: var(--_primitives---tertiary--tertiary-100); --_semantics---background-v2: var(--_primitives---tertiary--tertiary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---tertiary--tertiary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #fffffb; --_semantics---background-v3: var(--_primitives---tertiary--tertiary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-mode-wrap.fourth-dark {--_primitives---opacity--transparent: #0000; --_primitives---opacity--neutral-dark-10: #ffffff1a; --_primitives---opacity--neutral-dark-20: #fff3; --_primitives---opacity--neutral-dark-15: #ffffff26; --_primitives---opacity--neutral-dark-40: #fff6; --_primitives---neutral--neutral-50: #13120f; --_primitives---primary--primary-100: #0d2e29; --_primitives---primary--primary-200: #0f3d38; --_primitives---primary--primary-400: #217c71; --_primitives---primary--primary: #2a9d8f; --_primitives---primary--primary-600: #68b9af; --_primitives---primary--primary-700: #d2eae7; --_primitives---primary--primary-800: #e7f4f3; --_primitives---primary--primary-gradient: var(--_primitives---primary--primary); --_primitives---tertiary--tertiary-100: #421214; --_primitives---tertiary--tertiary-200: #5a161b; --_primitives---tertiary--tertiary-400: #b62d37; --_primitives---tertiary--tertiary: #e63946; --_primitives---tertiary--tertiary-700: #fad4d7; --_primitives---tertiary--tertiary-600: #ec727b; --_primitives---tertiary--tertiary-800: #fce9eb; --_primitives---tertiary--tertiary-gradient: var(--_primitives---tertiary--tertiary); --_primitives---quaternary--quaternary-100: #273c43; --_primitives---quaternary--quaternary-200: #34515a; --_primitives---quaternary--quaternary-400: #6aa4b6; --_primitives---quaternary--quaternary: #86cfe6; --_primitives---quaternary--quaternary-600: #a9dded; --_primitives---quaternary--quaternary-700: #e6f5fa; --_primitives---quaternary--quaternary-800: #f2fafc; --_primitives---quaternary--quaternary-gradient: var(--_primitives---quaternary--quaternary); --_primitives---secondary--secondary-100: #462f1c; --_primitives---secondary--secondary-200: #5e3e26; --_primitives---secondary--secondary-400: #c1804d; --_primitives---secondary--secondary: #f4a261; --_primitives---secondary--secondary-600: #f7bc8f; --_primitives---secondary--secondary-700: #fdebde; --_primitives---secondary--secondary-800: #fdf5ee; --_primitives---secondary--secondary-gradient: var(--_primitives---secondary--secondary); --_primitives---neutral--neutral-100: #2a2921; --_primitives---neutral--neutral-200: #3f3d34; --_primitives---neutral--neutral-300: #58564d; --_primitives---neutral--neutral-400: #777569; --_primitives---neutral--neutral-500: #b0aea2; --_primitives---neutral--neutral-600: #cdcbc1; --_primitives---neutral--neutral-700: #eeeee2; --_primitives---neutral--neutral-800: #fffef8; --_primitives---neutral--neutral-900: white; --_primitives---opacity--neutral-light-5: #0000000d; --_primitives---opacity--neutral-light-10: #0000001a; --_primitives---opacity--neutral-light-15: #00000026; --_primitives---opacity--neutral-light-20: #0003; --_primitives---opacity--neutral-light-30: #0000004d; --_primitives---opacity--neutral-light-40: #0006; --_primitives---opacity--neutral-light-50: #00000080; --_primitives---opacity--neutral-light-60: #0009; --_primitives---opacity--neutral-dark-5: #ffffff0d; --_primitives---opacity--neutral-dark-30: #ffffff4d; --_primitives---opacity--neutral-dark-50: #ffffff80; --_primitives---opacity--neutral-dark-60: #fff9; --_semantics---background-invert: var(--_primitives---quaternary--quaternary-800); --_semantics---text: var(--_primitives---neutral--neutral-900); --_semantics---primary: var(--_primitives---primary--primary); --_semantics---primary-selected: var(--_primitives---quaternary--quaternary); --_semantics---background-default: var(--_primitives---quaternary--quaternary-100); --_semantics---background-v2: var(--_primitives---quaternary--quaternary-200); --_semantics---heading: var(--_primitives---neutral--neutral-900); --_semantics---border: var(--_primitives---quaternary--quaternary-200); --_semantics---text-invert: var(--_primitives---neutral--neutral-50); --_semantics---on-primary-selected: #000001; --_semantics---background-v3: var(--_primitives---quaternary--quaternary-400); --_semantics---text-v2: var(--_primitives---neutral--neutral-700); --_semantics---on-primary: #fffffa; --_semantics---border-active: var(--_semantics---primary-selected); --_semantics---secondary: var(--_primitives---secondary--secondary); --_semantics---surface: var(--_primitives---opacity--neutral-light-60); --_semantics---on-secondary: #fffffc; --_semantics---gradient-1st: var(--_primitives---primary--primary); --_semantics---gradient-2nd: var(--_semantics---primary); --_semantics---gradient-3rd: var(--_semantics---secondary); --_semantics---gradient-4th: var(--_semantics---secondary); --_semantics---heading-invert: var(--_primitives---neutral--neutral-50);}
.demo-home-image {border-radius: var(--_sizes---border-radius--xsmall); width: 100%;}
.demo-home-link {margin-top: var(--_sizes---spacing--medium);}
.demo-text-2 {opacity: .8; color: #222225;}
.demo-box-holder-2 {color: #000; border: 1px dashed #000; flex-flow: column; align-items: stretch; width: 100%; height: 100%; min-height: 50px; padding: 5px; display: flex; position: relative;}
.demo-margins {display: none;}
.demo-ds-client-first {grid-column-gap: 30px; grid-row-gap: 30px; background-color: #2d40ea0d; border: 1px dashed #2d40ea; border-radius: 12px; flex-direction: column; justify-content: space-between; margin: 2rem; padding: 2em; display: flex;}
.demo-ds-client-first.no-margin-top {margin-top: 0;}
.logo-image {flex: none; width: auto; height: 100%; display: block;}
.logo-wrap {height: 100%; display: flex;}
.nav-logo-wrap {flex-wrap: nowrap; width: auto; height: 1.2rem; display: flex;}
.nav-logo-link {opacity: 1; padding-left: 0; transition: opacity .4s;}
.nav-logo-link:hover {opacity: .8;}
.hero-icon, .app-icon {width: 100%;}
.nav_wrap {z-index: 99; width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.2; position: sticky; top: 0;}
.navbar {background-color: #ddd0; align-items: center; width: 100%; line-height: 1.2; display: flex; position: sticky; top: 0;}
.navbar-01 {background-color: #ddd0; align-items: center; width: 100%; min-height: 80px; line-height: 1.2; display: flex; position: sticky; top: 0;}
.container-medium {z-index: 2; max-width: var(--_sizes---container--medium); width: 100%; margin-left: auto; margin-right: auto; position: relative;}
.container-medium.nav-container {flex-flow: row; justify-content: center; align-items: center; padding: 0 2rem; display: flex;}
.nav-01_menu {flex: 1; justify-content: space-between; align-items: center; margin-left: 1.5rem; display: flex; position: static;}
.nav-01_menu-links {flex-flow: row; justify-content: flex-start; align-items: center; display: flex;}
.nav_menu-right {grid-column-gap: 10px; grid-row-gap: 10px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; align-items: center; display: flex;}
.nav-link-wrap {justify-content: flex-start; align-items: center; padding-left: 3px; padding-right: 3px; display: flex;}
.nav-link {grid-column-gap: .3rem; grid-row-gap: .3rem; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--regular); line-height: var(--_typography---body--body-line-height); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); justify-content: center; align-items: center; padding: .6rem; text-decoration: none; transition: color .4s; display: flex; position: relative;}
.nav-link:hover {color: var(--_semantics---primary-selected); text-decoration: none;}
.nav-link.nav-link-big {justify-content: flex-start; align-items: stretch;}
.text-simple {font-family: var(--_ui-styles---fonts--heading); font-size: inherit; line-height: inherit; color: inherit; margin-bottom: 0;}
.nav-badge {background-color: var(--_semantics---background-invert); color: var(--_semantics---background-default); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 100px; justify-content: center; align-items: center; width: 16px; height: 16px; padding: 3px; display: flex;}
.nav-link-bg {z-index: -1; background-color: var(--_semantics---background-v2); border-radius: 100px; display: none; position: absolute; inset: 0%;}
.big_dropdown-wrap {width: 100%;}
.dropdown {background-color: #fff0; flex-flow: column; justify-content: flex-start; align-items: center; display: flex; position: static;}
.button {grid-column-gap: .3rem; grid-row-gap: .3rem; border: 2px solid var(--_semantics---background-invert); border-radius: var(--_sizes---border-radius--button); background-color: var(--_semantics---background-invert); font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---text-invert); font-size: var(--_typography---body--body-font-size); line-height: var(--_typography---body--body-line-height); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; flex-direction: row; justify-content: center; align-items: center; padding: .5rem 2rem; text-decoration: none; transition: border-color .4s, box-shadow .4s, background-color .4s, color .4s; display: flex; position: relative;}
.button:hover {border-color: var(--_semantics---background-invert); background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); text-decoration: none;}
.button.global-button {background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); padding-top: .5rem; padding-bottom: .5rem;}
.button.global-button:hover {background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected);}
.button.cta-button {background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); padding-top: .5rem; padding-bottom: .5rem;}
.button.cta-button:hover {background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected);}
.button.button-active-card {background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); border-style: solid;}
.button.button-active-card:hover {border-color: var(--_semantics---background-invert); color: var(--_semantics---on-primary-selected);}
.button.is-link {box-shadow: none; color: var(--_semantics---text); background-color: #8957e000; border-style: none;}
.button.is-link:hover {color: var(--_semantics---primary-selected);}
.button.is-link-active {box-shadow: none; color: var(--_semantics---text); background-color: #8957e000; border-style: none;}
.button.is-link-active:hover {color: var(--_semantics---primary-selected);}
.button.is-secondary {border-color: var(--_semantics---background-invert); background-color: var(--_semantics---background-default); color: var(--_semantics---text);}
.button.is-secondary:hover {border-color: var(--_semantics---border-active);}
.nav_background {z-index: -1; background-color: var(--_semantics---background-default); color: var(--_semantics---text); position: absolute; inset: 0%;}
.nav_menu-button {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); background-color: #fff0; border-radius: 10px; width: 3rem; height: 3rem; padding: .7rem; transition: background-color .4s;}
.button-bg, .button-secondary-bg {z-index: -1; position: absolute; inset: 0%;}
.nav_05 {font-family: var(--_ui-styles---fonts--text); background-color: #fff0; align-items: center; width: 100%; margin-top: .6rem; margin-bottom: .6rem; font-size: 16px; font-weight: 400; line-height: 1.2; display: flex; position: sticky;}
.nav_05-container {justify-content: center; align-items: center; min-width: 44rem; max-width: none; height: 3.7rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: .6rem; display: flex; position: relative;}
.nav_05-menu-links {flex-flow: row; flex: 1; justify-content: flex-end; align-items: center; display: flex;}
.nav_05-menu {grid-column-gap: .6rem; grid-row-gap: .6rem; background-color: #fff0; flex: 1; justify-content: flex-end; align-items: center; padding-left: 5rem; display: flex; position: static;}
.nav_buttons-wrap {grid-column-gap: .6rem; grid-row-gap: .6rem; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); justify-content: flex-end; align-items: center; display: flex;}
.menu_icon-wrap {flex-flow: column; justify-content: center; align-items: center; width: 1.6rem; height: 100%; display: flex;}
.nav_small-bg {z-index: -1; border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); box-shadow: inset 0 0 0 1px var(--_primitives---opacity--neutral-dark-15); color: var(--_semantics---text); position: absolute; inset: 0%;}
.menu_line-top {background-color: var(--_semantics---background-invert); border-radius: 2px; width: 100%; height: 2px; padding: 0; display: block;}
.menu_line-middle {background-color: var(--_semantics---background-invert); border-radius: 10px; width: 100%; height: 2px; margin-top: .4rem; margin-bottom: .4rem; padding: 0; display: block;}
.menu_line-bottom {background-color: var(--_semantics---background-invert); border-radius: 10px; width: 100%; height: 2px; padding: 0; display: block;}
.dropdown-list {background-color: #fff0; position: absolute; top: 120%; left: 0; right: 0;}
.dropdown_list-details {justify-content: center; align-items: flex-start; max-width: 100%; margin-top: 2px; padding-left: 2rem; padding-right: 2rem; display: flex;}
.nav_big-menu {border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); box-shadow: 0 0 0 1px var(--_semantics---border); flex-flow: row; justify-content: space-between; align-items: center; width: 100%; padding: 1rem; display: flex; position: relative;}
.big_menu-grid {grid-column-gap: 0rem; grid-row-gap: 0rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: grid;}
.big_menu-links-wrap {border-right: 1px solid var(--_semantics---border); flex-flow: column; justify-content: flex-start; align-items: stretch; margin-right: 1rem; padding-right: 1rem; display: flex;}
.big_menu-title-wrap {padding-bottom: .6rem; padding-left: .6rem;}
.opacity-50-pct {opacity: .5;}
.heading-style-h6 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h6--h6-font-size); line-height: var(--_typography---h6--h6-line-height); font-weight: var(--_typography---h6--h6-font-weight); letter-spacing: var(--_typography---h6--h6-letter-spacing); margin-top: 0; margin-bottom: 0;}
.big_nav-link-wrap {justify-content: flex-start; align-items: center; padding-left: 3px; padding-right: 3px; display: flex;}
.big_menu-in-right {grid-column-gap: 1rem; grid-row-gap: 1rem; flex-flow: column; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; justify-content: flex-start; align-items: stretch; display: flex;}
.nav_link-with-image {grid-column-gap: .9rem; grid-row-gap: .9rem; background-color: var(--_primitives---opacity--transparent); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); text-align: left; border-radius: 8px; grid-template-rows: auto; grid-template-columns: .75fr 1fr; grid-auto-columns: 1fr; justify-content: flex-start; align-items: stretch; font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none; transition: opacity .4s; display: grid;}
.nav_link-with-image:hover {opacity: .8; color: var(--_semantics---text);}
.text-size-regular {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--regular); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 0; margin-bottom: 0;}
.text-size-regular.text-color-gray {color: var(--_semantics---text-v2);}
.text-size-regular.text-color-inherit {color: inherit;}
.text-size-regular.text-size-regular-hero {line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.nav_link-text-wrap {grid-column-gap: .3rem; grid-row-gap: .3rem; flex-flow: column; justify-content: center; align-items: flex-start; display: flex;}
.big-menu-link-holder {justify-content: flex-start; align-items: center; margin-top: .3rem; margin-bottom: .3rem; display: flex;}
.nav_link-big-image {aspect-ratio: 1; border-radius: var(--_sizes---border-radius--small); object-fit: cover; width: 6rem; min-width: 6rem; height: 6rem; min-height: 6rem; max-height: 6rem;}
.nav_link-icon-wrap {flex-flow: column; justify-content: flex-start; align-items: center; width: 1.5rem; min-width: 1.5rem; height: 100%; display: flex;}
.icon {aspect-ratio: 1; color: var(--_semantics---primary-selected); object-fit: contain; width: 100%; height: auto;}
.dropdown-icon {width: .75rem; height: .5rem;}
.text-extra-big {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---hero--xlarge-hero-font-size); line-height: var(--_typography---hero--hero-line-height); font-weight: var(--_typography---hero--hero-font-weight); letter-spacing: var(--_typography---hero--hero-letter-spacing); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 0; transform: perspective(260px)perspective(300px);}
.demo-ds-client-first-heading {grid-column-gap: 30px; grid-row-gap: 30px; background-color: #2d40ea0d; border: 1px dashed #2d40ea; border-radius: 12px; flex-direction: column; justify-content: space-between; padding: 1rem; display: flex;}
.text-size-big {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---hero--large-hero-font-size); line-height: var(--_typography---hero--hero-line-height); font-weight: var(--_typography---hero--hero-font-weight); letter-spacing: var(--_typography---hero--hero-letter-spacing); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 0; transform: perspective(260px)perspective(300px);}
.text-size-big.text-size-big-hero {line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.heading-style-hero {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---hero--hero-font-size); line-height: var(--_typography---hero--hero-line-height); font-weight: var(--_typography---hero--hero-font-weight); letter-spacing: var(--_typography---hero--hero-letter-spacing); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 0; transform: perspective(260px)perspective(300px);}
.heading-style-h1 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h1--h1-font-size); line-height: var(--_typography---h1--h1-line-height); font-weight: var(--_typography---h1--h1-font-weight); letter-spacing: var(--_typography---h1--h1-letter-spacing); margin-top: 0; margin-bottom: 0;}
.heading-style-h2 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height); font-weight: var(--_typography---h2--h2-font-weight); letter-spacing: var(--_typography---h2--h2-letter-spacing); margin-top: 0; margin-bottom: 0;}
.heading-style-h3 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h3--h3-font-size); line-height: var(--_typography---h3--h3-line-height); font-weight: var(--_typography---h3--h3-font-weight); letter-spacing: var(--_typography---h3--h3-letter-spacing); margin-top: 0; margin-bottom: 0;}
.heading-style-h3.text-color-inherit {color: inherit;}
.heading-style-h4 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h4--h4-font-size); line-height: var(--_typography---h4--h4-line-height); font-weight: var(--_typography---h4--h4-font-weight); letter-spacing: var(--_typography---h4--h4-letter-spacing); margin-top: 0; margin-bottom: 0;}
.heading-style-h5 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h5--h5-font-size); line-height: var(--_typography---h5--h5-line-height); font-weight: var(--_typography---h5--h5-font-weight); letter-spacing: var(--_typography---h5--h5-letter-spacing); margin-top: 0; margin-bottom: 0;}
.heading-style-h5.text-color-inherit {color: inherit;}
.modular-subheading-holder {z-index: 3; border: 1px solid var(--_semantics---primary); background-color: #eee; border-radius: 16px; flex-flow: column; justify-content: center; align-items: flex-start; margin-bottom: 1rem; padding: 1rem; font-size: 2rem; font-weight: 700; line-height: 1; display: flex;}
.text-size-small {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 0; margin-bottom: 0;}
.text-size-small.text-color-gray {color: var(--_semantics---text-v2);}
.text-size-small.text-size-small-hero {line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.text-color-gray {color: var(--_semantics---text-v2);}
.text-size-large {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--large); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); text-wrap: balance; margin-bottom: 0;}
.text-size-large.text-size-large-hero {line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.subtitle {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--regular); line-height: var(--_typography---body--body-line-height); font-weight: var(--_ui-styles---font-weight--semi-bold); letter-spacing: var(--_typography---body--body-letter-spacing);}
.badge-image {color: var(--_semantics---text); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); object-fit: contain; width: 1.25rem; height: 1.25rem;}
.badge {grid-column-gap: .3rem; grid-row-gap: .3rem; background-color: var(--_semantics---background-default); box-shadow: inset 0 0 0 1px var(--_semantics---border); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 100px; justify-content: flex-start; align-items: center; padding: .4rem 1rem; display: flex;}
.badges-wrap {grid-column-gap: .6rem; grid-row-gap: .6rem; font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); flex-flow: wrap; justify-content: flex-start; align-items: center; display: flex;}
.subtitle-cf {font-family: var(--_ui-styles---fonts--text); color: #2d40ea; margin-top: 0; margin-bottom: 0; font-size: .8rem; font-weight: 600; line-height: 1.2;}
.demo-card-holders {grid-column-gap: 16px; grid-row-gap: 16px; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid;}
.modular-active-card-link-bg {z-index: -1; border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); position: absolute; inset: 0;}
.modular-active-card-link-bg-2nd {z-index: -2; background-color: var(--_semantics---background-v2); color: var(--_semantics---text); display: block; position: absolute; inset: 0;}
.big-card-bg {z-index: -1; position: absolute; inset: 0%;}
.card {z-index: 1; border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-default); box-shadow: 0 2px 4px 0 var(--_primitives---opacity--neutral-dark-20), 0 1px 2px -1px var(--_primitives---opacity--neutral-dark-20), 0 0 0 1px var(--_primitives---opacity--neutral-dark-20); width: 100%; position: relative;}
.big-card {z-index: 1; border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-default); box-shadow: 0 2px 4px 0 var(--_primitives---opacity--neutral-dark-20), 0 1px 2px -1px var(--_primitives---opacity--neutral-dark-20), 0 0 0 1px var(--_primitives---opacity--neutral-dark-20); color: var(--_semantics---text); width: 100%; position: relative;}
.card-bg {z-index: -1; position: absolute; inset: 0%;}
.active-card {z-index: 1; border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); width: 100%; position: relative;}
.active-card-bg {z-index: -1; position: absolute; inset: 0%;}
.active-card-link {z-index: 1; border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); width: 100%; text-decoration: none; transition: background-color .35s; position: relative; overflow: hidden;}
.active-card-link:hover {text-decoration: none;}
.padding-global {padding-right: var(--_sizes---spacing--global-padding); padding-left: var(--_sizes---spacing--global-padding);}
.padding-section-medium {padding-top: var(--_sizes---section-padding--medium); padding-bottom: var(--_sizes---section-padding--medium);}
.section {z-index: 1; background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; position: relative;}
.text_gradient {background-color: var(--_semantics---primary); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;}
.section-hero {z-index: 1; background-color: var(--_semantics---background-default); width: 100%; position: relative;}
.hero-heading-2nd {transform-origin: 50% 100%; font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---hero--hero-font-size); line-height: var(--_typography---hero--hero-line-height); font-weight: var(--_typography---hero--hero-font-weight); letter-spacing: var(--_typography---hero--hero-letter-spacing); text-wrap: balance; transform-style: preserve-3d; margin-top: 0; margin-bottom: 0; transform: perspective(260px)perspective(300px);}
.text_gradient-2nd {background-color: var(--_semantics---primary); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;}
.subcribers-wrap {grid-column-gap: .6rem; grid-row-gap: .6rem; color: var(--_semantics---text); flex-flow: row; justify-content: flex-start; align-items: center; display: flex;}
.subcribers-wrap.subcribers-wrap-hero, .subcribers-wrap.subcribers-wrap-boxed-hero {color: var(--_semantics---text);}
.subscriber-image {border: 1px solid var(--_semantics---primary); object-fit: cover; border-radius: 100px; width: 2.3rem; min-width: 2.3rem; height: 2.3rem;}
.subscriber-image.subscriber2-image, .subscriber-image.subcriber3-image {margin-left: -.6rem;}
.subscribers-images {flex-flow: row; justify-content: flex-start; align-items: flex-start; display: flex;}
.container-small {max-width: var(--_sizes---container--small); text-align: center; flex-direction: column; align-items: center; width: 100%; margin-left: auto; margin-right: auto; display: flex; position: relative;}
.container-small.padding-custom2 {padding: 3rem 2rem;}
.section_hero-bg {z-index: -1; background-color: var(--_semantics---background-v2); background-image: var(--_semantics---background-v2); pointer-events: none; position: absolute; inset: 0%;}
.section-footer {background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%;}
.section_secondary {background-color: var(--_semantics---background-v2); width: 100%;}
.section_special-1, .section_special-2 {background-color: var(--_semantics---background-v2); color: var(--_semantics---text); width: 100%;}
.section_hero-bg_inside {position: absolute; inset: 0%;}
.active-card-link-bg {z-index: -1; border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); position: absolute; inset: 0;}
.active-card-link-bg-2nd {z-index: -2; background-color: var(--_semantics---background-v2); color: var(--_semantics---text); display: block; position: absolute; inset: 0;}
.icon-card {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---primary-selected); flex-flow: column; justify-content: center; align-items: center; width: 4.3rem; min-width: 4.3rem; max-width: 4.3rem; padding: .6rem; display: flex; position: relative; overflow: hidden;}
.icon-card-bg {z-index: -1; position: absolute; inset: 0%;}
.icon-card-small-100pct {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); color: var(--_semantics---primary-selected); flex-flow: column; justify-content: center; align-items: center; width: 100%; min-width: 100%; max-width: 100%; height: 100%; padding: 2px; display: flex; position: relative; overflow: hidden;}
.demo-cta-wrap {grid-column-gap: 2em; grid-row-gap: 2em; grid-template-rows: auto; grid-template-columns: 1fr 1fr; display: grid;}
.cta_card {z-index: 1; border-radius: var(--_sizes---border-radius--large); background-color: var(--_semantics---background-v2); color: var(--_semantics---text); width: 100%; position: relative; overflow: hidden;}
.cta_card-bg {z-index: -1; position: absolute; inset: 0%;}
.cta_small-image {width: 60%;}
.cta_image {border-radius: var(--_sizes---border-radius--small); object-fit: cover; object-position: 0% 0%; min-width: 100%; height: 100%;}
.cta_image-wrap {border-radius: var(--_sizes---border-radius--medium); background-color: #00000008; flex-flow: row; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; padding: .3rem 5px; display: flex; position: relative;}
.bento-grid-card-1-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-1st {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.bento-grid-card-special-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-special {z-index: 1; border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; overflow: hidden;}
.bento-grid-card-6-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-6th {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.bento-grid-card-2nd-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-2nd, .bento-grid-card-3rd {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.bento-grid-card-3-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-4th {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.bento-grid-card-4-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-5th {z-index: 1; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); background-color: var(--_semantics---background-default); color: var(--_semantics---text); width: 100%; height: 100%; position: relative; overflow: hidden;}
.bento-grid-card-5-bg {z-index: -1; position: absolute; inset: 0%;}
.bento-grid-card-1-img-holder {display: block; position: absolute; inset: 0%;}
.bento-grid-tall-img {object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%;}
.bento-grid-normal {flex-flow: column; width: 100%; height: 100%; display: flex;}
.bento-grid-normal-img-wrap {flex: 1; width: 100%; min-height: 200px; position: relative;}
.bento-mask-bottom {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(to top, #0000 0%, #000 15%); mask-image: linear-gradient(to top, #0000 0%, #000 15%);}
.bento-grid-normal-img {object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%;}
.bento-mask-top {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(#0000 0%, #000 15%); mask-image: linear-gradient(#0000 0%, #000 15%);}
.bento-card-content {padding: var(--_sizes---spacing--medium); text-wrap: balance;}
.text-align-center {text-align: center;}
.content-flex-vertical {grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: column; display: flex;}
.bento-grid-wide-img-wrap {flex: 1; width: 100%; height: 100%; min-height: 12.5rem; position: relative;}
.bento-mask-right {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(to left, #0000 0%, #000 15%); mask-image: linear-gradient(to left, #0000 0%, #000 15%);}
.bento-grid-wide-img {object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%;}
.bento-grid-tall-image-wrap {flex: 1; width: 100%; min-height: 200px; position: relative;}
.bento-grid-tall {flex-flow: column; width: 100%; height: 100%; display: flex;}
.bento-mask-left {position: absolute; inset: 0%; -webkit-mask-image: linear-gradient(to right, #0000 0%, #000 15%); mask-image: linear-gradient(to right, #0000 0%, #000 15%);}
.text-rich-text {color: var(--_semantics---text); width: 100%; font-size: 16px; line-height: 1.5;}
.text-rich-text p {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: 1.5; font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-bottom: 10px;}
.text-rich-text h2 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h2--h2-font-size); line-height: var(--_typography---h2--h2-line-height); font-weight: var(--_typography---h2--h2-font-weight); letter-spacing: var(--_typography---h2--h2-letter-spacing); margin-top: 1rem; margin-bottom: .5rem;}
.text-rich-text h3 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h3--h3-font-size); line-height: var(--_typography---h3--h3-line-height); font-weight: var(--_typography---h3--h3-font-weight); letter-spacing: var(--_typography---h3--h3-letter-spacing); margin-top: 1rem; margin-bottom: .5rem;}
.text-rich-text h4 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h4--h4-font-size); line-height: var(--_typography---h4--h4-line-height); font-weight: var(--_typography---h4--h4-font-weight); letter-spacing: var(--_typography---h4--h4-letter-spacing); margin-top: 1rem; margin-bottom: .5rem;}
.text-rich-text h5 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h5--h5-font-size); line-height: var(--_typography---h5--h5-line-height); font-weight: var(--_typography---h5--h5-font-weight); letter-spacing: var(--_typography---h5--h5-letter-spacing); margin-top: 1rem; margin-bottom: .5rem;}
.text-rich-text h6 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h6--h6-font-size); line-height: var(--_typography---h6--h6-line-height); font-weight: var(--_typography---h6--h6-font-weight); letter-spacing: var(--_typography---h6--h6-letter-spacing); margin-top: 1rem; margin-bottom: .5rem;}
.text-rich-text li {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: 1.5; font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.text-rich-text blockquote {border-left: 3px solid var(--_semantics---border); font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---font-size--medium); font-style: italic; line-height: 1.3; font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 1em; margin-bottom: 1rem; padding: 1rem;}
.text-rich-text figcaption {opacity: .5; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--small); font-style: italic; line-height: 1.3; font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.text-rich-text ul {color: #333; margin-top: 0; margin-bottom: 10px; padding-left: 40px; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; list-style-type: disc;}
.text-rich-text h1 {font-family: var(--_ui-styles---fonts--heading); color: var(--_semantics---heading); font-size: var(--_typography---h1--h1-font-size); line-height: var(--_typography---h1--h1-line-height); font-weight: var(--_typography---h1--h1-font-weight); letter-spacing: var(--_typography---h1--h1-letter-spacing); margin-top: 1rem; margin-bottom: .5rem;}
.text-rich-text figure {margin-bottom: 20px;}
.text-rich-text img {width: 100%; min-width: 100%;}
.text-rich-text a {color: var(--_semantics---primary); font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); text-decoration: none;}
.text-rich-text a:hover {text-decoration: underline;}
.text-rich-text ol {font-size: var(--_typography---body--body-font-size); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 0; margin-bottom: 10px; padding-left: 40px; list-style-type: decimal;}
.text-rich-text strong {font-weight: 600;}
.subscribe-global {width: 100%; max-width: 21rem; margin-bottom: 0;}
.subscribe-global-form {z-index: 1; width: 100%; position: relative;}
.form_input {border: 1px solid var(--_primitives---opacity--neutral-dark-15); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); box-shadow: 0 2px 6px 0 var(--_ui-styles---shadow--shadow-5); outline-offset: 0px; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); outline: 0 #000001; height: auto; margin-top: 0; margin-bottom: 0; padding: .5rem .75rem; transition: border .35s, background-color .35s;}
.form_input:hover, .form_input:focus {border-color: var(--_semantics---border-active); background-color: var(--_semantics---background-default); outline-offset: 0px; outline: 0 #000001;}
.form_input::placeholder {color: var(--_primitives---opacity--neutral-dark-40); font-weight: 400;}
.form_input.subscribe-global-input {border-color: var(--_semantics---border); border-radius: var(--_sizes---border-radius--xlarge); height: 3.75rem; padding-right: 6.5rem;}
.form_input.subscribe-global-input:focus {border-color: var(--_semantics---border-active); background-color: var(--_semantics---background-default);}
.form_input.subscribe-cta-input {border-radius: var(--_sizes---border-radius--xlarge); color: var(--_semantics---text); height: 3.75rem; padding-right: 6.5rem;}
.form_input.subscribe-cta-input:focus {border-color: var(--_semantics---border-active); background-color: var(--_semantics---background-default);}
.form_input.is-text-area {min-height: 6.8rem; padding-top: .75rem;}
.subscribe-global-button-wrap {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); justify-content: center; align-items: center; padding: .37rem .5rem; display: flex; position: absolute; inset: 0% 0% 0% auto;}
.form_message-success-wrapper {border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); color: var(--_semantics---text); padding: 1rem; font-size: 16px; line-height: 1.2;}
.form_message-error-wrapper {border: 1px solid var(--_semantics---border-active); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-top: .6rem; padding: .75rem; font-size: 14px; font-weight: 400; line-height: 1.2;}
.subscribe-cta {width: 100%; max-width: 21rem; margin-bottom: 0;}
.subcribe-cta-form {z-index: 1; width: 100%; position: relative;}
.subscribe-cta-button-wrap {font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); justify-content: center; align-items: center; padding: .37rem .5rem; display: flex; position: absolute; inset: 0% 0% 0% auto;}
.features-image-wrap {z-index: 1; aspect-ratio: 1; border-radius: var(--_sizes---border-radius--medium); flex-flow: column; justify-content: flex-end; align-items: flex-start; width: 100%; display: flex; position: relative; overflow: hidden;}
.features-image {width: 100%; height: 100%;}
.features-image-bg {z-index: -1; background-color: #0000; position: absolute; inset: 0%;}
.features_small-image-wrap {object-fit: contain; width: 50%; padding: 2em; position: absolute;}
.features_small-image {object-fit: contain; width: 100%; display: none; position: relative;}
.integration_01-link {z-index: 1; aspect-ratio: 1; border: 1px solid var(--_semantics---primary-selected); border-radius: var(--_sizes---border-radius--small); background-color: var(--_primitives---neutral--neutral-50); opacity: 1; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; transition: opacity .4s; display: flex; position: relative; overflow: hidden;}
.integration_01-link:hover {opacity: .8;}
.integration_01-icon-holder {width: 60%;}
.integration_icon {aspect-ratio: 1; color: var(--_semantics---primary-selected); object-fit: contain; width: 100%; height: auto;}
.grid-content {width: 100%;}
.demo-ds-client-first-inside {grid-column-gap: 1rem; grid-row-gap: 1rem; background-color: #2d40ea0d; border: 1px dashed #2d40ea; border-radius: 12px; flex-direction: column; justify-content: center; align-items: flex-start; margin: 1rem; padding: 2em; display: flex;}
.form_label {opacity: .8; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); margin-bottom: .3rem; font-size: 14px; font-weight: 400; line-height: 1.2;}
.form_field-wrapper {grid-column-gap: .3rem; grid-row-gap: .3rem; flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; margin-bottom: 0; display: flex;}
.form_radio-icon {border: 1px solid var(--_semantics---border); background-color: var(--_semantics---background-default); border-radius: 50%; width: 16px; height: 16px; margin-top: 0; margin-left: -20px; transition: border .35s, background-color .35s;}
.form_radio-icon:hover {background-color: var(--_semantics---background-v2);}
.form_radio-label {color: var(--_semantics---text); margin-bottom: 0; margin-left: .3rem;}
.form_radio {justify-content: flex-start; align-items: center; display: flex;}
.form_checkbox-icon {border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--xsmall); background-color: var(--_semantics---background-default); width: 16px; height: 16px; margin-top: 0; margin-right: .3rem; transition: background-position .35s, background-color .35s;}
.form_checkbox-icon:hover {background-color: var(--_semantics---background-v2);}
.form_checkbox {flex-flow: row; justify-content: flex-start; align-items: center; margin-bottom: 0; padding-left: 1.25rem; display: flex;}
.form_form {grid-column-gap: var(--_sizes---gaps--regular); grid-row-gap: var(--_sizes---gaps--regular); flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; display: flex;}
.form_component {width: 100%; margin-bottom: 0;}
.hero-link {grid-column-gap: .5rem; grid-row-gap: .5rem; background-color: var(--_semantics---primary-selected); box-shadow: inset 0 -100px 5px 0 var(--_primitives---opacity--transparent); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---on-primary-selected); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; border-radius: 100px; flex-direction: row; justify-content: flex-start; align-items: center; padding: 2px .5rem; text-decoration: none; transition: box-shadow .4s, background-color .4s, color .4s; display: flex;}
.hero-link:hover {background-color: var(--_semantics---primary-selected); box-shadow: inset 0 -100px 5px 0 var(--_primitives---opacity--neutral-dark-10); color: var(--_semantics---on-primary-selected); text-decoration: none;}
.hero-white-link {grid-column-gap: .5rem; grid-row-gap: .5rem; border: 1px solid var(--_primitives---opacity--neutral-dark-10); background-color: var(--_semantics---background-default); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); text-transform: none; border-radius: 100px; flex-direction: row; justify-content: flex-start; align-items: center; padding: 1px .5rem; font-size: .85rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .4s, box-shadow .4s, background-color .4s, color .4s; display: flex;}
.hero-white-link:hover {border-color: var(--_semantics---border-active); text-decoration: none;}
.hero-link-badge-wrap-dark {grid-column-gap: .3rem; grid-row-gap: .3rem; background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); text-transform: none; border-radius: 100px; flex-direction: row; justify-content: center; align-items: center; height: 100%; margin-left: -.4rem; padding: .4rem .75rem; transition: box-shadow .4s, background-color .4s, color .4s; display: flex;}
.hero_link-arrow-black {justify-content: center; align-items: center; width: .85rem; height: 100%; display: flex;}
.notification_banner {grid-column-gap: 1rem; grid-row-gap: 1rem; background-color: var(--_semantics---primary-selected); color: var(--_semantics---on-primary-selected); flex-direction: row; justify-content: center; align-items: center; width: 100%; padding: .6rem 2rem; font-size: 14px; display: flex;}
.notification_banner.notification_side-center {justify-content: space-between;}
.hero_link-arrow {opacity: .8; justify-content: flex-start; align-items: center; width: .85rem; height: 100%; display: flex;}
.hero-link-badge-wrap {color: var(--_semantics---on-primary); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); background-color: #fff3; border-radius: 100px; flex-flow: row; justify-content: center; align-items: center; height: 100%; margin-left: -6px; padding: 6px 12px; display: flex;}
.hero-link-arrow-icon {font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); width: 100%; height: auto;}
.link-color {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none; transition: color .35s;}
.link-color:hover {color: var(--_semantics---primary); text-decoration: none;}
.text-style-link {z-index: 1; font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: .85rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color .4s; position: relative; overflow: hidden;}
.text-style-link:hover {color: var(--_semantics---primary); text-decoration: none;}
.text-style-link.link_footer {color: var(--_semantics---text);}
.text-style-link.link_footer:hover {color: var(--_semantics---primary);}
.link_wrap {justify-content: flex-start; align-items: flex-start; display: flex;}
.button-link-icon {color: inherit; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); width: auto; height: 17px;}
.tabs {flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; display: flex;}
.tabs-nav {grid-column-gap: 3px; border: 1px solid var(--_semantics---border); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-default); flex-direction: row; justify-content: flex-start; align-items: stretch; padding: 2px; line-height: 1; display: flex; overflow: hidden;}
.tabs-content {padding-top: var(--_sizes---spacing--large); width: 100%; overflow: visible;}
.tab-link {border: 0px none var(--_semantics---border); border-radius: var(--_sizes---border-radius--small); font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); background-color: #0000; justify-content: center; align-items: center; padding: .6rem 1rem; text-decoration: none; transition: all .35s; display: flex; position: relative;}
.tab-link:hover {opacity: .7; color: var(--_semantics---text); background-color: #0000; text-decoration: none;}
.tab-link.w--current {border: 1px none var(--_semantics---border); border-radius: var(--_sizes---border-radius--medium); background-color: var(--_semantics---background-invert); opacity: 1; color: var(--_semantics---text-invert);}
.tab-link.w--current:hover {opacity: 100;}
.tab-link.tab-link-active {border: 0px none var(--_semantics---border); background-color: var(--_semantics---background-invert); color: var(--_semantics---text-invert); font-size: var(--_typography---body--body-font-size); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.tab-link.tab-link-active:hover {opacity: 100;}
.tab_links-cms {grid-column-gap: 3px; grid-row-gap: 3px; flex-flow: row; justify-content: flex-start; align-items: center; display: flex;}
.tab-pane {width: 100%; overflow: visible;}
.modulify-dark-heros-container {background-color: #6d6d6d; padding: 1em;}
.text-size-medium {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---font-size--medium); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-bottom: 0;}
.text-size-medium.text-size-medium-hero {line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing);}
.text-size-medium.hero-description, .text-size-medium.hero-description-2nd {color: var(--_semantics---text);}
.button-link-active-icon {color: inherit; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); width: auto; height: 1rem;}
.tab-link-badge {border: 1px solid var(--_semantics---border); font-size: var(--_typography---font-size--small); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); border-radius: 100px; margin-bottom: 0; margin-left: 4px; padding: 3px 5px 2px; display: inline-block; position: relative; top: -1px;}
.button-icon {color: inherit; font-size: var(--_typography---body--body-font-size); font-weight: var(--_ui-styles---font-weight--medium); letter-spacing: var(--_typography---body--body-letter-spacing); width: auto; height: 1.06rem; display: none;}
.list-item-text {font-family: var(--_ui-styles---fonts--text); color: var(--_semantics---text); font-size: var(--_typography---body--body-font-size); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); margin-top: 0; margin-bottom: 0;}
.list_item-icon {grid-column-gap: .3rem; grid-row-gap: .3rem; border-radius: var(--_sizes---border-radius--xlarge); background-color: var(--_semantics---primary-selected); color: #fff; text-transform: none; background-image: url("https://cdn.prod.website-files.com/68ccc00c0d6007aaf74dbe7c/68ccc00c0d6007aaf74dbeae_White-Check.svg"); background-position: 50%; background-repeat: no-repeat; background-size: 14px; flex-direction: row; justify-content: center; align-items: center; width: 1.37rem; min-width: 1.37rem; height: 1.37rem; min-height: 1.37rem; font-weight: 500; transition: box-shadow .4s, background-color .4s, color .4s; display: flex;}
.list-holder {grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; flex-flow: column; width: 100%; display: flex;}
.list_item-icon-wrapper {flex-flow: column; justify-content: flex-start; align-items: flex-start; height: 100%; display: flex;}
.list-item-text-wrap {grid-column-gap: 3px; grid-row-gap: 3px; font-size: var(--_typography---body--body-font-size); line-height: var(--_typography---body--body-line-height); font-weight: var(--_typography---body--body-font-weight); letter-spacing: var(--_typography---body--body-letter-spacing); flex-flow: column; justify-content: center; align-items: flex-start; height: 100%; min-height: 1.5rem; display: flex;}
.list_item-with-icon {grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: row; justify-content: flex-start; align-items: stretch; width: 100%; display: flex;}
.icon-holder {justify-content: flex-start; align-items: center; width: 100%; height: auto; display: flex;}
.right-arrow {aspect-ratio: 1; object-fit: contain; width: 100%; height: auto;}
.right-arrow-wrap {flex-flow: row; justify-content: center; align-items: center; width: 100%; height: auto; display: flex;}
.plus-icon {color: var(--_semantics---primary-selected); width: 100%; height: 100%;}
.plus-icon-holder {justify-content: center; align-items: center; width: 100%; height: 100%; display: flex;}
.icon-height-small {color: var(--_semantics---primary-selected); height: 1rem;}
.icon-height-medium {color: var(--_semantics---primary-selected); height: 2rem;}
.icon-height-large {color: var(--_semantics---primary-selected); height: 3rem;}
.icon-1x1-small {color: var(--_semantics---primary-selected); width: 1.5rem; height: 1.5rem;}
.icon-1x1-medium {color: var(--_semantics---primary-selected); width: 2rem; height: 2rem;}
.icon-1x1-large {color: var(--_semantics---primary-selected); width: 2.5rem; height: 2.5rem;}
.icon-1x1-xxsmall {color: var(--_semantics---primary-selected); width: 1.2rem; height: 1.2rem;}
.hero-image-wrap {width: 100%; position: relative;}
.hero-image {border-radius: var(--_sizes---border-radius--small); width: 100%;}
.demo-fixed-bento {min-height: 5rem;}
.text-color-inherit {color: inherit;}
.social-icon {width: 100%; min-width: 100%; height: auto;}
.header-subtitle-overlays-wrap {font-size: 1em;}
#w-node-_3e505ca5-7d19-b20a-ad10-07687aace58b-f74dbe4d, #w-node-c2fc8e60-c576-6509-e7b1-37f498d9b511-f74dbe51, #w-node-_26915d64-f094-8d30-b8f4-b9405eab4057-f74dbe51, #w-node-fb6a47e8-c8c8-2b3d-5b36-b7cb881780a1-f74dbe51, #w-node-fb6a47e8-c8c8-2b3d-5b36-b7cb881780ab-f74dbe51 {grid-area: 1 / 2 / 2 / 10;}
#w-node-c737296e-2cb0-ef5a-0193-53969ad1f6f2-f74dbe51, #w-node-fbb92776-7391-dd8a-faba-0529be0e3ee5-f74dbe51, #w-node-_3242afd0-3399-3fbb-3906-54b2af07486e-f74dbe51, #w-node-bcaf16b5-efee-2026-fa76-3595ef870cbf-f74dbe51, #w-node-dad6a74c-f66a-0ec2-ca22-e0c68dc6213e-f74dbe51 {grid-area: span 1 / span 2 / span 1 / span 2;}
#w-node-_227d8f24-d87f-6416-e653-b301fdc745ee-f74dbe51 {grid-area: span 2 / span 1 / span 2 / span 1;}
#w-node-_227d8f24-d87f-6416-e653-b301fdc7461a-f74dbe51 {grid-area: span 1 / span 3 / span 1 / span 3;}
#w-node-_227d8f24-d87f-6416-e653-b301fdc74627-f74dbe51 {grid-area: span 2 / span 1 / span 2 / span 1;}
#w-node-_227d8f24-d87f-6416-e653-b301fdc74632-f74dbe51, #w-node-_227d8f24-d87f-6416-e653-b301fdc7463f-f74dbe51 {grid-area: span 1 / span 3 / span 1 / span 3;}
#w-node-_227d8f24-d87f-6416-e653-b301fdc7464c-f74dbe51, #w-node-_693778e7-8df7-3f33-9cfd-88fcd4275310-f74dbe51 {grid-area: span 2 / span 1 / span 2 / span 1;}
#w-node-_693778e7-8df7-3f33-9cfd-88fcd4275349-f74dbe51 {grid-area: span 1 / span 3 / span 1 / span 3;}
#w-node-_693778e7-8df7-3f33-9cfd-88fcd4275356-f74dbe51 {grid-area: span 2 / span 1 / span 2 / span 1;}
#w-node-_693778e7-8df7-3f33-9cfd-88fcd4275361-f74dbe51, #w-node-_693778e7-8df7-3f33-9cfd-88fcd427536e-f74dbe51 {grid-area: span 1 / span 3 / span 1 / span 3;}
#w-node-_693778e7-8df7-3f33-9cfd-88fcd427537b-f74dbe51 {grid-area: span 2 / span 1 / span 2 / span 1;}