/* Vasy page – whole page, one stylesheet (all four screen ranges).
   Lives inside a Shadow DOM: it cannot change your page, and your page's CSS
   (Bootstrap, style-new.css …) cannot change it. */
/* Vasy home page – one stylesheet for every screen size.
   Rules shared by all screens are written plainly; screen-specific rules sit in
   media queries for the four design ranges:
     desktop  ≥ 1600px · laptop 1024–1599px · tablet 600–1023px · mobile < 600px */
:host {
   all: initial;
   display: block;
   font-family: 'Outfit', 'Instrument Sans', system-ui, sans-serif;
   color: #2E2E2E;
   background: #FFFFFF;
   overflow-x: clip
}

a {
   color: #0F6D99
}

a:hover {
   color: #0F6D99
}

.page-root {
   --e: cubic-bezier(.2, 0, 0, 1)
}

.page-root *:focus-visible {
   outline: 2px solid #22A7E0;
   outline-offset: 2px
}

.page-root .nav-bar,
.page-root .chart-bar {
   opacity: 0;
   transform: translateY(-8px);
   background-color: rgba(255, 255, 255, 0);
   border: 1px solid transparent;
   box-shadow: none;
   transition: opacity 240ms var(--e), transform 240ms var(--e), background-color 240ms var(--e), border-color 240ms var(--e), box-shadow 240ms var(--e)
}

.page-root.is-ready .nav-bar,
.page-root.is-ready .chart-bar {
   opacity: 1;
   transform: none
}

@media (min-width: 1024px) {

   .page-root .nav-bar.is-floating,
   .page-root .nav-bar.is-menu-open {
      background-color: #FFFFFF;
      border-color: #E4E8ED;
      box-shadow: 0 4px 12px rgba(46, 46, 46, .08)
   }
}

@media (max-width: 1023.98px) {
   .page-root .nav-bar.is-floating {
      background-color: #FFFFFF;
      border-color: #E4E8ED;
      box-shadow: 0 4px 12px rgba(46, 46, 46, .08)
   }
}

.page-root.is-ready .nav-bar.is-hidden {
   transform: translateY(-120px)
}

.page-root .menu-item-rise {
   display: inline-flex;
   opacity: 0;
   transform: translateY(-8px);
   transition: opacity 240ms var(--e), transform 240ms var(--e)
}

.page-root.is-ready .menu-item-rise {
   opacity: 1;
   transform: none
}

@media (min-width: 1024px) {
   .page-root .nav-link {
      appearance: none;
      background: none;
      border: 0;
      margin: 0;
      cursor: pointer;
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 40px;
      padding: 0 16px;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      color: #2E2E2E;
      text-decoration: none;
      border-radius: 10px
   }

   .page-root .nav-link:hover {
      color: #2E2E2E
   }

   .page-root .nav-link .nav-chevron {
      display: block;
      transition: transform 180ms var(--e)
   }

   .page-root .nav-link.is-active .nav-chevron {
      transform: translateY(2px)
   }

   .page-root .nav-pill {
      position: absolute;
      top: 0;
      left: 0;
      height: 40px;
      border-radius: 10px;
      background: #F4F6F8;
      border: 1px solid #E4E8ED;
      box-sizing: border-box;
      opacity: 0;
      pointer-events: none;
      transition: opacity 120ms var(--e), transform 180ms var(--e), width 180ms var(--e)
   }

   .page-root .nav-pill.is-active {
      opacity: 1
   }

   .page-root .nav-pill.snap-scroll {
      transition: opacity 120ms var(--e)
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .menu-toggle-button {
      appearance: none;
      position: relative;
      width: 48px;
      height: 48px;
      margin: 0;
      padding: 0;
      border-radius: 10px;
      border: 1px solid #E4E8ED;
      background: #FFFFFF;
      cursor: pointer;
      transition: background-color 120ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .menu-toggle-button {
      appearance: none;
      position: relative;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      border-radius: 10px;
      border: 1px solid #E4E8ED;
      background: #FFFFFF;
      cursor: pointer;
      transition: background-color 120ms var(--e)
   }
}

@media (max-width: 1023.98px) {
   .page-root .menu-toggle-button:hover {
      background: #F4F6F8
   }

   .page-root .menu-toggle-button .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -10px 0 0 -10px;
      display: block;
      transition: opacity 180ms var(--e), transform 180ms var(--e)
   }

   .page-root .menu-toggle-button .icon-close {
      opacity: 0;
      transform: translateY(-4px)
   }

   .page-root .menu-toggle-button.is-open .icon-menu {
      opacity: 0;
      transform: translateY(4px)
   }

   .page-root .menu-toggle-button.is-open .icon-close {
      opacity: 1;
      transform: none
   }
}

@media (min-width: 600px) {
   .page-root .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
      padding: 14px 20px;
      box-sizing: border-box;
      border-radius: 10px;
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 120ms var(--e), color 120ms var(--e), border-color 120ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 44px;
      padding: 12px 16px;
      box-sizing: border-box;
      border-radius: 10px;
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 120ms var(--e), color 120ms var(--e), border-color 120ms var(--e)
   }
}

.page-root .button-primary {
   background: #22A7E0;
   color: #FFFFFF;
   border: 1px solid #22A7E0
}

.page-root .button-primary:hover {
   background: #FFFFFF;
   color: #22A7E0
}

.page-root .button-secondary {
   background: #FFFFFF;
   color: #2E2E2E;
   border: 1px solid #D9DEE5
}

.page-root .button-secondary:hover {
   background: #F4F6F8;
   color: #2E2E2E
}

.page-root .button-secondary:active {
   background: #D9DEE5
}

@media (min-width: 1024px) {
   .page-root .button-dark {
      background: transparent;
      color: #FFFFFF;
      border: 1px solid #FFFFFF
   }

   .page-root .button-dark:hover {
      background: #FFFFFF;
      color: #2E2E2E
   }
}

@media (min-width: 600px) {
   .page-root .button .button-arrow {
      display: block;
      transition: transform 120ms var(--e)
   }

   .page-root .button:hover .button-arrow {
      transform: translateX(2px)
   }
}

@media (min-width: 1024px) {
   .page-root .dropdown-wrapper {
      position: absolute;
      top: 100%;
      left: -1px;
      right: -1px;
      padding-top: 8px;
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity 180ms var(--e), transform 180ms var(--e)
   }

   .page-root .dropdown-wrapper.is-open {
      opacity: 1;
      transform: none;
      pointer-events: auto
   }

   .page-root .dropdown {
      position: relative;
      box-sizing: border-box;
      padding: 24px;
      background: #FFFFFF;
      border: 1px solid #E4E8ED;
      border-radius: 14px;
      box-shadow: 0 12px 32px rgba(46, 46, 46, .12)
   }

   .page-root .menu-panel,
   .page-root .menu-pane {
      position: absolute;
      top: 24px;
      left: 24px;
      right: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms var(--e)
   }

   .page-root .menu-pane {
      top: 0;
      left: 0;
      right: 0
   }

   .page-root .menu-panel.is-active,
   .page-root .menu-pane.is-active {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      opacity: 1;
      pointer-events: auto
   }
}

@media (min-width: 1600px) {
   .page-root .section-band {
      animation: none
   }
}

@media (min-width: 1024px) {

   .page-root .menu-panel.is-active .section-band,
   .page-root .menu-pane.is-active .section-band {
      animation: fadeIn 180ms var(--e) both
   }

   .page-root .card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      border: 1px solid #E4E8ED;
      border-radius: 10px;
      background: #FFFFFF;
      text-decoration: none;
      transition: background-color 120ms var(--e), border-color 120ms var(--e)
   }
}

@media (max-width: 1023.98px) {
   .page-root .menu-scrim {
      appearance: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: rgba(46, 46, 46, .4);
      opacity: 0;
      pointer-events: none;
      z-index: 5;
      cursor: default;
      transition: opacity 240ms var(--e)
   }

   .page-root .menu-scrim.is-open {
      opacity: 1;
      pointer-events: auto
   }

   .page-root .mobile-menu-wrapper {
      position: absolute;
      top: 100%;
      left: -1px;
      right: -1px;
      padding-top: 8px;
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 240ms var(--e), transform 240ms var(--e)
   }

   .page-root .mobile-menu-wrapper.is-open {
      opacity: 1;
      transform: none;
      pointer-events: auto
   }

   .page-root .mobile-menu-panel {
      box-sizing: border-box;
      overflow-y: auto;
      background: #FFFFFF;
      border: 1px solid #E4E8ED;
      border-radius: 14px;
      box-shadow: 0 12px 32px rgba(46, 46, 46, .12)
   }

   .page-root .menu-row {
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 240ms var(--e), transform 240ms var(--e)
   }

   .page-root .mobile-menu-wrapper.is-open .menu-row {
      opacity: 1;
      transform: none
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .drawer-accordion {
      appearance: none;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      font: inherit;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      color: #2E2E2E;
      text-align: left;
      text-decoration: none;
      transition: color 120ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .drawer-accordion {
      appearance: none;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      font: inherit;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      color: #2E2E2E;
      text-align: left;
      text-decoration: none;
      transition: color 120ms var(--e)
   }
}

@media (max-width: 1023.98px) {
   .page-root .drawer-accordion:hover {
      color: #2E2E2E
   }

   .page-root .drawer-accordion.is-active {
      color: #0F6D99
   }

   .page-root .drawer-accordion .vertical-line,
   .page-root .drawer-subaccordion .vertical-line {
      transition: opacity 180ms var(--e)
   }

   .page-root .drawer-accordion.is-active .vertical-line,
   .page-root .drawer-subaccordion.is-active .vertical-line {
      opacity: 0
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .drawer-subaccordion {
      appearance: none;
      width: 100%;
      margin: 0;
      padding: 0 16px;
      border: 0;
      border-radius: 10px;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #2E2E2E;
      text-align: left;
      transition: background-color 120ms var(--e), color 120ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .drawer-subaccordion {
      appearance: none;
      width: 100%;
      margin: 0;
      padding: 0 8px;
      border: 0;
      border-radius: 10px;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #2E2E2E;
      text-align: left;
      transition: background-color 120ms var(--e), color 120ms var(--e)
   }
}

@media (max-width: 1023.98px) {
   .page-root .drawer-subaccordion:hover {
      background: #F4F6F8
   }

   .page-root .drawer-subaccordion.is-active {
      color: #0F6D99
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .drawer-segment {
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 56px;
      margin: 0;
      padding: 8px 16px;
      border: 1px solid #E4E8ED;
      border-radius: 10px;
      background: #FFFFFF;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #2E2E2E;
      cursor: pointer;
      transition: background-color 180ms var(--e), color 180ms var(--e), border-color 180ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .drawer-segment {
      appearance: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 72px;
      margin: 0;
      padding: 8px;
      border: 1px solid #E4E8ED;
      border-radius: 10px;
      background: #FFFFFF;
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #2E2E2E;
      cursor: pointer;
      transition: background-color 180ms var(--e), color 180ms var(--e), border-color 180ms var(--e)
   }
}

@media (max-width: 1023.98px) {
   .page-root .drawer-segment .drawer-segment-icon {
      filter: brightness(0) saturate(100%);
      opacity: .8;
      transition: filter 180ms var(--e), opacity 180ms var(--e)
   }

   .page-root .drawer-segment.is-active {
      background: #2E2E2E;
      border-color: #2E2E2E;
      color: #FFFFFF
   }

   .page-root .drawer-segment.is-active .drawer-segment-icon {
      filter: brightness(0) invert(1);
      opacity: 1
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;
      border: 1px solid #E4E8ED;
      border-radius: 10px;
      background: #FFFFFF;
      text-decoration: none;
      animation: subIn 180ms var(--e) both;
      transition: background-color 120ms var(--e), border-color 120ms var(--e)
   }
}

@media (min-width: 600px) {
   .page-root .card:hover {
      background: #F4F6F8;
      border-color: #D9DEE5
   }
}

@media (min-width: 1024px) {

   .page-root .menu-panel.is-active .card,
   .page-root .menu-pane.is-active .card {
      animation: cardIn 240ms var(--e) both
   }

   .page-root .card .icon {
      filter: brightness(0) saturate(100%);
      opacity: .8;
      transition: filter 120ms var(--e), opacity 120ms var(--e)
   }

   .page-root .card:hover .icon,
   .page-root .card:focus-visible .icon {
      filter: none;
      opacity: 1
   }

   .page-root .menu-panel.is-active .menu-banner,
   .page-root .menu-pane.is-active .menu-banner {
      animation: cardIn 240ms var(--e) 120ms both
   }

   .page-root .hero-chart-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0;
      transition: opacity 240ms var(--e)
   }

   .page-root .hero-chart-item.is-active {
      opacity: 1
   }

   .page-root .menu-side-heading {
      appearance: none;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      height: 40px;
      margin: 0;
      padding: 0 16px;
      border: 0;
      border-radius: 10px;
      background: none;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #2E2E2E;
      text-align: left;
      cursor: pointer;
      transition: background-color 120ms var(--e), color 120ms var(--e)
   }

   .page-root .menu-side-heading:hover {
      background: #F4F6F8
   }

   .page-root .menu-side-heading .drawer-segment-icon {
      filter: brightness(0) saturate(100%);
      opacity: .8
   }

   .page-root .menu-side-heading.is-current {
      color: #0F6D99
   }

   .page-root .menu-side-heading.is-current .drawer-segment-icon {
      filter: none;
      opacity: 1
   }

   .page-root .menu-category {
      appearance: none;
      display: block;
      width: 100%;
      margin: 0;
      padding: 8px 16px 8px 42px;
      border: 0;
      border-radius: 10px;
      background: none;
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: #5B6472;
      text-align: left;
      cursor: pointer;
      animation: cardIn 180ms var(--e) both;
      transition: background-color 120ms var(--e), color 120ms var(--e)
   }

   .page-root .menu-category:hover {
      background: #F4F6F8;
      color: #2E2E2E
   }

   .page-root .menu-category.is-active {
      background: #F4F6F8;
      color: #0F6D99;
      font-weight: 500
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .card .icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: block;
      filter: brightness(0) saturate(100%);
      opacity: .8;
      transition: filter 120ms var(--e), opacity 120ms var(--e)
   }

   .page-root .card:hover .icon {
      filter: none;
      opacity: 1
   }
}

@media (max-width: 599.98px) {
   .page-root .submenu-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 8px;
      border-radius: 10px;
      font-size: 16px;
      line-height: 24px;
      color: #5B6472;
      text-decoration: none;
      animation: subIn 180ms var(--e) both;
      transition: background-color 120ms var(--e), color 120ms var(--e)
   }

   .page-root .submenu-item:hover {
      background: #F4F6F8;
      color: #2E2E2E
   }

   .page-root .submenu-item .icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: block;
      filter: brightness(0) saturate(100%);
      opacity: .8;
      transition: filter 120ms var(--e), opacity 120ms var(--e)
   }

   .page-root .submenu-item:hover .icon {
      filter: none;
      opacity: 1
   }
}

@media (max-width: 1023.98px) {
   .page-root .submenu-fade {
      animation: subIn 180ms var(--e) both
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .explore-card {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border: 1px solid #E4E8ED;
      border-radius: 10px;
      background: #F4F6F8;
      text-decoration: none;
      animation: subIn 180ms var(--e) both;
      transition: border-color 120ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .explore-card {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 8px;
      padding: 16px;
      border: 1px solid #E4E8ED;
      border-radius: 10px;
      background: #F4F6F8;
      text-decoration: none;
      animation: subIn 180ms var(--e) both;
      transition: border-color 120ms var(--e)
   }
}

@media (max-width: 1023.98px) {
   .page-root .explore-card:hover {
      border-color: #D9DEE5
   }

   .page-root .explore-card .explore-arrow {
      transition: transform 120ms var(--e)
   }

   .page-root .explore-card:hover .explore-arrow {
      transform: translateX(2px)
   }
}

.page-root .eyebrow-label {
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 10px;
   line-height: 14px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #8A93A1
}

@keyframes cardIn {
   from {
      opacity: 0;
      transform: translateY(4px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes subIn {
   from {
      opacity: 0;
      transform: translateY(-4px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.page-root .reveal-on-scroll {
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 320ms var(--e), transform 320ms var(--e)
}

.page-root .reveal-on-scroll.is-visible {
   opacity: 1;
   transform: none
}

.page-root .highlight,
.page-root .divider {
   will-change: transform, opacity
}

.page-root .text {
   grid-area: 1 / 1;
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms var(--e)
}

.page-root .text.is-active {
   opacity: 1;
   pointer-events: auto
}

.page-root .text .title-item {
   opacity: 0
}

.page-root.is-ready .text.is-active .title-item {
   animation: inUp 320ms var(--e) both
}

.page-root .is-shown {
   grid-area: 1 / 1;
   opacity: 0;
   transform: translateY(8px);
   pointer-events: none;
   transition: opacity 240ms var(--e), transform 240ms var(--e)
}

.page-root.is-ready .is-shown.is-active {
   opacity: 1;
   transform: none;
   pointer-events: auto
}

.page-root .chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 32px;
   padding: 0 16px;
   border-radius: 999px;
   background: #FFFFFF;
   border: 1px solid #E4E8ED;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #2E2E2E
}

.page-root .chip.vina-chip {
   border-color: #DFEEE6;
   background: #F2F9F5;
   color: #2C4A3C
}

.page-root .button-ghost {
   background: #1F4D3F;
   color: #FFFFFF;
   border: 1px solid #1F4D3F
}

.page-root .button-ghost:hover {
   background: #FFFFFF;
   color: #1F4D3F
}

.page-root .button-ghost-small {
   background: #FFFFFF;
   color: #1F4D3F;
   border: 1px solid #DFEEE6
}

.page-root .button-ghost-small:hover {
   background: #F2F9F5;
   color: #1F4D3F
}

.page-root .dot-button {
   appearance: none;
   display: inline-flex;
   align-items: center;
   height: 44px;
   padding: 0 4px;
   margin: 0;
   border: 0;
   background: none;
   cursor: pointer
}

.page-root .progress-track {
   position: relative;
   display: block;
   width: 32px;
   height: 4px;
   border-radius: 999px;
   background: #D9DEE5;
   overflow: hidden
}

.page-root .progress-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #2E2E2E;
   transform: translateX(-101%)
}

.page-root .progress-fill.is-running {
   transform: none;
   transition-property: transform;
   transition-timing-function: linear
}

.page-root .kpi-chart {
   position: absolute;
   left: 0;
   top: 0;
   box-sizing: border-box;
   padding: 12px 16px;
   background: #FFFFFF;
   border: 1px solid #E4E8ED;
   border-radius: 14px;
   will-change: transform
}

.page-root .key-value {
   display: block
}

.page-root .key-value.kpi-first {
   animation: kvA 240ms var(--e) both
}

.page-root .key-value.kpi-second {
   animation: kvB 240ms var(--e) both
}

.page-root .dot-left-large {
   width: 6px;
   height: 6px;
   border-radius: 999px;
   background: #22A7E0;
   opacity: 0;
   transition: opacity 180ms var(--e)
}

.page-root .dot-left-large.is-active {
   opacity: 1
}

.page-root .vina-chat {
   background: #FFFFFF;
   border: 1px solid #DFEEE6;
   border-radius: 14px;
   box-shadow: 0 12px 32px rgba(44, 74, 60, .12);
   overflow: hidden;
   transition: opacity 240ms var(--e)
}

.page-root .vina-chat.is-leaving {
   opacity: 0
}

.page-root .vina-chat-input {
   animation: inUp 240ms var(--e) both
}

.page-root .suggestion {
   padding: 16px;
   border: 1px solid #DFEEE6;
   border-radius: 10px;
   background: #FFFFFF;
   animation: inUp 240ms var(--e) both
}

.page-root .vina-bubble {
   align-self: flex-end;
   max-width: 80%;
   padding: 8px 16px;
   border-radius: 16px 16px 6px 16px;
   background: #2C4A3C;
   color: #FFFFFF;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   animation: inUp 240ms var(--e) both
}

.page-root .dashboard-restock-item {
   padding: 16px;
   border-radius: 10px;
   background: #F2F9F5;
   border: 1px solid #DFEEE6;
   animation: inUp 240ms var(--e) both
}

.page-root .row-label {
   font-size: 10px;
   font-weight: 600;
   line-height: 14px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: #7D968C
}

.page-root .row-step {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   line-height: 24px;
   color: #7D968C;
   animation: inUp 180ms var(--e) both
}

.page-root .dot-right-large {
   width: 8px;
   height: 8px;
   border-radius: 999px;
   background: #DFEEE6;
   flex-shrink: 0
}

.page-root .row-step.is-current .dot-right-large {
   background: #3B7A5E
}

.page-root .row-step.is-current {
   color: #2C4A3C
}

.page-root .kpi {
   padding: 8px 16px;
   border: 1px solid #DFEEE6;
   border-radius: 10px;
   animation: inUp 240ms var(--e) both
}

.page-root .product-row {
   padding: 16px;
   background: #FFFFFF;
   border: 1px solid #DFEEE6;
   border-radius: 14px;
   box-shadow: 0 4px 12px rgba(44, 74, 60, .08);
   animation: inUp 240ms var(--e) both
}

.page-root .vina-input-caret {
   display: inline-block;
   width: 1px;
   height: 16px;
   margin-left: 1px;
   background: #2C4A3C;
   vertical-align: -3px;
   animation: blink 900ms steps(1) infinite
}

.page-root .stage {
   grid-area: 1 / 1;
   opacity: 0;
   transform: translateY(8px);
   pointer-events: none;
   transition: opacity 240ms var(--e), transform 240ms var(--e)
}

.page-root .stage.is-active {
   opacity: 1;
   transform: none
}

.page-root .financial-year-row .chart-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #2E2E2E;
   transform: translateX(-101%)
}

.page-root .stage.is-active .financial-year-row .chart-bar {
   animation: fillIn 360ms var(--e) both
}

.page-root .financial-year-row .check-mark {
   opacity: 0
}

.page-root .stage.is-active .financial-year-row .check-mark {
   animation: fadeIn 180ms var(--e) both
}

.page-root .pill-mobile {
   position: absolute;
   left: 0;
   top: 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 32px;
   padding: 0 16px;
   border-radius: 999px;
   background: #FFFFFF;
   border: 1px solid #E4E8ED;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #2E2E2E;
   white-space: nowrap;
   opacity: 0
}

.page-root .stage.is-active .pill-mobile {
   animation: inUp 240ms var(--e) both
}

.page-root .stage .line-label {
   opacity: 0
}

.page-root .stage.is-active .line-label {
   animation: fadeIn 240ms var(--e) both
}

.page-root .erp-flow {
   position: absolute;
   left: 0;
   top: 0;
   width: 6px;
   height: 6px;
   margin: -3px 0 0 -3px;
   border-radius: 999px;
   background: #8A93A1;
   opacity: 0
}

.page-root .stage.is-active .erp-flow {
   animation: flowIn 900ms linear infinite
}

.page-root .erp-core {
   opacity: 0
}

.page-root .stage.is-active .erp-core {
   animation: fadeIn 240ms var(--e) 480ms both
}

.page-root .dashboard-tile {
   padding: 16px;
   border: 1px solid #E4E8ED;
   border-radius: 10px;
   background: #FFFFFF;
   opacity: 0
}

.page-root .stage.is-active .dashboard-tile {
   animation: inUp 240ms var(--e) both
}

@keyframes inUp {
   from {
      opacity: 0;
      transform: translateY(8px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes kvA {
   from {
      opacity: 0;
      transform: translateY(4px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes kvB {
   from {
      opacity: 0;
      transform: translateY(4px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes fillIn {
   from {
      transform: translateX(-101%)
   }

   to {
      transform: none
   }
}

@keyframes flowIn {
   0% {
      opacity: 0;
      left: 100%
   }

   15% {
      opacity: 1
   }

   85% {
      opacity: 1
   }

   100% {
      opacity: 0;
      left: 0%
   }
}

@keyframes blink {
   0% {
      opacity: 1
   }

   50% {
      opacity: 0
   }
}

@media (min-width: 1024px) {
   .page-root .client-logo-slot {
      position: relative;
      height: 80px;
      overflow: hidden
   }

   .page-root .client-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 140px;
      height: 40px;
      margin: -20px 0 0 -70px;
      object-fit: contain;
      display: block;
      opacity: 0;
      transform: translateY(80px)
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .client-logo-slot {
      position: relative;
      height: 72px;
      overflow: hidden
   }

   .page-root .client-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 128px;
      height: 36px;
      margin: -18px 0 0 -64px;
      object-fit: contain;
      display: block;
      opacity: 0;
      transform: translateY(72px)
   }
}

@media (max-width: 599.98px) {
   .page-root .kpi-chart {
      padding: 8px;
      border-radius: 10px
   }

   .page-root .suggestion {
      padding: 8px
   }

   .page-root .vina-bubble {
      max-width: 85%;
      padding: 8px 12px;
      font-size: 13px;
      line-height: 18px
   }

   .page-root .dashboard-restock-item {
      padding: 12px
   }

   .page-root .row-step {
      font-size: 13px;
      line-height: 20px
   }

   .page-root .dot-right-large {
      width: 6px;
      height: 6px
   }

   .page-root .kpi {
      padding: 8px
   }

   .page-root .vina-input-caret {
      height: 14px;
      vertical-align: -2px
   }

   .page-root .pill-mobile {
      gap: 4px;
      height: 26px;
      padding: 0 10px;
      font-size: 12px;
      line-height: 16px
   }

   .page-root .erp-flow {
      width: 4px;
      height: 4px;
      margin: -2px 0 0 -2px
   }

   .page-root .dashboard-tile {
      padding: 8px 12px
   }

   .page-root .client-logo-slot {
      position: relative;
      width: 108px;
      height: 56px;
      overflow: hidden
   }

   .page-root .client-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 28px;
      margin: -14px 0 0 -50px;
      object-fit: contain;
      display: block;
      opacity: 0;
      transform: translateY(56px)
   }
}

.page-root .client-logo.is-active {
   opacity: 1;
   transform: none;
   transition: transform 400ms var(--e), opacity 400ms var(--e)
}

@media (min-width: 1024px) {
   .page-root .client-logo.is-leaving {
      opacity: 0;
      transform: translateY(-80px);
      transition: transform 400ms var(--e), opacity 400ms var(--e)
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .client-logo.is-leaving {
      opacity: 0;
      transform: translateY(-72px);
      transition: transform 400ms var(--e), opacity 400ms var(--e)
   }
}

@media (max-width: 599.98px) {
   .page-root .client-logo.is-leaving {
      opacity: 0;
      transform: translateY(-56px);
      transition: transform 400ms var(--e), opacity 400ms var(--e)
   }
}

.page-root .split-heading .word {
   display: inline-block;
   margin-right: .26em;
   white-space: nowrap
}

.page-root .split-heading .char {
   display: inline-block;
   opacity: 0;
   filter: blur(8px);
   transform: translateY(6px)
}

.page-root .split-heading.is-visible .char {
   opacity: 1;
   filter: blur(0);
   transform: none;
   transition: opacity 400ms var(--e), filter 400ms var(--e), transform 400ms var(--e)
}

.page-root .financial-year-item {
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 320ms var(--e), transform 320ms var(--e)
}

.page-root .financial-year-item.is-active {
   opacity: 1;
   transform: none
}

.page-root .financial-year-item .check-icon path {
   stroke-dasharray: 24;
   stroke-dashoffset: 24
}

.page-root .financial-year-item.is-active .check-icon path {
   stroke-dashoffset: 0;
   transition: stroke-dashoffset 200ms var(--e) 160ms
}

.page-root .financial-year-ring {
   stroke-dasharray: 283;
   stroke-dashoffset: 283;
   animation: fillBorder 3s ease-in-out infinite
}

.page-root .scroll-hint-chevron {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   animation: chev 3s ease-out infinite
}

@keyframes fillBorder {
   0% {
      stroke-dashoffset: 283
   }

   90% {
      stroke-dashoffset: 28.3
   }

   100% {
      stroke-dashoffset: 283
   }
}

@keyframes chev {
   0% {
      opacity: 0;
      transform: translateX(0)
   }

   25% {
      opacity: 1
   }

   33.3% {
      opacity: 1;
      transform: translateX(12px)
   }

   66.6% {
      opacity: 1;
      transform: translateX(19px)
   }

   100% {
      opacity: 0;
      transform: translateX(30px)
   }
}

.page-root .financial-year-item {
   position: relative;
   padding: 12px 12px 12px 44px;
   border-radius: 10px;
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 400ms var(--e), transform 400ms var(--e), background-color 120ms var(--e)
}

.page-root .financial-year-item.is-active {
   opacity: 1;
   transform: none
}

.page-root .financial-year-item.financial-year-problem::before {
   content: '';
   position: absolute;
   left: 16px;
   top: 18px;
   width: 12px;
   height: 12px;
   border-radius: 999px;
   background: #BC6767
}

.page-root .financial-year-item.financial-year-problem:hover {
   background: #FEEFEF
}

.page-root .financial-year-item.financial-year-solution {
   padding-left: 56px
}

.page-root .financial-year-item.financial-year-solution .financial-year-solution-mark {
   position: absolute;
   left: 12px;
   top: 9px;
   width: 30px;
   height: 30px;
   border-radius: 999px;
   background: #EBFFEE;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 120ms var(--e)
}

.page-root .financial-year-item.financial-year-solution:hover {
   background: #EBFFEE
}

.page-root .financial-year-item.financial-year-solution:hover .financial-year-solution-mark {
   background: #D0FFD7
}

.page-root .financial-year-counter {
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 12px;
   line-height: 16px;
   padding: 4px 10px;
   border-radius: 999px;
   font-variant-numeric: tabular-nums
}

.page-root a.button {
   position: relative;
   z-index: 1
}

.page-root a.button.button-primary:hover {
   background: #FFFFFF;
   color: #22A7E0;
   border-color: #22A7E0
}

@media (min-width: 1024px) {

   .page-root .dropdown-wrapper:not(.is-open),
   .page-root .dropdown-wrapper:not(.is-open) * {
      pointer-events: none !important
   }

   .page-root a.button.button-primary:hover,
   .page-root a.button.button-primary:focus-visible {
      background: #FFFFFF;
      color: #22A7E0;
      border-color: #22A7E0
   }
}

.page-root .solution-slide {
   grid-area: 1 / 1;
   pointer-events: none
}

.page-root .solution-slide.is-active {
   pointer-events: auto
}

.page-root .solution-slide .solution-slide-text {
   opacity: 0;
   transform: translateX(40px);
   transition: opacity 320ms var(--e), transform 400ms var(--e)
}

.page-root .solution-slide.is-previous .solution-slide-text {
   transform: translateX(-40px)
}

.page-root .solution-slide.is-active .solution-slide-text {
   opacity: 1;
   transform: none
}

.page-root .solution-slide.is-active .solution-slide-text:nth-child(2) {
   transition-delay: 60ms
}

.page-root .solution-slide.is-active .solution-slide-text:nth-child(3) {
   transition-delay: 120ms
}

.page-root .solution-slide.is-active .solution-slide-text:nth-child(4) {
   transition-delay: 180ms
}

.page-root .label-pill {
   position: relative;
   display: inline-flex;
   align-items: center;
   height: 32px;
   padding: 0 16px;
   border-radius: 999px;
   background: #FFFFFF;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #0F6D99;
   white-space: nowrap
}

.page-root .label-svg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
   pointer-events: none
}

.page-root .label-run {
   stroke-dasharray: 22 78;
   stroke-dashoffset: 100;
   animation: lblRun 2.8s linear infinite
}

@keyframes lblRun {
   from {
      stroke-dashoffset: 100
   }

   to {
      stroke-dashoffset: 0
   }
}

.page-root .view-more-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   color: #0F6D99;
   text-decoration: none
}

.page-root .view-more-link:hover {
   color: #0F6D99
}

.page-root .view-more-icon {
   position: relative;
   display: block;
   width: 28px;
   height: 28px;
   border-radius: 999px;
   background: #F4F6F8;
   overflow: hidden;
   transition: background-color 120ms var(--e)
}

.page-root .view-more-link:hover .view-more-icon {
   background: #D9DEE5
}

.page-root .view-more-icon svg {
   position: absolute;
   left: 6px;
   top: 6px;
   transition: transform 240ms var(--e)
}

.page-root .view-more-icon .arrow-enter {
   transform: translate(-20px, 20px)
}

.page-root .view-more-link:hover .view-more-icon .arrow-exit,
.page-root .view-more-link:focus-visible .view-more-icon .arrow-exit {
   transform: translate(20px, -20px)
}

.page-root .view-more-link:hover .view-more-icon .arrow-enter,
.page-root .view-more-link:focus-visible .view-more-icon .arrow-enter {
   transform: none
}

.page-root .industries-tab {
   appearance: none;
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   margin: 0;
   padding: 16px;
   border: 0;
   border-radius: 10px;
   background: transparent;
   font: inherit;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   color: #5B6472;
   text-align: left;
   cursor: pointer;
   transition: background-color 120ms var(--e), color 120ms var(--e)
}

.page-root .industries-tab:hover {
   background: #F4F6F8;
   color: #2E2E2E
}

.page-root .industries-tab.is-active {
   background: #F4F6F8;
   color: #0F6D99
}

.page-root .industries-page {
   grid-area: 1 / 1;
   display: grid;
   align-content: start;
   pointer-events: none
}

.page-root .industries-page.is-active {
   pointer-events: auto
}

.page-root .industries-card-content {
   opacity: 0;
   transform: translateX(32px);
   transition: opacity 280ms var(--e), transform 360ms var(--e)
}

.page-root .industries-page.is-previous .industries-card-content {
   transform: translateX(-32px)
}

.page-root .industries-page.is-active .industries-card-content {
   opacity: 1;
   transform: none
}

.page-root .industries-page.is-active .industries-card-content:nth-child(2) {
   transition-delay: 40ms
}

.page-root .industries-page.is-active .industries-card-content:nth-child(3) {
   transition-delay: 80ms
}

.page-root .industries-page.is-active .industries-card-content:nth-child(4) {
   transition-delay: 120ms
}

.page-root .industries-page.is-active .industries-card-content:nth-child(5) {
   transition-delay: 160ms
}

.page-root .industries-page.is-active .industries-card-content:nth-child(6) {
   transition-delay: 200ms
}

.page-root .industries-card {
   display: flex;
   flex-direction: column;
   gap: 8px;
   height: 100%;
   box-sizing: border-box;
   padding: 16px;
   border: 1px solid rgba(122, 144, 164, .18);
   border-radius: 10px;
   background: rgba(255, 255, 255, .9);
   text-decoration: none;
   box-shadow: 0 5px 15px rgba(35, 64, 87, .035);
   transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease
}

.page-root .industries-card:hover,
.page-root .industries-card:focus-visible {
   background: #FFFFFF;
   border-color: rgba(38, 162, 220, .35);
   transform: translateY(-4px);
   box-shadow: 0 12px 24px rgba(38, 162, 220, .12)
}

.page-root .industries-card-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 6px;
   background: rgba(38, 162, 220, .08)
}

.page-root .industries-arrow {
   appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   margin: 0;
   padding: 0;
   border: 1px solid #E4E8ED;
   border-radius: 999px;
   background: #FFFFFF;
   cursor: pointer;
   transition: background-color 120ms var(--e)
}

.page-root .industries-arrow:hover {
   background: #F4F6F8
}

.page-root .industries-arrow:active {
   background: #D9DEE5
}

.page-root .industries-illustration {
   position: absolute;
   top: 16px;
   left: 16px;
   width: calc(100% - 32px);
   height: calc(100% - 32px);
   object-fit: contain;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 320ms var(--e), transform 320ms var(--e)
}

.page-root .industries-illustration.is-active {
   opacity: 1;
   transform: none
}

.page-root .industries-cta {
   display: flex;
   align-items: center;
   gap: 16px;
   min-height: 72px;
   box-sizing: border-box;
   padding: 12px 12px 12px 16px;
   border: 1px solid #22A7E0;
   border-radius: 10px;
   background: #22A7E0;
   color: #FFFFFF;
   text-decoration: none;
   transition: background-color 120ms var(--e), color 120ms var(--e)
}

.page-root .industries-cta:hover,
.page-root .industries-cta:focus-visible {
   background: #FFFFFF;
   color: #22A7E0
}

.page-root .industries-cta .industries-cta-badge {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   border-radius: 6px;
   background: #FFFFFF;
   transition: background-color 120ms var(--e)
}

.page-root .industries-cta:hover .industries-cta-badge {
   background: #F4F6F8
}

.page-root .industries-cta .industries-cta-subtitle {
   color: rgba(255, 255, 255, .8);
   transition: color 120ms var(--e)
}

.page-root .industries-cta:hover .industries-cta-subtitle {
   color: #0F6D99
}

.page-root .industries-cta .view-more-icon {
   background: rgba(255, 255, 255, .2)
}

.page-root .industries-cta:hover .view-more-icon {
   background: #F4F6F8
}

.page-root .industries-cta .view-more-icon svg path {
   stroke: currentColor
}

.page-root .industries-cta:hover .view-more-icon .arrow-exit,
.page-root .industries-cta:focus-visible .view-more-icon .arrow-exit {
   transform: translate(20px, -20px)
}

.page-root .industries-cta:hover .view-more-icon .arrow-enter,
.page-root .industries-cta:focus-visible .view-more-icon .arrow-enter {
   transform: none
}

.page-root .features-tab {
   appearance: none;
   display: block;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
   font: inherit;
   font-weight: 500;
   text-align: left;
   color: #2E2E2E;
   opacity: .22;
   cursor: pointer;
   transition: opacity 240ms var(--e)
}

.page-root .features-tab:hover {
   opacity: .5
}

.page-root .features-tab.is-active {
   opacity: 1
}

.page-root .features-item {
   grid-area: 1 / 1;
   pointer-events: none
}

.page-root .features-item.is-active {
   pointer-events: auto
}

.page-root .features-item .features-text {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity 280ms var(--e), transform 360ms var(--e)
}

.page-root .features-item.is-previous .features-text {
   transform: translateY(-16px)
}

.page-root .features-item.is-active .features-text {
   opacity: 1;
   transform: none
}

.page-root .features-item.is-active .features-text:nth-child(2) {
   transition-delay: 60ms
}

.page-root .features-image {
   grid-area: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 320ms var(--e), transform 400ms var(--e)
}

.page-root .features-image.is-previous {
   transform: translateY(-24px)
}

.page-root .features-image.is-active {
   opacity: 1;
   transform: none;
   transition-delay: 80ms
}

.page-root .features-progress-track {
   position: relative;
   width: 2px;
   flex-grow: 1;
   border-radius: 999px;
   background: #E4E8ED;
   overflow: hidden
}

.page-root .features-progress-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #22A7E0;
   transform: translateY(-100%);
   will-change: transform
}

.page-root .features-tab.is-active {
   opacity: 1;
   color: #22A7E0
}

.page-root #features .label-pill {
   align-self: flex-start
}

.page-root .features-item .features-text {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 320ms var(--e), transform 400ms var(--e)
}

.page-root .features-item.is-previous .features-text {
   transform: translateY(-8px);
   transition: opacity 200ms var(--e), transform 200ms var(--e)
}

.page-root .features-item.is-active .features-text {
   opacity: 1;
   transform: none
}

.page-root .features-item.is-active .features-text:nth-child(1) {
   transition-delay: 80ms
}

.page-root .features-item.is-active .features-text:nth-child(2) {
   transition-delay: 160ms
}

.page-root .features-image {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 320ms var(--e), transform 400ms var(--e)
}

.page-root .features-image.is-previous {
   transform: translateY(-12px);
   transition: opacity 200ms var(--e), transform 200ms var(--e)
}

.page-root .features-image.is-active {
   opacity: 1;
   transform: none;
   transition-delay: 40ms
}

/* ---- features · round slider buttons (01 → 02 → 03 → next tab) ---- */
.page-root .features-nav {
   position: absolute;
   right: 24px;
   bottom: 24px;
   z-index: 3;
   display: flex;
   gap: 8px
}

.page-root .features-nav-button {
   appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   margin: 0;
   padding: 0;
   border: 1px solid rgba(228, 232, 237, .9);
   border-radius: 999px;
   background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%);
   color: #2E2E2E;
   cursor: pointer;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px rgba(46, 46, 46, .10), 0 1px 3px rgba(46, 46, 46, .08);
   transition: background 180ms var(--e), color 180ms var(--e), border-color 180ms var(--e), box-shadow 180ms var(--e), transform 180ms var(--e)
}

.page-root .features-nav-button svg {
   display: block;
   width: 14px;
   height: 14px;
   transition: transform 180ms var(--e)
}

.page-root .features-nav-button:hover {
   background: #22A7E0;
   border-color: #22A7E0;
   color: #FFFFFF;
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(34, 167, 224, .28), 0 2px 6px rgba(34, 167, 224, .18)
}

.page-root .features-nav-button[data-js="features-prev"]:hover svg {
   transform: translateX(-2px)
}

.page-root .features-nav-button[data-js="features-next"]:hover svg {
   transform: translateX(2px)
}

.page-root .features-nav-button:active {
   transform: scale(.95);
   box-shadow: 0 3px 10px rgba(34, 167, 224, .22)
}

@media (max-width: 599.98px) {
   .page-root .features-nav {
      top: 16px;
      right: 16px;
      bottom: auto;
      gap: 6px
   }

   .page-root .features-nav-button {
      width: 32px;
      height: 32px
   }
}

/* ---- section 8 · vina CTA (vina brand identity v1.1) ---- */
.page-root #vina-assistant {
   font-family: 'Geist', 'Outfit', system-ui, sans-serif
}

.page-root .vina-card {
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
   background-color: #0E3A2E;
   background-repeat: no-repeat;
   background-size: cover;
   opacity: 0;
   transform: translateY(24px) scale(.985);
   transition: opacity 500ms var(--e), transform 600ms var(--e)
}

.page-root .vina-card.is-visible {
   opacity: 1;
   transform: none
}

.page-root .vina-badge {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   box-sizing: border-box;
   padding: 0 16px;
   border-radius: 13px;
   background: rgba(229, 238, 235, .08);
   border: 1px solid rgba(205, 223, 217, .18);
   color: #E5EEEB;
   font-weight: 500;
   letter-spacing: -.01em;
   white-space: nowrap
}

.page-root .vina-logo-mark {
   display: block;
   animation: vina-bloom 2.4s ease-in-out infinite alternate;
   transform-origin: 50% 50%
}

@keyframes vina-bloom {
   from {
      transform: scale(1)
   }

   to {
      transform: scale(1.08)
   }
}

.page-root .vina-watermark {
   color: #90C2B3;
   font-weight: 500;
   letter-spacing: -.015em
}

.page-root .vina-feature-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   background: rgba(229, 238, 235, .10);
   color: #E5EEEB;
   transition: background-color 200ms var(--e), transform 200ms var(--e)
}

.page-root .vina-feature:hover .vina-feature-icon {
   background: rgba(144, 194, 179, .24);
   transform: translateY(-2px)
}

.page-root .vina-device-glow {
   flex-shrink: 0;
   width: 1px;
   background: rgba(205, 223, 217, .22)
}

.page-root .vina-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   box-sizing: border-box;
   border-radius: 10px;
   font: inherit;
   font-weight: 500;
   line-height: 20px;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 160ms var(--e), color 160ms var(--e), border-color 160ms var(--e)
}

.page-root .vina-button-explore {
   background: #FAF8F2;
   color: #13362B;
   border: 1px solid #FAF8F2
}

.page-root .vina-button-explore:hover {
   background: transparent;
   color: #FAF8F2;
   border-color: #FAF8F2
}

.page-root .vina-button .button-arrow {
   display: block;
   transition: transform 160ms var(--e)
}

.page-root .vina-button:hover .button-arrow {
   transform: translateX(3px)
}

.page-root .vina-button-video {
   background: transparent;
   color: #FAF8F2;
   border: 1px solid rgba(250, 248, 242, .55)
}

.page-root .vina-button-video:hover {
   background: #FAF8F2;
   color: #13362B;
   border-color: #FAF8F2
}

.page-root .vina-play-icon {
   display: block;
   flex-shrink: 0;
   transition: transform 200ms var(--e)
}

.page-root .vina-play-icon circle {
   fill: #90C2B3;
   transition: fill 160ms var(--e)
}

.page-root .vina-play-icon path {
   fill: #13362B
}

.page-root .vina-button-video:hover .vina-play-icon {
   transform: scale(1.08)
}

.page-root .vina-button-video:hover .vina-play-icon circle {
   fill: #1F4D3F
}

.page-root .vina-button-video:hover .vina-play-icon path {
   fill: #FAF8F2
}

.page-root .vina-text {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 420ms var(--e), transform 480ms var(--e)
}

.page-root .vina-card.is-visible .vina-text {
   opacity: 1;
   transform: none
}

.page-root .vina-device {
   opacity: 0;
   transform: translate3d(48px, 16px, 0);
   transition: opacity 700ms var(--e) 250ms, transform 900ms var(--e) 250ms
}

@media (max-width: 1023.98px) {
   .page-root .vina-device.is-moving-up {
      transform: translate3d(0, 40px, 0)
   }
}

.page-root .vina-card.is-visible .vina-device {
   opacity: 1;
   transform: none
}

.page-root .vina-device img {
   display: block;
   width: 100%;
   height: auto;
   will-change: transform
}

.page-root #vina-assistant .split-heading .word {
   margin-right: .24em
}

/* ---- section 9 · integrations ---- */
.page-root .integrations-tab {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
   box-sizing: border-box;
   padding: 14px 0 14px 24px;
   border: 0;
   background: transparent;
   font: inherit;
   text-align: left;
   cursor: pointer;
   color: #2E2E2E;
   opacity: .42;
   transition: opacity 200ms var(--e), color 200ms var(--e)
}

.page-root .integrations-tab:hover {
   opacity: .75
}

.page-root .integrations-tab.is-active {
   opacity: 1;
   color: #22A7E0
}

.page-root .integrations-tab .integrations-progress-track {
   position: absolute;
   left: 0;
   top: 10px;
   bottom: 10px;
   width: 2px;
   border-radius: 2px;
   background: #E4E8ED;
   overflow: hidden
}

.page-root .integrations-tab .integrations-progress-fill {
   position: absolute;
   inset: 0;
   background: #22A7E0;
   transform: scaleY(0);
   transform-origin: 50% 0
}

.page-root .integrations-tab .integrations-tab-number {
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: .08em;
   color: #8A93A1;
   transition: color 200ms var(--e)
}

.page-root .integrations-tab.is-active .integrations-tab-number {
   color: #22A7E0
}

.page-root .integrations-pill {
   position: relative;
   overflow: hidden;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 40px;
   padding: 0 16px;
   border: 0;
   border-radius: 999px;
   background: #F4F6F8;
   font: inherit;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #5B6472;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 200ms var(--e), color 200ms var(--e)
}

.page-root .integrations-pill:hover {
   background: #E9EDF1
}

.page-root .integrations-pill.is-active {
   background: #E3F4FB;
   color: #0F6D99
}

.page-root .integrations-pill .integrations-progress-fill {
   position: absolute;
   inset: 0;
   background: rgba(34, 167, 224, .16);
   transform: scaleX(0);
   transform-origin: 0 50%;
   pointer-events: none
}

.page-root .integrations-pill span {
   position: relative
}

.page-root .integrations-stage {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   background: #F4F6F8
}

.page-root .integrations-svg {
   position: absolute;
   inset: 0;
   overflow: visible;
   pointer-events: none
}

.page-root .integrations-base-line {
   fill: none;
   stroke: #DCE2E8;
   stroke-width: 1.25
}

.page-root .integrations-line {
   fill: none;
   stroke: #22A7E0;
   stroke-width: 1.5;
   stroke-linecap: butt;
   stroke-dasharray: 100 100;
   stroke-dashoffset: 100;
   transition: stroke-dashoffset 220ms var(--e)
}

.page-root .integrations-line.is-active {
   stroke-dashoffset: 0;
   transition: stroke-dashoffset 520ms var(--e)
}

.page-root .integrations-pulse {
   fill: none;
   stroke: #22A7E0;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-dasharray: 8 92;
   stroke-dashoffset: 100;
   opacity: 0;
   transition: opacity 200ms var(--e)
}

.page-root .integrations-pulse.is-active {
   opacity: .9;
   animation: integrations-flow 1.8s linear infinite
}

@keyframes integrations-flow {
   from {
      stroke-dashoffset: 100
   }

   to {
      stroke-dashoffset: 0
   }
}

.page-root .integrations-chip {
   position: absolute;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 14px;
   border-radius: 12px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 4px 12px rgba(46, 46, 46, .05);
   opacity: .5;
   filter: grayscale(1);
   transform: scale(.96);
   transition: opacity 240ms var(--e), filter 240ms var(--e), transform 240ms var(--e), box-shadow 240ms var(--e)
}

.page-root .integrations-chip.is-active {
   opacity: 1;
   filter: none;
   transform: none;
   box-shadow: 0 2px 4px rgba(46, 46, 46, .06), 0 12px 28px rgba(34, 167, 224, .16);
   transition: opacity 320ms var(--e), filter 320ms var(--e), transform 320ms var(--e), box-shadow 320ms var(--e)
}

@media (max-width: 599.98px) {
   .page-root .integrations-chip.chip-mobile {
      opacity: 0;
      filter: none;
      transform: scale(.6) translateY(-24px);
      pointer-events: none;
      transition: opacity 200ms var(--e), transform 220ms var(--e)
   }

   .page-root .integrations-chip.chip-mobile.is-active {
      opacity: 1;
      transform: none;
      pointer-events: auto;
      transition: opacity 320ms var(--e), transform 420ms var(--e)
   }
}

.page-root .integrations-chip img {
   display: block;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   min-width: 0
}

.page-root .integrations-caption {
   font-size: 13px;
   font-weight: 500;
   line-height: 16px;
   color: #2E2E2E;
   white-space: nowrap
}

.page-root .integrations-dot {
   position: absolute;
   width: 7px;
   height: 7px;
   border-radius: 999px;
   background: #C4CCD6;
   box-shadow: 0 0 0 3px #F4F6F8;
   transition: background-color 240ms var(--e)
}

.page-root .integrations-chip.is-active .integrations-dot {
   background: #22A7E0
}

@media (min-width: 600px) {
   .page-root .integrations-dot.dot-left {
      right: -4px;
      top: 50%;
      margin-top: -3.5px
   }

   .page-root .integrations-dot.dot-right {
      left: -4px;
      top: 50%;
      margin-top: -3.5px
   }
}

@media (max-width: 599.98px) {
   .page-root .integrations-dot.dot-top {
      top: -4px;
      left: 50%;
      margin-left: -3.5px
   }
}

.page-root .integrations-hub {
   position: absolute;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   background: #FFFFFF;
   box-shadow: 0 2px 6px rgba(46, 46, 46, .06), 0 16px 36px rgba(34, 167, 224, .22);
   transition: transform 300ms var(--e)
}

.page-root .integrations-hub.is-leaving {
   transform: scale(.92)
}

.page-root .integrations-ring {
   position: absolute;
   border-radius: 999px;
   border: 1px solid rgba(34, 167, 224, .22);
   background: rgba(34, 167, 224, .05);
   opacity: 0;
   animation: integrations-ring 3.6s var(--e) infinite
}

.page-root .integrations-ring:nth-child(2) {
   animation-delay: 1.2s
}

.page-root .integrations-ring:nth-child(3) {
   animation-delay: 2.4s
}

@keyframes integrations-ring {
   0% {
      opacity: 0;
      transform: scale(.6)
   }

   25% {
      opacity: 1
   }

   100% {
      opacity: 0;
      transform: scale(1.35)
   }
}

.page-root .integrations-glow {
   position: absolute;
   border-radius: 999px;
   background: rgba(34, 167, 224, .07)
}

.page-root .integrations-summary {
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 11px;
   line-height: 16px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #5B6472
}

/* ---- section 10 · 17,000+ merchants ---- */
.page-root .customers-stage {
   position: sticky;
   top: 0;
   overflow: hidden;
   background: #FFFFFF
}

.page-root .customers-globe {
   position: absolute;
   left: 50%;
   display: block;
   max-width: none;
   pointer-events: none;
   user-select: none;
   will-change: transform
}

.page-root .customers-headline {
   position: absolute;
   left: 0;
   right: 0;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   will-change: transform, opacity
}

.page-root .customers-counter {
   display: inline-block;
   margin-right: .26em;
   color: #22A7E0;
   font-variant-numeric: tabular-nums;
   opacity: 0;
   filter: blur(8px);
   transform: translateY(6px);
   transition: opacity 400ms var(--e), filter 400ms var(--e), transform 400ms var(--e)
}

.page-root .split-heading.is-visible .customers-counter {
   opacity: 1;
   filter: none;
   transform: none
}

.page-root .customers-logo-rows {
   position: absolute;
   left: 0;
   right: 0;
   z-index: 3;
   display: flex;
   flex-direction: column;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
}

.page-root .customers-logo-rows-wrapper {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 600ms var(--e), transform 800ms var(--e)
}

.page-root .customers-logo-rows-wrapper.is-visible {
   opacity: 1;
   transform: none
}

.page-root .customers-logo-row {
   overflow: hidden;
   padding: 8px 0
}

.page-root .customers-logo-track {
   display: flex;
   width: max-content;
   animation: customers-mq var(--dur) linear infinite
}

.page-root .customers-logo-track.reverse {
   animation-direction: reverse
}

.page-root .customers-logo-row:hover .customers-logo-track {
   animation-play-state: paused
}

@keyframes customers-mq {
   from {
      transform: translate3d(0, 0, 0)
   }

   to {
      transform: translate3d(-50%, 0, 0)
   }
}

.page-root .customers-logo-card {
   flex-shrink: 0;
   box-sizing: border-box;
   border-radius: 16px;
   background: rgba(255, 255, 255, .42);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   box-shadow: 0 1px 2px rgba(15, 109, 153, .06), 0 10px 28px rgba(15, 109, 153, .10);
   transition: transform 240ms var(--e), box-shadow 240ms var(--e), background-color 240ms var(--e)
}

.page-root .customers-logo-card-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   height: 100%;
   border-radius: 11px;
   background: rgba(255, 255, 255, .82);
   transition: background-color 240ms var(--e)
}

.page-root .customers-logo-card-inner img {
   display: block;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: saturate(.9);
   transition: filter 240ms var(--e), transform 240ms var(--e)
}

.page-root .customers-logo-card:hover {
   transform: translateY(-4px);
   background: rgba(255, 255, 255, .7);
   box-shadow: 0 2px 4px rgba(15, 109, 153, .08), 0 18px 40px rgba(34, 167, 224, .20)
}

.page-root .customers-logo-card:hover .customers-logo-card-inner {
   background: #FFFFFF
}

.page-root .customers-logo-card:hover .customers-logo-card-inner img {
   filter: none;
   transform: scale(1.04)
}

/* ---- section 11 · press releases (hover = live press page) ---- */
.page-root .press-legacy-card {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
   border-radius: 14px;
   overflow: hidden;
   background: #FFFFFF;
   text-decoration: none;
   color: inherit;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 8px 24px rgba(46, 46, 46, .06);
   transition: transform 300ms var(--e), box-shadow 300ms var(--e)
}

.page-root .press-legacy-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 2px 4px rgba(46, 46, 46, .06), 0 16px 32px rgba(0, 0, 0, .12)
}

.page-root .press-legacy-image {
   overflow: hidden;
   aspect-ratio: 16/9;
   background: #F4F6F8
}

.page-root .press-legacy-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 500ms var(--e)
}

.page-root .press-legacy-card:hover .press-legacy-image img {
   transform: scale(1.05)
}

.page-root .press-legacy-title {
   margin: 0;
   font-weight: 600;
   line-height: 1.4;
   letter-spacing: -0.01em;
   color: #2E2E2E;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   transition: color 300ms var(--e)
}

.page-root .press-legacy-card:hover .press-legacy-title {
   color: #22A7E0
}

.page-root .press-legacy-description {
   margin: 0;
   font-weight: 400;
   line-height: 1.6;
   color: #5B6472;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.page-root .press-legacy-read-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: auto;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
   color: #0F6D99
}

.page-root .press-legacy-read-link svg {
   display: block;
   transition: transform 300ms var(--e)
}

.page-root .press-legacy-card:hover .press-legacy-read-link svg {
   transform: translate(6px, -3px)
}

.page-root .press-legacy-rail {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none
}

.page-root .press-legacy-rail::-webkit-scrollbar {
   display: none
}

.page-root .press-legacy-rail>* {
   scroll-snap-align: start;
   flex-shrink: 0
}

/* ---- section 12 · success stories ---- */
.page-root .stories-footer {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   background: #F4F6F8;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 12px 32px rgba(46, 46, 46, .08)
}

.page-root .stories-slide {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transform: scale(1.06);
   transition: opacity 600ms var(--e), transform 1400ms var(--e)
}

.page-root .stories-slide.is-active {
   opacity: 1;
   transform: none
}

.page-root .stories-footer:hover .stories-slide.is-active {
   transform: scale(1.03)
}

.page-root .stories-play-button {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   background: #FFFFFF;
   color: #22A7E0;
   text-decoration: none;
   box-shadow: 0 12px 32px rgba(15, 109, 153, .28);
   transition: transform 240ms var(--e), background-color 200ms var(--e), color 200ms var(--e)
}

.page-root .stories-play-button:hover {
   transform: scale(1.08);
   background: #22A7E0;
   color: #FFFFFF
}

.page-root .stories-play-button svg {
   position: relative;
   display: block;
   margin-left: 4px
}

.page-root .stories-range {
   position: absolute;
   inset: 0;
   border-radius: 999px;
   border: 2px solid rgba(255, 255, 255, .85);
   animation: stories-pulse 2.4s var(--e) infinite;
   pointer-events: none
}

.page-root .stories-range+.stories-range {
   animation-delay: 1.2s
}

@keyframes stories-pulse {
   0% {
      transform: scale(1);
      opacity: .9
   }

   100% {
      transform: scale(1.75);
      opacity: 0
   }
}

.page-root .stories-panel {
   position: absolute;
   z-index: 2;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 2px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .9);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   box-shadow: 0 8px 24px rgba(46, 46, 46, .10);
   opacity: 0;
   transform: translateY(14px);
   transition: opacity 240ms var(--e), transform 240ms var(--e);
   pointer-events: none
}

.page-root .stories-panel.is-active {
   opacity: 1;
   transform: none;
   transition: opacity 420ms var(--e) 180ms, transform 480ms var(--e) 180ms
}

.page-root .stories-row {
   position: relative;
   overflow: hidden;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
   border: 0;
   border-radius: 12px;
   background: transparent;
   font: inherit;
   text-align: left;
   cursor: pointer;
   transition: background-color 200ms var(--e)
}

.page-root .stories-row:hover {
   background: #F4F6F8
}

.page-root .stories-row.is-active {
   background: #E9F6FC
}

.page-root .stories-thumbnail {
   display: block;
   overflow: hidden;
   border-radius: 8px;
   background: #F4F6F8
}

.page-root .stories-thumbnail img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 300ms var(--e)
}

.page-root .stories-row:hover .stories-thumbnail img {
   transform: scale(1.06)
}

.page-root .stories-name {
   display: block;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -0.01em;
   color: #2E2E2E;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: color 200ms var(--e)
}

.page-root .stories-row.is-active .stories-name {
   color: #0F6D99
}

.page-root .stories-person {
   display: block;
   font-size: 14px;
   line-height: 20px;
   color: #5B6472
}

.page-root .stories-index {
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: .08em;
   color: #8A93A1;
   transition: color 200ms var(--e)
}

.page-root .stories-row.is-active .stories-index {
   color: #22A7E0
}

.page-root .stories-progress-fill {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 2px;
   background: #22A7E0;
   transform: scaleX(0);
   transform-origin: 0 50%;
   pointer-events: none
}

.page-root .stories-rail {
   display: flex;
   overflow-x: auto;
   scrollbar-width: none
}

.page-root .stories-rail::-webkit-scrollbar {
   display: none
}

.page-root .stories-rail>.stories-row {
   flex-shrink: 0
}

/* ---- section 13 · business success (expanding cards slider) ---- */
.page-root .resources-scroller {
   display: flex;
   overflow-x: auto;
   scrollbar-width: none;
   cursor: grab
}

.page-root .resources-scroller::-webkit-scrollbar {
   display: none
}

.page-root .resources-scroller.is-dragging {
   cursor: grabbing;
   user-select: none
}

.page-root .resources-scroller.is-dragging * {
   pointer-events: none
}

@media (max-width: 599.98px) {
   .page-root .resources-scroller.snap-scroll {
      scroll-snap-type: x mandatory;
      cursor: auto
   }

   .page-root .resources-scroller.snap-scroll>.resources-card {
      scroll-snap-align: start
   }
}

.page-root .resources-card {
   position: relative;
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
   border-radius: 14px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 8px 24px rgba(46, 46, 46, .06);
   overflow: hidden;
   cursor: pointer;
   outline: none;
   transition: flex-basis 560ms var(--e), width 560ms var(--e), box-shadow 240ms var(--e), background-color 240ms var(--e)
}

.page-root .resources-card:hover {
   box-shadow: 0 2px 4px rgba(46, 46, 46, .06), 0 14px 32px rgba(46, 46, 46, .10)
}

.page-root .resources-card:focus-visible {
   box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #22A7E0
}

.page-root .resources-card-title {
   margin: 0;
   font-weight: 600;
   line-height: 1.25;
   letter-spacing: -0.02em;
   color: #2E2E2E;
   transition: color 200ms var(--e)
}

.page-root .resources-card-description {
   margin: 0;
   font-weight: 400;
   line-height: 1.55;
   color: #5B6472
}

.page-root .resources-card-image {
   flex-shrink: 0;
   align-self: center;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-radius: 14px;
   background: #F4F6F8
}

.page-root .resources-card-image img {
   display: block;
   max-width: 76%;
   max-height: 76%;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: drop-shadow(0 8px 14px rgba(15, 109, 153, .18))
}

@media (min-width: 600px) {
   .page-root .resources-scroller.wide-layout .resources-card-image {
      width: 0;
      opacity: 0;
      transition: width 560ms var(--e), opacity 280ms var(--e), margin 560ms var(--e)
   }

   .page-root .resources-scroller.wide-layout .resources-card.is-active .resources-card-image {
      opacity: 1;
      transition: width 560ms var(--e), opacity 420ms var(--e) 200ms, margin 560ms var(--e)
   }

   .page-root .resources-scroller.wide-layout .resources-card-image img {
      transform: scale(.8) translateY(12px);
      transition: transform 600ms var(--e) 180ms
   }

   .page-root .resources-scroller.wide-layout .resources-card.is-active .resources-card-image img {
      transform: none;
      animation: resources-float 4.8s ease-in-out 800ms infinite
   }
}

@media (max-width: 599.98px) {
   .page-root .resources-scroller.snap-scroll .resources-card-image img {
      animation: resources-float 4.8s ease-in-out infinite
   }
}

@keyframes resources-float {

   0%,
   100% {
      translate: 0 0
   }

   50% {
      translate: 0 -4px
   }
}

.page-root .resources-card-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 34px;
   padding: 0 16px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #2E2E2E;
   text-decoration: none;
   white-space: nowrap;
   transition: color 160ms var(--e), background-color 160ms var(--e)
}

.page-root .resources-card-link:hover {
   color: #0F6D99;
   background: #F4F6F8
}

.page-root .resources-card-link .resources-arrow {
   display: block;
   transition: transform 200ms var(--e)
}

.page-root .resources-card-link:hover .resources-arrow {
   transform: translate(2px, -2px)
}

.page-root .resources-card .resources-card-link .label-run {
   opacity: 0;
   animation-play-state: paused;
   transition: opacity 200ms var(--e)
}

.page-root .resources-card.is-active .resources-card-link {
   color: #0F6D99
}

.page-root .resources-card.is-active .resources-card-link .label-run {
   opacity: 1;
   animation-play-state: running
}

.page-root .resources-card.is-active {
   box-shadow: 0 2px 6px rgba(34, 167, 224, .10), 0 16px 36px rgba(34, 167, 224, .18)
}

.page-root .resources-nav-button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 0;
   border-radius: 999px;
   background: #F4F6F8;
   color: #2E2E2E;
   cursor: pointer;
   transition: background-color 160ms var(--e), color 160ms var(--e)
}

.page-root .resources-nav-button:hover {
   background: #22A7E0;
   color: #FFFFFF
}

.page-root .resources-nav-button.is-inactive {
   opacity: .4;
   pointer-events: none
}

.page-root .resources-progress-bar {
   position: relative;
   height: 2px;
   border-radius: 2px;
   background: #E4E8ED;
   overflow: hidden
}

.page-root .resources-progress-bar span {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   background: #22A7E0;
   transition: width 400ms var(--e)
}

.page-root .resources-counter {
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: .08em;
   color: #8A93A1
}

.page-root .resources-counter b {
   font-weight: 400;
   color: #22A7E0
}

/* ---- section 14 · CTA ---- */
.page-root .cta-panel {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: #EEF8FD;
   --mx: -999px;
   --my: -999px
}

.page-root .cta-glow {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: radial-gradient(260px circle at var(--mx) var(--my), rgba(34, 167, 224, .30), rgba(34, 167, 224, 0) 70%);
   transition: opacity 300ms var(--e)
}

.page-root .cta-grid {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 30%, transparent 100%);
   mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 30%, transparent 100%)
}

.page-root .cta-title {
   position: absolute;
   box-sizing: border-box;
   border-radius: 14px;
   background: rgba(255, 255, 255, .58);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 1px 2px rgba(15, 109, 153, .05);
   opacity: 0;
   transform: scale(.8);
   transition: opacity 500ms var(--e), transform 700ms var(--e)
}

.page-root .cta-panel.is-visible .cta-title {
   opacity: 1;
   transform: none
}

.page-root .cta-title.erp-title-word {
   animation: cta-tw 7s ease-in-out infinite
}

@keyframes cta-tw {

   0%,
   100% {
      background-color: rgba(255, 255, 255, .58)
   }

   45%,
   55% {
      background-color: rgba(34, 167, 224, .16)
   }
}

.page-root .cta-card {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center
}

.page-root .cta-pill {
   position: relative;
   display: inline-flex;
   align-items: center;
   border-radius: 999px;
   background: rgba(255, 255, 255, .85);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 8px 24px rgba(15, 109, 153, .10)
}

.page-root .cta-stat {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap
}

.page-root .cta-stat b {
   font-weight: 600;
   color: #2E2E2E;
   letter-spacing: -0.02em
}

.page-root .cta-stat span {
   color: #5B6472
}

.page-root .cta-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   background: #E9F6FC;
   color: #22A7E0
}

.page-root .cta-divider {
   width: 1px;
   background: #D9DEE5;
   align-self: stretch
}

.page-root .cta-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 48px;
   padding: 0 8px;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   color: #2E2E2E;
   text-decoration: none;
   transition: color 160ms var(--e)
}

.page-root .cta-link::after {
   content: "";
   position: absolute;
   left: 8px;
   right: 8px;
   bottom: 10px;
   height: 1px;
   background: currentColor;
   transform: scaleX(0);
   transform-origin: 0 50%;
   transition: transform 240ms var(--e)
}

.page-root .cta-link:hover {
   color: #0F6D99
}

.page-root .cta-link:hover::after {
   transform: scaleX(1)
}

.page-root .cta-link svg {
   transition: transform 200ms var(--e)
}

.page-root .cta-link:hover svg {
   transform: translateX(3px)
}

.page-root .cta-button .book-demo-arrow-circle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   margin-right: -8px;
   border-radius: 999px;
   background: #FFFFFF;
   color: #22A7E0;
   transition: transform 200ms var(--e), background-color 160ms var(--e), color 160ms var(--e)
}

.page-root .cta-button:hover .book-demo-arrow-circle {
   background: #22A7E0;
   color: #FFFFFF;
   transform: rotate(45deg)
}

/* ---- section 14 · CTA variation B (bold brand panel + live booking card) ---- */
.page-root .book-demo-panel {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: #22A7E0;
   --mx: -999px;
   --my: -999px
}

.page-root .book-demo-glow {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%)
}

.page-root .book-demo-grid {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000 25%, transparent 100%);
   mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000 25%, transparent 100%)
}

.page-root .book-demo-title {
   position: absolute;
   box-sizing: border-box;
   border-radius: 14px;
   background: rgba(255, 255, 255, .05);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
   opacity: 0;
   transition: opacity 600ms var(--e)
}

.page-root .book-demo-panel.is-visible .book-demo-title {
   opacity: 1
}

.page-root .book-demo-title.erp-title-word {
   animation: book-demo-tw 6s ease-in-out infinite
}

@keyframes book-demo-tw {

   0%,
   100% {
      background-color: rgba(255, 255, 255, .05)
   }

   45%,
   55% {
      background-color: rgba(34, 167, 224, .45)
   }
}

.page-root .book-demo-mark {
   position: absolute;
   z-index: 1;
   pointer-events: none;
   opacity: .05;
   filter: brightness(0) invert(1)
}

.page-root .book-demo-pill {
   position: relative;
   display: inline-flex;
   align-items: center;
   border-radius: 999px;
   background: rgba(255, 255, 255, .10);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px)
}

.page-root .book-demo-stat-label {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   color: rgba(255, 255, 255, .78)
}

.page-root .book-demo-stat-label b {
   font-weight: 600;
   color: #FFFFFF;
   letter-spacing: -0.02em
}

.page-root .book-demo-stat-label svg {
   color: #FFFFFF
}

.page-root .book-demo-divider {
   width: 1px;
   align-self: stretch;
   background: rgba(255, 255, 255, .22)
}

.page-root .book-demo-primary-button {
   background: #FFFFFF;
   color: #0F6D99;
   border: 1px solid #FFFFFF;
   box-shadow: 0 10px 24px rgba(8, 70, 105, .25)
}

.page-root .book-demo-primary-button:hover {
   background: transparent;
   color: #FFFFFF
}

.page-root .book-demo-primary-button .book-demo-arrow-circle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   margin-right: -8px;
   border-radius: 999px;
   background: #0F6D99;
   color: #FFFFFF;
   transition: transform 200ms var(--e), background-color 160ms var(--e), color 160ms var(--e)
}

.page-root .book-demo-primary-button:hover .book-demo-arrow-circle {
   background: #FFFFFF;
   color: #0F6D99;
   transform: rotate(45deg)
}

.page-root .book-demo-secondary-button {
   background: transparent;
   color: #FFFFFF;
   border: 1px solid rgba(255, 255, 255, .75)
}

.page-root .book-demo-secondary-button:hover {
   background: #FFFFFF;
   color: #0F6D99;
   border-color: #FFFFFF
}

.page-root .book-demo-check {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   line-height: 20px;
   color: rgba(255, 255, 255, .82)
}

.page-root .book-demo-check svg {
   flex-shrink: 0;
   color: #7FD0F2
}

.page-root .book-demo-row {
   position: relative;
   perspective: 1800px;
   align-items: center;
   justify-content: center
}

.page-root .book-demo-iso-badge {
   position: relative;
   z-index: 2;
   transform-style: preserve-3d;
   transform: var(--iso);
   transition: transform 700ms var(--e)
}

.page-root .book-demo-iso-badge:hover {
   transform: var(--iso-h)
}

.page-root .book-demo-plate {
   position: absolute;
   inset: 0;
   border-radius: 20px;
   background: rgba(255, 255, 255, .22);
   box-shadow: 0 20px 40px rgba(8, 70, 105, .18)
}

.page-root .book-demo-plate.plate-layer-1 {
   transform: translate3d(-14px, 14px, -40px)
}

.page-root .book-demo-plate.plate-layer-2 {
   transform: translate3d(-28px, 28px, -80px);
   background: rgba(255, 255, 255, .12)
}

.page-root .book-demo-confetti {
   position: absolute;
   left: 50%;
   top: 38%;
   z-index: 5;
   width: 0;
   height: 0;
   pointer-events: none
}

.page-root .book-demo-confetti i {
   position: absolute;
   left: 0;
   top: 0;
   width: 8px;
   height: 12px;
   border-radius: 2px;
   opacity: 0
}

.page-root .book-demo-confetti.is-active i {
   animation: book-demo-conf 1500ms cubic-bezier(.15, .7, .3, 1) forwards
}

@keyframes book-demo-conf {
   0% {
      opacity: 1;
      transform: translate(0, 0) rotate(0deg) scale(.6)
   }

   70% {
      opacity: 1
   }

   100% {
      opacity: 0;
      transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1)
   }
}

.page-root .book-demo-card {
   position: relative;
   z-index: 2;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   border-radius: 20px;
   background: #FFFFFF;
   box-shadow: 0 30px 60px rgba(8, 70, 105, .30), 0 2px 6px rgba(8, 70, 105, .15);
   transform: translate3d(0, 60px, 0);
   opacity: 0;
   transition: opacity 700ms var(--e) 250ms, transform 1000ms var(--e) 250ms
}

.page-root .book-demo-panel.is-visible .book-demo-card {
   opacity: 1;
   transform: none
}

.page-root .book-demo-rings {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   overflow: visible
}

.page-root .book-demo-ring {
   position: absolute;
   left: 50%;
   top: 50%;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .28);
   transform: translate(-50%, -50%) scale(.6);
   opacity: 0;
   animation: book-demo-radar 6s var(--e) infinite
}

.page-root .book-demo-ring:nth-child(2) {
   animation-delay: 1.5s
}

.page-root .book-demo-ring:nth-child(3) {
   animation-delay: 3s
}

.page-root .book-demo-ring:nth-child(4) {
   animation-delay: 4.5s
}

@keyframes book-demo-radar {
   0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.6)
   }

   20% {
      opacity: 1
   }

   100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.25)
   }
}

.page-root .book-demo-stat {
   opacity: 0;
   transform: translateX(-32px);
   transition: opacity 600ms var(--e), transform 800ms var(--e)
}

.page-root .book-demo-left.is-visible .book-demo-stat {
   opacity: 1;
   transform: none
}

.page-root .book-demo-left.is-visible .book-demo-stat:nth-child(2) {
   transition-delay: 120ms
}

.page-root .book-demo-left.is-visible .book-demo-stat:nth-child(3) {
   transition-delay: 260ms
}

.page-root .book-demo-day {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   border-radius: 10px;
   background: #F4F6F8;
   color: #2E2E2E;
   transition: background-color 300ms var(--e), color 300ms var(--e), transform 300ms var(--e)
}

.page-root .book-demo-day span {
   font-size: 13px;
   line-height: 16px;
   color: #8A93A1;
   transition: color 300ms var(--e)
}

.page-root .book-demo-day b {
   font-size: 22px;
   line-height: 28px;
   font-weight: 600
}

.page-root .book-demo-day.is-active {
   background: #22A7E0;
   color: #FFFFFF;
   transform: translateY(-2px)
}

.page-root .book-demo-day.is-active span {
   color: rgba(255, 255, 255, .85)
}

.page-root .book-demo-time-slot {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: #FFFFFF;
   box-shadow: inset 0 0 0 1px #D9DEE5;
   font-size: 16px;
   font-weight: 500;
   color: #2E2E2E;
   transition: background-color 300ms var(--e), color 300ms var(--e), box-shadow 300ms var(--e)
}

.page-root .book-demo-time-slot.is-active {
   background: #E9F6FC;
   color: #0F6D99;
   box-shadow: inset 0 0 0 1.5px #22A7E0
}

.page-root .book-demo-confirm-button {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border-radius: 12px;
   background: #D9DEE5;
   color: #FFFFFF;
   font-size: 17px;
   font-weight: 500;
   overflow: hidden;
   transition: background-color 300ms var(--e)
}

.page-root .book-demo-confirm-button.is-active {
   background: #22A7E0
}

.page-root .book-demo-confirm-button.is-active::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 10px;
   box-shadow: 0 0 0 0 rgba(34, 167, 224, .5);
   animation: book-demo-ping 1.4s var(--e) infinite
}

@keyframes book-demo-ping {
   0% {
      box-shadow: 0 0 0 0 rgba(34, 167, 224, .45)
   }

   100% {
      box-shadow: 0 0 0 12px rgba(34, 167, 224, 0)
   }
}

.page-root .book-demo-summary {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
   border-radius: 12px;
   background: #F4F6F8;
   color: #8A93A1;
   font-size: 15px;
   line-height: 22px;
   transition: background-color 300ms var(--e), color 300ms var(--e)
}

.page-root .book-demo-summary.is-active {
   background: #E9F6FC;
   color: #0F6D99;
   font-weight: 500
}

.page-root .book-demo-success {
   position: absolute;
   inset: 0;
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   border-radius: 20px;
   background: rgba(255, 255, 255, .96);
   text-align: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 360ms var(--e)
}

.page-root .book-demo-success.is-active {
   opacity: 1
}

.page-root .book-demo-success .book-demo-success-ring {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   border-radius: 999px;
   background: #E9F6FC;
   color: #22A7E0;
   transform: scale(.6);
   transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1)
}

.page-root .book-demo-success.is-active .book-demo-success-ring {
   transform: none
}

.page-root .book-demo-cursor {
   position: absolute;
   z-index: 4;
   width: 22px;
   height: 22px;
   pointer-events: none;
   transition: left 700ms var(--e), top 700ms var(--e), opacity 300ms var(--e);
   filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25))
}

/* ---- footer ---- */
.page-root .footer-card {
   position: relative;
   background: transparent
}

.page-root .footer-heading {
   margin: 0 0 20px;
   font-size: 18px;
   font-weight: 600;
   line-height: 24px;
   color: #2E2E2E
}

.page-root .footer-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 15px;
   line-height: 22px;
   color: #5B6472;
   text-decoration: none;
   transition: color 160ms var(--e)
}

.page-root .footer-link svg {
   opacity: 0;
   transform: translateX(-6px);
   transition: opacity 160ms var(--e), transform 200ms var(--e)
}

.page-root .footer-link:hover {
   color: #0F6D99
}

.page-root .footer-link:hover svg {
   opacity: 1;
   transform: none
}

.page-root .footer-social {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 999px;
   background: #FFFFFF;
   color: #2E2E2E;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06);
   transition: background-color 180ms var(--e), color 180ms var(--e), transform 200ms var(--e)
}

.page-root .footer-social:hover {
   background: #22A7E0;
   color: #FFFFFF;
   transform: translateY(-3px)
}

.page-root .footer-store-badge {
   display: inline-flex;
   border-radius: 10px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 6px 16px rgba(46, 46, 46, .06);
   transition: transform 200ms var(--e), box-shadow 200ms var(--e)
}

.page-root .footer-store-badge:hover {
   transform: translateY(-3px);
   box-shadow: 0 2px 4px rgba(46, 46, 46, .06), 0 12px 24px rgba(34, 167, 224, .18)
}

.page-root .footer-store-badge img {
   display: block;
   height: 44px;
   width: auto
}

.page-root .footer-contact-strip {
   border-radius: 16px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .05)
}

.page-root .footer-contact {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-size: 16px;
   line-height: 24px;
   color: #2E2E2E;
   text-decoration: none;
   transition: color 160ms var(--e)
}

.page-root .footer-contact:hover {
   color: #0F6D99
}

.page-root .footer-contact-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: #22A7E0;
   color: #FFFFFF;
   transition: transform 200ms var(--e)
}

.page-root .footer-contact:hover .footer-contact-icon {
   transform: rotate(-8deg) scale(1.06)
}

.page-root .footer-badge {
   display: block;
   width: auto;
   filter: grayscale(1);
   opacity: .75;
   transition: filter 200ms var(--e), opacity 200ms var(--e), transform 200ms var(--e)
}

.page-root .footer-badge:hover {
   filter: none;
   opacity: 1;
   transform: translateY(-2px)
}

.page-root .footer-bottom-link {
   font-size: 13px;
   line-height: 18px;
   color: #5B6472;
   text-decoration: none;
   transition: color 160ms var(--e)
}

.page-root .footer-bottom-link:hover {
   color: #0F6D99
}

.page-root .footer-watermark {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translate(-50%, 30%);
   font-weight: 700;
   letter-spacing: -0.06em;
   line-height: 1;
   color: #E6EBF0;
   white-space: nowrap;
   pointer-events: none;
   user-select: none
}

.page-root .footer-watermark span {
   color: #22A7E0;
   opacity: .45
}

.page-root .footer-heart {
   display: inline-block;
   color: #E5484D;
   animation: footer-beat 1.6s ease-in-out infinite
}

@keyframes footer-beat {

   0%,
   100% {
      transform: scale(1)
   }

   15% {
      transform: scale(1.25)
   }

   30% {
      transform: scale(1)
   }

   45% {
      transform: scale(1.18)
   }

   60% {
      transform: scale(1)
   }
}

.page-root .footer-back-to-top {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border: 0;
   border-radius: 999px;
   background: #FFFFFF;
   color: #2E2E2E;
   cursor: pointer;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 6px 16px rgba(46, 46, 46, .08);
   transition: background-color 180ms var(--e), color 180ms var(--e), transform 200ms var(--e)
}

.page-root .footer-back-to-top:hover {
   background: #22A7E0;
   color: #FFFFFF;
   transform: translateY(-3px)
}

@media (min-width: 1024px) {
   .page-root .menu-banner {
      position: relative;
      isolation: isolate
   }

   /* the tab image is the full background of the banner card */
   .page-root .menu-banner-image {
      position: absolute;
      inset: 0;
      z-index: 0;
      margin: 0;
      border-radius: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: right center;
      pointer-events: none
   }

   .page-root .menu-banner > div:first-child {
      position: relative;
      z-index: 1
   }

   .page-root .menu-banner.menu-banner-light>div:first-child>span:nth-child(1) {
      color: #2E2E2E !important
   }

   .page-root .menu-banner.menu-banner-light>div:first-child>span:nth-child(2) {
      color: #5B6472 !important
   }

   .page-root .menu-banner.menu-banner-light .button-dark {
      color: #0F6D99;
      border-color: #0F6D99;
      background: transparent
   }

   .page-root .menu-banner.menu-banner-light .button-dark:hover {
      background: #0F6D99;
      color: #FFFFFF
   }
}

/* ---- hero v2 (centered, grid lines + dashboard) ---- */
.page-root .hero-section {
   position: relative;
   overflow: hidden;
   background: #FFFFFF
}

.page-root .hero-grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: linear-gradient(#E8F1F7 1px, transparent 1px), linear-gradient(90deg, #E8F1F7 1px, transparent 1px);
   background-size: 56px 56px;
   -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 20%, transparent 80%);
   mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 20%, transparent 80%)
}

.page-root .hero-beam {
   position: absolute;
   pointer-events: none;
   border-radius: 2px
}

.page-root .hero-beam.horizontal-line {
   height: 1px;
   width: 160px;
   background: linear-gradient(90deg, rgba(34, 167, 224, 0), #22A7E0 70%, rgba(34, 167, 224, 0));
   animation: hero-bx var(--d) linear var(--dl) infinite
}

.page-root .hero-beam.vertical-line {
   width: 1px;
   height: 160px;
   background: linear-gradient(180deg, rgba(34, 167, 224, 0), #22A7E0 70%, rgba(34, 167, 224, 0));
   animation: hero-by var(--d) linear var(--dl) infinite
}

@keyframes hero-bx {
   0% {
      transform: translateX(-200px);
      opacity: 0
   }

   10% {
      opacity: 1
   }

   90% {
      opacity: 1
   }

   100% {
      transform: translateX(var(--run));
      opacity: 0
   }
}

@keyframes hero-by {
   0% {
      transform: translateY(-200px);
      opacity: 0
   }

   10% {
      opacity: 1
   }

   90% {
      opacity: 1
   }

   100% {
      transform: translateY(var(--run));
      opacity: 0
   }
}

.page-root .hero-glow {
   position: absolute;
   border-radius: 999px;
   pointer-events: none;
   filter: blur(60px)
}

.page-root .hero-content {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center
}

.page-root .hero-badge-wrapper {
   opacity: 0
}

.page-root.is-ready .hero-badge-wrapper {
   animation: inUp 520ms var(--e) both
}

.page-root .hero-badge {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 36px;
   padding: 0 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .85);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #0F6D99;
   letter-spacing: .01em;
   white-space: nowrap
}

.page-root .hero-trust-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   line-height: 22px;
   color: #5B6472;
   white-space: nowrap
}

.page-root .hero-trust-item svg {
   flex-shrink: 0;
   color: #22A7E0
}

.page-root .hero-dashboard-window {
   position: relative;
   z-index: 2;
   margin: 0 auto;
   opacity: 0;
   transform: translateY(48px)
}

.page-root.is-ready .hero-dashboard-window {
   opacity: 1;
   transform: none;
   transition: opacity 900ms var(--e) 600ms, transform 1100ms var(--e) 600ms
}

.page-root .hero-device-frame {
   box-sizing: border-box;
   padding: 12px;
   border-radius: 24px;
   background: rgba(255, 255, 255, .55);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 30px 80px rgba(15, 109, 153, .16), 0 2px 6px rgba(15, 109, 153, .06);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px)
}

.page-root .hero-fade {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 3;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 85%)
}

.page-root .hero-dashboard {
   width: 1200px;
   height: 760px;
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 232px minmax(0, 1fr);
   border-radius: 14px;
   background: #FFFFFF;
   overflow: hidden;
   font-family: inherit;
   text-align: left;
   box-shadow: 0 0 0 1px #E4E8ED
}

.page-root .hero-dashboard .dashboard-sidebar {
   border-right: 1px solid #E4E8ED;
   padding: 20px 14px;
   display: flex;
   flex-direction: column;
   gap: 4px
}

.page-root .hero-dashboard .dashboard-sidebar-heading {
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
   color: #8A93A1;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 14px 10px 6px
}

.page-root .hero-dashboard .dashboard-nav-item {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 36px;
   padding: 0 10px;
   border-radius: 8px;
   font-size: 14px;
   line-height: 20px;
   color: #5B6472
}

.page-root .hero-dashboard .dashboard-nav-item.is-active {
   background: #E9F6FC;
   color: #0F6D99;
   font-weight: 500
}

.page-root .hero-dashboard .dashboard-nav-item svg {
   flex-shrink: 0
}

.page-root .hero-dashboard .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 68px;
   padding: 0 24px;
   border-bottom: 1px solid #E4E8ED
}

.page-root .hero-dashboard .dashboard-search {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 240px;
   height: 36px;
   padding: 0 12px;
   border-radius: 8px;
   background: #F4F6F8;
   font-size: 13px;
   color: #8A93A1
}

.page-root .hero-dashboard .dashboard-new-button {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 36px;
   padding: 0 14px;
   border-radius: 8px;
   background: #22A7E0;
   color: #FFFFFF;
   font-size: 13px;
   font-weight: 500
}

.page-root .hero-dashboard .dashboard-kpi {
   border-radius: 12px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.page-root .hero-dashboard .dashboard-kpi span {
   font-size: 13px;
   line-height: 18px
}

.page-root .hero-dashboard .dashboard-kpi b {
   font-size: 26px;
   line-height: 32px;
   font-weight: 600;
   letter-spacing: -0.02em
}

.page-root .hero-dashboard .dashboard-kpi i {
   font-style: normal;
   font-size: 12px;
   line-height: 16px;
   color: #1E8E5A
}

.page-root .hero-dashboard .card {
   border-radius: 12px;
   box-shadow: inset 0 0 0 1px #E4E8ED;
   padding: 18px
}

.page-root .hero-dashboard .dashboard-card-title {
   font-size: 15px;
   font-weight: 600;
   line-height: 20px;
   color: #2E2E2E
}

.page-root .hero-dashboard .dashboard-card-subtitle {
   font-size: 12px;
   line-height: 16px;
   color: #8A93A1
}

.page-root .hero-dashboard .chart-bar {
   flex: 1 1 0;
   border-radius: 6px 6px 2px 2px;
   background: #D6EFFB;
   transform-origin: 50% 100%
}

.page-root .hero-dashboard .chart-bar.chart-bar-highlight {
   background: #22A7E0
}

.page-root.is-ready .hero-dashboard .chart-bar {
   animation: hero-bar 900ms var(--e) both
}

@keyframes hero-bar {
   from {
      transform: scaleY(0)
   }

   to {
      transform: scaleY(1)
   }
}

.page-root .hero-dashboard .dashboard-activity {
   display: flex;
   align-items: center;
   gap: 12px
}

.page-root .hero-dashboard .dashboard-activity-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 8px;
   flex-shrink: 0
}

.page-root .hero-dashboard table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
   line-height: 18px;
   color: #2E2E2E
}

.page-root .hero-dashboard th {
   text-align: left;
   font-weight: 500;
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #8A93A1;
   padding: 10px 0;
   border-bottom: 1px solid #E4E8ED
}

.page-root .hero-dashboard td {
   padding: 12px 0;
   border-bottom: 1px solid #F0F2F5
}

.page-root .hero-dashboard .nav-pill {
   display: inline-flex;
   align-items: center;
   height: 22px;
   padding: 0 8px;
   border-radius: 999px;
   font-size: 12px
}

/* ---- hero v2 · dashboard ↔ vina sequence ---- */
.page-root .hero-dashboard-tilt {
   transform: perspective(1600px) rotateX(30deg) scale(.84) translateY(30px);
   transform-origin: 50% 0;
   will-change: transform
}

.page-root .hero-dashboard-wake {
   position: absolute;
   inset: 0;
   z-index: 2;
   border-radius: 24px;
   pointer-events: none;
   background: rgba(255, 255, 255, .5);
   -webkit-backdrop-filter: blur(var(--wb, 10px));
   backdrop-filter: blur(var(--wb, 10px));
   opacity: 1
}

.page-root .hero-fade {
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
   mask-image: linear-gradient(180deg, transparent, #000 60%);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 70%, #FFFFFF)
}

.page-root .hero-bottom-bar {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 160px;
   z-index: 3;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 80%);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%);
   mask-image: linear-gradient(180deg, transparent, #000 50%)
}

.page-root .hero-badge-spinner {
   display: inline-flex;
   animation: hero-spin 10s linear infinite
}

@keyframes hero-spin {
   to {
      transform: rotate(360deg)
   }
}

.page-root .hero-dashboard .dashboard-nav-item.is-active[data-h2="nv"] {
   background: #E5EEEB;
   color: #1F4D3F
}

.page-root .hero-flying-cards {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 0;
   z-index: 4;
   pointer-events: none
}

.page-root .hero-fly-card {
   position: absolute;
   left: 0;
   top: 0;
   transform-origin: 50% 50%;
   will-change: transform, opacity;
   visibility: hidden
}

.page-root .hero-fly-card.is-active {
   visibility: visible
}

.page-root .hero-fly-card-body {
   animation: hero-bob 5.5s ease-in-out infinite;
   animation-delay: var(--bd)
}

@keyframes hero-bob {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-8px)
   }
}

.page-root .hero-fly-card-inner {
   display: flex;
   align-items: center;
   gap: 12px;
   box-sizing: border-box;
   border-radius: 14px;
   background: rgba(255, 255, 255, .92);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 1px 2px rgba(15, 109, 153, .06), 0 14px 34px rgba(15, 109, 153, .16);
   transform: scale(0);
   opacity: 0
}

.page-root .hero-fly-card.is-active .hero-fly-card-inner {
   animation: hero-pop 720ms cubic-bezier(.34, 1.56, .64, 1) var(--pd) both
}

@keyframes hero-pop {
   0% {
      transform: scale(.2) rotate(-6deg);
      opacity: 0
   }

   100% {
      transform: none;
      opacity: 1
   }
}

.page-root .hero-fly-card-inner .hero-fly-card-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 10px;
   background: #E9F6FC;
   color: #22A7E0
}

.page-root .hero-fly-card-inner b {
   display: block;
   font-weight: 600;
   color: #2E2E2E;
   letter-spacing: -0.01em;
   white-space: nowrap
}

.page-root .hero-fly-card-inner i {
   display: block;
   font-style: normal;
   color: #5B6472;
   white-space: nowrap
}

.page-root .hero-pane {
   transition: opacity 420ms var(--e), transform 480ms var(--e)
}

.page-root .hero-pane.is-inactive {
   opacity: 0;
   transform: translateY(10px);
   pointer-events: none
}

.page-root .hero-pane.vina-chip {
   position: absolute;
   inset: 0;
   background: #FFFFFF
}

.page-root .hero-demo-cursor {
   position: absolute;
   z-index: 9;
   left: 0;
   top: 0;
   width: 26px;
   height: 26px;
   pointer-events: none;
   opacity: 0;
   transition: transform 760ms cubic-bezier(.45, 0, .2, 1), opacity 300ms var(--e);
   filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25))
}

.page-root .hero-demo-cursor .cursor-ripple {
   position: absolute;
   left: -10px;
   top: -10px;
   width: 20px;
   height: 20px;
   border-radius: 999px;
   background: rgba(34, 167, 224, .35);
   transform: scale(0);
   opacity: 0
}

.page-root .hero-demo-cursor.is-clicking .cursor-ripple {
   animation: hero-rp 520ms var(--e)
}

@keyframes hero-rp {
   0% {
      transform: scale(.3);
      opacity: 1
   }

   100% {
      transform: scale(2.4);
      opacity: 0
   }
}

.page-root .hero-vina-chat {
   font-family: 'Geist', 'Outfit', system-ui, sans-serif;
   color: #13362B
}

.page-root .hero-vina-chat .vina-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 68px;
   padding: 0 24px;
   border-bottom: 1px solid #E8EEEC
}

.page-root .hero-vina-chat .vina-input-button {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 34px;
   padding: 0 12px;
   border-radius: 9px;
   box-shadow: inset 0 0 0 1px #CDDFD9;
   font-size: 13px;
   color: #1F4D3F
}

.page-root .hero-vina-chat .vina-input-button.button-filled {
   background: #1F4D3F;
   color: #FAF8F2;
   box-shadow: none
}

.page-root .hero-vina-chat .vina-label-mono {
   font-family: 'Geist Mono', ui-monospace, monospace;
   font-size: 11px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #6B7C7F
}

.page-root .hero-vina-chat .vina-greeting {
   position: absolute;
   left: 0;
   right: 0;
   top: 92px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   transition: opacity 360ms var(--e), transform 420ms var(--e)
}

.page-root .hero-vina-chat .vina-greeting.is-inactive {
   opacity: 0;
   transform: translateY(-12px)
}

.page-root .hero-vina-chat .vina-suggestion-card {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 14px 16px;
   border-radius: 12px;
   background: #FFFFFF;
   box-shadow: inset 0 0 0 1px #CDDFD9;
   text-align: left;
   transition: box-shadow 200ms var(--e), background-color 200ms var(--e)
}

.page-root .hero-vina-chat .vina-suggestion-card.is-highlighted {
   background: #E5EEEB;
   box-shadow: inset 0 0 0 1.5px #1F4D3F
}

.page-root .hero-vina-chat .vina-suggestion-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: #E5EEEB;
   color: #1F4D3F;
   flex-shrink: 0
}

.page-root .hero-vina-chat .vina-messages {
   position: absolute;
   left: 0;
   right: 0;
   top: 80px;
   height: 340px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 12px;
   padding: 0 64px
}

.page-root .hero-vina-chat .vina-user-message {
   align-self: flex-end;
   max-width: 70%;
   padding: 10px 14px;
   border-radius: 14px 14px 4px 14px;
   background: #1F4D3F;
   color: #FAF8F2;
   font-size: 14px;
   line-height: 20px;
   animation: hero-msg 420ms var(--e) both
}

.page-root .hero-vina-chat .vina-message {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   animation: hero-msg 480ms var(--e) both
}

.page-root .hero-vina-chat .vina-avatar {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: #E5EEEB;
   box-shadow: inset 0 0 0 1px #CDDFD9;
   flex-shrink: 0
}

.page-root .hero-vina-chat .vina-message-bubble {
   flex: 1 1 auto;
   min-width: 0;
   padding: 12px 14px;
   border-radius: 4px 14px 14px 14px;
   background: #FAF8F2;
   box-shadow: inset 0 0 0 1px #E8E3D7;
   font-size: 14px;
   line-height: 21px;
   color: #13362B
}

.page-root .hero-vina-chat .vina-message-bubble b {
   font-weight: 600;
   color: #1F4D3F
}

@keyframes hero-msg {
   from {
      opacity: 0;
      transform: translateY(10px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.page-root .hero-vina-chat .vina-typing-dots {
   display: inline-flex;
   gap: 4px;
   padding: 12px 14px;
   border-radius: 4px 14px 14px 14px;
   background: #FAF8F2;
   box-shadow: inset 0 0 0 1px #E8E3D7
}

.page-root .hero-vina-chat .vina-typing-dots i {
   width: 6px;
   height: 6px;
   border-radius: 99px;
   background: #1F4D3F;
   opacity: .3;
   animation: hero-dot 1s ease-in-out infinite
}

.page-root .hero-vina-chat .vina-typing-dots i:nth-child(2) {
   animation-delay: .15s
}

.page-root .hero-vina-chat .vina-typing-dots i:nth-child(3) {
   animation-delay: .3s
}

@keyframes hero-dot {

   0%,
   100% {
      opacity: .25;
      transform: none
   }

   50% {
      opacity: 1;
      transform: translateY(-3px)
   }
}

.page-root .hero-vina-chat .dashboard-outlet-row {
   display: grid;
   grid-template-columns: 110px minmax(0, 1fr) 80px;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   line-height: 16px;
   color: #13362B
}

.page-root .hero-vina-chat .dashboard-outlet-track {
   height: 8px;
   border-radius: 99px;
   background: #E5EEEB;
   overflow: hidden
}

.page-root .hero-vina-chat .dashboard-outlet-track span {
   display: block;
   height: 100%;
   border-radius: 99px;
   background: #1F4D3F;
   transform-origin: 0 50%;
   animation: hero-ob 900ms var(--e) 200ms both
}

@keyframes hero-ob {
   from {
      transform: scaleX(0)
   }

   to {
      transform: none
   }
}

.page-root .hero-vina-chat .dashboard-restock-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 90px 70px;
   gap: 10px;
   padding: 8px 0;
   border-bottom: 1px solid #E8E3D7;
   font-size: 12.5px;
   line-height: 18px
}

.page-root .hero-vina-chat .vina-input {
   position: absolute;
   left: 64px;
   right: 64px;
   top: 432px;
   height: 64px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 10px 0 16px;
   border-radius: 14px;
   background: #FFFFFF;
   box-shadow: inset 0 0 0 1px #CDDFD9, 0 6px 18px rgba(31, 77, 63, .06);
   font-size: 14px
}

.page-root .hero-vina-chat .vina-mic-button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 99px;
   background: #1F4D3F;
   color: #FAF8F2;
   flex-shrink: 0
}

.page-root .hero-vina-chat .vina-input-caret {
   display: inline-block;
   width: 1.5px;
   height: 16px;
   margin-left: 1px;
   vertical-align: -3px;
   background: #1F4D3F;
   animation: blink 1s steps(1) infinite
}

/* ---- solutions tab bar (omni-style segmented tabs) ---- */
.page-root .solution-tab-wrapper {
   display: flex;
   justify-content: center
}

.page-root .solution-tab-bar {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px;
   border-radius: 14px;
   background: #F4F6F8;
   max-width: 100%;
   overflow-x: auto;
   scrollbar-width: none
}

.page-root .solution-tab-bar::-webkit-scrollbar {
   display: none
}

.page-root .solution-tab {
   flex-shrink: 0;
   border: 0;
   border-radius: 10px;
   background: transparent;
   font: inherit;
   font-weight: 500;
   color: #5B6472;
   white-space: nowrap;
   cursor: pointer;
   opacity: 0;
   transform: translateY(6px);
   transition: background-color 200ms var(--e), color 200ms var(--e), box-shadow 200ms var(--e), opacity 300ms var(--e), transform 360ms var(--e)
}

.page-root .solution-tab-wrapper.is-visible .solution-tab {
   opacity: 1;
   transform: none
}

.page-root .solution-tab:hover {
   background: #FFFFFF;
   color: #2E2E2E
}

.page-root .solution-tab.is-active {
   background: #22A7E0;
   color: #FFFFFF;
   box-shadow: 0 1px 2px rgba(15, 109, 153, .2)
}

/* ---- page-wide ambience + viewport-bottom blur ---- */
.page-root section[style*="background: #FFFFFF"] {
   background: transparent !important
}

.page-root .page-scroller {
   isolation: isolate;
   overflow-x: clip !important
}

.page-root .page-background {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 0;
   z-index: -1;
   pointer-events: none
}

.page-root .background-blob {
   position: absolute;
   border-radius: 999px;
   pointer-events: none
}

.page-root .background-grid {
   position: absolute;
   left: 0;
   right: 0;
   pointer-events: none;
   background-image: linear-gradient(#EAF3F9 1px, transparent 1px), linear-gradient(90deg, #EAF3F9 1px, transparent 1px);
   background-size: 56px 56px;
   -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 10%, transparent 75%);
   mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 10%, transparent 75%)
}

.page-root .page-bottom-blur {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 8;
   pointer-events: none;
   background: linear-gradient(0deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   -webkit-mask-image: linear-gradient(0deg, #000 25%, transparent);
   mask-image: linear-gradient(0deg, #000 25%, transparent)
}

/* ---- hero scroll-down hint ---- */
.page-root .hero-scroll-hint {
   position: absolute;
   left: 50%;
   z-index: 9;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   height: 44px;
   padding: 0 18px 0 14px;
   border: 0;
   border-radius: 999px;
   background: rgba(255, 255, 255, .92);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 1px 2px rgba(15, 109, 153, .08), 0 12px 28px rgba(15, 109, 153, .16);
   font: inherit;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   color: #2E2E2E;
   cursor: pointer;
   opacity: 0;
   transform: translate(-50%, 16px);
   pointer-events: none;
   transition: opacity 360ms var(--e), transform 460ms var(--e)
}

.page-root .hero-scroll-hint.is-active {
   opacity: 1;
   transform: translate(-50%, 0);
   pointer-events: auto
}

.page-root .hero-scroll-hint:hover {
   color: #0F6D99
}

.page-root .hero-scroll-mouse {
   position: relative;
   display: block;
   width: 18px;
   height: 26px;
   box-sizing: border-box;
   border: 1.8px solid #22A7E0;
   border-radius: 10px
}

.page-root .hero-scroll-mouse::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 5px;
   width: 3px;
   height: 6px;
   margin-left: -1.5px;
   border-radius: 2px;
   background: #22A7E0;
   animation: hero-wheel 1.6s var(--e) infinite
}

@keyframes hero-wheel {
   0% {
      opacity: 0;
      transform: translateY(-2px)
   }

   30% {
      opacity: 1
   }

   100% {
      opacity: 0;
      transform: translateY(8px)
   }
}

.page-root .hero-scroll-hint .scroll-hint-chevron {
   display: block;
   animation: hero-chv 1.6s ease-in-out infinite
}

@keyframes hero-chv {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(3px)
   }
}

.page-root .solution-tab-wrapper {
   display: flex;
   width: 100%
}

.page-root .solution-tab-bar {
   display: flex;
   width: 100%;
   box-sizing: border-box;
   padding: 6px;
   gap: 6px
}

@media (min-width: 1024px) {
   .page-root .solution-tab {
      flex: 1 1 0;
      min-width: 0;
      padding: 6px 12px !important
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .solution-tab {
      flex: 1 1 0;
      min-width: 0;
      padding: 6px 6px !important;
      font-size: 14px !important
   }
}

/* ---- footer brand statement ---- */
.page-root .page-bottom-blur {
   transition: opacity 300ms var(--e)
}

.page-root .footer-statement {
   position: relative;
   margin: 0;
   font-weight: 700;
   line-height: .98;
   letter-spacing: -0.045em;
   text-align: center;
   text-wrap: balance;
   user-select: none
}

.page-root .footer-statement .footer-statement-line {
   display: block;
   background-image: linear-gradient(100deg, #0F6D99 0%, #22A7E0 18%, #7FD0F2 32%, #D6EFFB 42%, #22A7E0 55%, #0F6D99 70%, #22A7E0 85%, #7FD0F2 100%);
   background-size: 220% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   animation: fflow 9s linear infinite
}

.page-root .footer-statement .footer-statement-line+.footer-statement-line {
   animation-delay: -2.2s
}

@keyframes fflow {
   from {
      background-position: 0% 50%
   }

   to {
      background-position: -220% 50%
   }
}

.page-root .footer-statement-wrapper {
   position: relative;
   -webkit-mask-image: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, .6) 82%, rgba(0, 0, 0, .18));
   mask-image: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, .6) 82%, rgba(0, 0, 0, .18))
}

.page-root .footer-statement .footer-statement-line .erp-feature-item {
   display: inline-block;
   background: inherit;
   -webkit-background-clip: text;
   background-clip: text
}

.page-root .footer-statement-dot {
   display: inline-block;
   width: .16em;
   height: .16em;
   margin-left: .04em;
   border-radius: 999px;
   background: #22A7E0;
   -webkit-text-fill-color: initial;
   vertical-align: baseline;
   animation: fdot 2.4s ease-in-out infinite
}

@keyframes fdot {

   0%,
   100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(34, 167, 224, .45)
   }

   50% {
      transform: scale(1.15);
      box-shadow: 0 0 0 .12em rgba(34, 167, 224, 0)
   }
}

/* ---- section 12 · success stories (testimonial panel) ---- */
.page-root .stories-panel-shell {
   position: relative;
   box-sizing: border-box;
   background: #F4F6F8;
   color: #2E2E2E;
   box-shadow: none;
   transform-origin: 50% 0;
   will-change: transform
}

.page-root .stories-panel-shell .label-pill {
   background: #FFFFFF;
   color: #0F6D99;
   align-self: flex-start
}

.page-root .stories-stack {
   display: grid;
   overflow: hidden
}

.page-root .stories-stack>.stories-quote-item {
   grid-area: 1/1
}

.page-root .stories-quote-item {
   display: flex;
   flex-direction: column;
   opacity: 0;
   transform: translateY(56%);
   transition: transform 720ms var(--e), opacity 420ms var(--e);
   pointer-events: none
}

.page-root .stories-quote-item.is-moving-up {
   transform: translateY(-56%)
}

.page-root .stories-quote-item.is-active {
   opacity: 1;
   transform: none;
   pointer-events: auto;
   transition: transform 820ms var(--e) 120ms, opacity 620ms var(--e) 160ms
}

.page-root .stories-quote-item.is-next,
.page-root .stories-image.is-next {
   transition: none
}

.page-root .stories-stars {
   display: flex;
   gap: 4px;
   color: #22A7E0
}

.page-root .stories-quote {
   margin: 0;
   font-weight: 400;
   color: #2E2E2E;
   letter-spacing: -0.005em
}

.page-root .stories-author {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   padding-left: 12px;
   border-left: 2px solid #22A7E0;
   font-size: 14px;
   line-height: 20px;
   color: #5B6472
}

.page-root .stories-author b {
   font-weight: 600;
   color: #2E2E2E
}

.page-root .stories-author i {
   font-style: normal;
   color: #A9C9D8
}

.page-root .stories-progress-bar {
   position: relative;
   height: 1px;
   background: rgba(15, 109, 153, .16)
}

.page-root .stories-progress-bar .stories-progress-fill {
   bottom: -0.5px
}

.page-root .stories-nav-button {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 0;
   border-radius: 999px;
   background: #FFFFFF;
   color: #2E2E2E;
   box-shadow: 0 1px 2px rgba(15, 109, 153, .10), 0 6px 16px rgba(15, 109, 153, .10);
   cursor: pointer;
   transition: background-color 200ms var(--e), color 200ms var(--e), transform 200ms var(--e)
}

.page-root .stories-nav-button:hover {
   background: #22A7E0;
   color: #FFFFFF
}

.page-root .stories-nav-button:active {
   transform: scale(.94)
}

.page-root .stories-counter {
   display: flex;
   align-items: flex-start;
   gap: 6px;
   font-weight: 500;
   line-height: 1
}

.page-root .stories-number {
   display: block;
   overflow: hidden;
   height: 1em;
   color: #2E2E2E
}

.page-root .stories-number>span {
   display: block;
   transition: transform 700ms var(--e)
}

.page-root .stories-number>span>span {
   display: block;
   height: 1em
}

.page-root .stories-total {
   color: #8A93A1
}

.page-root .stories-badge-row {
   box-sizing: border-box;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(15, 109, 153, .08), 0 20px 44px rgba(15, 109, 153, .14)
}

.page-root .stories-viewport {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
   background: #F4F6F8;
   isolation: isolate
}

.page-root .stories-image {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translateY(100%);
   transition: transform 900ms var(--e)
}

.page-root .stories-image.is-moving-up {
   transform: translateY(-100%);
   z-index: 1
}

.page-root .stories-image.is-active {
   transform: none;
   z-index: 2
}

.page-root .stories-viewport:hover .stories-image.is-active {
   transform: scale(1.03)
}

.page-root .stories-viewport .stories-play-button {
   z-index: 4
}

.page-root .stories-viewport .stories-panel {
   z-index: 4
}

.page-root .stories-tab {
   position: absolute;
   left: 50%;
   bottom: 0;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   transform: translateX(-50%);
   background: #FFFFFF;
   border-radius: 20px 20px 0 0
}

.page-root .stories-tab::before,
.page-root .stories-tab::after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 20px;
   height: 20px
}

.page-root .stories-tab::before {
   left: -20px;
   background: radial-gradient(circle at 0 0, transparent 19.5px, #FFFFFF 20px)
}

.page-root .stories-tab::after {
   right: -20px;
   background: radial-gradient(circle at 100% 0, transparent 19.5px, #FFFFFF 20px)
}

.page-root .stories-all-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 500;
   line-height: 20px;
   color: #2E2E2E;
   text-decoration: none;
   transition: color 200ms var(--e)
}

.page-root .stories-all-link:hover {
   color: #0F6D99
}

.page-root .stories-all-link svg {
   transition: transform 200ms var(--e)
}

.page-root .stories-all-link:hover svg {
   transform: translate(2px, -2px)
}

/* ---- section 10 · globe half-rotation sprite ---- */
.page-root .customers-globe>img,
.page-root .customers-globe>picture>img {
   display: block;
   width: 100%;
   height: auto
}

.page-root .customers-globe-spin {
   position: absolute;
   left: 0;
   display: block;
   background-repeat: no-repeat;
   pointer-events: none
}

/* ---- brand iconography: outline glyphs, charcoal at rest, brand blue when active ---- */
.page-root .industries-card-icon img {
   filter: brightness(0) saturate(100%);
   opacity: .8;
   transition: filter 120ms var(--e), opacity 120ms var(--e)
}

.page-root .industries-card:hover .industries-card-icon img,
.page-root .industries-card:focus-visible .industries-card-icon img {
   filter: none;
   opacity: 1
}

/* ---- solutions: POS feature list ---- */
.page-root .solution-body {
   display: flex;
   flex-direction: column;
   align-self: stretch
}

.page-root .solution-lead {
   font-weight: 500;
   color: #2E2E2E
}

.page-root .solution-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr)
}

.page-root .solution-list li {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #2E2E2E
}

.page-root .solution-list svg {
   flex-shrink: 0;
   color: #5B6472
}

.page-root .solution-outline {
   margin: 0;
   color: #5B6472
}

/* solutions list · laptop fit */
@media (min-width: 1024px) and (max-width: 1599.98px) {
   .page-root .solution-list {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      column-gap: 16px !important;
      row-gap: 4px !important
   }
}

/* solutions list · tablet fit */
@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .solution-list {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      column-gap: 20px !important
   }
}

@media (max-width: 599.98px) {
   .page-root .solution-outline {
      display: none !important
   }

   .page-root .solution-list {
      display: flex;
      flex-wrap: wrap;
      column-gap: 6px !important
   }

   .page-root .solution-list li {
      height: 24px;
      padding: 0 10px 0 8px;
      border-radius: 999px;
      background: #F4F6F8;
      gap: 4px
   }

   .page-root .solution-list svg {
      width: 12px;
      height: 12px
   }
}

/* solutions list · mobile: two-row swipe strip */
@media (max-width: 599.98px) {
   .page-root .solution-body {
      min-width: 0
   }

   .page-root .solution-list {
      display: grid !important;
      grid-auto-flow: column;
      grid-template-rows: repeat(2, auto);
      grid-auto-columns: max-content;
      column-gap: 6px !important;
      row-gap: 6px !important;
      overflow-x: auto;
      margin: 0 -24px;
      padding: 0 24px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch
   }

   .page-root .solution-list::-webkit-scrollbar {
      display: none
   }

   .page-root .solution-slide {
      width: 100%;
      min-width: 0
   }

   .page-root .solution-slide .solution-slide-text.solution-body {
      max-width: 100%;
      min-width: 0;
      width: 100%
   }

   .page-root .solution-list li {
      white-space: nowrap
   }

   .page-root .solution-slide>p.solution-slide-text {
      line-height: 1.5 !important
   }
}

/* ---- section · ERP (manufacturing / retail) v2 ---- */
.page-root .erp-selector {
   position: relative;
   display: grid;
   gap: 8px;
   padding: 8px;
   border-radius: 20px;
   background: #F4F6F8
}

.page-root .erp-switch-pill {
   position: absolute;
   left: 8px;
   top: 8px;
   border-radius: 14px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 12px 28px rgba(46, 46, 46, .10);
   transition: transform 560ms var(--e);
   pointer-events: none
}

.page-root .erp-option-card {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   border: 0;
   border-radius: 14px;
   background: transparent;
   font: inherit;
   text-align: left;
   color: #2E2E2E;
   cursor: pointer;
   transition: background-color 200ms var(--e)
}

.page-root .erp-option-card:not(.is-active):hover {
   background: rgba(255, 255, 255, .6)
}

.page-root .erp-card-icon {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 14px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06);
   transition: background-color 320ms var(--e)
}

.page-root .erp-option-card.is-active .erp-card-icon {
   background: #22A7E0
}

.page-root .erp-option-card.is-active .erp-card-icon::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   box-shadow: 0 0 0 0 rgba(34, 167, 224, .45);
   animation: erpPing 2.2s var(--e) infinite
}

@keyframes erpPing {
   0% {
      box-shadow: 0 0 0 0 rgba(34, 167, 224, .45)
   }

   100% {
      box-shadow: 0 0 0 12px rgba(34, 167, 224, 0)
   }
}

.page-root .erp-marker {
   display: block;
   background: #2E2E2E;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain;
   transition: background-color 200ms var(--e)
}

.page-root .erp-option-card.is-active .erp-card-icon .erp-marker {
   background: #FFFFFF
}

.page-root .erp-card-title {
   transition: color 240ms var(--e)
}

.page-root .erp-option-card.is-active .erp-card-title {
   color: #0F6D99
}

.page-root .erp-go-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 999px;
   background: #FFFFFF;
   color: #5B6472;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06);
   transition: background-color 200ms var(--e), color 200ms var(--e), transform 360ms var(--e)
}

.page-root .erp-option-card.is-active .erp-go-arrow {
   background: #22A7E0;
   color: #FFFFFF;
   transform: rotate(90deg)
}

.page-root .erp-box {
   position: relative;
   display: grid;
   isolation: isolate;
   border-radius: 24px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 24px 56px -20px rgba(46, 46, 46, .16);
   overflow: hidden
}

.page-root .erp-box::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 20%), rgba(34, 167, 224, .09), rgba(34, 167, 224, 0) 60%);
   transition: opacity 300ms var(--e)
}

.page-root .erp-panel {
   grid-area: 1/1;
   display: flex;
   flex-direction: column;
   min-width: 0;
   visibility: hidden;
   pointer-events: none;
   transition: visibility 0s linear 420ms
}

.page-root .erp-panel.is-active {
   visibility: visible;
   pointer-events: auto;
   transition: none
}

.page-root .erp-panel .erp-reveal-text {
   opacity: 0;
   transform: translateY(16px);
   filter: blur(6px);
   transition: opacity 240ms var(--e), transform 300ms var(--e), filter 240ms var(--e)
}

.page-root .erp-panel.is-active .erp-reveal-text {
   opacity: 1;
   transform: none;
   filter: none;
   transition: opacity 560ms var(--e) calc(var(--d, 0ms) + 220ms), transform 680ms var(--e) calc(var(--d, 0ms) + 220ms), filter 560ms var(--e) calc(var(--d, 0ms) + 220ms)
}

.page-root .erp-panel .erp-title-char,
.page-root .erp-panel .erp-title-word {
   display: inline-block;
   opacity: 0;
   filter: blur(8px);
   transform: translateY(10px);
   transition: opacity 200ms var(--e), filter 200ms var(--e), transform 200ms var(--e)
}

.page-root .erp-panel.is-active .erp-title-char,
.page-root .erp-panel.is-active .erp-title-word {
   opacity: 1;
   filter: none;
   transform: none;
   transition: opacity 460ms var(--e), filter 460ms var(--e), transform 520ms var(--e)
}

.page-root .erp-panel .erp-title-word {
   margin-right: .28em
}

.page-root .erp-word {
   display: inline-block;
   white-space: nowrap;
   margin-right: .26em
}

.page-root .erp-stat b {
   display: block;
   font-weight: 600;
   letter-spacing: -.03em;
   color: #0F6D99;
   line-height: 1.05;
   font-variant-numeric: tabular-nums
}

.page-root .erp-stat span {
   display: block;
   font-size: 13px;
   line-height: 18px;
   color: #5B6472;
   margin-top: 4px
}

.page-root .erp-visual {
   position: relative;
   border-radius: 20px;
   background-color: #F4F6F8;
   background-image: radial-gradient(#DCE5EC 1px, transparent 1.2px);
   background-size: 18px 18px;
   overflow: hidden
}

.page-root .erp-visual>svg {
   display: block;
   width: 100%;
   height: auto
}

.page-root .erp-visual .erp-line {
   stroke: #BFE0F0;
   stroke-width: 1.6;
   fill: none;
   stroke-dasharray: 4 6;
   animation: erpFlow 1.4s linear infinite
}

@keyframes erpFlow {
   to {
      stroke-dashoffset: -20
   }
}

.page-root .erp-visual .erp-node,
.page-root .erp-visual .erp-hub {
   transform-box: fill-box;
   transform-origin: center;
   opacity: 0;
   transform: scale(.86);
   transition: opacity 220ms var(--e), transform 260ms var(--e)
}

.page-root .erp-panel.is-active .erp-visual .erp-node,
.page-root .erp-panel.is-active .erp-visual .erp-hub {
   opacity: 1;
   transform: none;
   transition: opacity 520ms var(--e), transform 620ms cubic-bezier(.34, 1.56, .64, 1)
}

.page-root .erp-visual .erp-node rect {
   transition: fill 200ms var(--e)
}

.page-root .erp-visual .erp-node:hover rect {
   fill: #E9F6FC
}

.page-root .erp-visual .erp-node:hover text {
   fill: #0F6D99
}

.page-root .erp-visual .erp-ring {
   transform-box: fill-box;
   transform-origin: center;
   animation: erpRing 2.6s var(--e) infinite
}

.page-root .erp-visual .erp-ring+.erp-ring {
   animation-delay: 1.3s
}

@keyframes erpRing {
   0% {
      opacity: .55;
      transform: scale(.9)
   }

   100% {
      opacity: 0;
      transform: scale(1.6)
   }
}

.page-root .erp-feature-grid {
   display: grid
}

.page-root .erp-feature {
   display: flex;
   align-items: center;
   gap: 12px;
   box-sizing: border-box;
   border-radius: 12px;
   background: #F4F6F8;
   font-weight: 500;
   color: #2E2E2E;
   opacity: 0;
   transform: translateY(12px) scale(.98);
   transition: opacity 200ms var(--e), transform 240ms var(--e), background-color 200ms var(--e), box-shadow 200ms var(--e), color 200ms var(--e)
}

.page-root .erp-panel.is-active .erp-feature {
   opacity: 1;
   transform: none;
   transition: opacity 460ms var(--e) var(--d, 0ms), transform 560ms var(--e) var(--d, 0ms), background-color 200ms var(--e), box-shadow 200ms var(--e), color 200ms var(--e)
}

.page-root .erp-panel.is-active .erp-feature:hover {
   background: #FFFFFF;
   color: #0F6D99;
   transform: translateY(-3px);
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 14px 28px rgba(15, 109, 153, .14);
   transition-delay: 0ms
}

.page-root .erp-feature-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .05);
   transition: background-color 200ms var(--e)
}

.page-root .erp-feature .erp-marker {
   width: 20px;
   height: 20px
}

.page-root .erp-feature:hover .erp-feature-icon {
   background: #22A7E0
}

.page-root .erp-feature:hover .erp-marker {
   background: #FFFFFF
}

@media (max-width: 599.98px) {
   .page-root .erp-feature-grid.is-limited .erp-feature:nth-child(n+7) {
      display: none
   }
}

.page-root .erp-industry-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.page-root .erp-industry-chip {
   display: inline-flex;
   align-items: center;
   height: 32px;
   padding: 0 14px;
   border-radius: 999px;
   background: #F4F6F8;
   font-size: 13px;
   font-weight: 500;
   color: #2E2E2E;
   white-space: nowrap;
   transition: background-color 200ms var(--e), color 200ms var(--e), transform 200ms var(--e)
}

.page-root .erp-panel .erp-industry-chip {
   background: #FFFFFF
}

.page-root .erp-industry-chip:hover {
   background: #22A7E0;
   color: #FFFFFF;
   transform: translateY(-2px)
}

.page-root .erp-feature-count {
   display: inline-flex;
   align-items: center;
   height: 26px;
   padding: 0 10px;
   border-radius: 999px;
   background: #E9F6FC;
   color: #0F6D99;
   font-size: 12px;
   font-weight: 500
}

.page-root .erp-show-more {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   height: 44px;
   border: 0;
   border-radius: 12px;
   background: #E9F6FC;
   font: inherit;
   font-size: 14px;
   font-weight: 500;
   color: #0F6D99;
   cursor: pointer
}

/* ---- shared draggable marquee ---- */
.page-root [data-mq] {
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   cursor: grab;
   overscroll-behavior-x: contain
}

.page-root [data-mq]::-webkit-scrollbar {
   display: none
}

.page-root [data-mq].is-dragging {
   cursor: grabbing
}

.page-root [data-mq].is-dragging a {
   pointer-events: none
}

.page-root .customers-logo-track {
   animation: none !important
}

/* ---- press · logo cards ---- */
.page-root .press-row {
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.page-root .press-track {
   display: flex;
   width: max-content
}

.page-root .press-logo-card {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   box-sizing: border-box;
   border-radius: 18px;
   background: #FFFFFF;
   text-decoration: none;
   color: #2E2E2E;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 12px 28px rgba(46, 46, 46, .08);
   transition: transform 300ms var(--e), box-shadow 300ms var(--e)
}

.page-root .press-logo-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 2px 4px rgba(46, 46, 46, .06), 0 22px 44px rgba(15, 109, 153, .16)
}

.page-root .press-card-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   min-height: 0
}

.page-root .press-card-logo img {
   display: block;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: grayscale(1);
   opacity: .72;
   transition: filter 300ms var(--e), opacity 300ms var(--e), transform 300ms var(--e)
}

.page-root .press-logo-card:hover .press-card-logo img {
   filter: none;
   opacity: 1;
   transform: scale(1.04)
}

.page-root .press-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   border-top: 1px solid #EEF1F4;
   font-weight: 500;
   color: #5B6472;
   transition: color 200ms var(--e)
}

.page-root .press-logo-card:hover .press-card-footer {
   color: #0F6D99
}

.page-root .press-card-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   border-radius: 999px;
   background: #F4F6F8;
   color: #5B6472;
   transition: background-color 200ms var(--e), color 200ms var(--e), transform 300ms var(--e)
}

.page-root .press-logo-card:hover .press-card-arrow {
   background: #22A7E0;
   color: #FFFFFF;
   transform: rotate(45deg)
}

/* ---- FAQ ---- */
.page-root .faq-item {
   border-radius: 18px;
   background: #F4F6F8;
   transition: background-color 300ms var(--e), box-shadow 300ms var(--e)
}

.page-root .faq-item.is-active {
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 16px 36px rgba(46, 46, 46, .09)
}

.page-root .faq-item:not(.is-active):hover {
   background: #EEF2F5
}

.page-root .faq-question {
   display: flex;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
   border: 0;
   background: transparent;
   font: inherit;
   text-align: left;
   color: #2E2E2E;
   cursor: pointer
}

.page-root .faq-number {
   flex-shrink: 0;
   font-family: 'Geist Mono', 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 12px;
   letter-spacing: .08em;
   color: #8A93A1;
   transition: color 300ms var(--e)
}

.page-root .faq-item.is-active .faq-number {
   color: #22A7E0
}

.page-root .faq-question-text {
   flex: 1;
   min-width: 0;
   font-weight: 500;
   letter-spacing: -.01em;
   transition: color 300ms var(--e)
}

.page-root .faq-item.is-active .faq-question-text {
   color: #0F6D99
}

.page-root .faq-toggle-icon {
   position: relative;
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   border-radius: 999px;
   background: #FFFFFF;
   transition: background-color 300ms var(--e), transform 400ms var(--e)
}

.page-root .faq-item.is-active .faq-toggle-icon {
   background: #22A7E0;
   transform: rotate(180deg)
}

.page-root .faq-toggle-icon i {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 12px;
   height: 1.75px;
   margin: -.875px 0 0 -6px;
   border-radius: 2px;
   background: #2E2E2E;
   transition: transform 400ms var(--e), background-color 300ms var(--e)
}

.page-root .faq-toggle-icon i+i {
   transform: rotate(90deg)
}

.page-root .faq-item.is-active .faq-toggle-icon i {
   background: #FFFFFF
}

.page-root .faq-item.is-active .faq-toggle-icon i+i {
   transform: rotate(0deg)
}

.page-root .faq-answer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 460ms var(--e)
}

.page-root .faq-item.is-active .faq-answer {
   grid-template-rows: 1fr
}

.page-root .faq-answer>div {
   overflow: hidden;
   min-height: 0
}

.page-root .faq-answer-inner {
   opacity: 0;
   transform: translateY(-6px);
   transition: opacity 260ms var(--e), transform 300ms var(--e)
}

.page-root .faq-item.is-active .faq-answer-inner {
   opacity: 1;
   transform: none;
   transition: opacity 420ms var(--e) 120ms, transform 460ms var(--e) 120ms
}

.page-root .faq-answer-inner p {
   margin: 0;
   color: #5B6472
}

.page-root .text-link {
   color: #0F6D99;
   font-weight: 500;
   text-decoration: underline;
   text-decoration-color: rgba(15, 109, 153, .35);
   text-underline-offset: 3px;
   transition: text-decoration-color 200ms var(--e), color 200ms var(--e)
}

.page-root .text-link:hover {
   color: #22A7E0;
   text-decoration-color: currentColor
}

.page-root .faq-help {
   border-radius: 20px;
   background: #F4F6F8
}

/* ---- about / long-form ---- */
.page-root .about-panel {
   border-radius: 28px;
   background: #F4F6F8
}

.page-root .about-table-of-contents {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.page-root .about-chapter-tab {
   position: relative;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
   border: 0;
   border-radius: 10px;
   background: transparent;
   font: inherit;
   text-align: left;
   color: #5B6472;
   cursor: pointer;
   transition: background-color 200ms var(--e), color 200ms var(--e)
}

.page-root .about-chapter-tab:hover {
   color: #2E2E2E;
   background: rgba(255, 255, 255, .6)
}

.page-root .about-chapter-tab.is-active {
   background: #FFFFFF;
   color: #0F6D99;
   font-weight: 500;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06)
}

.page-root .about-chapter-tab.chapter-tab-small {
   font-size: 13px
}

.page-root .about-chapter-tab .about-chapter-marker {
   flex-shrink: 0;
   width: 6px;
   height: 6px;
   border-radius: 99px;
   background: #C9D1DA;
   transition: background-color 200ms var(--e), transform 300ms var(--e)
}

.page-root .about-chapter-tab.is-active .about-chapter-marker {
   background: #22A7E0;
   transform: scale(1.3)
}

.page-root .about-chapter-chips {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   scrollbar-width: none
}

.page-root .about-chapter-chips::-webkit-scrollbar {
   display: none
}

.page-root .about-chapter-chips .about-chapter-tab {
   width: auto;
   flex-shrink: 0;
   white-space: nowrap;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .05)
}

.page-root .about-chapter-chips .about-chapter-tab.is-active {
   background: #22A7E0;
   color: #FFFFFF
}

.page-root .about-chapter-chips .about-chapter-tab .about-chapter-marker {
   display: none
}

.page-root .about-card {
   position: relative;
   border-radius: 20px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 16px 40px rgba(46, 46, 46, .08);
   overflow: hidden
}

.page-root .about-progress-bar {
   position: absolute;
   left: 0;
   top: 0;
   height: 3px;
   width: 100%;
   background: #22A7E0;
   transform-origin: 0 50%;
   transform: scaleX(0);
   z-index: 2
}

.page-root .about-scroller {
   overflow-y: auto;
   overscroll-behavior: auto;
   scrollbar-width: thin;
   scrollbar-color: #C9D1DA transparent;
   -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
   mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent)
}

.page-root .about-scroller::-webkit-scrollbar {
   width: 6px
}

.page-root .about-scroller::-webkit-scrollbar-thumb {
   background: #C9D1DA;
   border-radius: 6px
}

.page-root .about-scroller h3 {
   margin: 0;
   font-weight: 600;
   letter-spacing: -.025em;
   line-height: 1.2;
   color: #2E2E2E
}

.page-root .about-scroller h4 {
   margin: 0;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.3;
   color: #2E2E2E
}

.page-root .about-scroller h5 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: #0F6D99
}

.page-root .about-scroller p {
   margin: 0;
   color: #5B6472
}

.page-root .about-scroller b {
   font-weight: 600;
   color: #2E2E2E
}

.page-root .about-scroller ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.page-root .about-scroller li {
   position: relative;
   padding-left: 22px;
   color: #5B6472
}

.page-root .about-scroller li::before {
   content: "";
   position: absolute;
   left: 4px;
   top: .62em;
   width: 7px;
   height: 7px;
   border-radius: 99px;
   background: #22A7E0
}

.page-root .about-section {
   display: flex;
   flex-direction: column
}

.page-root .about-section+.about-section {
   border-top: 1px solid #EEF1F4
}

/* ---- explore / interlinking ---- */
.page-root .explore-panel {
   border-radius: 28px;
   background: #F4F6F8
}

.page-root .explore-group {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   border-radius: 18px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(46, 46, 46, .05), 0 10px 26px rgba(46, 46, 46, .06);
   min-width: 0
}

.page-root .explore-heading {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   box-sizing: border-box;
   border: 0;
   background: transparent;
   font: inherit;
   text-align: left;
   color: #2E2E2E
}

.page-root .explore-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: #E9F6FC
}

.page-root .explore-marker {
   display: block;
   width: 20px;
   height: 20px;
   background: #0F6D99;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain
}

.page-root .explore-title {
   flex: 1;
   min-width: 0;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: -.01em
}

.page-root .explore-count {
   display: inline-flex;
   align-items: center;
   height: 22px;
   padding: 0 8px;
   border-radius: 999px;
   background: #F4F6F8;
   color: #5B6472;
   font-size: 12px;
   font-weight: 500
}

.page-root .explore-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   column-gap: 20px
}

.page-root .explore-list a {
   position: relative;
   display: inline-flex;
   align-items: start;
   gap: 6px;
   padding: 5px 0;
   font-size: 14px;
   line-height: 20px;
   color: #5B6472;
   text-decoration: none;
   transition: color 180ms var(--e), transform 220ms var(--e)
}

.page-root .explore-list a::before {
   content: "";
   width: 4px;
   height: 4px;
   border-radius: 99px;
   background: #C9D1DA;
   flex-shrink: 0;
   transition: background-color 180ms var(--e), transform 220ms var(--e);
       position: absolute;
    top: 14px;
    left: -10px;
}

.page-root .explore-list a:hover {
   color: #0F6D99;
   transform: translateX(3px)
}

.page-root .explore-list a:hover::before {
   background: #22A7E0;
   transform: scale(1.5)
}

.page-root .explore-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
   color: #0F6D99;
   text-decoration: none
}

.page-root .explore-cta svg {
   transition: transform 220ms var(--e)
}

.page-root .explore-cta:hover svg {
   transform: translateX(3px)
}

.page-root .explore-chevron {
   flex-shrink: 0;
   transition: transform 300ms var(--e);
   color: #5B6472
}

.page-root .explore-group.is-active .explore-chevron {
   transform: rotate(180deg)
}

.page-root .explore-body {
   display: grid;
   grid-template-rows: 1fr
}

.page-root .explore-body>div {
   overflow: hidden;
   min-height: 0
}

@media (max-width: 599.98px) {
   .page-root .explore-heading {
      cursor: pointer
   }

   .page-root .explore-body {
      grid-template-rows: 0fr;
      transition: grid-template-rows 420ms var(--e)
   }

   .page-root .explore-group.is-active .explore-body {
      grid-template-rows: 1fr
   }
}

/* ---- story video popup ---- */
.page-root button.stories-play-button {
   border: 0;
   padding: 0;
   font: inherit;
   cursor: pointer
}

.page-root .video-modal {
   position: absolute;
   inset: 0;
   z-index: 60;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: vmIn 260ms var(--e) both
}

.page-root .video-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(46, 46, 46, .62);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   cursor: pointer
}

.page-root .video-modal-box {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 14px;
   box-sizing: border-box;
   border-radius: 20px;
   background: #FFFFFF;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
   animation: vmBox 420ms cubic-bezier(.2, .9, .3, 1.1) both
}

.page-root .video-modal-frame {
   position: relative;
   width: 100%;
   aspect-ratio: 16/9;
   border-radius: 14px;
   overflow: hidden;
   background: #1F1F1F
}

.page-root .video-modal-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block
}

.page-root .video-modal-close {
   position: absolute;
   top: -14px;
   right: -14px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 999px;
   background: #FFFFFF;
   color: #2E2E2E;
   cursor: pointer;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
   transition: background-color 200ms var(--e), color 200ms var(--e), transform 300ms var(--e)
}

.page-root .video-modal-close:hover {
   background: #22A7E0;
   color: #FFFFFF;
   transform: rotate(90deg)
}

@keyframes vmIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes vmBox {
   from {
      opacity: 0;
      transform: translateY(24px) scale(.96)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.page-root button.vina-button {
   appearance: none;
   -webkit-appearance: none
}

/* ---- tablet hero: modern tablet (uniform thin bezel, aluminium rim), cropped to the screen and masked out at the bottom ---- */
@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .hero-status-bar {
      position: relative;
      padding: 13px;
      border-radius: 36px;
      background: #111214;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: inset 0 0 0 1.5px #D9DEE5, inset 0 0 0 2.5px #A9B0BA, inset 0 0 0 4px #1B1C1F, 0 30px 70px rgba(15, 109, 153, .16)
   }

   .page-root .hero-status-bar::before {
      content: "";
      position: absolute;
      right: 96px;
      top: -3px;
      width: 52px;
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: #B9C0C9
   }

   .page-root .hero-camera {
      position: absolute;
      left: 50%;
      top: 4px;
      width: 5px;
      height: 5px;
      margin-left: -2.5px;
      border-radius: 999px;
      background: #23252A;
      box-shadow: inset 0 0 0 1px #3A3E44;
      z-index: 2
   }

   .page-root .hero-status-bar .hero-dashboard {
      width: 1080px;
      height: 778px;
      transform: scale(.66111);
      transform-origin: 0 0;
      grid-template-columns: 212px minmax(0, 1fr);
      border-radius: 36px;
      box-shadow: none
   }

   .page-root .hero-status-bar .hero-dashboard .dashboard-search {
      width: 200px
   }

   .page-root .hero-dashboard-tilt {
      overflow: visible !important;
      padding-top: 3px;
      -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, rgba(0, 0, 0, .55) 78%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0, #000 58%, rgba(0, 0, 0, .55) 78%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      box-sizing: border-box
   }

   .page-root .hero-dashboard-wake {
      border-radius: 36px 36px 0 0
   }

   .page-root .hero-dashboard-tilt .hero-fade,
   .page-root .hero-bottom-bar {
      display: none
   }
}

/* ---- mobile hero refinements ---- */
@media (max-width: 599.98px) {
   .page-root .hero-trust-strip {
      display: block;
      width: calc(100% + 40px);
      margin: 0 -20px;
      padding: 2px 0;
      box-sizing: border-box;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent)
   }

   .page-root .hero-trust-track {
      display: flex;
      width: max-content;
      gap: 28px;
      padding-right: 28px
   }

   .page-root .hero-trust-strip .hero-trust-item {
      flex-shrink: 0;
      font-size: 15px
   }

   .page-root .hero-trust-strip::-webkit-scrollbar {
      display: none
   }
}

@media (max-width: 1023.98px) {
   .page-root .hero-fly-card {
      transform: translateX(-50%)
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .hero-fly-card-inner {
      width: max-content !important
   }
}

/* ---- tablet sectors: tabs → image → category nav → cards → CTA ---- */
@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root #industries .industries-card {
      padding: 18px 16px;
      gap: 6px;
      border: 0;
      background: #FFFFFF;
      box-shadow: 0 1px 2px rgba(46, 46, 46, .05), 0 8px 20px rgba(46, 46, 46, .07)
   }
}

@media (max-width: 599.98px) {
   .page-root .hero-fly-card-inner {
      width: max-content
   }

   .page-root .hero-scroll-hint {
      white-space: nowrap
   }
}

/* ---- mobile portrait dashboard ---- */
@media (max-width: 599.98px) {
   .page-root .hero-bottom-bar {
      height: 64px
   }

   .page-root .hero-dashboard-main {
      padding: 8px;
      border-radius: 24px
   }

   .page-root .hero-dashboard-main .hero-dashboard {
      width: 100%;
      height: 584px;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      border-radius: 18px
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-sidebar {
      flex-direction: row;
      align-items: center;
      gap: 6px;
      padding: 10px 10px;
      border-right: 0;
      border-bottom: 1px solid #E4E8ED;
      overflow: hidden
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-sidebar>div:first-child {
      height: auto !important;
      padding: 0 4px 0 2px !important;
      margin-right: auto
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-sidebar>div:first-child img {
      height: 20px !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-sidebar-heading,
   .page-root .hero-dashboard-main .hero-dashboard .dashboard-nav-item:not([data-h2]) {
      display: none
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-nav-item {
      height: 30px;
      padding: 0 10px;
      font-size: 12.5px;
      gap: 6px;
      white-space: nowrap
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-nav-item svg {
      width: 14px;
      height: 14px
   }

   .page-root .hero-dashboard-main .hero-dashboard .topbar {
      height: 48px;
      padding: 0 14px
   }

   .page-root .hero-dashboard-main .hero-dashboard .topbar>div:first-child {
      font-size: 15px !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-search,
   .page-root .hero-dashboard-main .hero-dashboard .dashboard-new-button {
      display: none
   }

   .page-root .hero-dashboard-main .hero-dashboard .topbar+div {
      padding: 12px !important;
      gap: 12px !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .topbar+div>div:nth-child(1) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-kpi {
      padding: 10px 12px;
      gap: 2px
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-kpi span {
      font-size: 11.5px
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-kpi b {
      font-size: 18px;
      line-height: 24px
   }

   .page-root .hero-dashboard-main .hero-dashboard .dashboard-kpi i {
      font-size: 10.5px
   }

   .page-root .hero-dashboard-main .hero-dashboard .topbar+div>div:nth-child(2) {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .topbar+div>div:nth-child(2)>.card:nth-child(2) {
      display: none !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .card {
      padding: 12px 12px
   }

   .page-root .hero-dashboard-main .hero-dashboard .card [style*="height: 170px"] {
      height: 104px !important;
      gap: 6px !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .card .dashboard-card-subtitle[style*="flex: 1 1 0"] {
      font-size: 9px
   }

   .page-root .hero-dashboard-main .hero-dashboard .card .nav-pill {
      height: 20px;
      font-size: 10.5px
   }

   .page-root .hero-dashboard-main .hero-dashboard table {
      font-size: 11.5px
   }

   .page-root .hero-dashboard-main .hero-dashboard th {
      font-size: 9.5px;
      padding: 8px 0
   }

   .page-root .hero-dashboard-main .hero-dashboard td {
      padding: 9px 0
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-header {
      height: 48px;
      padding: 0 14px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-header>div:last-child {
      display: none !important
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-header>div:first-child>div>div:nth-child(2) {
      display: none
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-greeting {
      top: 64px;
      gap: 10px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-greeting>div:nth-child(2) {
      font-size: 21px !important;
      line-height: 27px !important;
      padding: 0 18px;
      text-align: center
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-greeting>.vina-label-mono {
      padding: 0 16px !important;
      text-align: center
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-greeting>div:nth-child(4) {
      grid-template-columns: minmax(0, 1fr) !important;
      padding: 0 14px !important;
      gap: 8px !important
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-greeting>div:nth-child(4)>div:nth-child(n+3) {
      display: none !important
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-suggestion-card {
      padding: 12px 12px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-messages {
      top: 60px;
      height: auto;
      bottom: 112px;
      padding: 0 12px;
      gap: 10px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-user-message {
      max-width: 86%;
      font-size: 13px;
      line-height: 18px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-message-bubble {
      font-size: 12.5px;
      line-height: 19px;
      padding: 10px 12px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-avatar {
      width: 26px;
      height: 26px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .dashboard-outlet-row {
      grid-template-columns: 76px minmax(0, 1fr) 60px;
      font-size: 10.5px;
      gap: 6px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .dashboard-restock-item {
      grid-template-columns: minmax(0, 1fr) 46px;
      font-size: 11.5px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .dashboard-restock-item>span:nth-child(2) {
      display: none
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-message-bubble .vina-input-button {
      font-size: 11.5px;
      padding: 0 10px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-input {
      left: 12px;
      right: 12px;
      top: auto;
      bottom: 38px;
      height: 52px;
      font-size: 13px
   }

   .page-root .hero-dashboard-main .hero-vina-chat .vina-input .vina-input-button {
      display: none
   }

   .page-root .hero-dashboard-main .hero-vina-chat>.vina-label-mono[style*="top: 506px"] {
      top: auto !important;
      bottom: 14px;
      font-size: 10px !important
   }
}

/* ---- mobile sectors: live-site order (tabs → image → category nav → cards → CTA) ---- */
@media (max-width: 599.98px) {
   .page-root #industries .industries-card {
      padding: 14px 12px;
      gap: 6px;
      border: 0;
      background: #FFFFFF;
      box-shadow: 0 1px 2px rgba(46, 46, 46, .05), 0 8px 20px rgba(46, 46, 46, .07)
   }
}

@media (max-width: 1023.98px) {
   .page-root #industries .industries-card:hover {
      border-color: transparent
   }
}

@media (max-width: 599.98px) {
   .page-root #industries .industries-card-icon {
      width: 34px;
      height: 34px
   }
}

@media (max-width: 1023.98px) {
   .page-root #industries .industries-arrow {
      border: 0;
      box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 6px 16px rgba(46, 46, 46, .08);
      flex-shrink: 0
   }

   .page-root #industries div[role="tablist"] {
      padding: 6px;
      border-radius: 14px;
      background: #F4F6F8
   }

   .page-root #industries .industries-tab {
      padding: 12px 14px;
      justify-content: center
   }

   .page-root #industries .industries-tab.is-active {
      background: #FFFFFF;
      box-shadow: 0 1px 2px rgba(46, 46, 46, .06), 0 6px 16px rgba(46, 46, 46, .08)
   }
}

/* ---- tablet features tabs: horizontal row ---- */
@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .features-tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 32px;
      margin: 0 -24px;
      padding: 0 24px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch
   }
}

/* ---- mobile ERP selector: horizontal scroll ---- */
@media (max-width: 599.98px) {
   .page-root .erp-scroller {
      margin: 0 -20px;
      padding: 0 20px;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 20px;
      -webkit-overflow-scrolling: touch
   }

   .page-root .erp-scroller::-webkit-scrollbar {
      display: none
   }

   .page-root .erp-scroller .erp-selector {
      display: flex;
      width: max-content
   }

   .page-root .erp-scroller .erp-option-card {
      width: 262px;
      flex-shrink: 0;
      scroll-snap-align: start
   }

   .page-root .erp-feature-count {
      white-space: nowrap;
      flex-shrink: 0
   }
}

/* ---- mobile features tabs: horizontal scroll ---- */
@media (max-width: 599.98px) {
   .page-root .features-tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 24px;
      margin: 0 -20px;
      padding: 0 20px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch
   }
}

@media (max-width: 1023.98px) {
   .page-root .features-tabs::-webkit-scrollbar {
      display: none
   }

   .page-root .features-tabs .features-tab {
      width: auto;
      flex-shrink: 0;
      white-space: nowrap
   }

   .page-root .features-tabs::after {
      content: "";
      flex: 0 0 1px
   }
}

/* ---- tablet globe: fade out the lower edge behind the logo rows ---- */
@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .customers-globe {
      -webkit-mask-image: linear-gradient(#000 84%, transparent 100%);
      mask-image: linear-gradient(#000 84%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat
   }
}

/* ---- mobile globe: soften the lower edge under the logo rows ---- */
@media (max-width: 599.98px) {
   .page-root .customers-globe {
      -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
      mask-image: linear-gradient(#000 88%, transparent 100%)
   }
}

/* ---- mobile hero: phone mockup around dashboard + vina ---- */
@media (max-width: 599.98px) {
   .page-root .hero-dashboard-main {
      position: relative;
      padding: 10px;
      border-radius: 50px;
      background: #2E2E2E;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: inset 0 0 0 1.5px #4A4F57, inset 0 0 0 4px #1C1D1F, 0 30px 70px rgba(15, 109, 153, .20), 0 4px 12px rgba(46, 46, 46, .10)
   }

   .page-root .hero-dashboard-main::before,
   .page-root .hero-dashboard-main::after {
      content: "";
      position: absolute;
      width: 3px;
      border-radius: 2px;
      background: #3A3D42
   }

   .page-root .hero-dashboard-main::before {
      left: -3px;
      top: 150px;
      height: 64px;
      box-shadow: 0 -52px 0 -12px #3A3D42
   }

   .page-root .hero-dashboard-main::after {
      right: -3px;
      top: 180px;
      height: 92px
   }

   .page-root .hero-dashboard-main .hero-dashboard {
      height: 640px;
      border-radius: 40px;
      grid-template-rows: 40px auto minmax(0, 1fr);
      box-shadow: none
   }

   .page-root .hero-dashboard-main .hero-dashboard::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 7px;
      width: 110px;
      height: 4px;
      margin-left: -55px;
      border-radius: 999px;
      background: #2E2E2E;
      opacity: .85;
      z-index: 6;
      pointer-events: none
   }

   .page-root .hero-status-time {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px 0 30px;
      background: #FFFFFF;
      z-index: 5
   }

   .page-root .hero-status-clock {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.01em;
      color: #2E2E2E
   }

   .page-root .hero-dynamic-island {
      position: absolute;
      left: 50%;
      top: 10px;
      width: 88px;
      height: 26px;
      margin-left: -44px;
      border-radius: 999px;
      background: #151617
   }

   .page-root .hero-badge-sparkle {
      display: flex;
      align-items: center;
      gap: 5px
   }

   .page-root .hero-badge-sparkle svg {
      display: block
   }

   .page-root .hero-bottom-bar,
   .page-root .hero-dashboard-main~.hero-fade,
   .page-root .hero-dashboard-tilt .hero-fade {
      display: none
   }

   .page-root .hero-dashboard-main {
      z-index: 1
   }

   .page-root .hero-dashboard-wake {
      inset: -4px;
      border-radius: 54px;
      overflow: hidden;
      -webkit-mask-image: radial-gradient(#000, #000);
      mask-image: radial-gradient(#000, #000)
   }
}

/* ---- hero dashboard sidebar: live-app navigation ---- */
.page-root .hero-dashboard .dashboard-nav-item .dashboard-nav-chevron {
   margin-left: auto;
   color: #8A93A1
}

@media (prefers-reduced-motion: reduce) {

   .page-root *,
   .page-root *::before,
   .page-root *::after {
      transition-duration: 0ms !important;
      transition-delay: 0ms !important;
      animation-duration: 0ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important
   }
}

/* ---- Page frame ----
   The page scrolls inside .pgscroll; #app is sized (and, below a range's design
   width, scaled) by js/runtime.js. */
#app {
   position: relative;
   transform-origin: 0 0;
   overflow-x: clip;
   background: #FFFFFF
}

/* header, menus, video pop-up and bottom fade live in a fixed layer that
   js/vasy-page.js sizes (and scales) like the original full-screen app */
#appo {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   transform-origin: 0 0;
   pointer-events: none
}

#appo .page-root {
   pointer-events: none
}

#appo .page-root .video-modal,
#appo .page-root .hero-scroll-hint.is-active {
   pointer-events: auto
}

/* switches on the host element:  <div id="vasy-page" data-header="off" data-footer="off"> */
:host([data-header="off"]) #appo header,
:host([data-header="off"]) #appo .menu-scrim {
   display: none !important
}

:host([data-footer="off"]) #footer {
   display: none !important
}

/* elements toggled by script use the hidden attribute */
:is(#app, #appo) [hidden] {
   display: none !important
}

@media (max-width: 599.98px) {
   .page-root [data-js~="marquee"] {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      cursor: grab;
      overscroll-behavior-x: contain
   }

   .page-root [data-js~="marquee"]::-webkit-scrollbar {
      display: none
   }

   .page-root [data-js~="marquee"].is-dragging {
      cursor: grabbing
   }

   .page-root [data-js~="marquee"].is-dragging a {
      pointer-events: none
   }
}

/* ---- Per-screen values (generated from the four original layouts) ----
   .v-*  : element exists only on some screens (d=desktop l=laptop t=tablet m=mobile)
   .rvN  : the element keeps its inline style; values that differ per screen are
           supplied through --r-* custom properties below. */
@media (min-width: 1600px) {

   .show-laptop,
   .show-mobile,
   .show-tablet,
   .show-tablet-mobile {
      display: none !important
   }

   .hero-fly-card-1 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-1 {
      width: 236px
   }

   .hero-fly-card-inner-1 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-1 {
      width: 236px
   }

   .hero-fly-card-icon-1 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-1) {
      width: 20px;
      height: 20px
   }

   .bold-1 {
      --r-font-size: 16px
   }

   .italic-1 {
      --r-font-size: 12.5px
   }

   .hero-fly-card-2 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-2 {
      width: 236px
   }

   .hero-fly-card-inner-2 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-2 {
      width: 236px
   }

   .hero-fly-card-icon-2 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-2) {
      width: 20px;
      height: 20px
   }

   .bold-2 {
      --r-font-size: 16px
   }

   .italic-2 {
      --r-font-size: 12.5px
   }

   .hero-fly-card-3 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-3 {
      width: 236px
   }

   .hero-fly-card-inner-3 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-3 {
      width: 236px
   }

   .hero-fly-card-icon-3 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-3) {
      width: 20px;
      height: 20px
   }

   .bold-3 {
      --r-font-size: 16px
   }

   .italic-3 {
      --r-font-size: 12.5px
   }

   .hero-fly-card-4 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-4 {
      width: 236px
   }

   .hero-fly-card-inner-4 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-4 {
      width: 236px
   }

   .hero-fly-card-icon-4 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-4) {
      width: 20px;
      height: 20px
   }

   .bold-4 {
      --r-font-size: 16px
   }

   .italic-4 {
      --r-font-size: 12.5px
   }

   .hero-fly-card-5 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-5 {
      width: 236px
   }

   .hero-fly-card-inner-5 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-5 {
      width: 236px
   }

   .hero-fly-card-icon-5 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-5) {
      width: 20px;
      height: 20px
   }

   .bold-5 {
      --r-font-size: 16px
   }

   .italic-5 {
      --r-font-size: 12.5px
   }

   .hero-fly-card-6 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-6 {
      width: 236px
   }

   .hero-fly-card-inner-6 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-6 {
      width: 236px
   }

   .hero-fly-card-icon-6 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-6) {
      width: 20px;
      height: 20px
   }

   .bold-6 {
      --r-font-size: 16px
   }

   .italic-6 {
      --r-font-size: 12.5px
   }

   .hero-fly-card-7 {
      --r-height: 72px
   }

   :is(#app, #appo) .page-root .hero-fly-card-7 {
      width: 236px
   }

   .hero-fly-card-inner-7 {
      --r-height: 72px;
      --r-padding: 0 14px;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-7 {
      width: 236px
   }

   .hero-fly-card-icon-7 {
      --r-width: 40px;
      --r-height: 40px
   }

   :where(.icon-7) {
      width: 20px;
      height: 20px
   }

   .bold-7 {
      --r-font-size: 16px
   }

   .italic-7 {
      --r-font-size: 12.5px
   }

   .hero-beam-1 {
      --run: 2120px
   }

   .hero-beam-2 {
      --run: 2120px
   }

   .hero-beam-3 {
      --run: 1400px
   }

   .hero-beam-4 {
      --r-left: 1568px;
      --run: 1400px
   }

   .hero-beam-5 {
      --run: 2120px
   }

   .hero-beam-6 {
      --r-left: 952px;
      --run: 1400px
   }

   .hero-beam-7 {
      --r-left: 1736px;
      --run: 1400px
   }

   .hero-glow-1 {
      --r-left: -120px;
      --r-top: 560px;
      --r-width: 520px;
      --r-height: 520px
   }

   .hero-glow-2 {
      --r-right: -120px;
      --r-top: 560px;
      --r-width: 520px;
      --r-height: 520px
   }

   .hero-content-1 {
      --r-gap: 24px;
      --r-padding: 0 0px;
      --r-padding-top: 60px;
      --r-justify-content: center
   }

   :is(#app, #appo) .page-root .hero-content-1 {
      min-height: 660px
   }

   .hero-split-heading-1 {
      --r-max-width: 1240px;
      --r-font-size: 72px
   }

   :is(#app, #appo) .page-root .hero-split-heading-1 {
      white-space: nowrap
   }

   .hero-split-heading-2 {
      --r-max-width: 680px;
      --r-font-size: 21px
   }

   .hero-badge-wrapper-1 {
      --r-flex-direction: row
   }

   .hero-button-1 {
      --r-height: 48px
   }

   :is(#app, #appo) .page-root .hero-badge-wrapper-2 {
      display: flex;
      flex-direction: row;
      gap: 28px;
      padding-top: 4px
   }

   .hero-dashboard-window-1 {
      --r-width: 1371px;
      --r-height: 784px;
      --r-margin-top: 0px
   }

   .hero-dashboard-tilt-1 {
      --r-width: 1371px;
      --r-height: 784px
   }

   :is(#app, #appo) .page-root .hero-dashboard-tilt-1 {
      overflow: hidden
   }

   .hero-device-frame-1 {
      --r-width: 1224px;
      --r-transform: scale(1.12)
   }

   .hero-fade-1 {
      --r-height: 188px
   }

   .financial-year-block-1 {
      --r-padding: 88px 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .financial-year-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .financial-year-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .financial-year-heading-1 {
      white-space: nowrap
   }

   .financial-year-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .financial-year-paragraph-1 {
      white-space: nowrap
   }

   :is(#app, #appo) .page-root .financial-year-block-2 {
      position: relative;
      height: 1500px
   }

   .financial-year-block-3 {
      --r-grid-template-columns: minmax(0, 1fr) 400px minmax(0, 1fr);
      --r-gap: 48px
   }

   .financial-year-block-4 {
      --r-padding: 32px
   }

   .financial-year-heading-2 {
      --r-font-size: 28px
   }

   .financial-year-block-5 {
      --r-width: 400px;
      --r-height: 280px
   }

   .financial-year-block-6 {
      --r-width: 280px;
      --r-height: 280px
   }

   .financial-year-image-1 {
      --r-width: 280px;
      --r-height: 280px
   }

   .financial-year-block-7 {
      --r-padding: 32px
   }

   .financial-year-heading-3 {
      --r-font-size: 28px
   }

   .solutions-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .solutions-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .solutions-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .solutions-heading-1 {
      white-space: nowrap
   }

   .solutions-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .solutions-paragraph-1 {
      white-space: nowrap
   }

   .solutions-block-2 {
      --r-height: 3200px
   }

   .solutions-block-3 {
      --r-top: 112px;
      --r-display: grid;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .solutions-block-3 {
      grid-template-columns: 560px minmax(0, 1fr);
      align-items: stretch
   }

   :is(#app, #appo) .page-root .solution-tab-wrapper-1 {
      grid-column: 1 / -1
   }

   .solution-tab-1 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solution-tab-2 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solution-tab-3 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solution-tab-4 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solution-tab-5 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solution-tab-6 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solution-tab-7 {
      --r-height: 44px;
      --r-padding: 0 20px;
      --r-font-size: 16px
   }

   .solutions-block-4 {
      --r-padding: 48px;
      --r-border-radius: 14px;
      --r-align-items: center
   }

   :is(#app, #appo) .page-root .solutions-block-4 {
      min-height: 528px
   }

   .solutions-eyebrow-label-1 {
      --r-top: 24px;
      --r-right: 24px
   }

   .solution-slide-1 {
      --r-gap: 24px
   }

   .solution-slide-text-1 {
      --r-font-size: 38px
   }

   .solution-slide-text-2 {
      --r-font-size: 16px
   }

   .solution-slide-2 {
      --r-gap: 24px
   }

   .solution-slide-text-3 {
      --r-font-size: 38px
   }

   .solution-slide-text-4 {
      --r-font-size: 16px
   }

   .solution-slide-3 {
      --r-gap: 24px
   }

   .solution-slide-text-5 {
      --r-font-size: 38px
   }

   .solution-slide-text-6 {
      --r-font-size: 16px
   }

   .solution-slide-4 {
      --r-gap: 24px
   }

   .solution-slide-text-7 {
      --r-font-size: 38px
   }

   .solution-slide-text-8 {
      --r-font-size: 16px
   }

   .solution-slide-5 {
      --r-gap: 24px
   }

   .solution-slide-text-9 {
      --r-font-size: 38px
   }

   .solution-slide-text-10 {
      --r-font-size: 16px
   }

   .solution-slide-6 {
      --r-gap: 24px
   }

   .solution-slide-text-11 {
      --r-font-size: 38px
   }

   .solution-slide-text-12 {
      --r-font-size: 16px
   }

   .solution-slide-7 {
      --r-gap: 24px
   }

   .solution-slide-text-13 {
      --r-font-size: 38px
   }

   .solution-slide-text-14 {
      --r-font-size: 16px
   }

   .solutions-block-5 {
      --r-min-height: 480px
   }

   .clients-block-1 {
      --r-padding: 96px 0 48px;
      --r-display: grid
   }

   :is(#app, #appo) .page-root .clients-block-1 {
      width: 1440px;
      margin: 0 auto;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 24px;
      align-items: center
   }

   .industries-block-1 {
      --r-padding: 88px 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .industries-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .industries-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .industries-heading-1 {
      white-space: nowrap
   }

   .industries-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .industries-paragraph-1 {
      white-space: nowrap
   }

   .industries-block-2 {
      --r-display: grid;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .industries-block-2 {
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: start
   }

   .industries-block-3 {
      --r-display: flex
   }

   :is(#app, #appo) .page-root .industries-block-3 {
      flex-direction: column
   }

   :is(#app, #appo) .page-root .industries-block-4 {
      box-sizing: border-box;
      padding: 32px;
      border-radius: 14px;
      background: #FFFFFF;
      box-shadow: 0 32px 64px -24px rgba(46, 46, 46, .18), 0 4px 12px rgba(46, 46, 46, .06);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 440px;
      gap: 32px;
      align-items: stretch
   }

   :is(#app, #appo) .page-root .industries-block-5 {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-width: 0
   }

   .industries-block-6 {
      --r-height: 300px
   }

   .erp-block-1 {
      --r-padding: 88px 0;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .erp-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .erp-heading-1 {
      --r-font-size: 48px
   }

   :is(#app, #appo) .page-root .erp-heading-1 {
      white-space: nowrap
   }

   .erp-paragraph-1 {
      --r-font-size: 20px
   }

   .erp-option-card-1 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .erp-card-icon-1 {
      --r-width: 56px;
      --r-height: 56px
   }

   .erp-card-title-1 {
      --r-font-size: 22px
   }

   .erp-option-card-2 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .erp-card-icon-2 {
      --r-width: 56px;
      --r-height: 56px
   }

   .erp-card-title-2 {
      --r-font-size: 22px
   }

   .erp-box-1 {
      --r-padding: 48px
   }

   .erp-panel-1 {
      --r-gap: 40px
   }

   .erp-block-2 {
      --r-grid-template-columns: minmax(0, 1fr) 560px;
      --r-gap: 56px
   }

   .erp-block-3 {
      --r-gap: 22px
   }

   .erp-heading-2 {
      --r-font-size: 40px
   }

   .erp-paragraph-2 {
      --r-font-size: 16px
   }

   .erp-reveal-text-1 {
      --r-font-size: 16px
   }

   .erp-reveal-text-2 {
      --r-gap: 48px
   }

   .erp-bold-1 {
      --r-font-size: 36px
   }

   .erp-bold-2 {
      --r-font-size: 36px
   }

   .erp-text-1 {
      --r-font-size: 18px
   }

   .erp-feature-grid-1 {
      --r-grid-template-columns: repeat(4, minmax(0, 1fr));
      --r-gap: 12px
   }

   .erp-feature-1 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-2 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-3 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-4 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-5 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-6 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-7 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-8 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-9 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-10 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-11 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-12 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-13 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-14 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-15 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-16 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-reveal-text-3 {
      --r-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      --r-gap: 40px;
      --r-padding: 24px 28px
   }

   .erp-panel-2 {
      --r-gap: 40px
   }

   .erp-block-4 {
      --r-grid-template-columns: minmax(0, 1fr) 560px;
      --r-gap: 56px
   }

   .erp-block-5 {
      --r-gap: 22px
   }

   .erp-heading-3 {
      --r-font-size: 40px
   }

   .erp-paragraph-3 {
      --r-font-size: 16px
   }

   .erp-reveal-text-4 {
      --r-font-size: 16px
   }

   .erp-reveal-text-5 {
      --r-gap: 48px
   }

   .erp-bold-3 {
      --r-font-size: 36px
   }

   .erp-bold-4 {
      --r-font-size: 36px
   }

   .erp-text-2 {
      --r-font-size: 18px
   }

   .erp-feature-grid-2 {
      --r-grid-template-columns: repeat(4, minmax(0, 1fr));
      --r-gap: 12px
   }

   .erp-feature-17 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-18 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-19 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-20 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-21 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-22 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-23 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-24 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-25 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-26 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-27 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-28 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-29 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-30 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-31 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-feature-32 {
      --r-min-height: 60px;
      --r-font-size: 14px
   }

   .erp-reveal-text-6 {
      --r-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      --r-gap: 40px;
      --r-padding: 24px 28px
   }

   .features-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .features-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .features-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .features-heading-1 {
      white-space: nowrap
   }

   .features-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .features-paragraph-1 {
      white-space: nowrap
   }

   .features-block-2 {
      --r-height: 4400px
   }

   .features-block-3 {
      --r-top: 136px;
      --r-display: grid;
      --r-gap: 64px
   }

   :is(#app, #appo) .page-root .features-block-3 {
      grid-template-columns: 520px minmax(0, 1fr);
      align-items: center
   }

   .features-tab-6 {
      --r-font-size: 54px
   }

   .features-tab-7 {
      --r-font-size: 54px
   }

   .features-tab-8 {
      --r-font-size: 54px
   }

   .features-tab-9 {
      --r-font-size: 54px
   }

   .features-tab-10 {
      --r-font-size: 54px
   }

   :is(#app, #appo) .page-root .features-block-5 {
      flex-direction: column;
      gap: 32px;
      min-width: 0
   }

   .features-block-6 {
      --r-padding: 40px;
      --r-min-height: 440px
   }

   .features-block-7 {
      --r-width: 340px
   }

   .features-image-1 {
      --r-height: 340px
   }

   .features-image-2 {
      --r-height: 340px
   }

   .features-image-3 {
      --r-height: 340px
   }

   .features-image-4 {
      --r-height: 340px
   }

   .features-image-5 {
      --r-height: 340px
   }

   .features-image-6 {
      --r-height: 340px
   }

   .features-image-7 {
      --r-height: 340px
   }

   .features-image-8 {
      --r-height: 340px
   }

   .features-image-9 {
      --r-height: 340px
   }

   .features-image-10 {
      --r-height: 340px
   }

   .features-image-11 {
      --r-height: 340px
   }

   .features-image-12 {
      --r-height: 340px
   }

   .features-image-13 {
      --r-height: 340px
   }

   .features-image-14 {
      --r-height: 340px
   }

   .features-image-15 {
      --r-height: 340px
   }

   .features-block-8 {
      --r-max-width: 440px
   }

   .features-text-1 {
      --r-font-size: 38px
   }

   .features-text-2 {
      --r-font-size: 38px
   }

   .features-text-3 {
      --r-font-size: 38px
   }

   .features-text-4 {
      --r-font-size: 38px
   }

   .features-text-5 {
      --r-font-size: 38px
   }

   .features-text-6 {
      --r-font-size: 38px
   }

   .features-text-7 {
      --r-font-size: 38px
   }

   .features-text-8 {
      --r-font-size: 38px
   }

   .features-text-9 {
      --r-font-size: 38px
   }

   .features-text-10 {
      --r-font-size: 38px
   }

   .features-text-11 {
      --r-font-size: 38px
   }

   .features-text-12 {
      --r-font-size: 38px
   }

   .features-text-13 {
      --r-font-size: 38px
   }

   .features-text-14 {
      --r-font-size: 38px
   }

   .features-text-15 {
      --r-font-size: 38px
   }

   .vina-assistant-block-1 {
      --r-padding: 88px 0 24px
   }

   :is(#app, #appo) .page-root .vina-assistant-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .vina-card-1 {
      --r-border-radius: 16px;
      --r-background-image: url(../images/home-page-images/vina-green-abstract-background.webp);
      --r-background-position: right center;
      --r-padding: 53px 40px 52px
   }

   :is(#app, #appo) .page-root .vina-card-1 {
      min-height: 535px;
      align-items: center
   }

   .vina-assistant-block-2 {
      --r-align-items: flex-start;
      --r-gap: 24px;
      --r-max-width: 780px
   }

   .vina-badge-1 {
      --r-height: 40px;
      --r-font-size: 16px
   }

   :where(.vina-logo-mark-1) {
      width: 18px;
      height: 18px
   }

   .vina-assistant-split-heading-1 {
      --r-align-items: flex-start;
      --r-gap: 20px;
      --r-text-align: left
   }

   .vina-assistant-heading-1 {
      --r-align-items: flex-start;
      --r-gap: 8px
   }

   .vina-assistant-text-1 {
      --r-font-size: 72px
   }

   .vina-assistant-text-2 {
      --r-max-width: none;
      --r-font-size: 40px
   }

   .vina-assistant-paragraph-1 {
      --r-max-width: none;
      --r-font-size: 24px
   }

   .vina-assistant-block-3 {
      --r-gap: 36px
   }

   .vina-assistant-block-4 {
      --r-justify-content: flex-start;
      --r-gap: 30px
   }

   .vina-feature-1 {
      --r-gap: 14px
   }

   .vina-feature-icon-1 {
      --r-width: 64px;
      --r-height: 64px
   }

   :where(.vina-assistant-icon-1) {
      width: 28px;
      height: 28px
   }

   .vina-assistant-text-3 {
      --r-font-size: 19px;
      --r-text-align: left
   }

   .vina-device-glow-1 {
      --r-height: 68px
   }

   .vina-feature-2 {
      --r-gap: 14px
   }

   .vina-feature-icon-2 {
      --r-width: 64px;
      --r-height: 64px
   }

   :where(.vina-assistant-icon-2) {
      width: 28px;
      height: 28px
   }

   .vina-assistant-text-4 {
      --r-font-size: 19px;
      --r-text-align: left
   }

   .vina-device-glow-2 {
      --r-height: 68px
   }

   .vina-feature-3 {
      --r-gap: 14px
   }

   .vina-feature-icon-3 {
      --r-width: 64px;
      --r-height: 64px
   }

   :where(.vina-assistant-icon-3) {
      width: 28px;
      height: 28px
   }

   .vina-assistant-text-5 {
      --r-font-size: 19px;
      --r-text-align: left
   }

   .vina-assistant-block-5 {
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .vina-assistant-block-5 {
      align-items: center
   }

   .vina-button-1 {
      --r-padding: 0 32px
   }

   .vina-button-2 {
      --r-padding: 0 32px
   }

   .vina-device-1 {
      --r-position: absolute;
      --r-width: 534px
   }

   :is(#app, #appo) .page-root .vina-device-1 {
      right: 58px;
      top: 124px
   }

   .integrations-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .integrations-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .integrations-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .integrations-heading-1 {
      white-space: nowrap
   }

   .integrations-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .integrations-paragraph-1 {
      white-space: nowrap
   }

   .integrations-block-2 {
      --r-display: grid;
      --r-gap: 56px
   }

   :is(#app, #appo) .page-root .integrations-block-2 {
      grid-template-columns: 340px minmax(0, 1fr);
      align-items: center
   }

   .integrations-tab-1 {
      --r-font-size: 22px
   }

   .integrations-tab-2 {
      --r-font-size: 22px
   }

   .integrations-tab-3 {
      --r-font-size: 22px
   }

   .integrations-tab-4 {
      --r-font-size: 22px
   }

   .integrations-tab-5 {
      --r-font-size: 22px
   }

   .integrations-tab-6 {
      --r-font-size: 22px
   }

   .integrations-stage-1 {
      --r-height: 560px
   }

   .integrations-block-4 {
      --r-width: 1040px;
      --r-height: 560px;
      --r-margin-left: -520.0px
   }

   .integrations-glow-1 {
      --r-left: 436.8px;
      --r-top: 196.8px;
      --r-width: 166.4px;
      --r-height: 166.4px
   }

   .integrations-ring-1 {
      --r-left: 410.8px;
      --r-top: 170.8px;
      --r-width: 218.4px;
      --r-height: 218.4px
   }

   .integrations-ring-2 {
      --r-left: 410.8px;
      --r-top: 170.8px;
      --r-width: 218.4px;
      --r-height: 218.4px
   }

   .integrations-ring-3 {
      --r-left: 410.8px;
      --r-top: 170.8px;
      --r-width: 218.4px;
      --r-height: 218.4px
   }

   .integrations-hub-1 {
      --r-left: 468.0px;
      --r-top: 228.0px;
      --r-width: 104px;
      --r-height: 104px
   }

   .integrations-image-1 {
      --r-width: 59.8px;
      --r-height: 59.8px
   }

   .integrations-chip-1 {
      --r-left: 204px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-2 {
      --r-left: 34px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px;
      --r-transition-delay: 800ms
   }

   .integrations-chip-3 {
      --r-left: 204px;
      --r-top: 436px;
      --r-width: 132px;
      --r-height: 56px;
      --r-transition-delay: 460ms
   }

   .integrations-chip-4 {
      --r-left: 704px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-5 {
      --r-left: 874px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-6 {
      --r-left: 704px;
      --r-top: 436px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-7 {
      --r-left: 204px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-8 {
      --r-left: 34px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-9 {
      --r-left: 204px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-10 {
      --r-left: 34px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-11 {
      --r-left: 704px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-12 {
      --r-left: 874px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-13 {
      --r-left: 704px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-14 {
      --r-left: 874px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-15 {
      --r-left: 204px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-16 {
      --r-left: 34px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-17 {
      --r-left: 704px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }

   .integrations-chip-18 {
      --r-left: 874px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }

   .customers-block-1 {
      --r-height: 1800px
   }

   .customers-stage-1 {
      --r-height: 900px
   }

   .customers-globe-1 {
      --fh: 667.000;
      --bx: 0.00
   }

   .customers-globe-1 {
      --r-top: 40px;
      --r-width: 1920px;
      --r-margin-left: -960px
   }

   .customers-globe-spin-1 {
      --r-top: 333.33px;
      --r-width: 1920px;
      --r-height: 667.00px;
      --r-background-size: 1920.00px auto;
      --r-background-position: 0.00px 0px
   }

   .customers-globe-spin-2 {
      --r-top: 333.33px;
      --r-width: 1920px;
      --r-height: 667.00px;
      --r-background-size: 1920.00px auto;
      --r-background-position: 0.00px 0px
   }

   .customers-headline-1 {
      --r-top: 150px;
      --r-padding: 0 24px
   }

   .customers-heading-1 {
      --r-font-size: 60px;
      --r-letter-spacing: -0.035em
   }

   .customers-headline-2 {
      --r-top: 150px;
      --r-padding: 0 24px
   }

   .customers-heading-2 {
      --r-font-size: 60px;
      --r-letter-spacing: -0.035em
   }

   .customers-block-2 {
      --r-margin-top: 28px
   }

   .customers-button-1 {
      --r-height: 48px
   }

   .customers-logo-rows-1 {
      --r-bottom: 40px;
      --r-gap: 4px
   }

   .customers-logo-track-1 {
      --dur: 80s;
      --r-gap: 16px;
      --r-padding-right: 16px
   }

   .customers-logo-card-1 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-1 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-2 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-2 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-3 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-3 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-4 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-4 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-5 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-5 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-6 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-6 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-7 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-7 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-8 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-8 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-9 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-9 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-10 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-10 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-11 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-11 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-12 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-12 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-13 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-13 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-14 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-14 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-15 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-15 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-16 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-16 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-17 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-17 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-18 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-18 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-19 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-19 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-20 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-20 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-21 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-21 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-22 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-22 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-23 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-23 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-24 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-24 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-25 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-25 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-26 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-26 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-27 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-27 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-28 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-28 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-29 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-29 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-30 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-30 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-31 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-31 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-32 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-32 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-33 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-33 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-34 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-34 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-35 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-35 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-36 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-36 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-37 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-37 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-38 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-38 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-39 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-39 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-40 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-40 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-41 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-41 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-42 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-42 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-43 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-43 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-44 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-44 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-45 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-45 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-46 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-46 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-47 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-47 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-48 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-48 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-track-2 {
      --dur: 90s;
      --r-gap: 16px;
      --r-padding-right: 16px
   }

   .customers-logo-card-49 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-49 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-50 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-50 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-51 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-51 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-52 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-52 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-53 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-53 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-54 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-54 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-55 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-55 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-56 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-56 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-57 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-57 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-58 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-58 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-59 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-59 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-60 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-60 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-61 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-61 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-62 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-62 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-63 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-63 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-64 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-64 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-65 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-65 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-66 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-66 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-67 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-67 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-68 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-68 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-69 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-69 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-70 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-70 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-71 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-71 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-72 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-72 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-73 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-73 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-74 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-74 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-75 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-75 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-76 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-76 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-77 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-77 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-78 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-78 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-79 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-79 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-80 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-80 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-81 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-81 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-82 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-82 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-83 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-83 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-84 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-84 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-85 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-85 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-86 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-86 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-87 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-87 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-88 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-88 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-89 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-89 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-90 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-90 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-91 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-91 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-92 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-92 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-93 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-93 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-94 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-94 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-95 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-95 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .customers-logo-card-96 {
      --r-width: 220px;
      --r-height: 92px
   }

   .customers-image-96 {
      --r-max-width: 156px;
      --r-max-height: 62px
   }

   .press-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 40px
   }

   .press-heading-1 {
      --r-font-size: 54px
   }

   .press-row-1 {
      --mq: 34
   }

   .press-track-1 {
      --r-gap: 24px;
      --r-padding-right: 24px
   }

   .press-logo-card-1 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-1 {
      --r-padding: 24px 36px
   }

   .press-image-1 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-1 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-2 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-2 {
      --r-padding: 24px 36px
   }

   .press-image-2 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-2 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-3 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-3 {
      --r-padding: 24px 36px
   }

   .press-image-3 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-3 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-4 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-4 {
      --r-padding: 24px 36px
   }

   .press-image-4 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-4 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-5 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-5 {
      --r-padding: 24px 36px
   }

   .press-image-5 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-5 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-6 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-6 {
      --r-padding: 24px 36px
   }

   .press-image-6 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-6 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-7 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-7 {
      --r-padding: 24px 36px
   }

   .press-image-7 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-7 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-8 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-8 {
      --r-padding: 24px 36px
   }

   .press-image-8 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-8 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-9 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-9 {
      --r-padding: 24px 36px
   }

   .press-image-9 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-9 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-10 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-10 {
      --r-padding: 24px 36px
   }

   .press-image-10 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-10 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-11 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-11 {
      --r-padding: 24px 36px
   }

   .press-image-11 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-11 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-12 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-12 {
      --r-padding: 24px 36px
   }

   .press-image-12 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-12 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-13 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-13 {
      --r-padding: 24px 36px
   }

   .press-image-13 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-13 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .press-logo-card-14 {
      --r-width: 300px;
      --r-height: 196px
   }

   .press-card-logo-14 {
      --r-padding: 24px 36px
   }

   .press-image-14 {
      --r-max-width: 200px;
      --r-max-height: 58px
   }

   .press-card-footer-14 {
      --r-padding: 14px 16px 14px 22px;
      --r-font-size: 14px
   }

   .success-stories-block-1 {
      --r-padding: 88px 0 0
   }

   :is(#app, #appo) .page-root .success-stories-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .stories-panel-shell-1 {
      --r-border-radius: 32px;
      --r-padding: 64px
   }

   :is(#app, #appo) .page-root .stories-panel-shell-1 {
      height: 660px
   }

   .success-stories-block-2 {
      --r-display: grid;
      --r-gap: 72px
   }

   :is(#app, #appo) .page-root .success-stories-block-2 {
      grid-template-columns: minmax(0, 1fr) 640px;
      height: 100%
   }

   .success-stories-heading-1 {
      --r-font-size: 56px
   }

   .success-stories-paragraph-1 {
      --r-font-size: 19px
   }

   .stories-quote-1 {
      --r-font-size: 22px
   }

   .stories-quote-2 {
      --r-font-size: 22px
   }

   .stories-quote-3 {
      --r-font-size: 22px
   }

   .stories-quote-4 {
      --r-font-size: 22px
   }

   .stories-quote-5 {
      --r-font-size: 22px
   }

   .stories-quote-6 {
      --r-font-size: 22px
   }

   .stories-quote-7 {
      --r-font-size: 22px
   }

   .stories-quote-8 {
      --r-font-size: 22px
   }

   .stories-counter-1 {
      --r-font-size: 34px
   }

   .stories-badge-row-1 {
      --r-padding: 14px;
      --r-border-radius: 30px;
      --r-height: 100%
   }

   .stories-viewport-1 {
      --r-border-radius: 16px
   }

   .stories-play-button-1 {
      --r-width: 84px;
      --r-height: 84px;
      --r-margin: -42px 0 0 -42px
   }

   :where(.success-stories-icon-1) {
      width: 28px;
      height: 28px
   }

   .stories-panel-1 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-1 {
      max-width: 70%
   }

   .success-stories-text-1 {
      --r-font-size: 19px
   }

   .stories-panel-2 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-2 {
      max-width: 70%
   }

   .success-stories-text-2 {
      --r-font-size: 19px
   }

   .stories-panel-3 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-3 {
      max-width: 70%
   }

   .success-stories-text-3 {
      --r-font-size: 19px
   }

   .stories-panel-4 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-4 {
      max-width: 70%
   }

   .success-stories-text-4 {
      --r-font-size: 19px
   }

   .stories-panel-5 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-5 {
      max-width: 70%
   }

   .success-stories-text-5 {
      --r-font-size: 19px
   }

   .stories-panel-6 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-6 {
      max-width: 70%
   }

   .success-stories-text-6 {
      --r-font-size: 19px
   }

   .stories-panel-7 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-7 {
      max-width: 70%
   }

   .success-stories-text-7 {
      --r-font-size: 19px
   }

   .stories-panel-8 {
      --r-left: 20px;
      --r-bottom: 20px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-8 {
      max-width: 70%
   }

   .success-stories-text-8 {
      --r-font-size: 19px
   }

   .success-stories-block-5 {
      --r-margin-top: 40px
   }

   .resources-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .resources-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .resources-heading-1 {
      --r-max-width: 1100px;
      --r-font-size: 54px
   }

   :is(#app, #appo) .page-root .resources-block-2 {
      display: flex;
      flex-direction: column;
      gap: 24px
   }

   .resources-card-1 {
      --r-height: 240px;
      --r-flex-basis: 520px;
      --r-width: 520px
   }

   .resources-block-3 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-1 {
      --r-font-size: 26px
   }

   .resources-card-description-1 {
      --r-font-size: 16px
   }

   .resources-card-image-1 {
      --r-height: 156px;
      --r-width: 156px;
      --r-margin-right: 24px
   }

   .resources-card-2 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-4 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-2 {
      --r-font-size: 26px
   }

   .resources-card-description-2 {
      --r-font-size: 16px
   }

   .resources-card-image-2 {
      --r-height: 156px
   }

   .resources-card-3 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-5 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-3 {
      --r-font-size: 26px
   }

   .resources-card-description-3 {
      --r-font-size: 16px
   }

   .resources-card-image-3 {
      --r-height: 156px
   }

   .resources-card-4 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-6 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-4 {
      --r-font-size: 26px
   }

   .resources-card-description-4 {
      --r-font-size: 16px
   }

   .resources-card-image-4 {
      --r-height: 156px
   }

   .resources-card-5 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-7 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-5 {
      --r-font-size: 26px
   }

   .resources-card-description-5 {
      --r-font-size: 16px
   }

   .resources-card-image-5 {
      --r-height: 156px
   }

   .resources-card-6 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-8 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-6 {
      --r-font-size: 26px
   }

   .resources-card-description-6 {
      --r-font-size: 16px
   }

   .resources-card-image-6 {
      --r-height: 156px
   }

   .resources-card-7 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-9 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-7 {
      --r-font-size: 26px
   }

   .resources-card-description-7 {
      --r-font-size: 16px
   }

   .resources-card-image-7 {
      --r-height: 156px
   }

   .resources-card-8 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-10 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-8 {
      --r-font-size: 26px
   }

   .resources-card-description-8 {
      --r-font-size: 16px
   }

   .resources-card-image-8 {
      --r-height: 156px
   }

   .resources-card-9 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-11 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-9 {
      --r-font-size: 26px
   }

   .resources-card-description-9 {
      --r-font-size: 16px
   }

   .resources-card-image-9 {
      --r-height: 156px
   }

   .resources-card-10 {
      --r-height: 240px;
      --r-flex-basis: 256px;
      --r-width: 256px
   }

   .resources-block-12 {
      --r-padding: 28px 24px 24px
   }

   .resources-card-title-10 {
      --r-font-size: 26px
   }

   .resources-card-description-10 {
      --r-font-size: 16px
   }

   .resources-card-image-10 {
      --r-height: 156px
   }

   .faq-block-1 {
      --r-padding: 96px 0;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .faq-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .faq-block-2 {
      --r-grid-template-columns: 440px minmax(0, 1fr);
      --r-gap: 72px
   }

   .faq-heading-1 {
      --r-font-size: 54px
   }

   .faq-paragraph-1 {
      --r-font-size: 19px
   }

   .faq-help-1 {
      --r-padding: 28px
   }

   .faq-question-1 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-1 {
      --r-font-size: 18px
   }

   .faq-answer-inner-1 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-2 {
      --r-font-size: 16px
   }

   .faq-question-2 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-2 {
      --r-font-size: 18px
   }

   .faq-answer-inner-2 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-3 {
      --r-font-size: 16px
   }

   .faq-question-3 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-3 {
      --r-font-size: 18px
   }

   .faq-answer-inner-3 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-4 {
      --r-font-size: 16px
   }

   .faq-question-4 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-4 {
      --r-font-size: 18px
   }

   .faq-answer-inner-4 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-5 {
      --r-font-size: 16px
   }

   .faq-question-5 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-5 {
      --r-font-size: 18px
   }

   .faq-answer-inner-5 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-6 {
      --r-font-size: 16px
   }

   .faq-question-6 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-6 {
      --r-font-size: 18px
   }

   .faq-answer-inner-6 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-7 {
      --r-font-size: 16px
   }

   .faq-question-7 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-7 {
      --r-font-size: 18px
   }

   .faq-answer-inner-7 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-8 {
      --r-font-size: 16px
   }

   .faq-question-8 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-8 {
      --r-font-size: 18px
   }

   .faq-answer-inner-8 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-9 {
      --r-font-size: 16px
   }

   .faq-question-9 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-9 {
      --r-font-size: 18px
   }

   .faq-answer-inner-9 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-10 {
      --r-font-size: 16px
   }

   .faq-question-10 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-10 {
      --r-font-size: 18px
   }

   .faq-answer-inner-10 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-11 {
      --r-font-size: 16px
   }

   .faq-question-11 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-11 {
      --r-font-size: 18px
   }

   .faq-answer-inner-11 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-12 {
      --r-font-size: 16px
   }

   .faq-question-12 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-12 {
      --r-font-size: 18px
   }

   .faq-answer-inner-12 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-13 {
      --r-font-size: 16px
   }

   .faq-question-13 {
      --r-gap: 20px;
      --r-padding: 22px 24px
   }

   .faq-question-text-13 {
      --r-font-size: 18px
   }

   .faq-answer-inner-13 {
      --r-padding: 0 76px 26px 68px
   }

   .faq-paragraph-14 {
      --r-font-size: 16px
   }

   .about-vasy-block-1 {
      --r-padding: 24px 0 96px;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .about-vasy-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .about-vasy-heading-1 {
      --r-font-size: 48px
   }

   :is(#app, #appo) .page-root .about-vasy-heading-1 {
      white-space: nowrap
   }

   .about-vasy-paragraph-1 {
      --r-font-size: 19px
   }

   .about-panel-1 {
      --r-padding: 32px
   }

   .about-vasy-block-2 {
      --r-display: grid;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .about-vasy-block-2 {
      grid-template-columns: 280px minmax(0, 1fr);
      align-items: start
   }

   .about-scroller-1 {
      --r-height: 640px;
      --r-padding: 0 48px
   }

   .about-section-1 {
      --r-padding: 40px 0 32px
   }

   .about-vasy-paragraph-2 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-3 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-4 {
      --r-font-size: 16px
   }

   .about-section-2 {
      --r-padding: 32px 0
   }

   .about-vasy-heading-2 {
      --r-font-size: 28px
   }

   .about-vasy-paragraph-5 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-6 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-7 {
      --r-font-size: 16px
   }

   .about-section-3 {
      --r-padding: 32px 0
   }

   .about-vasy-h4-1 {
      --r-font-size: 20px
   }

   .about-vasy-paragraph-8 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-9 {
      --r-font-size: 16px
   }

   .about-section-4 {
      --r-padding: 32px 0
   }

   .about-vasy-h4-2 {
      --r-font-size: 20px
   }

   .about-vasy-paragraph-10 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-11 {
      --r-font-size: 16px
   }

   .about-section-5 {
      --r-padding: 32px 0
   }

   .about-vasy-h4-3 {
      --r-font-size: 20px
   }

   .about-vasy-paragraph-12 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-13 {
      --r-font-size: 16px
   }

   .about-section-6 {
      --r-padding: 32px 0
   }

   .about-vasy-h4-4 {
      --r-font-size: 20px
   }

   .about-vasy-paragraph-14 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-15 {
      --r-font-size: 16px
   }

   .about-section-7 {
      --r-padding: 32px 0
   }

   .about-vasy-h4-5 {
      --r-font-size: 20px
   }

   .about-vasy-paragraph-16 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-17 {
      --r-font-size: 16px
   }

   .about-section-8 {
      --r-padding: 32px 0
   }

   .about-vasy-h4-6 {
      --r-font-size: 20px
   }

   .about-vasy-paragraph-18 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-19 {
      --r-font-size: 16px
   }

   .about-section-9 {
      --r-padding: 32px 0
   }

   .about-vasy-heading-3 {
      --r-font-size: 28px
   }

   .about-vasy-paragraph-20 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-21 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-1 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-2 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-3 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-4 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-5 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-6 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-22 {
      --r-font-size: 16px
   }

   .about-section-10 {
      --r-padding: 32px 0
   }

   .about-vasy-heading-4 {
      --r-font-size: 28px
   }

   .about-vasy-paragraph-23 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-24 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-7 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-8 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-9 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-10 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-11 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-12 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-13 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-25 {
      --r-font-size: 16px
   }

   .about-section-11 {
      --r-padding: 32px 0
   }

   .about-vasy-heading-5 {
      --r-font-size: 28px
   }

   .about-vasy-paragraph-26 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-27 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-14 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-15 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-16 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-17 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-18 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-19 {
      --r-font-size: 16px
   }

   .about-section-12 {
      --r-padding: 32px 0
   }

   .about-vasy-heading-6 {
      --r-font-size: 28px
   }

   .about-vasy-paragraph-28 {
      --r-font-size: 16px
   }

   .about-vasy-paragraph-29 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-20 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-21 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-22 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-23 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-24 {
      --r-font-size: 16px
   }

   .about-vasy-list-item-25 {
      --r-font-size: 16px
   }

   .book-demo-block-1 {
      --r-padding: 88px 0 0
   }

   :is(#app, #appo) .page-root .book-demo-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .book-demo-panel-1 {
      --r-border-radius: 28px;
      --r-padding: 16px
   }

   .book-demo-block-2 {
      --r-display: grid;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .book-demo-block-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      min-height: 560px
   }

   .book-demo-left-1 {
      --r-align-items: flex-start;
      --r-padding: 64px 48px 64px 64px
   }

   .book-demo-pill-1 {
      --r-height: 52px;
      --r-padding: 0 18px;
      --r-gap: 16px
   }

   :where(.book-demo-icon-1) {
      width: 16px;
      height: 16px
   }

   .book-demo-bold-1 {
      --r-font-size: 18px
   }

   .book-demo-text-1 {
      --r-font-size: 14px
   }

   .book-demo-divider-1 {
      --r-margin: 13px 0
   }

   :where(.book-demo-icon-2) {
      width: 16px;
      height: 16px
   }

   .book-demo-bold-2 {
      --r-font-size: 18px
   }

   .book-demo-text-2 {
      --r-font-size: 14px
   }

   .book-demo-split-heading-1 {
      --r-align-items: flex-start;
      --r-text-align: left
   }

   .book-demo-heading-1 {
      --r-max-width: 600px;
      --r-font-size: 48px;
      --r-letter-spacing: -0.035em
   }

   .book-demo-paragraph-1 {
      --r-max-width: 560px;
      --r-font-size: 19px
   }

   .book-demo-stat-1 {
      --r-flex-direction: row
   }

   .book-demo-ring-1 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-ring-2 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-ring-3 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-ring-4 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-iso-badge-1 {
      --r-width: 72%;
      --iso: rotateX(24deg) rotateY(-18deg) rotateZ(6deg);
      --iso-h: rotateX(14deg) rotateY(-10deg) rotateZ(3deg) translateZ(20px)
   }

   .book-demo-card-1 {
      --r-padding: 28px;
      --r-gap: 18px
   }

   .book-demo-image-1 {
      --r-width: 44px;
      --r-height: 44px
   }

   .book-demo-block-3 {
      --r-font-size: 20px
   }

   .book-demo-block-4 {
      --r-font-size: 14px
   }

   .book-demo-day-1 {
      --r-height: 70px
   }

   .book-demo-day-2 {
      --r-height: 70px
   }

   .book-demo-day-3 {
      --r-height: 70px
   }

   .book-demo-day-4 {
      --r-height: 70px
   }

   .book-demo-day-5 {
      --r-height: 70px
   }

   .book-demo-time-slot-1 {
      --r-height: 50px
   }

   .book-demo-time-slot-2 {
      --r-height: 50px
   }

   .book-demo-time-slot-3 {
      --r-height: 50px
   }

   .book-demo-time-slot-4 {
      --r-height: 50px
   }

   .book-demo-confirm-button-1 {
      --r-height: 50px
   }

   .explore-vasy-block-1 {
      --r-padding: 96px 0 0
   }

   :is(#app, #appo) .page-root .explore-vasy-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .explore-panel-1 {
      --r-padding: 40px;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .explore-vasy-split-heading-1 {
      align-items: flex-end
   }

   .explore-vasy-heading-1 {
      --r-font-size: 32px
   }

   .explore-vasy-paragraph-1 {
      --r-font-size: 16px
   }

   .explore-vasy-block-2 {
      --r-gap: 16px
   }

   .explore-vasy-block-3 {
      --r-grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr);
      --r-gap: 16px
   }

   .explore-vasy-block-4 {
      --r-gap: 16px
   }

   .explore-group-1 {
      --r-padding: 22px
   }

   .explore-marker-1 {
      --r-webkit-mask-image: url(../images/home-page-images/explore-solutions-marker-icon.svg);
      --r-mask-image: url(../images/home-page-images/explore-solutions-marker-icon.svg)
   }

   .explore-list-1 {
      --r-grid-template-columns: repeat(1, minmax(0, 1fr))
   }

   .explore-group-2 {
      --r-padding: 22px
   }

   .explore-vasy-block-5 {
      --r-gap: 16px
   }

   .explore-group-3 {
      --r-padding: 22px
   }

   .explore-vasy-block-6 {
      --r-gap: 16px
   }

   .explore-group-4 {
      --r-padding: 22px
   }

   .explore-group-5 {
      --r-padding: 22px
   }

   .explore-vasy-block-7 {
      --r-gap: 16px
   }

   .explore-group-6 {
      --r-padding: 22px
   }

   .unused-style-1045 {
      --r-margin-top: 88px
   }

   .footer-block-1 {
      --r-padding: 72px 0 28px
   }

   :is(#app, #appo) .page-root .footer-block-1 {
      width: 1440px;
      margin: 0 auto
   }

   .footer-card-1 {
      --r-border-radius: 28px;
      --r-gap: 40px
   }

   .footer-back-to-top-1 {
      --r-top: -94px
   }

   .footer-block-2 {
      --r-grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
      --r-gap: 48px
   }

   .footer-block-3 {
      --r-max-width: 340px
   }

   .footer-image-1 {
      --r-height: 40px
   }

   .footer-block-4 {
      --r-box-shadow: inset 1px 0 0 #D9DEE5
   }

   :is(#app, #appo) .page-root .footer-block-4 {
      padding-left: 40px
   }

   .footer-block-5 {
      --r-flex-direction: column
   }

   :is(#app, #appo) .page-root .footer-block-5 {
      align-items: flex-start
   }

   .footer-contact-strip-1 {
      --r-flex-direction: row;
      --r-align-items: center;
      --r-gap: 32px;
      --r-padding: 20px 28px
   }

   .footer-block-6 {
      --r-flex-direction: row;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .footer-text-1 {
      width: 1px;
      align-self: stretch
   }

   .footer-block-7 {
      --r-justify-content: space-between;
      --r-gap: 24px
   }

   .footer-block-8 {
      --r-flex-direction: row
   }

   .footer-statement-wrapper-1 {
      --r-padding: 48px 0 8px
   }

   .footer-statement-1 {
      --r-font-size: 150px
   }

   .hero-scroll-hint-1 {
      --r-bottom: 32px
   }

   .video-modal-box-1 {
      --r-width: min(1040px, calc(100% - 160px));
      --r-padding: 14px
   }

   .text-1 {
      --r-font-size: 16px
   }

   .page-bottom-blur-1 {
      --r-height: 150px
   }

   .unused-style-1065 {
      --r-width: 1440px;
      --r-height: 72px;
      --r-padding: 0 12px 0 24px;
      --r-gap: 24px
   }

   .header-image-1 {
      --r-height: 40px
   }

   .header-menu-banner-1 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-banner-2 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-banner-3 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-banner-4 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-block-1 {
      --r-width: 280px
   }

   .header-menu-pane-1 {
      --r-min-height: 528px
   }

   .header-menu-banner-5 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-2 {
      --r-min-height: 528px
   }

   .header-menu-banner-6 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-3 {
      --r-min-height: 528px
   }

   .header-menu-banner-7 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-4 {
      --r-min-height: 528px
   }

   .header-menu-banner-8 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-5 {
      --r-min-height: 528px
   }

   .header-menu-banner-9 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-6 {
      --r-min-height: 528px
   }

   .header-menu-banner-10 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-7 {
      --r-min-height: 528px
   }

   .header-menu-banner-11 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }

   .header-menu-pane-8 {
      --r-min-height: 528px
   }

   .header-menu-banner-12 {
      --r-grid-template-columns: minmax(0, 1fr) 540px;
      --r-min-height: 220px
   }
}

@media (min-width: 1024px) and (max-width: 1599.98px) {

   .show-desktop,
   .show-mobile,
   .show-tablet,
   .show-tablet-mobile {
      display: none !important
   }

   .hero-fly-card-1 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-1 {
      width: 210px
   }

   .hero-fly-card-inner-1 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-1 {
      width: 210px
   }

   .hero-fly-card-icon-1 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-1) {
      width: 18px;
      height: 18px
   }

   .bold-1 {
      --r-font-size: 15px
   }

   .italic-1 {
      --r-font-size: 12px
   }

   .hero-fly-card-2 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-2 {
      width: 210px
   }

   .hero-fly-card-inner-2 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-2 {
      width: 210px
   }

   .hero-fly-card-icon-2 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-2) {
      width: 18px;
      height: 18px
   }

   .bold-2 {
      --r-font-size: 15px
   }

   .italic-2 {
      --r-font-size: 12px
   }

   .hero-fly-card-3 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-3 {
      width: 210px
   }

   .hero-fly-card-inner-3 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-3 {
      width: 210px
   }

   .hero-fly-card-icon-3 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-3) {
      width: 18px;
      height: 18px
   }

   .bold-3 {
      --r-font-size: 15px
   }

   .italic-3 {
      --r-font-size: 12px
   }

   .hero-fly-card-4 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-4 {
      width: 210px
   }

   .hero-fly-card-inner-4 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-4 {
      width: 210px
   }

   .hero-fly-card-icon-4 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-4) {
      width: 18px;
      height: 18px
   }

   .bold-4 {
      --r-font-size: 15px
   }

   .italic-4 {
      --r-font-size: 12px
   }

   .hero-fly-card-5 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-5 {
      width: 210px
   }

   .hero-fly-card-inner-5 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-5 {
      width: 210px
   }

   .hero-fly-card-icon-5 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-5) {
      width: 18px;
      height: 18px
   }

   .bold-5 {
      --r-font-size: 15px
   }

   .italic-5 {
      --r-font-size: 12px
   }

   .hero-fly-card-6 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-6 {
      width: 210px
   }

   .hero-fly-card-inner-6 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-6 {
      width: 210px
   }

   .hero-fly-card-icon-6 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-6) {
      width: 18px;
      height: 18px
   }

   .bold-6 {
      --r-font-size: 15px
   }

   .italic-6 {
      --r-font-size: 12px
   }

   .hero-fly-card-7 {
      --r-height: 64px
   }

   :is(#app, #appo) .page-root .hero-fly-card-7 {
      width: 210px
   }

   .hero-fly-card-inner-7 {
      --r-height: 64px;
      --r-padding: 0 12px;
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .hero-fly-card-inner-7 {
      width: 210px
   }

   .hero-fly-card-icon-7 {
      --r-width: 36px;
      --r-height: 36px
   }

   :where(.icon-7) {
      width: 18px;
      height: 18px
   }

   .bold-7 {
      --r-font-size: 15px
   }

   .italic-7 {
      --r-font-size: 12px
   }

   .hero-beam-1 {
      --run: 1566px
   }

   .hero-beam-2 {
      --run: 1566px
   }

   .hero-beam-3 {
      --run: 1300px
   }

   .hero-beam-4 {
      --r-left: 1008px;
      --run: 1300px
   }

   .hero-beam-5 {
      --run: 1566px
   }

   .hero-beam-6 {
      --r-left: 672px;
      --run: 1300px
   }

   .hero-beam-7 {
      --r-left: 1176px;
      --run: 1300px
   }

   .hero-glow-1 {
      --r-left: -160px;
      --r-top: 520px;
      --r-width: 460px;
      --r-height: 460px
   }

   .hero-glow-2 {
      --r-right: -160px;
      --r-top: 520px;
      --r-width: 460px;
      --r-height: 460px
   }

   .hero-content-1 {
      --r-gap: 22px;
      --r-padding: 0 0px;
      --r-padding-top: 60px;
      --r-justify-content: center
   }

   :is(#app, #appo) .page-root .hero-content-1 {
      min-height: 640px
   }

   .hero-split-heading-1 {
      --r-max-width: 1200px;
      --r-font-size: 64px
   }

   :is(#app, #appo) .page-root .hero-split-heading-1 {
      white-space: nowrap
   }

   .hero-split-heading-2 {
      --r-max-width: 640px;
      --r-font-size: 20px
   }

   .hero-badge-wrapper-1 {
      --r-flex-direction: row
   }

   .hero-button-1 {
      --r-height: 48px
   }

   :is(#app, #appo) .page-root .hero-badge-wrapper-2 {
      display: flex;
      flex-direction: row;
      gap: 24px;
      padding-top: 4px
   }

   .hero-dashboard-window-1 {
      --r-width: 1257px;
      --r-height: 719px;
      --r-margin-top: 0px
   }

   .hero-dashboard-tilt-1 {
      --r-width: 1257px;
      --r-height: 719px
   }

   :is(#app, #appo) .page-root .hero-dashboard-tilt-1 {
      overflow: hidden
   }

   .hero-device-frame-1 {
      --r-width: 1224px;
      --r-transform: scale(1.027)
   }

   .hero-fade-1 {
      --r-height: 168px
   }

   .financial-year-block-1 {
      --r-padding: 88px 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .financial-year-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .financial-year-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .financial-year-heading-1 {
      white-space: nowrap
   }

   .financial-year-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .financial-year-paragraph-1 {
      white-space: nowrap
   }

   :is(#app, #appo) .page-root .financial-year-block-2 {
      position: relative;
      height: 1500px
   }

   .financial-year-block-3 {
      --r-grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
      --r-gap: 32px
   }

   .financial-year-block-4 {
      --r-padding: 24px
   }

   .financial-year-heading-2 {
      --r-font-size: 24px
   }

   .financial-year-block-5 {
      --r-width: 340px;
      --r-height: 240px
   }

   .financial-year-block-6 {
      --r-width: 240px;
      --r-height: 240px
   }

   .financial-year-image-1 {
      --r-width: 240px;
      --r-height: 240px
   }

   .financial-year-block-7 {
      --r-padding: 24px
   }

   .financial-year-heading-3 {
      --r-font-size: 24px
   }

   .solutions-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .solutions-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .solutions-heading-1 {
      --r-font-size: 50px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .solutions-heading-1 {
      white-space: nowrap
   }

   .solutions-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .solutions-paragraph-1 {
      white-space: nowrap
   }

   .solutions-block-2 {
      --r-height: 3000px
   }

   .solutions-block-3 {
      --r-top: 104px;
      --r-display: grid;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .solutions-block-3 {
      grid-template-columns: 500px minmax(0, 1fr);
      align-items: stretch
   }

   :is(#app, #appo) .page-root .solution-tab-wrapper-1 {
      grid-column: 1 / -1
   }

   .solution-tab-1 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solution-tab-2 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solution-tab-3 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solution-tab-4 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solution-tab-5 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solution-tab-6 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solution-tab-7 {
      --r-height: 44px;
      --r-padding: 0 18px;
      --r-font-size: 16px
   }

   .solutions-block-4 {
      --r-padding: 40px;
      --r-border-radius: 14px;
      --r-align-items: center
   }

   :is(#app, #appo) .page-root .solutions-block-4 {
      min-height: 468px
   }

   .solutions-eyebrow-label-1 {
      --r-top: 24px;
      --r-right: 24px
   }

   .solution-slide-1 {
      --r-gap: 24px
   }

   .solution-slide-text-1 {
      --r-font-size: 34px
   }

   .solution-slide-text-2 {
      --r-font-size: 16px
   }

   .solution-slide-2 {
      --r-gap: 24px
   }

   .solution-slide-text-3 {
      --r-font-size: 34px
   }

   .solution-slide-text-4 {
      --r-font-size: 16px
   }

   .solution-slide-3 {
      --r-gap: 24px
   }

   .solution-slide-text-5 {
      --r-font-size: 34px
   }

   .solution-slide-text-6 {
      --r-font-size: 16px
   }

   .solution-slide-4 {
      --r-gap: 24px
   }

   .solution-slide-text-7 {
      --r-font-size: 34px
   }

   .solution-slide-text-8 {
      --r-font-size: 16px
   }

   .solution-slide-5 {
      --r-gap: 24px
   }

   .solution-slide-text-9 {
      --r-font-size: 34px
   }

   .solution-slide-text-10 {
      --r-font-size: 16px
   }

   .solution-slide-6 {
      --r-gap: 24px
   }

   .solution-slide-text-11 {
      --r-font-size: 34px
   }

   .solution-slide-text-12 {
      --r-font-size: 16px
   }

   .solution-slide-7 {
      --r-gap: 24px
   }

   .solution-slide-text-13 {
      --r-font-size: 34px
   }

   .solution-slide-text-14 {
      --r-font-size: 16px
   }

   .solutions-block-5 {
      --r-min-height: 420px
   }

   .clients-block-1 {
      --r-padding: 96px 0 48px;
      --r-display: grid
   }

   :is(#app, #appo) .page-root .clients-block-1 {
      width: 1320px;
      margin: 0 auto;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 24px;
      align-items: center
   }

   .industries-block-1 {
      --r-padding: 88px 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .industries-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .industries-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .industries-heading-1 {
      white-space: nowrap
   }

   .industries-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .industries-paragraph-1 {
      white-space: nowrap
   }

   .industries-block-2 {
      --r-display: grid;
      --r-gap: 24px
   }

   :is(#app, #appo) .page-root .industries-block-2 {
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: start
   }

   .industries-block-3 {
      --r-display: flex
   }

   :is(#app, #appo) .page-root .industries-block-3 {
      flex-direction: column
   }

   :is(#app, #appo) .page-root .industries-block-4 {
      box-sizing: border-box;
      padding: 32px;
      border-radius: 14px;
      background: #FFFFFF;
      box-shadow: 0 32px 64px -24px rgba(46, 46, 46, .18), 0 4px 12px rgba(46, 46, 46, .06);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 32px;
      align-items: stretch
   }

   :is(#app, #appo) .page-root .industries-block-5 {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-width: 0
   }

   .industries-block-6 {
      --r-height: 260px
   }

   .erp-block-1 {
      --r-padding: 88px 0;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .erp-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .erp-heading-1 {
      --r-font-size: 43px
   }

   :is(#app, #appo) .page-root .erp-heading-1 {
      white-space: nowrap
   }

   .erp-paragraph-1 {
      --r-font-size: 19px
   }

   .erp-option-card-1 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .erp-card-icon-1 {
      --r-width: 52px;
      --r-height: 52px
   }

   .erp-card-title-1 {
      --r-font-size: 20px
   }

   .erp-option-card-2 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .erp-card-icon-2 {
      --r-width: 52px;
      --r-height: 52px
   }

   .erp-card-title-2 {
      --r-font-size: 20px
   }

   .erp-box-1 {
      --r-padding: 40px
   }

   .erp-panel-1 {
      --r-gap: 36px
   }

   .erp-block-2 {
      --r-grid-template-columns: minmax(0, 1fr) 520px;
      --r-gap: 44px
   }

   .erp-block-3 {
      --r-gap: 20px
   }

   .erp-heading-2 {
      --r-font-size: 34px
   }

   .erp-paragraph-2 {
      --r-font-size: 15px
   }

   .erp-reveal-text-1 {
      --r-font-size: 15px
   }

   .erp-reveal-text-2 {
      --r-gap: 40px
   }

   .erp-bold-1 {
      --r-font-size: 32px
   }

   .erp-bold-2 {
      --r-font-size: 32px
   }

   .erp-text-1 {
      --r-font-size: 17px
   }

   .erp-feature-grid-1 {
      --r-grid-template-columns: repeat(4, minmax(0, 1fr));
      --r-gap: 10px
   }

   .erp-feature-1 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-2 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-3 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-4 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-5 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-6 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-7 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-8 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-9 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-10 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-11 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-12 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-13 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-14 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-15 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-16 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-reveal-text-3 {
      --r-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      --r-gap: 32px;
      --r-padding: 22px 24px
   }

   .erp-panel-2 {
      --r-gap: 36px
   }

   .erp-block-4 {
      --r-grid-template-columns: minmax(0, 1fr) 520px;
      --r-gap: 44px
   }

   .erp-block-5 {
      --r-gap: 20px
   }

   .erp-heading-3 {
      --r-font-size: 34px
   }

   .erp-paragraph-3 {
      --r-font-size: 15px
   }

   .erp-reveal-text-4 {
      --r-font-size: 15px
   }

   .erp-reveal-text-5 {
      --r-gap: 40px
   }

   .erp-bold-3 {
      --r-font-size: 32px
   }

   .erp-bold-4 {
      --r-font-size: 32px
   }

   .erp-text-2 {
      --r-font-size: 17px
   }

   .erp-feature-grid-2 {
      --r-grid-template-columns: repeat(4, minmax(0, 1fr));
      --r-gap: 10px
   }

   .erp-feature-17 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-18 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-19 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-20 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-21 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-22 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-23 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-24 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-25 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-26 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-27 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-28 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-29 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-30 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-31 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-feature-32 {
      --r-min-height: 58px;
      --r-font-size: 13.5px
   }

   .erp-reveal-text-6 {
      --r-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      --r-gap: 32px;
      --r-padding: 22px 24px
   }

   .features-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .features-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .features-heading-1 {
      --r-font-size: 54px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .features-heading-1 {
      white-space: nowrap
   }

   .features-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .features-paragraph-1 {
      white-space: nowrap
   }

   .features-block-2 {
      --r-height: 4200px
   }

   .features-block-3 {
      --r-top: 120px;
      --r-display: grid;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .features-block-3 {
      grid-template-columns: 420px minmax(0, 1fr);
      align-items: center
   }

   .features-tab-6 {
      --r-font-size: 48px
   }

   .features-tab-7 {
      --r-font-size: 48px
   }

   .features-tab-8 {
      --r-font-size: 48px
   }

   .features-tab-9 {
      --r-font-size: 48px
   }

   .features-tab-10 {
      --r-font-size: 48px
   }

   :is(#app, #appo) .page-root .features-block-5 {
      flex-direction: column;
      gap: 32px;
      min-width: 0
   }

   .features-block-6 {
      --r-padding: 32px;
      --r-min-height: 420px
   }

   .features-block-7 {
      --r-width: 300px
   }

   .features-image-1 {
      --r-height: 300px
   }

   .features-image-2 {
      --r-height: 300px
   }

   .features-image-3 {
      --r-height: 300px
   }

   .features-image-4 {
      --r-height: 300px
   }

   .features-image-5 {
      --r-height: 300px
   }

   .features-image-6 {
      --r-height: 300px
   }

   .features-image-7 {
      --r-height: 300px
   }

   .features-image-8 {
      --r-height: 300px
   }

   .features-image-9 {
      --r-height: 300px
   }

   .features-image-10 {
      --r-height: 300px
   }

   .features-image-11 {
      --r-height: 300px
   }

   .features-image-12 {
      --r-height: 300px
   }

   .features-image-13 {
      --r-height: 300px
   }

   .features-image-14 {
      --r-height: 300px
   }

   .features-image-15 {
      --r-height: 300px
   }

   .features-block-8 {
      --r-max-width: 420px
   }

   .features-text-1 {
      --r-font-size: 32px
   }

   .features-text-2 {
      --r-font-size: 32px
   }

   .features-text-3 {
      --r-font-size: 32px
   }

   .features-text-4 {
      --r-font-size: 32px
   }

   .features-text-5 {
      --r-font-size: 32px
   }

   .features-text-6 {
      --r-font-size: 32px
   }

   .features-text-7 {
      --r-font-size: 32px
   }

   .features-text-8 {
      --r-font-size: 32px
   }

   .features-text-9 {
      --r-font-size: 32px
   }

   .features-text-10 {
      --r-font-size: 32px
   }

   .features-text-11 {
      --r-font-size: 32px
   }

   .features-text-12 {
      --r-font-size: 32px
   }

   .features-text-13 {
      --r-font-size: 32px
   }

   .features-text-14 {
      --r-font-size: 32px
   }

   .features-text-15 {
      --r-font-size: 32px
   }

   .vina-assistant-block-1 {
      --r-padding: 88px 0 0
   }

   :is(#app, #appo) .page-root .vina-assistant-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .vina-card-1 {
      --r-border-radius: 16px;
      --r-background-image: url(../images/home-page-images/vina-green-abstract-background.webp);
      --r-background-position: right center;
      --r-padding: 48px 40px
   }

   :is(#app, #appo) .page-root .vina-card-1 {
      min-height: 500px;
      align-items: center
   }

   .vina-assistant-block-2 {
      --r-align-items: flex-start;
      --r-gap: 24px;
      --r-max-width: 740px
   }

   .vina-badge-1 {
      --r-height: 40px;
      --r-font-size: 16px
   }

   :where(.vina-logo-mark-1) {
      width: 18px;
      height: 18px
   }

   .vina-assistant-split-heading-1 {
      --r-align-items: flex-start;
      --r-gap: 20px;
      --r-text-align: left
   }

   .vina-assistant-heading-1 {
      --r-align-items: flex-start;
      --r-gap: 8px
   }

   .vina-assistant-text-1 {
      --r-font-size: 64px
   }

   .vina-assistant-text-2 {
      --r-max-width: none;
      --r-font-size: 36px
   }

   .vina-assistant-paragraph-1 {
      --r-max-width: none;
      --r-font-size: 21px
   }

   .vina-assistant-block-3 {
      --r-gap: 32px
   }

   .vina-assistant-block-4 {
      --r-justify-content: flex-start;
      --r-gap: 20px
   }

   .vina-feature-1 {
      --r-gap: 12px
   }

   .vina-feature-icon-1 {
      --r-width: 56px;
      --r-height: 56px
   }

   :where(.vina-assistant-icon-1) {
      width: 24px;
      height: 24px
   }

   .vina-assistant-text-3 {
      --r-font-size: 17px;
      --r-text-align: left
   }

   .vina-device-glow-1 {
      --r-height: 60px
   }

   .vina-feature-2 {
      --r-gap: 12px
   }

   .vina-feature-icon-2 {
      --r-width: 56px;
      --r-height: 56px
   }

   :where(.vina-assistant-icon-2) {
      width: 24px;
      height: 24px
   }

   .vina-assistant-text-4 {
      --r-font-size: 17px;
      --r-text-align: left
   }

   .vina-device-glow-2 {
      --r-height: 60px
   }

   .vina-feature-3 {
      --r-gap: 12px
   }

   .vina-feature-icon-3 {
      --r-width: 56px;
      --r-height: 56px
   }

   :where(.vina-assistant-icon-3) {
      width: 24px;
      height: 24px
   }

   .vina-assistant-text-5 {
      --r-font-size: 17px;
      --r-text-align: left
   }

   .vina-assistant-block-5 {
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .vina-assistant-block-5 {
      align-items: center
   }

   .vina-button-1 {
      --r-padding: 0 32px
   }

   .vina-button-2 {
      --r-padding: 0 32px
   }

   .vina-device-1 {
      --r-position: absolute;
      --r-width: 452px
   }

   :is(#app, #appo) .page-root .vina-device-1 {
      right: 32px;
      top: 50%;
      margin-top: -121px
   }

   .integrations-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .integrations-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .integrations-heading-1 {
      --r-font-size: 48px;
      --r-line-height: 1.1;
      --r-letter-spacing: -0.035em
   }

   :is(#app, #appo) .page-root .integrations-heading-1 {
      white-space: nowrap
   }

   .integrations-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .integrations-paragraph-1 {
      white-space: nowrap
   }

   .integrations-block-2 {
      --r-display: grid;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .integrations-block-2 {
      grid-template-columns: 300px minmax(0, 1fr);
      align-items: center
   }

   .integrations-tab-1 {
      --r-font-size: 20px
   }

   .integrations-tab-2 {
      --r-font-size: 20px
   }

   .integrations-tab-3 {
      --r-font-size: 20px
   }

   .integrations-tab-4 {
      --r-font-size: 20px
   }

   .integrations-tab-5 {
      --r-font-size: 20px
   }

   .integrations-tab-6 {
      --r-font-size: 20px
   }

   .integrations-stage-1 {
      --r-height: 540px
   }

   .integrations-block-4 {
      --r-width: 962px;
      --r-height: 540px;
      --r-margin-left: -481.0px
   }

   .integrations-glow-1 {
      --r-left: 404.2px;
      --r-top: 193.2px;
      --r-width: 153.6px;
      --r-height: 153.6px
   }

   .integrations-ring-1 {
      --r-left: 380.2px;
      --r-top: 169.2px;
      --r-width: 201.6px;
      --r-height: 201.6px
   }

   .integrations-ring-2 {
      --r-left: 380.2px;
      --r-top: 169.2px;
      --r-width: 201.6px;
      --r-height: 201.6px
   }

   .integrations-ring-3 {
      --r-left: 380.2px;
      --r-top: 169.2px;
      --r-width: 201.6px;
      --r-height: 201.6px
   }

   .integrations-hub-1 {
      --r-left: 433.0px;
      --r-top: 222.0px;
      --r-width: 96px;
      --r-height: 96px
   }

   .integrations-image-1 {
      --r-width: 55.2px;
      --r-height: 55.2px
   }

   .integrations-chip-1 {
      --r-left: 193px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-2 {
      --r-left: 39px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px;
      --r-transition-delay: 800ms
   }

   .integrations-chip-3 {
      --r-left: 193px;
      --r-top: 419px;
      --r-width: 124px;
      --r-height: 54px;
      --r-transition-delay: 460ms
   }

   .integrations-chip-4 {
      --r-left: 645px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-5 {
      --r-left: 799px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-6 {
      --r-left: 645px;
      --r-top: 419px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-7 {
      --r-left: 193px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-8 {
      --r-left: 39px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-9 {
      --r-left: 193px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-10 {
      --r-left: 39px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-11 {
      --r-left: 645px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-12 {
      --r-left: 799px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-13 {
      --r-left: 645px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-14 {
      --r-left: 799px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-15 {
      --r-left: 193px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-16 {
      --r-left: 39px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-17 {
      --r-left: 645px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }

   .integrations-chip-18 {
      --r-left: 799px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }

   .customers-block-1 {
      --r-height: 1600px
   }

   .customers-stage-1 {
      --r-height: 800px
   }

   .customers-globe-1 {
      --fh: 569.729;
      --bx: 0.00
   }

   .customers-globe-1 {
      --r-top: 40px;
      --r-width: 1640px;
      --r-margin-left: -820px
   }

   .customers-globe-spin-1 {
      --r-top: 284.72px;
      --r-width: 1640px;
      --r-height: 569.73px;
      --r-background-size: 1640.00px auto;
      --r-background-position: 0.00px 0px
   }

   .customers-globe-spin-2 {
      --r-top: 284.72px;
      --r-width: 1640px;
      --r-height: 569.73px;
      --r-background-size: 1640.00px auto;
      --r-background-position: 0.00px 0px
   }

   .customers-headline-1 {
      --r-top: 132px;
      --r-padding: 0 24px
   }

   .customers-heading-1 {
      --r-font-size: 54px;
      --r-letter-spacing: -0.035em
   }

   .customers-headline-2 {
      --r-top: 132px;
      --r-padding: 0 24px
   }

   .customers-heading-2 {
      --r-font-size: 54px;
      --r-letter-spacing: -0.035em
   }

   .customers-block-2 {
      --r-margin-top: 28px
   }

   .customers-button-1 {
      --r-height: 48px
   }

   .customers-logo-rows-1 {
      --r-bottom: 32px;
      --r-gap: 2px
   }

   .customers-logo-track-1 {
      --dur: 75s;
      --r-gap: 14px;
      --r-padding-right: 14px
   }

   .customers-logo-card-1 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-1 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-2 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-2 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-3 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-3 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-4 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-4 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-5 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-5 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-6 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-6 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-7 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-7 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-8 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-8 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-9 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-9 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-10 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-10 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-11 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-11 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-12 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-12 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-13 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-13 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-14 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-14 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-15 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-15 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-16 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-16 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-17 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-17 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-18 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-18 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-19 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-19 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-20 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-20 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-21 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-21 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-22 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-22 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-23 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-23 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-24 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-24 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-25 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-25 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-26 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-26 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-27 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-27 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-28 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-28 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-29 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-29 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-30 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-30 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-31 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-31 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-32 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-32 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-33 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-33 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-34 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-34 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-35 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-35 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-36 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-36 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-37 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-37 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-38 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-38 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-39 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-39 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-40 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-40 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-41 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-41 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-42 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-42 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-43 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-43 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-44 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-44 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-45 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-45 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-46 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-46 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-47 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-47 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-48 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-48 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-track-2 {
      --dur: 85s;
      --r-gap: 14px;
      --r-padding-right: 14px
   }

   .customers-logo-card-49 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-49 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-50 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-50 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-51 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-51 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-52 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-52 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-53 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-53 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-54 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-54 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-55 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-55 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-56 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-56 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-57 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-57 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-58 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-58 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-59 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-59 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-60 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-60 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-61 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-61 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-62 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-62 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-63 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-63 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-64 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-64 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-65 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-65 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-66 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-66 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-67 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-67 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-68 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-68 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-69 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-69 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-70 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-70 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-71 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-71 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-72 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-72 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-73 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-73 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-74 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-74 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-75 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-75 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-76 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-76 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-77 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-77 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-78 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-78 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-79 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-79 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-80 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-80 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-81 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-81 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-82 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-82 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-83 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-83 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-84 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-84 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-85 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-85 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-86 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-86 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-87 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-87 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-88 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-88 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-89 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-89 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-90 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-90 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-91 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-91 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-92 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-92 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-93 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-93 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-94 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-94 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-95 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-95 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .customers-logo-card-96 {
      --r-width: 200px;
      --r-height: 84px
   }

   .customers-image-96 {
      --r-max-width: 140px;
      --r-max-height: 56px
   }

   .press-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 40px
   }

   .press-heading-1 {
      --r-font-size: 48px
   }

   .press-row-1 {
      --mq: 32
   }

   .press-track-1 {
      --r-gap: 22px;
      --r-padding-right: 22px
   }

   .press-logo-card-1 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-1 {
      --r-padding: 22px 32px
   }

   .press-image-1 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-1 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-2 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-2 {
      --r-padding: 22px 32px
   }

   .press-image-2 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-2 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-3 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-3 {
      --r-padding: 22px 32px
   }

   .press-image-3 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-3 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-4 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-4 {
      --r-padding: 22px 32px
   }

   .press-image-4 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-4 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-5 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-5 {
      --r-padding: 22px 32px
   }

   .press-image-5 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-5 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-6 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-6 {
      --r-padding: 22px 32px
   }

   .press-image-6 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-6 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-7 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-7 {
      --r-padding: 22px 32px
   }

   .press-image-7 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-7 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-8 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-8 {
      --r-padding: 22px 32px
   }

   .press-image-8 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-8 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-9 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-9 {
      --r-padding: 22px 32px
   }

   .press-image-9 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-9 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-10 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-10 {
      --r-padding: 22px 32px
   }

   .press-image-10 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-10 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-11 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-11 {
      --r-padding: 22px 32px
   }

   .press-image-11 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-11 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-12 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-12 {
      --r-padding: 22px 32px
   }

   .press-image-12 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-12 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-13 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-13 {
      --r-padding: 22px 32px
   }

   .press-image-13 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-13 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .press-logo-card-14 {
      --r-width: 280px;
      --r-height: 184px
   }

   .press-card-logo-14 {
      --r-padding: 22px 32px
   }

   .press-image-14 {
      --r-max-width: 190px;
      --r-max-height: 54px
   }

   .press-card-footer-14 {
      --r-padding: 13px 14px 13px 20px;
      --r-font-size: 14px
   }

   .success-stories-block-1 {
      --r-padding: 88px 0 0
   }

   :is(#app, #appo) .page-root .success-stories-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .stories-panel-shell-1 {
      --r-border-radius: 30px;
      --r-padding: 56px
   }

   :is(#app, #appo) .page-root .stories-panel-shell-1 {
      height: 620px
   }

   .success-stories-block-2 {
      --r-display: grid;
      --r-gap: 56px
   }

   :is(#app, #appo) .page-root .success-stories-block-2 {
      grid-template-columns: minmax(0, 1fr) 580px;
      height: 100%
   }

   .success-stories-heading-1 {
      --r-font-size: 50px
   }

   .success-stories-paragraph-1 {
      --r-font-size: 18px
   }

   .stories-quote-1 {
      --r-font-size: 20px
   }

   .stories-quote-2 {
      --r-font-size: 20px
   }

   .stories-quote-3 {
      --r-font-size: 20px
   }

   .stories-quote-4 {
      --r-font-size: 20px
   }

   .stories-quote-5 {
      --r-font-size: 20px
   }

   .stories-quote-6 {
      --r-font-size: 20px
   }

   .stories-quote-7 {
      --r-font-size: 20px
   }

   .stories-quote-8 {
      --r-font-size: 20px
   }

   .stories-counter-1 {
      --r-font-size: 32px
   }

   .stories-badge-row-1 {
      --r-padding: 12px;
      --r-border-radius: 28px;
      --r-height: 100%
   }

   .stories-viewport-1 {
      --r-border-radius: 16px
   }

   .stories-play-button-1 {
      --r-width: 76px;
      --r-height: 76px;
      --r-margin: -38px 0 0 -38px
   }

   :where(.success-stories-icon-1) {
      width: 26px;
      height: 26px
   }

   .stories-panel-1 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-1 {
      max-width: 72%
   }

   .success-stories-text-1 {
      --r-font-size: 18px
   }

   .stories-panel-2 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-2 {
      max-width: 72%
   }

   .success-stories-text-2 {
      --r-font-size: 18px
   }

   .stories-panel-3 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-3 {
      max-width: 72%
   }

   .success-stories-text-3 {
      --r-font-size: 18px
   }

   .stories-panel-4 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-4 {
      max-width: 72%
   }

   .success-stories-text-4 {
      --r-font-size: 18px
   }

   .stories-panel-5 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-5 {
      max-width: 72%
   }

   .success-stories-text-5 {
      --r-font-size: 18px
   }

   .stories-panel-6 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-6 {
      max-width: 72%
   }

   .success-stories-text-6 {
      --r-font-size: 18px
   }

   .stories-panel-7 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-7 {
      max-width: 72%
   }

   .success-stories-text-7 {
      --r-font-size: 18px
   }

   .stories-panel-8 {
      --r-left: 18px;
      --r-bottom: 18px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-8 {
      max-width: 72%
   }

   .success-stories-text-8 {
      --r-font-size: 18px
   }

   .success-stories-block-5 {
      --r-margin-top: 36px
   }

   .resources-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 48px
   }

   :is(#app, #appo) .page-root .resources-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .resources-heading-1 {
      --r-max-width: 1000px;
      --r-font-size: 48px
   }

   :is(#app, #appo) .page-root .resources-block-2 {
      display: flex;
      flex-direction: column;
      gap: 24px
   }

   .resources-card-1 {
      --r-height: 228px;
      --r-flex-basis: 490px;
      --r-width: 490px
   }

   .resources-block-3 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-1 {
      --r-font-size: 24px
   }

   .resources-card-description-1 {
      --r-font-size: 15px
   }

   .resources-card-image-1 {
      --r-height: 144px;
      --r-width: 144px;
      --r-margin-right: 22px
   }

   .resources-card-2 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-4 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-2 {
      --r-font-size: 24px
   }

   .resources-card-description-2 {
      --r-font-size: 15px
   }

   .resources-card-image-2 {
      --r-height: 144px
   }

   .resources-card-3 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-5 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-3 {
      --r-font-size: 24px
   }

   .resources-card-description-3 {
      --r-font-size: 15px
   }

   .resources-card-image-3 {
      --r-height: 144px
   }

   .resources-card-4 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-6 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-4 {
      --r-font-size: 24px
   }

   .resources-card-description-4 {
      --r-font-size: 15px
   }

   .resources-card-image-4 {
      --r-height: 144px
   }

   .resources-card-5 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-7 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-5 {
      --r-font-size: 24px
   }

   .resources-card-description-5 {
      --r-font-size: 15px
   }

   .resources-card-image-5 {
      --r-height: 144px
   }

   .resources-card-6 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-8 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-6 {
      --r-font-size: 24px
   }

   .resources-card-description-6 {
      --r-font-size: 15px
   }

   .resources-card-image-6 {
      --r-height: 144px
   }

   .resources-card-7 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-9 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-7 {
      --r-font-size: 24px
   }

   .resources-card-description-7 {
      --r-font-size: 15px
   }

   .resources-card-image-7 {
      --r-height: 144px
   }

   .resources-card-8 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-10 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-8 {
      --r-font-size: 24px
   }

   .resources-card-description-8 {
      --r-font-size: 15px
   }

   .resources-card-image-8 {
      --r-height: 144px
   }

   .resources-card-9 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-11 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-9 {
      --r-font-size: 24px
   }

   .resources-card-description-9 {
      --r-font-size: 15px
   }

   .resources-card-image-9 {
      --r-height: 144px
   }

   .resources-card-10 {
      --r-height: 228px;
      --r-flex-basis: 240px;
      --r-width: 240px
   }

   .resources-block-12 {
      --r-padding: 26px 22px 22px
   }

   .resources-card-title-10 {
      --r-font-size: 24px
   }

   .resources-card-description-10 {
      --r-font-size: 15px
   }

   .resources-card-image-10 {
      --r-height: 144px
   }

   .faq-block-1 {
      --r-padding: 88px 0;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .faq-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .faq-block-2 {
      --r-grid-template-columns: 400px minmax(0, 1fr);
      --r-gap: 56px
   }

   .faq-heading-1 {
      --r-font-size: 48px
   }

   .faq-paragraph-1 {
      --r-font-size: 18px
   }

   .faq-help-1 {
      --r-padding: 26px
   }

   .faq-question-1 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-1 {
      --r-font-size: 17px
   }

   .faq-answer-inner-1 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-2 {
      --r-font-size: 15px
   }

   .faq-question-2 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-2 {
      --r-font-size: 17px
   }

   .faq-answer-inner-2 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-3 {
      --r-font-size: 15px
   }

   .faq-question-3 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-3 {
      --r-font-size: 17px
   }

   .faq-answer-inner-3 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-4 {
      --r-font-size: 15px
   }

   .faq-question-4 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-4 {
      --r-font-size: 17px
   }

   .faq-answer-inner-4 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-5 {
      --r-font-size: 15px
   }

   .faq-question-5 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-5 {
      --r-font-size: 17px
   }

   .faq-answer-inner-5 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-6 {
      --r-font-size: 15px
   }

   .faq-question-6 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-6 {
      --r-font-size: 17px
   }

   .faq-answer-inner-6 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-7 {
      --r-font-size: 15px
   }

   .faq-question-7 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-7 {
      --r-font-size: 17px
   }

   .faq-answer-inner-7 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-8 {
      --r-font-size: 15px
   }

   .faq-question-8 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-8 {
      --r-font-size: 17px
   }

   .faq-answer-inner-8 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-9 {
      --r-font-size: 15px
   }

   .faq-question-9 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-9 {
      --r-font-size: 17px
   }

   .faq-answer-inner-9 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-10 {
      --r-font-size: 15px
   }

   .faq-question-10 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-10 {
      --r-font-size: 17px
   }

   .faq-answer-inner-10 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-11 {
      --r-font-size: 15px
   }

   .faq-question-11 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-11 {
      --r-font-size: 17px
   }

   .faq-answer-inner-11 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-12 {
      --r-font-size: 15px
   }

   .faq-question-12 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-12 {
      --r-font-size: 17px
   }

   .faq-answer-inner-12 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-13 {
      --r-font-size: 15px
   }

   .faq-question-13 {
      --r-gap: 18px;
      --r-padding: 20px 22px
   }

   .faq-question-text-13 {
      --r-font-size: 17px
   }

   .faq-answer-inner-13 {
      --r-padding: 0 70px 24px 62px
   }

   .faq-paragraph-14 {
      --r-font-size: 15px
   }

   .about-vasy-block-1 {
      --r-padding: 24px 0 88px;
      --r-gap: 36px
   }

   :is(#app, #appo) .page-root .about-vasy-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .about-vasy-heading-1 {
      --r-font-size: 43px
   }

   :is(#app, #appo) .page-root .about-vasy-heading-1 {
      white-space: nowrap
   }

   .about-vasy-paragraph-1 {
      --r-font-size: 18px
   }

   .about-panel-1 {
      --r-padding: 28px
   }

   .about-vasy-block-2 {
      --r-display: grid;
      --r-gap: 28px
   }

   :is(#app, #appo) .page-root .about-vasy-block-2 {
      grid-template-columns: 260px minmax(0, 1fr);
      align-items: start
   }

   .about-scroller-1 {
      --r-height: 600px;
      --r-padding: 0 40px
   }

   .about-section-1 {
      --r-padding: 36px 0 28px
   }

   .about-vasy-paragraph-2 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-3 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-4 {
      --r-font-size: 15px
   }

   .about-section-2 {
      --r-padding: 28px 0
   }

   .about-vasy-heading-2 {
      --r-font-size: 26px
   }

   .about-vasy-paragraph-5 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-6 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-7 {
      --r-font-size: 15px
   }

   .about-section-3 {
      --r-padding: 28px 0
   }

   .about-vasy-h4-1 {
      --r-font-size: 19px
   }

   .about-vasy-paragraph-8 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-9 {
      --r-font-size: 15px
   }

   .about-section-4 {
      --r-padding: 28px 0
   }

   .about-vasy-h4-2 {
      --r-font-size: 19px
   }

   .about-vasy-paragraph-10 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-11 {
      --r-font-size: 15px
   }

   .about-section-5 {
      --r-padding: 28px 0
   }

   .about-vasy-h4-3 {
      --r-font-size: 19px
   }

   .about-vasy-paragraph-12 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-13 {
      --r-font-size: 15px
   }

   .about-section-6 {
      --r-padding: 28px 0
   }

   .about-vasy-h4-4 {
      --r-font-size: 19px
   }

   .about-vasy-paragraph-14 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-15 {
      --r-font-size: 15px
   }

   .about-section-7 {
      --r-padding: 28px 0
   }

   .about-vasy-h4-5 {
      --r-font-size: 19px
   }

   .about-vasy-paragraph-16 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-17 {
      --r-font-size: 15px
   }

   .about-section-8 {
      --r-padding: 28px 0
   }

   .about-vasy-h4-6 {
      --r-font-size: 19px
   }

   .about-vasy-paragraph-18 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-19 {
      --r-font-size: 15px
   }

   .about-section-9 {
      --r-padding: 28px 0
   }

   .about-vasy-heading-3 {
      --r-font-size: 26px
   }

   .about-vasy-paragraph-20 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-21 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-1 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-2 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-3 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-4 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-5 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-6 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-22 {
      --r-font-size: 15px
   }

   .about-section-10 {
      --r-padding: 28px 0
   }

   .about-vasy-heading-4 {
      --r-font-size: 26px
   }

   .about-vasy-paragraph-23 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-24 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-7 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-8 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-9 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-10 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-11 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-12 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-13 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-25 {
      --r-font-size: 15px
   }

   .about-section-11 {
      --r-padding: 28px 0
   }

   .about-vasy-heading-5 {
      --r-font-size: 26px
   }

   .about-vasy-paragraph-26 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-27 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-14 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-15 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-16 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-17 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-18 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-19 {
      --r-font-size: 15px
   }

   .about-section-12 {
      --r-padding: 28px 0
   }

   .about-vasy-heading-6 {
      --r-font-size: 26px
   }

   .about-vasy-paragraph-28 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-29 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-20 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-21 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-22 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-23 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-24 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-25 {
      --r-font-size: 15px
   }

   .book-demo-block-1 {
      --r-padding: 88px 0 0
   }

   :is(#app, #appo) .page-root .book-demo-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .book-demo-panel-1 {
      --r-border-radius: 28px;
      --r-padding: 16px
   }

   .book-demo-block-2 {
      --r-display: grid;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .book-demo-block-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      min-height: 540px
   }

   .book-demo-left-1 {
      --r-align-items: flex-start;
      --r-padding: 56px 40px 56px 56px
   }

   .book-demo-pill-1 {
      --r-height: 52px;
      --r-padding: 0 18px;
      --r-gap: 16px
   }

   :where(.book-demo-icon-1) {
      width: 16px;
      height: 16px
   }

   .book-demo-bold-1 {
      --r-font-size: 18px
   }

   .book-demo-text-1 {
      --r-font-size: 14px
   }

   .book-demo-divider-1 {
      --r-margin: 13px 0
   }

   :where(.book-demo-icon-2) {
      width: 16px;
      height: 16px
   }

   .book-demo-bold-2 {
      --r-font-size: 18px
   }

   .book-demo-text-2 {
      --r-font-size: 14px
   }

   .book-demo-split-heading-1 {
      --r-align-items: flex-start;
      --r-text-align: left
   }

   .book-demo-heading-1 {
      --r-max-width: 540px;
      --r-font-size: 42px;
      --r-letter-spacing: -0.035em
   }

   .book-demo-paragraph-1 {
      --r-max-width: 520px;
      --r-font-size: 18px
   }

   .book-demo-stat-1 {
      --r-flex-direction: row
   }

   .book-demo-ring-1 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-ring-2 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-ring-3 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-ring-4 {
      --r-width: 110%;
      --r-height: 110%
   }

   .book-demo-iso-badge-1 {
      --r-width: 78%;
      --iso: rotateX(24deg) rotateY(-18deg) rotateZ(6deg);
      --iso-h: rotateX(14deg) rotateY(-10deg) rotateZ(3deg) translateZ(20px)
   }

   .book-demo-card-1 {
      --r-padding: 24px;
      --r-gap: 16px
   }

   .book-demo-image-1 {
      --r-width: 44px;
      --r-height: 44px
   }

   .book-demo-block-3 {
      --r-font-size: 20px
   }

   .book-demo-block-4 {
      --r-font-size: 14px
   }

   .book-demo-day-1 {
      --r-height: 64px
   }

   .book-demo-day-2 {
      --r-height: 64px
   }

   .book-demo-day-3 {
      --r-height: 64px
   }

   .book-demo-day-4 {
      --r-height: 64px
   }

   .book-demo-day-5 {
      --r-height: 64px
   }

   .book-demo-time-slot-1 {
      --r-height: 46px
   }

   .book-demo-time-slot-2 {
      --r-height: 46px
   }

   .book-demo-time-slot-3 {
      --r-height: 46px
   }

   .book-demo-time-slot-4 {
      --r-height: 46px
   }

   .book-demo-confirm-button-1 {
      --r-height: 46px
   }

   .explore-vasy-block-1 {
      --r-padding: 88px 0 0
   }

   :is(#app, #appo) .page-root .explore-vasy-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .explore-panel-1 {
      --r-padding: 36px;
      --r-gap: 28px
   }

   :is(#app, #appo) .page-root .explore-vasy-split-heading-1 {
      align-items: flex-end
   }

   .explore-vasy-heading-1 {
      --r-font-size: 30px
   }

   .explore-vasy-paragraph-1 {
      --r-font-size: 16px
   }

   .explore-vasy-block-2 {
      --r-gap: 14px
   }

   .explore-vasy-block-3 {
      --r-grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr);
      --r-gap: 14px
   }

   .explore-vasy-block-4 {
      --r-gap: 14px
   }

   .explore-group-1 {
      --r-padding: 20px
   }

   .explore-marker-1 {
      --r-webkit-mask-image: url(../images/home-page-images/explore-solutions-marker-icon.svg);
      --r-mask-image: url(../images/home-page-images/explore-solutions-marker-icon.svg)
   }

   .explore-list-1 {
      --r-grid-template-columns: repeat(1, minmax(0, 1fr))
   }

   .explore-group-2 {
      --r-padding: 20px
   }

   .explore-vasy-block-5 {
      --r-gap: 14px
   }

   .explore-group-3 {
      --r-padding: 20px
   }

   .explore-vasy-block-6 {
      --r-gap: 14px
   }

   .explore-group-4 {
      --r-padding: 20px
   }

   .explore-group-5 {
      --r-padding: 20px
   }

   .explore-vasy-block-7 {
      --r-gap: 14px
   }

   .explore-group-6 {
      --r-padding: 20px
   }

   .unused-style-1045 {
      --r-margin-top: 88px
   }

   .footer-block-1 {
      --r-padding: 64px 0 28px
   }

   :is(#app, #appo) .page-root .footer-block-1 {
      width: 1320px;
      margin: 0 auto
   }

   .footer-card-1 {
      --r-border-radius: 28px;
      --r-gap: 40px
   }

   .footer-back-to-top-1 {
      --r-top: -86px
   }

   .footer-block-2 {
      --r-grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
      --r-gap: 40px
   }

   .footer-block-3 {
      --r-max-width: 340px
   }

   .footer-image-1 {
      --r-height: 40px
   }

   .footer-block-4 {
      --r-box-shadow: inset 1px 0 0 #D9DEE5
   }

   :is(#app, #appo) .page-root .footer-block-4 {
      padding-left: 40px
   }

   .footer-block-5 {
      --r-flex-direction: column
   }

   :is(#app, #appo) .page-root .footer-block-5 {
      align-items: flex-start
   }

   .footer-contact-strip-1 {
      --r-flex-direction: row;
      --r-align-items: center;
      --r-gap: 24px;
      --r-padding: 20px 28px
   }

   .footer-block-6 {
      --r-flex-direction: row;
      --r-gap: 24px
   }

   :is(#app, #appo) .page-root .footer-text-1 {
      width: 1px;
      align-self: stretch
   }

   .footer-block-7 {
      --r-justify-content: space-between;
      --r-gap: 18px
   }

   .footer-block-8 {
      --r-flex-direction: row
   }

   .footer-statement-wrapper-1 {
      --r-padding: 44px 0 8px
   }

   .footer-statement-1 {
      --r-font-size: 132px
   }

   .hero-scroll-hint-1 {
      --r-bottom: 28px
   }

   .video-modal-box-1 {
      --r-width: min(940px, calc(100% - 120px));
      --r-padding: 14px
   }

   .text-1 {
      --r-font-size: 16px
   }

   .page-bottom-blur-1 {
      --r-height: 140px
   }

   .unused-style-1065 {
      --r-width: 1320px;
      --r-height: 72px;
      --r-padding: 0 12px 0 24px;
      --r-gap: 24px
   }

   .header-image-1 {
      --r-height: 40px
   }

   .header-menu-banner-1 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-banner-2 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-banner-3 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-banner-4 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-block-1 {
      --r-width: 240px
   }

   .header-menu-pane-1 {
      --r-min-height: 548px
   }

   .header-menu-banner-5 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-2 {
      --r-min-height: 548px
   }

   .header-menu-banner-6 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-3 {
      --r-min-height: 548px
   }

   .header-menu-banner-7 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-4 {
      --r-min-height: 548px
   }

   .header-menu-banner-8 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-5 {
      --r-min-height: 548px
   }

   .header-menu-banner-9 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-6 {
      --r-min-height: 548px
   }

   .header-menu-banner-10 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-7 {
      --r-min-height: 548px
   }

   .header-menu-banner-11 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }

   .header-menu-pane-8 {
      --r-min-height: 548px
   }

   .header-menu-banner-12 {
      --r-grid-template-columns: minmax(0, 1fr) 470px;
      --r-min-height: 200px
   }
}

@media (min-width: 600px) and (max-width: 1023.98px) {

   .show-desktop,
   .show-desktop-laptop,
   .show-laptop,
   .show-mobile {
      display: none !important
   }

   .hero-fly-card-1 {
      --r-height: 52px
   }

   .hero-fly-card-inner-1 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-1 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-1) {
      width: 15px;
      height: 15px
   }

   .bold-1 {
      --r-font-size: 14px
   }

   .hero-fly-card-2 {
      --r-height: 52px
   }

   .hero-fly-card-inner-2 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-2 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-2) {
      width: 15px;
      height: 15px
   }

   .bold-2 {
      --r-font-size: 14px
   }

   .hero-fly-card-3 {
      --r-height: 52px
   }

   .hero-fly-card-inner-3 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-3 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-3) {
      width: 15px;
      height: 15px
   }

   .bold-3 {
      --r-font-size: 14px
   }

   .hero-fly-card-4 {
      --r-height: 52px
   }

   .hero-fly-card-inner-4 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-4 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-4) {
      width: 15px;
      height: 15px
   }

   .bold-4 {
      --r-font-size: 14px
   }

   .hero-fly-card-5 {
      --r-height: 52px
   }

   .hero-fly-card-inner-5 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-5 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-5) {
      width: 15px;
      height: 15px
   }

   .bold-5 {
      --r-font-size: 14px
   }

   .hero-fly-card-6 {
      --r-height: 52px
   }

   .hero-fly-card-inner-6 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-6 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-6) {
      width: 15px;
      height: 15px
   }

   .bold-6 {
      --r-font-size: 14px
   }

   .hero-fly-card-7 {
      --r-height: 52px
   }

   .hero-fly-card-inner-7 {
      --r-height: 52px;
      --r-padding: 0 10px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-7 {
      --r-width: 30px;
      --r-height: 30px
   }

   :where(.icon-7) {
      width: 15px;
      height: 15px
   }

   .bold-7 {
      --r-font-size: 14px
   }

   .hero-beam-1 {
      --run: 1034px
   }

   .hero-beam-2 {
      --run: 1034px
   }

   .hero-beam-3 {
      --run: 1300px
   }

   .hero-beam-4 {
      --r-left: 448px;
      --run: 1300px
   }

   .hero-beam-5 {
      --run: 1034px
   }

   .hero-beam-6 {
      --r-left: 392px;
      --run: 1300px
   }

   .hero-beam-7 {
      --r-left: 616px;
      --run: 1300px
   }

   .hero-glow-1 {
      --r-left: -200px;
      --r-top: 520px;
      --r-width: 380px;
      --r-height: 380px
   }

   .hero-glow-2 {
      --r-right: -200px;
      --r-top: 520px;
      --r-width: 380px;
      --r-height: 380px
   }

   .hero-content-1 {
      --r-gap: 20px;
      --r-padding: 0 24px 24px;
      --r-padding-top: 188px;
      --r-justify-content: flex-start
   }

   .hero-split-heading-1 {
      --r-max-width: 700px;
      --r-font-size: 52px
   }

   .hero-split-heading-2 {
      --r-max-width: 620px;
      --r-font-size: 19px
   }

   .hero-badge-wrapper-1 {
      --r-flex-direction: row
   }

   .hero-button-1 {
      --r-height: 48px
   }

   :is(#app, #appo) .page-root .hero-badge-wrapper-2 {
      display: flex;
      flex-direction: row;
      gap: 12px 24px;
      padding-top: 4px;
      flex-wrap: wrap;
      justify-content: center
   }

   .hero-dashboard-window-1 {
      --r-width: 740px;
      --r-height: 440px;
      --r-margin-top: 40px
   }

   :is(#app, #appo) .page-root .hero-dashboard-window-1 {
      margin-bottom: 12px
   }

   .hero-dashboard-tilt-1 {
      --r-width: 740px;
      --r-height: 440px
   }

   :is(#app, #appo) .page-root .hero-dashboard-tilt-1 {
      overflow: hidden;
      border-radius: 34px 34px 0 0
   }

   .hero-device-frame-1 {
      --r-width: 740px;
      --r-transform: none
   }

   :is(#app, #appo) .page-root .hero-device-frame-1 {
      height: 532px
   }

   .hero-fade-1 {
      --r-height: 108px
   }

   .financial-year-block-1 {
      --r-padding: 88px 24px;
      --r-gap: 48px
   }

   .financial-year-heading-1 {
      --r-font-size: 38px;
      --r-line-height: 1.14;
      --r-letter-spacing: -0.03em
   }

   :is(#app, #appo) .page-root .financial-year-heading-1 {
      max-width: 700px
   }

   .financial-year-paragraph-1 {
      --r-font-size: 21px
   }

   :is(#app, #appo) .page-root .financial-year-paragraph-1 {
      max-width: 680px
   }

   :is(#app, #appo) .page-root .financial-year-block-2 {
      display: flex;
      flex-direction: column;
      gap: 32px
   }

   .financial-year-block-8 {
      --r-padding: 32px
   }

   .financial-year-heading-4 {
      --r-font-size: 28px
   }

   .financial-year-block-9 {
      --r-width: 400px;
      --r-height: 280px
   }

   .financial-year-block-10 {
      --r-width: 280px;
      --r-height: 280px
   }

   .financial-year-image-2 {
      --r-width: 280px;
      --r-height: 280px
   }

   .financial-year-block-11 {
      --r-padding: 32px
   }

   .financial-year-heading-5 {
      --r-font-size: 28px
   }

   .solutions-block-1 {
      --r-padding: 88px 24px 0;
      --r-gap: 48px
   }

   .solutions-heading-1 {
      --r-font-size: 38px;
      --r-line-height: 1.14;
      --r-letter-spacing: -0.03em
   }

   .solutions-paragraph-1 {
      --r-font-size: 21px
   }

   .solutions-block-2 {
      --r-height: 3000px
   }

   .solutions-block-3 {
      --r-top: 104px;
      --r-display: flex;
      --r-gap: 24px
   }

   :is(#app, #appo) .page-root .solutions-block-3 {
      flex-direction: column
   }

   .solution-tab-1 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solution-tab-2 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solution-tab-3 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solution-tab-4 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solution-tab-5 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solution-tab-6 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solution-tab-7 {
      --r-height: 44px;
      --r-padding: 0 16px;
      --r-font-size: 15px
   }

   .solutions-block-4 {
      --r-padding: 28px;
      --r-border-radius: 20px;
      --r-align-items: start
   }

   :is(#app, #appo) .page-root .solutions-block-4 {
      grid-template-columns: minmax(0, 1fr)
   }

   .solutions-eyebrow-label-1 {
      --r-top: 24px;
      --r-right: 24px
   }

   .solution-slide-1 {
      --r-gap: 16px
   }

   .solution-slide-text-1 {
      --r-font-size: 32px
   }

   .solution-slide-text-2 {
      --r-font-size: 16px
   }

   .solution-slide-2 {
      --r-gap: 16px
   }

   .solution-slide-text-3 {
      --r-font-size: 32px
   }

   .solution-slide-text-4 {
      --r-font-size: 16px
   }

   .solution-slide-3 {
      --r-gap: 16px
   }

   .solution-slide-text-5 {
      --r-font-size: 32px
   }

   .solution-slide-text-6 {
      --r-font-size: 16px
   }

   .solution-slide-4 {
      --r-gap: 16px
   }

   .solution-slide-text-7 {
      --r-font-size: 32px
   }

   .solution-slide-text-8 {
      --r-font-size: 16px
   }

   .solution-slide-5 {
      --r-gap: 16px
   }

   .solution-slide-text-9 {
      --r-font-size: 32px
   }

   .solution-slide-text-10 {
      --r-font-size: 16px
   }

   .solution-slide-6 {
      --r-gap: 16px
   }

   .solution-slide-text-11 {
      --r-font-size: 32px
   }

   .solution-slide-text-12 {
      --r-font-size: 16px
   }

   .solution-slide-7 {
      --r-gap: 16px
   }

   .solution-slide-text-13 {
      --r-font-size: 32px
   }

   .solution-slide-text-14 {
      --r-font-size: 16px
   }

   .solution-grid-view-1 {
      --r-margin-top: 20px;
      --r-height: 500px;
      --r-border-radius: 14px
   }

   .solutions-image-1 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-1 {
      box-sizing: border-box;
      padding: 16px
   }

   .solutions-image-2 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-2 {
      box-sizing: border-box;
      padding: 16px
   }

   .solutions-image-3 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-3 {
      box-sizing: border-box;
      padding: 16px
   }

   .solutions-image-4 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-4 {
      box-sizing: border-box;
      padding: 16px
   }

   .solutions-image-5 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-5 {
      box-sizing: border-box;
      padding: 16px
   }

   .solutions-image-6 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-6 {
      box-sizing: border-box;
      padding: 16px
   }

   .solutions-image-7 {
      --r-background: transparent
   }

   :is(#app, #appo) .page-root .solutions-image-7 {
      box-sizing: border-box;
      padding: 16px
   }

   .clients-block-1 {
      --r-padding: 80px 24px 48px;
      --r-display: grid
   }

   :is(#app, #appo) .page-root .clients-block-1 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
      align-items: center
   }

   .industries-block-1 {
      --r-padding: 88px 24px;
      --r-gap: 48px
   }

   .industries-heading-1 {
      --r-font-size: 38px;
      --r-line-height: 1.14;
      --r-letter-spacing: -0.03em
   }

   .industries-paragraph-1 {
      --r-font-size: 21px
   }

   .industries-block-2 {
      --r-display: flex;
      --r-gap: 20px
   }

   :is(#app, #appo) .page-root .industries-block-2 {
      flex-direction: column
   }

   .industries-block-3 {
      --r-display: grid
   }

   :is(#app, #appo) .page-root .industries-block-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   :is(#app, #appo) .page-root .industries-block-5 {
      position: relative;
      border-radius: 14px;
      background: #F4F6F8;
      height: 360px
   }

   .industries-mobile-row-1 {
      --r-gap: 16px
   }

   .industries-heading-2 {
      --r-font-size: 21px
   }

   .erp-block-1 {
      --r-padding: 72px 24px;
      --r-gap: 32px
   }

   .erp-heading-1 {
      --r-font-size: 38px
   }

   .erp-paragraph-1 {
      --r-font-size: 18px
   }

   .erp-option-card-1 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .erp-card-icon-1 {
      --r-width: 44px;
      --r-height: 44px
   }

   .erp-card-title-1 {
      --r-font-size: 17px
   }

   .erp-option-card-2 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .erp-card-icon-2 {
      --r-width: 44px;
      --r-height: 44px
   }

   .erp-card-title-2 {
      --r-font-size: 17px
   }

   .erp-box-1 {
      --r-padding: 32px
   }

   .erp-panel-1 {
      --r-gap: 32px
   }

   .erp-block-2 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 28px
   }

   .erp-block-3 {
      --r-gap: 18px
   }

   .erp-heading-2 {
      --r-font-size: 32px
   }

   .erp-paragraph-2 {
      --r-font-size: 15px
   }

   .erp-reveal-text-1 {
      --r-font-size: 15px
   }

   .erp-reveal-text-2 {
      --r-gap: 40px
   }

   .erp-bold-1 {
      --r-font-size: 30px
   }

   .erp-bold-2 {
      --r-font-size: 30px
   }

   .erp-text-1 {
      --r-font-size: 17px
   }

   .erp-feature-grid-1 {
      --r-grid-template-columns: repeat(2, minmax(0, 1fr));
      --r-gap: 10px
   }

   .erp-feature-1 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-2 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-3 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-4 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-5 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-6 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-7 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-8 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-9 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-10 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-11 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-12 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-13 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-14 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-15 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-16 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-reveal-text-3 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 18px;
      --r-padding: 22px
   }

   .erp-panel-2 {
      --r-gap: 32px
   }

   .erp-block-4 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 28px
   }

   .erp-block-5 {
      --r-gap: 18px
   }

   .erp-heading-3 {
      --r-font-size: 32px
   }

   .erp-paragraph-3 {
      --r-font-size: 15px
   }

   .erp-reveal-text-4 {
      --r-font-size: 15px
   }

   .erp-reveal-text-5 {
      --r-gap: 40px
   }

   .erp-bold-3 {
      --r-font-size: 30px
   }

   .erp-bold-4 {
      --r-font-size: 30px
   }

   .erp-text-2 {
      --r-font-size: 17px
   }

   .erp-feature-grid-2 {
      --r-grid-template-columns: repeat(2, minmax(0, 1fr));
      --r-gap: 10px
   }

   .erp-feature-17 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-18 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-19 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-20 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-21 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-22 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-23 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-24 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-25 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-26 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-27 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-28 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-29 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-30 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-31 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-feature-32 {
      --r-min-height: 56px;
      --r-font-size: 14px
   }

   .erp-reveal-text-6 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 18px;
      --r-padding: 22px
   }

   .features-block-1 {
      --r-padding: 88px 24px 0;
      --r-gap: 48px
   }

   .features-heading-1 {
      --r-font-size: 38px;
      --r-line-height: 1.14;
      --r-letter-spacing: -0.03em
   }

   .features-paragraph-1 {
      --r-font-size: 21px
   }

   .features-block-2 {
      --r-height: 4200px
   }

   .features-block-3 {
      --r-top: 104px;
      --r-display: flex;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .features-block-3 {
      flex-direction: column
   }

   .features-tab-1 {
      --r-font-size: 32px;
      --r-line-height: 1.3
   }

   .features-tab-2 {
      --r-font-size: 32px;
      --r-line-height: 1.3
   }

   .features-tab-3 {
      --r-font-size: 32px;
      --r-line-height: 1.3
   }

   .features-tab-4 {
      --r-font-size: 32px;
      --r-line-height: 1.3
   }

   .features-tab-5 {
      --r-font-size: 32px;
      --r-line-height: 1.3
   }

   .features-block-4 {
      --r-padding: 32px;
      --r-min-height: 380px
   }

   :is(#app, #appo) .page-root .features-block-5 {
      grid-column: 1 / -1;
      justify-content: center
   }

   .vina-assistant-block-1 {
      --r-padding: 64px 24px 0
   }

   .vina-card-1 {
      --r-border-radius: 20px;
      --r-background-image: url(../images/home-page-images/vina-green-abstract-background-mobile.webp);
      --r-background-position: center calc(100% + 320px);
      --r-padding: 48px 40px 0
   }

   :is(#app, #appo) .page-root .vina-card-1 {
      align-items: center;
      flex-direction: column;
      gap: 40px
   }

   .vina-assistant-block-2 {
      --r-align-items: center;
      --r-gap: 24px;
      --r-max-width: none
   }

   .vina-badge-1 {
      --r-height: 40px;
      --r-font-size: 15px
   }

   :where(.vina-logo-mark-1) {
      width: 16px;
      height: 16px
   }

   .vina-assistant-split-heading-1 {
      --r-align-items: center;
      --r-gap: 16px;
      --r-text-align: center
   }

   .vina-assistant-heading-1 {
      --r-align-items: center;
      --r-gap: 6px
   }

   .vina-assistant-text-1 {
      --r-font-size: 56px
   }

   .vina-assistant-text-2 {
      --r-max-width: 560px;
      --r-font-size: 34px
   }

   .vina-assistant-paragraph-1 {
      --r-max-width: 520px;
      --r-font-size: 19px
   }

   .vina-assistant-block-3 {
      --r-gap: 32px
   }

   .vina-assistant-block-4 {
      --r-justify-content: space-between;
      --r-gap: 24px
   }

   .vina-feature-1 {
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .vina-feature-1 {
      flex-direction: column
   }

   .vina-feature-icon-1 {
      --r-width: 56px;
      --r-height: 56px
   }

   :where(.vina-assistant-icon-1) {
      width: 24px;
      height: 24px
   }

   .vina-assistant-text-3 {
      --r-font-size: 15px;
      --r-text-align: center
   }

   .vina-device-glow-1 {
      --r-height: 56px
   }

   .vina-feature-2 {
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .vina-feature-2 {
      flex-direction: column
   }

   .vina-feature-icon-2 {
      --r-width: 56px;
      --r-height: 56px
   }

   :where(.vina-assistant-icon-2) {
      width: 24px;
      height: 24px
   }

   .vina-assistant-text-4 {
      --r-font-size: 15px;
      --r-text-align: center
   }

   .vina-device-glow-2 {
      --r-height: 56px
   }

   .vina-feature-3 {
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .vina-feature-3 {
      flex-direction: column
   }

   .vina-feature-icon-3 {
      --r-width: 56px;
      --r-height: 56px
   }

   :where(.vina-assistant-icon-3) {
      width: 24px;
      height: 24px
   }

   .vina-assistant-text-5 {
      --r-font-size: 15px;
      --r-text-align: center
   }

   .vina-assistant-block-5 {
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .vina-assistant-block-5 {
      justify-content: center
   }

   .vina-button-1 {
      --r-padding: 0 32px
   }

   .vina-button-2 {
      --r-padding: 0 32px
   }

   .vina-device-1 {
      --r-position: relative;
      --r-width: 600px
   }

   :is(#app, #appo) .page-root .vina-device-1 {
      max-width: 100%;
      margin-bottom: 44px
   }

   .integrations-block-1 {
      --r-padding: 88px 24px 0;
      --r-gap: 40px
   }

   .integrations-heading-1 {
      --r-font-size: 38px;
      --r-line-height: 1.14;
      --r-letter-spacing: -0.03em
   }

   .integrations-paragraph-1 {
      --r-font-size: 21px
   }

   .integrations-block-2 {
      --r-display: flex;
      --r-gap: 24px
   }

   :is(#app, #appo) .page-root .integrations-block-2 {
      flex-direction: column
   }

   :is(#app, #appo) .page-root .integrations-block-3 {
      flex-wrap: wrap;
      justify-content: center
   }

   .integrations-stage-1 {
      --r-height: 440px
   }

   .integrations-block-4 {
      --r-width: 786px;
      --r-height: 440px;
      --r-margin-left: -393.0px
   }

   .integrations-glow-1 {
      --r-left: 329.0px;
      --r-top: 156.0px;
      --r-width: 128.0px;
      --r-height: 128.0px
   }

   .integrations-ring-1 {
      --r-left: 309.0px;
      --r-top: 136.0px;
      --r-width: 168.0px;
      --r-height: 168.0px
   }

   .integrations-ring-2 {
      --r-left: 309.0px;
      --r-top: 136.0px;
      --r-width: 168.0px;
      --r-height: 168.0px
   }

   .integrations-ring-3 {
      --r-left: 309.0px;
      --r-top: 136.0px;
      --r-width: 168.0px;
      --r-height: 168.0px
   }

   .integrations-hub-1 {
      --r-left: 353.0px;
      --r-top: 180.0px;
      --r-width: 80px;
      --r-height: 80px
   }

   .integrations-image-1 {
      --r-width: 46.0px;
      --r-height: 46.0px
   }

   .integrations-chip-1 {
      --r-left: 169px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-2 {
      --r-left: 41px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px;
      --r-transition-delay: 800ms
   }

   .integrations-chip-3 {
      --r-left: 169px;
      --r-top: 341px;
      --r-width: 104px;
      --r-height: 46px;
      --r-transition-delay: 460ms
   }

   .integrations-chip-4 {
      --r-left: 513px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-5 {
      --r-left: 641px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-6 {
      --r-left: 513px;
      --r-top: 341px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-7 {
      --r-left: 169px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-8 {
      --r-left: 41px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-9 {
      --r-left: 169px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-10 {
      --r-left: 41px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-11 {
      --r-left: 513px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-12 {
      --r-left: 641px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-13 {
      --r-left: 513px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-14 {
      --r-left: 641px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-15 {
      --r-left: 169px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-16 {
      --r-left: 41px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-17 {
      --r-left: 513px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }

   .integrations-chip-18 {
      --r-left: 641px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }

   .customers-block-1 {
      --r-height: 2012px
   }

   .customers-stage-1 {
      --r-height: 1112px
   }

   .customers-globe-1 {
      --fh: 590.573;
      --bx: 0.00
   }

   .customers-globe-1 {
      --r-top: 100px;
      --r-width: 1700px;
      --r-margin-left: -850px
   }

   .customers-globe-spin-1 {
      --r-top: 295.14px;
      --r-width: 1700px;
      --r-height: 590.57px;
      --r-background-size: 1700.00px auto;
      --r-background-position: 0.00px 0px
   }

   .customers-globe-spin-2 {
      --r-top: 295.14px;
      --r-width: 1700px;
      --r-height: 590.57px;
      --r-background-size: 1700.00px auto;
      --r-background-position: 0.00px 0px
   }

   .customers-headline-1 {
      --r-top: 150px;
      --r-padding: 0 24px
   }

   .customers-heading-1 {
      --r-font-size: 44px;
      --r-letter-spacing: -0.03em
   }

   .customers-headline-2 {
      --r-top: 150px;
      --r-padding: 0 24px
   }

   .customers-heading-2 {
      --r-font-size: 44px;
      --r-letter-spacing: -0.03em
   }

   .customers-block-2 {
      --r-margin-top: 28px
   }

   .customers-button-1 {
      --r-height: 48px
   }

   .customers-logo-rows-1 {
      --r-bottom: 48px;
      --r-gap: 4px
   }

   .customers-logo-track-1 {
      --dur: 70s;
      --r-gap: 12px;
      --r-padding-right: 12px
   }

   .customers-logo-card-1 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-1 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-2 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-2 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-3 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-3 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-4 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-4 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-5 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-5 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-6 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-6 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-7 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-7 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-8 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-8 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-9 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-9 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-10 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-10 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-11 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-11 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-12 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-12 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-13 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-13 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-14 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-14 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-15 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-15 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-16 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-16 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-17 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-17 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-18 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-18 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-19 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-19 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-20 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-20 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-21 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-21 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-22 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-22 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-23 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-23 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-24 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-24 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-25 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-25 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-26 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-26 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-27 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-27 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-28 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-28 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-29 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-29 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-30 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-30 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-31 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-31 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-32 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-32 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-33 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-33 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-34 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-34 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-35 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-35 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-36 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-36 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-37 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-37 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-38 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-38 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-39 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-39 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-40 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-40 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-41 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-41 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-42 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-42 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-43 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-43 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-44 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-44 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-45 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-45 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-46 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-46 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-47 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-47 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-48 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-48 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-track-2 {
      --dur: 80s;
      --r-gap: 12px;
      --r-padding-right: 12px
   }

   .customers-logo-card-49 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-49 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-50 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-50 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-51 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-51 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-52 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-52 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-53 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-53 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-54 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-54 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-55 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-55 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-56 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-56 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-57 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-57 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-58 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-58 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-59 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-59 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-60 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-60 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-61 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-61 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-62 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-62 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-63 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-63 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-64 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-64 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-65 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-65 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-66 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-66 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-67 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-67 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-68 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-68 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-69 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-69 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-70 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-70 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-71 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-71 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-72 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-72 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-73 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-73 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-74 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-74 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-75 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-75 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-76 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-76 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-77 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-77 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-78 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-78 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-79 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-79 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-80 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-80 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-81 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-81 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-82 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-82 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-83 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-83 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-84 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-84 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-85 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-85 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-86 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-86 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-87 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-87 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-88 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-88 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-89 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-89 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-90 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-90 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-91 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-91 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-92 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-92 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-93 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-93 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-94 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-94 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-95 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-95 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .customers-logo-card-96 {
      --r-width: 188px;
      --r-height: 78px
   }

   .customers-image-96 {
      --r-max-width: 128px;
      --r-max-height: 52px
   }

   .press-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 32px
   }

   .press-block-2 {
      --r-padding: 0 24px
   }

   .press-heading-2 {
      --r-font-size: 38px;
      --r-letter-spacing: -0.03em
   }

   .press-paragraph-1 {
      --r-font-size: 21px
   }

   .press-row-1 {
      --mq: 30
   }

   .press-track-1 {
      --r-gap: 18px;
      --r-padding-right: 18px
   }

   .press-logo-card-1 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-1 {
      --r-padding: 20px 28px
   }

   .press-image-1 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-1 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-2 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-2 {
      --r-padding: 20px 28px
   }

   .press-image-2 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-2 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-3 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-3 {
      --r-padding: 20px 28px
   }

   .press-image-3 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-3 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-4 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-4 {
      --r-padding: 20px 28px
   }

   .press-image-4 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-4 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-5 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-5 {
      --r-padding: 20px 28px
   }

   .press-image-5 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-5 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-6 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-6 {
      --r-padding: 20px 28px
   }

   .press-image-6 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-6 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-7 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-7 {
      --r-padding: 20px 28px
   }

   .press-image-7 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-7 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-8 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-8 {
      --r-padding: 20px 28px
   }

   .press-image-8 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-8 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-9 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-9 {
      --r-padding: 20px 28px
   }

   .press-image-9 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-9 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-10 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-10 {
      --r-padding: 20px 28px
   }

   .press-image-10 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-10 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-11 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-11 {
      --r-padding: 20px 28px
   }

   .press-image-11 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-11 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-12 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-12 {
      --r-padding: 20px 28px
   }

   .press-image-12 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-12 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-13 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-13 {
      --r-padding: 20px 28px
   }

   .press-image-13 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-13 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .press-logo-card-14 {
      --r-width: 250px;
      --r-height: 168px
   }

   .press-card-logo-14 {
      --r-padding: 20px 28px
   }

   .press-image-14 {
      --r-max-width: 170px;
      --r-max-height: 50px
   }

   .press-card-footer-14 {
      --r-padding: 12px 12px 12px 18px;
      --r-font-size: 14px
   }

   .success-stories-block-1 {
      --r-padding: 72px 24px 0
   }

   .stories-panel-shell-1 {
      --r-border-radius: 28px;
      --r-padding: 44px 40px
   }

   .success-stories-block-2 {
      --r-display: flex;
      --r-gap: 36px
   }

   :is(#app, #appo) .page-root .success-stories-block-2 {
      flex-direction: column
   }

   .success-stories-split-heading-1 {
      --r-gap: 16px
   }

   .success-stories-heading-2 {
      --r-font-size: 40px
   }

   .success-stories-paragraph-2 {
      --r-font-size: 18px
   }

   .stories-badge-row-1 {
      --r-padding: 10px;
      --r-border-radius: 24px;
      --r-height: 440px
   }

   .stories-viewport-1 {
      --r-border-radius: 14px
   }

   .stories-play-button-1 {
      --r-width: 76px;
      --r-height: 76px;
      --r-margin: -38px 0 0 -38px
   }

   :where(.success-stories-icon-1) {
      width: 26px;
      height: 26px
   }

   .stories-panel-1 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-1 {
      max-width: 70%
   }

   .success-stories-text-1 {
      --r-font-size: 18px
   }

   .stories-panel-2 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-2 {
      max-width: 70%
   }

   .success-stories-text-2 {
      --r-font-size: 18px
   }

   .stories-panel-3 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-3 {
      max-width: 70%
   }

   .success-stories-text-3 {
      --r-font-size: 18px
   }

   .stories-panel-4 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-4 {
      max-width: 70%
   }

   .success-stories-text-4 {
      --r-font-size: 18px
   }

   .stories-panel-5 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-5 {
      max-width: 70%
   }

   .success-stories-text-5 {
      --r-font-size: 18px
   }

   .stories-panel-6 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-6 {
      max-width: 70%
   }

   .success-stories-text-6 {
      --r-font-size: 18px
   }

   .stories-panel-7 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-7 {
      max-width: 70%
   }

   .success-stories-text-7 {
      --r-font-size: 18px
   }

   .stories-panel-8 {
      --r-left: 16px;
      --r-bottom: 16px;
      --r-padding: 12px 16px
   }

   :is(#app, #appo) .page-root .stories-panel-8 {
      max-width: 70%
   }

   .success-stories-text-8 {
      --r-font-size: 18px
   }

   .success-stories-block-3 {
      --r-gap: 24px
   }

   .stories-quote-item-1 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-2) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-3) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-4) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-5) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-6) {
      width: 16px;
      height: 16px
   }

   .stories-quote-9 {
      --r-font-size: 19px
   }

   .stories-quote-item-2 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-7) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-8) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-9) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-10) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-11) {
      width: 16px;
      height: 16px
   }

   .stories-quote-10 {
      --r-font-size: 19px
   }

   .stories-quote-item-3 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-12) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-13) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-14) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-15) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-16) {
      width: 16px;
      height: 16px
   }

   .stories-quote-11 {
      --r-font-size: 19px
   }

   .stories-quote-item-4 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-17) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-18) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-19) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-20) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-21) {
      width: 16px;
      height: 16px
   }

   .stories-quote-12 {
      --r-font-size: 19px
   }

   .stories-quote-item-5 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-22) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-23) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-24) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-25) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-26) {
      width: 16px;
      height: 16px
   }

   .stories-quote-13 {
      --r-font-size: 19px
   }

   .stories-quote-item-6 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-27) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-28) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-29) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-30) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-31) {
      width: 16px;
      height: 16px
   }

   .stories-quote-14 {
      --r-font-size: 19px
   }

   .stories-quote-item-7 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-32) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-33) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-34) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-35) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-36) {
      width: 16px;
      height: 16px
   }

   .stories-quote-15 {
      --r-font-size: 19px
   }

   .stories-quote-item-8 {
      --r-gap: 18px
   }

   :where(.success-stories-icon-37) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-38) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-39) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-40) {
      width: 16px;
      height: 16px
   }

   :where(.success-stories-icon-41) {
      width: 16px;
      height: 16px
   }

   .stories-quote-16 {
      --r-font-size: 19px
   }

   .success-stories-block-4 {
      --r-gap: 20px
   }

   .stories-nav-button-1 {
      --r-width: 44px;
      --r-height: 44px
   }

   .stories-nav-button-2 {
      --r-width: 44px;
      --r-height: 44px
   }

   .stories-counter-2 {
      --r-font-size: 30px
   }

   .success-stories-block-5 {
      --r-margin-top: 32px
   }

   .resources-block-1 {
      --r-padding: 88px 0 0;
      --r-gap: 40px
   }

   :is(#app, #appo) .page-root .resources-block-2 {
      padding: 0 24px
   }

   .resources-heading-2 {
      --r-max-width: 720px;
      --r-font-size: 38px;
      --r-letter-spacing: -0.03em
   }

   .resources-paragraph-1 {
      --r-font-size: 21px
   }

   .resources-scroller-1 {
      --r-gap: 16px;
      --r-padding: 12px 24px 28px;
      --r-margin: -12px 0 -28px;
      --r-scroll-padding: 0 24px
   }

   .resources-card-11 {
      --r-height: 220px;
      --r-width: 450px
   }

   :is(#app, #appo) .page-root .resources-card-11 {
      flex-basis: 450px
   }

   .resources-block-13 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-11 {
      --r-font-size: 22px
   }

   .resources-card-description-11 {
      --r-font-size: 15px
   }

   .resources-card-image-11 {
      --r-height: 132px;
      --r-width: 132px;
      --r-margin-right: 20px
   }

   .resources-card-12 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-12 {
      flex-basis: 220px
   }

   .resources-block-14 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-12 {
      --r-font-size: 22px
   }

   .resources-card-description-12 {
      --r-font-size: 15px
   }

   .resources-card-image-12 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-13 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-13 {
      flex-basis: 220px
   }

   .resources-block-15 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-13 {
      --r-font-size: 22px
   }

   .resources-card-description-13 {
      --r-font-size: 15px
   }

   .resources-card-image-13 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-14 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-14 {
      flex-basis: 220px
   }

   .resources-block-16 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-14 {
      --r-font-size: 22px
   }

   .resources-card-description-14 {
      --r-font-size: 15px
   }

   .resources-card-image-14 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-15 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-15 {
      flex-basis: 220px
   }

   .resources-block-17 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-15 {
      --r-font-size: 22px
   }

   .resources-card-description-15 {
      --r-font-size: 15px
   }

   .resources-card-image-15 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-16 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-16 {
      flex-basis: 220px
   }

   .resources-block-18 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-16 {
      --r-font-size: 22px
   }

   .resources-card-description-16 {
      --r-font-size: 15px
   }

   .resources-card-image-16 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-17 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-17 {
      flex-basis: 220px
   }

   .resources-block-19 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-17 {
      --r-font-size: 22px
   }

   .resources-card-description-17 {
      --r-font-size: 15px
   }

   .resources-card-image-17 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-18 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-18 {
      flex-basis: 220px
   }

   .resources-block-20 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-18 {
      --r-font-size: 22px
   }

   .resources-card-description-18 {
      --r-font-size: 15px
   }

   .resources-card-image-18 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-19 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-19 {
      flex-basis: 220px
   }

   .resources-block-21 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-19 {
      --r-font-size: 22px
   }

   .resources-card-description-19 {
      --r-font-size: 15px
   }

   .resources-card-image-19 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-card-20 {
      --r-height: 220px;
      --r-width: 220px
   }

   :is(#app, #appo) .page-root .resources-card-20 {
      flex-basis: 220px
   }

   .resources-block-22 {
      --r-padding: 24px 20px 20px
   }

   .resources-card-title-20 {
      --r-font-size: 22px
   }

   .resources-card-description-20 {
      --r-font-size: 15px
   }

   .resources-card-image-20 {
      --r-height: 132px;
      --r-margin-right: 0
   }

   .resources-block-23 {
      --r-padding: 0 24px
   }

   .faq-block-1 {
      --r-padding: 72px 24px;
      --r-gap: 28px
   }

   .faq-heading-2 {
      --r-font-size: 38px
   }

   .faq-paragraph-15 {
      --r-font-size: 18px
   }

   .faq-question-14 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-14 {
      --r-font-size: 17px
   }

   .faq-answer-inner-14 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-16 {
      --r-font-size: 15px
   }

   .faq-question-15 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-15 {
      --r-font-size: 17px
   }

   .faq-answer-inner-15 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-17 {
      --r-font-size: 15px
   }

   .faq-question-16 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-16 {
      --r-font-size: 17px
   }

   .faq-answer-inner-16 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-18 {
      --r-font-size: 15px
   }

   .faq-question-17 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-17 {
      --r-font-size: 17px
   }

   .faq-answer-inner-17 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-19 {
      --r-font-size: 15px
   }

   .faq-question-18 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-18 {
      --r-font-size: 17px
   }

   .faq-answer-inner-18 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-20 {
      --r-font-size: 15px
   }

   .faq-question-19 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-19 {
      --r-font-size: 17px
   }

   .faq-answer-inner-19 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-21 {
      --r-font-size: 15px
   }

   .faq-question-20 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-20 {
      --r-font-size: 17px
   }

   .faq-answer-inner-20 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-22 {
      --r-font-size: 15px
   }

   .faq-question-21 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-21 {
      --r-font-size: 17px
   }

   .faq-answer-inner-21 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-23 {
      --r-font-size: 15px
   }

   .faq-question-22 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-22 {
      --r-font-size: 17px
   }

   .faq-answer-inner-22 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-24 {
      --r-font-size: 15px
   }

   .faq-question-23 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-23 {
      --r-font-size: 17px
   }

   .faq-answer-inner-23 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-25 {
      --r-font-size: 15px
   }

   .faq-question-24 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-24 {
      --r-font-size: 17px
   }

   .faq-answer-inner-24 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-26 {
      --r-font-size: 15px
   }

   .faq-question-25 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-25 {
      --r-font-size: 17px
   }

   .faq-answer-inner-25 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-27 {
      --r-font-size: 15px
   }

   .faq-question-26 {
      --r-gap: 16px;
      --r-padding: 18px 20px
   }

   .faq-question-text-26 {
      --r-font-size: 17px
   }

   .faq-answer-inner-26 {
      --r-padding: 0 64px 22px 56px
   }

   .faq-paragraph-28 {
      --r-font-size: 15px
   }

   .faq-help-2 {
      --r-padding: 24px
   }

   .about-vasy-block-1 {
      --r-padding: 16px 24px 0;
      --r-gap: 32px
   }

   .about-vasy-heading-1 {
      --r-font-size: 36px
   }

   .about-vasy-paragraph-1 {
      --r-font-size: 17px
   }

   .about-panel-1 {
      --r-padding: 20px
   }

   .about-vasy-block-2 {
      --r-display: flex;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .about-vasy-block-2 {
      flex-direction: column;
      min-width: 0
   }

   .unused-style-913 {
      --r-margin: 0 0;
      --r-padding: 2px 0 6px
   }

   .about-scroller-1 {
      --r-height: 560px;
      --r-padding: 0 32px
   }

   .about-section-1 {
      --r-padding: 28px 0 24px
   }

   .about-vasy-paragraph-2 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-3 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-4 {
      --r-font-size: 15px
   }

   .about-section-2 {
      --r-padding: 24px 0
   }

   .about-vasy-heading-2 {
      --r-font-size: 24px
   }

   .about-vasy-paragraph-5 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-6 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-7 {
      --r-font-size: 15px
   }

   .about-section-3 {
      --r-padding: 24px 0
   }

   .about-vasy-h4-1 {
      --r-font-size: 18px
   }

   .about-vasy-paragraph-8 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-9 {
      --r-font-size: 15px
   }

   .about-section-4 {
      --r-padding: 24px 0
   }

   .about-vasy-h4-2 {
      --r-font-size: 18px
   }

   .about-vasy-paragraph-10 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-11 {
      --r-font-size: 15px
   }

   .about-section-5 {
      --r-padding: 24px 0
   }

   .about-vasy-h4-3 {
      --r-font-size: 18px
   }

   .about-vasy-paragraph-12 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-13 {
      --r-font-size: 15px
   }

   .about-section-6 {
      --r-padding: 24px 0
   }

   .about-vasy-h4-4 {
      --r-font-size: 18px
   }

   .about-vasy-paragraph-14 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-15 {
      --r-font-size: 15px
   }

   .about-section-7 {
      --r-padding: 24px 0
   }

   .about-vasy-h4-5 {
      --r-font-size: 18px
   }

   .about-vasy-paragraph-16 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-17 {
      --r-font-size: 15px
   }

   .about-section-8 {
      --r-padding: 24px 0
   }

   .about-vasy-h4-6 {
      --r-font-size: 18px
   }

   .about-vasy-paragraph-18 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-19 {
      --r-font-size: 15px
   }

   .about-section-9 {
      --r-padding: 24px 0
   }

   .about-vasy-heading-3 {
      --r-font-size: 24px
   }

   .about-vasy-paragraph-20 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-21 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-1 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-2 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-3 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-4 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-5 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-6 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-22 {
      --r-font-size: 15px
   }

   .about-section-10 {
      --r-padding: 24px 0
   }

   .about-vasy-heading-4 {
      --r-font-size: 24px
   }

   .about-vasy-paragraph-23 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-24 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-7 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-8 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-9 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-10 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-11 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-12 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-13 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-25 {
      --r-font-size: 15px
   }

   .about-section-11 {
      --r-padding: 24px 0
   }

   .about-vasy-heading-5 {
      --r-font-size: 24px
   }

   .about-vasy-paragraph-26 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-27 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-14 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-15 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-16 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-17 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-18 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-19 {
      --r-font-size: 15px
   }

   .about-section-12 {
      --r-padding: 24px 0
   }

   .about-vasy-heading-6 {
      --r-font-size: 24px
   }

   .about-vasy-paragraph-28 {
      --r-font-size: 15px
   }

   .about-vasy-paragraph-29 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-20 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-21 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-22 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-23 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-24 {
      --r-font-size: 15px
   }

   .about-vasy-list-item-25 {
      --r-font-size: 15px
   }

   .book-demo-block-1 {
      --r-padding: 72px 24px 0
   }

   .book-demo-panel-1 {
      --r-border-radius: 24px;
      --r-padding: 16px
   }

   .book-demo-block-2 {
      --r-display: flex;
      --r-gap: 24px
   }

   :is(#app, #appo) .page-root .book-demo-block-2 {
      flex-direction: column
   }

   .book-demo-left-1 {
      --r-align-items: center;
      --r-padding: 48px 24px 16px
   }

   .book-demo-pill-1 {
      --r-height: 52px;
      --r-padding: 0 18px;
      --r-gap: 16px
   }

   :where(.book-demo-icon-1) {
      width: 16px;
      height: 16px
   }

   .book-demo-bold-1 {
      --r-font-size: 18px
   }

   .book-demo-text-1 {
      --r-font-size: 14px
   }

   .book-demo-divider-1 {
      --r-margin: 13px 0
   }

   :where(.book-demo-icon-2) {
      width: 16px;
      height: 16px
   }

   .book-demo-bold-2 {
      --r-font-size: 18px
   }

   .book-demo-text-2 {
      --r-font-size: 14px
   }

   .book-demo-split-heading-1 {
      --r-align-items: center;
      --r-text-align: center
   }

   .book-demo-heading-1 {
      --r-max-width: 640px;
      --r-font-size: 40px;
      --r-letter-spacing: -0.03em
   }

   .book-demo-paragraph-1 {
      --r-max-width: 600px;
      --r-font-size: 18px
   }

   .book-demo-stat-1 {
      --r-flex-direction: row
   }

   .book-demo-ring-1 {
      --r-width: 90%;
      --r-height: 90%
   }

   .book-demo-ring-2 {
      --r-width: 90%;
      --r-height: 90%
   }

   .book-demo-ring-3 {
      --r-width: 90%;
      --r-height: 90%
   }

   .book-demo-ring-4 {
      --r-width: 90%;
      --r-height: 90%
   }

   .book-demo-iso-badge-1 {
      --r-width: 78%;
      --iso: rotateX(24deg) rotateY(-18deg) rotateZ(6deg);
      --iso-h: rotateX(14deg) rotateY(-10deg) rotateZ(3deg) translateZ(20px)
   }

   .book-demo-card-1 {
      --r-padding: 24px;
      --r-gap: 16px
   }

   .book-demo-image-1 {
      --r-width: 44px;
      --r-height: 44px
   }

   .book-demo-block-3 {
      --r-font-size: 20px
   }

   .book-demo-block-4 {
      --r-font-size: 14px
   }

   .book-demo-day-1 {
      --r-height: 64px
   }

   .book-demo-day-2 {
      --r-height: 64px
   }

   .book-demo-day-3 {
      --r-height: 64px
   }

   .book-demo-day-4 {
      --r-height: 64px
   }

   .book-demo-day-5 {
      --r-height: 64px
   }

   .book-demo-time-slot-1 {
      --r-height: 48px
   }

   .book-demo-time-slot-2 {
      --r-height: 48px
   }

   .book-demo-time-slot-3 {
      --r-height: 48px
   }

   .book-demo-time-slot-4 {
      --r-height: 48px
   }

   .book-demo-confirm-button-1 {
      --r-height: 48px
   }

   .explore-vasy-block-1 {
      --r-padding: 72px 24px 0
   }

   .explore-panel-1 {
      --r-padding: 28px;
      --r-gap: 24px
   }

   :is(#app, #appo) .page-root .explore-vasy-split-heading-1 {
      align-items: flex-end
   }

   .explore-vasy-heading-1 {
      --r-font-size: 28px
   }

   .explore-vasy-paragraph-1 {
      --r-font-size: 15px
   }

   .explore-vasy-block-2 {
      --r-gap: 14px
   }

   .explore-vasy-block-3 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 14px
   }

   .explore-vasy-block-4 {
      --r-gap: 14px
   }

   .explore-group-1 {
      --r-padding: 20px
   }

   :is(#app, #appo) .page-root .explore-group-1 {
      flex: 1 1 auto
   }

   .explore-marker-1 {
      --r-webkit-mask-image: url(../images/home-page-images/explore-retail-marker-icon.svg);
      --r-mask-image: url(../images/home-page-images/explore-retail-marker-icon.svg)
   }

   .explore-list-1 {
      --r-grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .unused-style-1045 {
      --r-margin-top: 88px
   }

   .footer-block-1 {
      --r-padding: 56px 24px 24px
   }

   .footer-card-1 {
      --r-border-radius: 24px;
      --r-gap: 32px
   }

   .footer-back-to-top-1 {
      --r-top: -78px
   }

   .footer-block-2 {
      --r-grid-template-columns: 1.4fr 1fr 1fr;
      --r-gap: 32px
   }

   .footer-block-3 {
      --r-max-width: 340px
   }

   .footer-image-1 {
      --r-height: 40px
   }

   .footer-block-4 {
      --r-box-shadow: inset 0 1px 0 #D9DEE5
   }

   :is(#app, #appo) .page-root .footer-block-4 {
      grid-column: 1 / -1;
      padding-top: 24px
   }

   .footer-block-5 {
      --r-flex-direction: row
   }

   .footer-contact-strip-1 {
      --r-flex-direction: column;
      --r-align-items: stretch;
      --r-gap: 20px;
      --r-padding: 20px 24px
   }

   .footer-block-6 {
      --r-flex-direction: row;
      --r-gap: 32px
   }

   :is(#app, #appo) .page-root .footer-text-1 {
      height: 1px
   }

   .footer-block-7 {
      --r-justify-content: space-between;
      --r-gap: 24px
   }

   .footer-block-8 {
      --r-flex-direction: row
   }

   .footer-statement-wrapper-1 {
      --r-padding: 36px 0 4px
   }

   .footer-statement-1 {
      --r-font-size: 82px
   }

   .hero-scroll-hint-1 {
      --r-bottom: 28px
   }

   .video-modal-box-1 {
      --r-width: calc(100% - 64px);
      --r-padding: 12px
   }

   .text-1 {
      --r-font-size: 15px
   }

   .page-bottom-blur-1 {
      --r-height: 120px
   }

   .unused-style-1065 {
      --r-width: 786px;
      --r-height: 72px;
      --r-padding: 0 12px 0 24px;
      --r-gap: 8px
   }

   :is(#app, #appo) .page-root .header-menu-item-rise-1 {
      flex-grow: 1
   }

   .header-image-1 {
      --r-height: 40px
   }

   .header-menu-item-rise-2 {
      --r-transition-delay: 100ms
   }

   .header-menu-item-rise-3 {
      --r-transition-delay: 180ms
   }

   .header-mobile-menu-panel-1 {
      --r-max-height: 992px;
      --r-padding: 8px 24px 24px
   }

   .header-block-2 {
      --r-display: grid;
      --r-gap: 8px;
      --r-padding: 0 0 24px
   }

   :is(#app, #appo) .page-root .header-block-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .header-block-3 {
      --r-padding: 0 0 24px
   }

   .header-submenu-fade-1 {
      --r-padding-bottom: 16px
   }

   .header-block-4 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-4 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-5 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-5 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-6 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-6 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-7 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-7 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-8 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-8 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-9 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-9 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-10 {
      --r-padding: 8px 0 16px
   }

   :is(#app, #appo) .page-root .header-block-10 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px
   }

   .header-block-11 {
      --r-display: grid;
      --r-gap: 8px;
      --r-padding: 0 0 24px
   }

   :is(#app, #appo) .page-root .header-block-11 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .header-block-12 {
      --r-display: grid;
      --r-gap: 8px;
      --r-padding: 0 0 24px
   }

   :is(#app, #appo) .page-root .header-block-12 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .header-block-13 {
      --r-display: grid;
      --r-gap: 8px;
      --r-padding: 0 0 24px
   }

   :is(#app, #appo) .page-root .header-block-13 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media (max-width: 599.98px) {

   .show-desktop,
   .show-desktop-laptop,
   .show-desktop-laptop-tablet,
   .show-laptop,
   .show-tablet {
      display: none !important
   }

   .hero-fly-card-1 {
      --r-height: 40px
   }

   .hero-fly-card-inner-1 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-1 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-1) {
      width: 12px;
      height: 12px
   }

   .bold-1 {
      --r-font-size: 12px
   }

   .hero-fly-card-2 {
      --r-height: 40px
   }

   .hero-fly-card-inner-2 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-2 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-2) {
      width: 12px;
      height: 12px
   }

   .bold-2 {
      --r-font-size: 12px
   }

   .hero-fly-card-3 {
      --r-height: 40px
   }

   .hero-fly-card-inner-3 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-3 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-3) {
      width: 12px;
      height: 12px
   }

   .bold-3 {
      --r-font-size: 12px
   }

   .hero-fly-card-4 {
      --r-height: 40px
   }

   .hero-fly-card-inner-4 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-4 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-4) {
      width: 12px;
      height: 12px
   }

   .bold-4 {
      --r-font-size: 12px
   }

   .hero-fly-card-5 {
      --r-height: 40px
   }

   .hero-fly-card-inner-5 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-5 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-5) {
      width: 12px;
      height: 12px
   }

   .bold-5 {
      --r-font-size: 12px
   }

   .hero-fly-card-6 {
      --r-height: 40px
   }

   .hero-fly-card-inner-6 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-6 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-6) {
      width: 12px;
      height: 12px
   }

   .bold-6 {
      --r-font-size: 12px
   }

   .hero-fly-card-7 {
      --r-height: 40px
   }

   .hero-fly-card-inner-7 {
      --r-height: 40px;
      --r-padding: 0 14px 0 8px;
      --r-gap: 8px
   }

   .hero-fly-card-icon-7 {
      --r-width: 24px;
      --r-height: 24px
   }

   :where(.icon-7) {
      width: 12px;
      height: 12px
   }

   .bold-7 {
      --r-font-size: 12px
   }

   .hero-beam-1 {
      --run: 590px
   }

   .hero-beam-2 {
      --run: 590px
   }

   .hero-beam-3 {
      --run: 1200px
   }

   .hero-beam-4 {
      --r-left: 0px;
      --run: 1200px
   }

   .hero-beam-5 {
      --run: 590px
   }

   .hero-beam-6 {
      --r-left: 168px;
      --run: 1200px
   }

   .hero-beam-7 {
      --r-left: 168px;
      --run: 1200px
   }

   .hero-glow-1 {
      --r-left: -180px;
      --r-top: 460px;
      --r-width: 280px;
      --r-height: 280px
   }

   .hero-glow-2 {
      --r-right: -180px;
      --r-top: 460px;
      --r-width: 280px;
      --r-height: 280px
   }

   .hero-content-1 {
      --r-gap: 18px;
      --r-padding: 0 20px;
      --r-padding-top: 132px;
      --r-justify-content: flex-start
   }

   :is(#app, #appo) .page-root .hero-content-1 {
      min-height: 0px
   }

   .hero-split-heading-1 {
      --r-max-width: 350px;
      --r-font-size: 40px
   }

   .hero-split-heading-2 {
      --r-max-width: 340px;
      --r-font-size: 16px
   }

   .hero-badge-wrapper-1 {
      --r-flex-direction: column
   }

   :is(#app, #appo) .page-root .hero-badge-wrapper-1 {
      width: 100%
   }

   .hero-button-1 {
      --r-height: 44px
   }

   .hero-badge-wrapper-2 {
      --mq: 26
   }

   .hero-dashboard-window-1 {
      --r-width: 320px;
      --r-height: 660px;
      --r-margin-top: 64px
   }

   :is(#app, #appo) .page-root .hero-dashboard-window-1 {
      margin-bottom: 20px
   }

   .hero-dashboard-tilt-1 {
      --r-width: 320px;
      --r-height: 660px
   }

   :is(#app, #appo) .page-root .hero-dashboard-tilt-1 {
      border-radius: 50px
   }

   .hero-device-frame-1 {
      --r-width: 320px;
      --r-transform: none
   }

   :is(#app, #appo) .page-root .hero-device-frame-1 {
      height: 660px
   }

   .hero-fade-1 {
      --r-height: 48px
   }

   .financial-year-block-1 {
      --r-padding: 48px 20px;
      --r-gap: 32px
   }

   .financial-year-heading-1 {
      --r-font-size: 32px;
      --r-line-height: 1.15;
      --r-letter-spacing: -0.02em
   }

   :is(#app, #appo) .page-root .financial-year-heading-1 {
      max-width: 350px
   }

   .financial-year-paragraph-1 {
      --r-font-size: 16px
   }

   :is(#app, #appo) .page-root .financial-year-paragraph-1 {
      max-width: 680px
   }

   :is(#app, #appo) .page-root .financial-year-block-2 {
      display: flex;
      flex-direction: column;
      gap: 24px
   }

   .financial-year-block-8 {
      --r-padding: 24px
   }

   .financial-year-heading-4 {
      --r-font-size: 24px
   }

   .financial-year-block-9 {
      --r-width: 350px;
      --r-height: 240px
   }

   .financial-year-block-10 {
      --r-width: 240px;
      --r-height: 240px
   }

   .financial-year-image-2 {
      --r-width: 240px;
      --r-height: 240px
   }

   .financial-year-block-11 {
      --r-padding: 24px
   }

   .financial-year-heading-5 {
      --r-font-size: 24px
   }

   .solutions-block-1 {
      --r-padding: 24px 20px 0;
      --r-gap: 28px
   }

   .solutions-heading-1 {
      --r-font-size: 32px;
      --r-line-height: 1.15;
      --r-letter-spacing: -0.02em
   }

   .solutions-paragraph-1 {
      --r-font-size: 16px
   }

   .solutions-block-2 {
      --r-height: 2800px
   }

   .solutions-block-3 {
      --r-top: 92px;
      --r-display: flex;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .solutions-block-3 {
      flex-direction: column
   }

   :is(#app, #appo) .page-root .solution-tab-wrapper-1 {
      margin: 0 -20px;
      padding: 0 20px;
      justify-content: flex-start
   }

   .solution-tab-1 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solution-tab-2 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solution-tab-3 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solution-tab-4 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solution-tab-5 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solution-tab-6 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solution-tab-7 {
      --r-height: 40px;
      --r-padding: 0 14px;
      --r-font-size: 14px
   }

   .solutions-block-4 {
      --r-padding: 18px;
      --r-border-radius: 16px;
      --r-align-items: start
   }

   :is(#app, #appo) .page-root .solutions-block-4 {
      grid-template-columns: minmax(0, 1fr)
   }

   .solutions-eyebrow-label-1 {
      --r-top: 20px;
      --r-right: 18px
   }

   .solution-slide-1 {
      --r-gap: 16px
   }

   .solution-slide-text-1 {
      --r-font-size: 24px
   }

   .solution-slide-text-2 {
      --r-font-size: 14px
   }

   .solution-slide-2 {
      --r-gap: 16px
   }

   .solution-slide-text-3 {
      --r-font-size: 24px
   }

   .solution-slide-text-4 {
      --r-font-size: 14px
   }

   .solution-slide-3 {
      --r-gap: 16px
   }

   .solution-slide-text-5 {
      --r-font-size: 24px
   }

   .solution-slide-text-6 {
      --r-font-size: 14px
   }

   .solution-slide-4 {
      --r-gap: 16px
   }

   .solution-slide-text-7 {
      --r-font-size: 24px
   }

   .solution-slide-text-8 {
      --r-font-size: 14px
   }

   .solution-slide-5 {
      --r-gap: 16px
   }

   .solution-slide-text-9 {
      --r-font-size: 24px
   }

   .solution-slide-text-10 {
      --r-font-size: 14px
   }

   .solution-slide-6 {
      --r-gap: 16px
   }

   .solution-slide-text-11 {
      --r-font-size: 24px
   }

   .solution-slide-text-12 {
      --r-font-size: 14px
   }

   .solution-slide-7 {
      --r-gap: 16px
   }

   .solution-slide-text-13 {
      --r-font-size: 24px
   }

   .solution-slide-text-14 {
      --r-font-size: 14px
   }

   .solution-grid-view-1 {
      --r-margin-top: 14px;
      --r-height: 352px;
      --r-border-radius: 12px
   }

   .solutions-image-1 {
      --r-background: #F4F6F8
   }

   .solutions-image-2 {
      --r-background: #F4F6F8
   }

   .solutions-image-3 {
      --r-background: #F4F6F8
   }

   .solutions-image-4 {
      --r-background: #F4F6F8
   }

   .solutions-image-5 {
      --r-background: #F4F6F8
   }

   .solutions-image-6 {
      --r-background: #F4F6F8
   }

   .solutions-image-7 {
      --r-background: #F4F6F8
   }

   .clients-block-1 {
      --r-padding: 56px 20px 32px;
      --r-display: flex
   }

   :is(#app, #appo) .page-root .clients-block-1 {
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 8px;
      row-gap: 8px
   }

   .industries-block-1 {
      --r-padding: 48px 20px;
      --r-gap: 32px
   }

   .industries-heading-1 {
      --r-font-size: 32px;
      --r-line-height: 1.15;
      --r-letter-spacing: -0.02em
   }

   .industries-paragraph-1 {
      --r-font-size: 16px
   }

   .industries-block-2 {
      --r-display: flex;
      --r-gap: 18px
   }

   :is(#app, #appo) .page-root .industries-block-2 {
      flex-direction: column
   }

   .industries-block-3 {
      --r-display: grid
   }

   :is(#app, #appo) .page-root .industries-block-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   :is(#app, #appo) .page-root .industries-block-5 {
      position: relative;
      border-radius: 14px;
      background: #F4F6F8;
      height: 240px
   }

   .industries-mobile-row-1 {
      --r-gap: 12px
   }

   .industries-heading-2 {
      --r-font-size: 18px
   }

   .erp-block-1 {
      --r-padding: 48px 20px;
      --r-gap: 24px
   }

   .erp-heading-1 {
      --r-font-size: 28px
   }

   .erp-paragraph-1 {
      --r-font-size: 15px
   }

   .erp-box-1 {
      --r-padding: 20px
   }

   .erp-panel-1 {
      --r-gap: 28px
   }

   .erp-block-2 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 24px
   }

   .erp-block-3 {
      --r-gap: 16px
   }

   .erp-heading-2 {
      --r-font-size: 26px
   }

   .erp-paragraph-2 {
      --r-font-size: 14px
   }

   .erp-reveal-text-1 {
      --r-font-size: 14px
   }

   .erp-reveal-text-2 {
      --r-gap: 28px
   }

   .erp-bold-1 {
      --r-font-size: 28px
   }

   .erp-bold-2 {
      --r-font-size: 28px
   }

   .erp-text-1 {
      --r-font-size: 16px
   }

   :is(#app, #appo) .page-root .erp-text-1 {
      min-width: 0;
      line-height: 1.3
   }

   .erp-feature-grid-1 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 8px
   }

   .erp-feature-1 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-2 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-3 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-4 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-5 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-6 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-7 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-8 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-9 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-10 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-11 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-12 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-13 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-14 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-15 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-16 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-reveal-text-3 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 16px;
      --r-padding: 18px
   }

   .erp-panel-2 {
      --r-gap: 28px
   }

   .erp-block-4 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 24px
   }

   .erp-block-5 {
      --r-gap: 16px
   }

   .erp-heading-3 {
      --r-font-size: 26px
   }

   .erp-paragraph-3 {
      --r-font-size: 14px
   }

   .erp-reveal-text-4 {
      --r-font-size: 14px
   }

   .erp-reveal-text-5 {
      --r-gap: 28px
   }

   .erp-bold-3 {
      --r-font-size: 28px
   }

   .erp-bold-4 {
      --r-font-size: 28px
   }

   .erp-text-2 {
      --r-font-size: 16px
   }

   :is(#app, #appo) .page-root .erp-text-2 {
      min-width: 0;
      line-height: 1.3
   }

   .erp-feature-grid-2 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 8px
   }

   .erp-feature-17 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-18 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-19 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-20 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-21 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-22 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-23 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-24 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-25 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-26 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-27 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-28 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-29 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-30 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-31 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-feature-32 {
      --r-min-height: 52px;
      --r-font-size: 14px
   }

   .erp-reveal-text-6 {
      --r-grid-template-columns: minmax(0, 1fr);
      --r-gap: 16px;
      --r-padding: 18px
   }

   .features-block-1 {
      --r-padding: 48px 20px 0;
      --r-gap: 32px
   }

   .features-heading-1 {
      --r-font-size: 32px;
      --r-line-height: 1.15;
      --r-letter-spacing: -0.02em
   }

   .features-paragraph-1 {
      --r-font-size: 16px
   }

   .features-block-2 {
      --r-height: 3800px
   }

   .features-block-3 {
      --r-top: 92px;
      --r-display: flex;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .features-block-3 {
      flex-direction: column
   }

   .features-tab-1 {
      --r-font-size: 24px;
      --r-line-height: 1.4
   }

   .features-tab-2 {
      --r-font-size: 24px;
      --r-line-height: 1.4
   }

   .features-tab-3 {
      --r-font-size: 24px;
      --r-line-height: 1.4
   }

   .features-tab-4 {
      --r-font-size: 24px;
      --r-line-height: 1.4
   }

   .features-tab-5 {
      --r-font-size: 24px;
      --r-line-height: 1.4
   }

   .features-block-4 {
      --r-padding: 20px;
      --r-min-height: 0px
   }

   :is(#app, #appo) .page-root .features-block-5 {
      grid-column: 1 / -1;
      justify-content: center
   }

   .vina-assistant-block-1 {
      --r-padding: 48px 20px 0
   }

   .vina-card-1 {
      --r-border-radius: 16px;
      --r-background-image: url(../images/home-page-images/vina-green-abstract-background-mobile.webp);
      --r-background-position: center bottom;
      --r-padding: 40px 20px 0
   }

   :is(#app, #appo) .page-root .vina-card-1 {
      min-height: 0px;
      flex-direction: column;
      gap: 32px
   }

   .vina-assistant-block-2 {
      --r-align-items: stretch;
      --r-gap: 20px;
      --r-max-width: none
   }

   :is(#app, #appo) .page-root .vina-text-1 {
      display: flex;
      justify-content: center
   }

   .vina-badge-1 {
      --r-height: 44px;
      --r-font-size: 16px
   }

   :where(.vina-logo-mark-1) {
      width: 18px;
      height: 18px
   }

   .vina-assistant-split-heading-1 {
      --r-align-items: center;
      --r-gap: 14px;
      --r-text-align: center
   }

   .vina-assistant-heading-1 {
      --r-align-items: center;
      --r-gap: 4px
   }

   .vina-assistant-text-1 {
      --r-font-size: 40px
   }

   .vina-assistant-text-2 {
      --r-max-width: 300px;
      --r-font-size: 32px
   }

   .vina-assistant-paragraph-1 {
      --r-max-width: 300px;
      --r-font-size: 16px
   }

   .vina-assistant-block-3 {
      --r-gap: 24px
   }

   .vina-assistant-block-4 {
      --r-justify-content: space-between;
      --r-gap: 8px
   }

   .vina-feature-1 {
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .vina-feature-1 {
      flex-direction: column
   }

   .vina-feature-icon-1 {
      --r-width: 48px;
      --r-height: 48px
   }

   :where(.vina-assistant-icon-1) {
      width: 22px;
      height: 22px
   }

   .vina-assistant-text-3 {
      --r-font-size: 13px;
      --r-text-align: center
   }

   .vina-device-glow-1 {
      --r-height: 48px
   }

   .vina-feature-2 {
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .vina-feature-2 {
      flex-direction: column
   }

   .vina-feature-icon-2 {
      --r-width: 48px;
      --r-height: 48px
   }

   :where(.vina-assistant-icon-2) {
      width: 22px;
      height: 22px
   }

   .vina-assistant-text-4 {
      --r-font-size: 13px;
      --r-text-align: center
   }

   .vina-device-glow-2 {
      --r-height: 48px
   }

   .vina-feature-3 {
      --r-gap: 10px
   }

   :is(#app, #appo) .page-root .vina-feature-3 {
      flex-direction: column
   }

   .vina-feature-icon-3 {
      --r-width: 48px;
      --r-height: 48px
   }

   :where(.vina-assistant-icon-3) {
      width: 22px;
      height: 22px
   }

   .vina-assistant-text-5 {
      --r-font-size: 13px;
      --r-text-align: center
   }

   .vina-assistant-block-5 {
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .vina-assistant-block-5 {
      flex-direction: column
   }

   .vina-button-1 {
      --r-padding: 0 20px
   }

   .vina-button-2 {
      --r-padding: 0 20px
   }

   .vina-device-1 {
      --r-position: relative;
      --r-width: 100%
   }

   :is(#app, #appo) .page-root .vina-device-1 {
      max-width: 310px;
      align-self: center;
      margin: 4px 0 32px
   }

   .integrations-block-1 {
      --r-padding: 48px 20px 0;
      --r-gap: 28px
   }

   .integrations-heading-1 {
      --r-font-size: 32px;
      --r-line-height: 1.15;
      --r-letter-spacing: -0.02em
   }

   .integrations-paragraph-1 {
      --r-font-size: 16px
   }

   .integrations-block-2 {
      --r-display: flex;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .integrations-block-2 {
      flex-direction: column
   }

   :is(#app, #appo) .page-root .integrations-block-3 {
      overflow-x: auto;
      margin: 0 -20px;
      padding: 0 20px;
      scrollbar-width: none
   }

   .integrations-stage-1 {
      --r-height: 314.0px
   }

   .integrations-block-4 {
      --r-width: 350px;
      --r-height: 314.0px;
      --r-margin-left: -175.0px
   }

   .integrations-glow-1 {
      --r-left: 120.6px;
      --r-top: 13.6px;
      --r-width: 108.8px;
      --r-height: 108.8px
   }

   .integrations-ring-1 {
      --r-left: 103.6px;
      --r-top: -3.4px;
      --r-width: 142.8px;
      --r-height: 142.8px
   }

   .integrations-ring-2 {
      --r-left: 103.6px;
      --r-top: -3.4px;
      --r-width: 142.8px;
      --r-height: 142.8px
   }

   .integrations-ring-3 {
      --r-left: 103.6px;
      --r-top: -3.4px;
      --r-width: 142.8px;
      --r-height: 142.8px
   }

   .integrations-hub-1 {
      --r-left: 141.0px;
      --r-top: 34px;
      --r-width: 68px;
      --r-height: 68px
   }

   .integrations-image-1 {
      --r-width: 39.1px;
      --r-height: 39.1px
   }

   .integrations-chip-1 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-2 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px;
      --r-transition-delay: 440ms
   }

   .integrations-chip-3 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px;
      --r-transition-delay: 760ms
   }

   .integrations-chip-4 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-5 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-6 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-7 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-8 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-9 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-10 {
      --r-left: 187px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-11 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-12 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-13 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-14 {
      --r-left: 187px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-15 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-16 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-17 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .integrations-chip-18 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }

   .customers-block-1 {
      --r-height: 1604px
   }

   .customers-stage-1 {
      --r-height: 844px
   }

   .customers-globe-1 {
      --fh: 360.180;
      --bx: -158.40
   }

   .customers-globe-1 {
      --r-top: 220px;
      --r-width: 720px;
      --r-margin-left: -360px
   }

   .customers-globe-spin-1 {
      --r-top: 180.00px;
      --r-width: 720px;
      --r-height: 360.18px;
      --r-background-size: 1036.80px auto;
      --r-background-position: -158.40px 0px
   }

   .customers-globe-spin-2 {
      --r-top: 180.00px;
      --r-width: 720px;
      --r-height: 360.18px;
      --r-background-size: 1036.80px auto;
      --r-background-position: -158.40px 0px
   }

   .customers-headline-1 {
      --r-top: 118px;
      --r-padding: 0 20px
   }

   .customers-heading-1 {
      --r-font-size: 32px;
      --r-letter-spacing: -0.02em
   }

   .customers-headline-2 {
      --r-top: 118px;
      --r-padding: 0 20px
   }

   .customers-heading-2 {
      --r-font-size: 32px;
      --r-letter-spacing: -0.02em
   }

   .customers-block-2 {
      --r-margin-top: 20px
   }

   .customers-button-1 {
      --r-height: 44px
   }

   .customers-logo-rows-1 {
      --r-bottom: 28px;
      --r-gap: 0px
   }

   .customers-logo-track-1 {
      --dur: 60s;
      --r-gap: 10px;
      --r-padding-right: 10px
   }

   .customers-logo-card-1 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-1 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-2 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-2 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-3 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-3 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-4 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-4 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-5 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-5 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-6 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-6 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-7 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-7 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-8 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-8 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-9 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-9 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-10 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-10 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-11 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-11 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-12 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-12 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-13 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-13 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-14 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-14 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-15 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-15 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-16 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-16 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-17 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-17 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-18 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-18 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-19 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-19 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-20 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-20 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-21 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-21 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-22 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-22 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-23 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-23 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-24 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-24 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-25 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-25 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-26 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-26 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-27 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-27 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-28 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-28 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-29 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-29 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-30 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-30 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-31 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-31 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-32 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-32 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-33 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-33 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-34 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-34 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-35 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-35 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-36 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-36 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-37 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-37 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-38 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-38 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-39 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-39 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-40 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-40 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-41 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-41 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-42 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-42 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-43 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-43 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-44 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-44 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-45 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-45 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-46 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-46 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-47 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-47 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-48 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-48 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-track-2 {
      --dur: 70s;
      --r-gap: 10px;
      --r-padding-right: 10px
   }

   .customers-logo-card-49 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-49 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-50 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-50 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-51 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-51 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-52 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-52 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-53 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-53 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-54 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-54 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-55 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-55 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-56 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-56 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-57 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-57 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-58 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-58 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-59 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-59 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-60 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-60 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-61 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-61 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-62 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-62 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-63 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-63 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-64 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-64 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-65 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-65 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-66 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-66 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-67 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-67 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-68 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-68 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-69 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-69 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-70 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-70 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-71 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-71 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-72 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-72 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-73 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-73 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-74 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-74 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-75 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-75 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-76 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-76 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-77 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-77 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-78 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-78 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-79 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-79 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-80 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-80 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-81 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-81 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-82 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-82 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-83 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-83 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-84 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-84 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-85 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-85 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-86 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-86 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-87 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-87 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-88 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-88 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-89 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-89 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-90 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-90 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-91 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-91 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-92 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-92 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-93 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-93 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-94 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-94 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-95 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-95 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .customers-logo-card-96 {
      --r-width: 160px;
      --r-height: 68px
   }

   .customers-image-96 {
      --r-max-width: 112px;
      --r-max-height: 46px
   }

   .press-block-1 {
      --r-padding: 48px 0 0;
      --r-gap: 24px
   }

   .press-block-2 {
      --r-padding: 0 20px
   }

   .press-heading-2 {
      --r-font-size: 32px;
      --r-letter-spacing: -0.02em
   }

   .press-paragraph-1 {
      --r-font-size: 16px
   }

   .press-row-1 {
      --mq: 26
   }

   .press-track-1 {
      --r-gap: 14px;
      --r-padding-right: 14px
   }

   .press-logo-card-1 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-1 {
      --r-padding: 18px 22px
   }

   .press-image-1 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-1 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-2 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-2 {
      --r-padding: 18px 22px
   }

   .press-image-2 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-2 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-3 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-3 {
      --r-padding: 18px 22px
   }

   .press-image-3 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-3 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-4 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-4 {
      --r-padding: 18px 22px
   }

   .press-image-4 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-4 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-5 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-5 {
      --r-padding: 18px 22px
   }

   .press-image-5 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-5 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-6 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-6 {
      --r-padding: 18px 22px
   }

   .press-image-6 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-6 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-7 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-7 {
      --r-padding: 18px 22px
   }

   .press-image-7 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-7 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-8 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-8 {
      --r-padding: 18px 22px
   }

   .press-image-8 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-8 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-9 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-9 {
      --r-padding: 18px 22px
   }

   .press-image-9 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-9 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-10 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-10 {
      --r-padding: 18px 22px
   }

   .press-image-10 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-10 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-11 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-11 {
      --r-padding: 18px 22px
   }

   .press-image-11 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-11 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-12 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-12 {
      --r-padding: 18px 22px
   }

   .press-image-12 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-12 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-13 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-13 {
      --r-padding: 18px 22px
   }

   .press-image-13 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-13 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .press-logo-card-14 {
      --r-width: 210px;
      --r-height: 146px
   }

   .press-card-logo-14 {
      --r-padding: 18px 22px
   }

   .press-image-14 {
      --r-max-width: 150px;
      --r-max-height: 44px
   }

   .press-card-footer-14 {
      --r-padding: 11px 10px 11px 16px;
      --r-font-size: 13px
   }

   .success-stories-block-1 {
      --r-padding: 48px 16px 0
   }

   .stories-panel-shell-1 {
      --r-border-radius: 24px;
      --r-padding: 28px 20px
   }

   .success-stories-block-2 {
      --r-display: flex;
      --r-gap: 28px
   }

   :is(#app, #appo) .page-root .success-stories-block-2 {
      flex-direction: column
   }

   .success-stories-split-heading-1 {
      --r-gap: 14px
   }

   .success-stories-heading-2 {
      --r-font-size: 32px
   }

   .success-stories-paragraph-2 {
      --r-font-size: 16px
   }

   .stories-badge-row-1 {
      --r-padding: 8px;
      --r-border-radius: 20px;
      --r-height: 280px
   }

   .stories-viewport-1 {
      --r-border-radius: 12px
   }

   .stories-play-button-1 {
      --r-width: 60px;
      --r-height: 60px;
      --r-margin: -30px 0 0 -30px
   }

   :where(.success-stories-icon-1) {
      width: 22px;
      height: 22px
   }

   .stories-panel-1 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-1 {
      right: 10px
   }

   .success-stories-text-1 {
      --r-font-size: 16px
   }

   .stories-panel-2 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-2 {
      right: 10px
   }

   .success-stories-text-2 {
      --r-font-size: 16px
   }

   .stories-panel-3 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-3 {
      right: 10px
   }

   .success-stories-text-3 {
      --r-font-size: 16px
   }

   .stories-panel-4 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-4 {
      right: 10px
   }

   .success-stories-text-4 {
      --r-font-size: 16px
   }

   .stories-panel-5 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-5 {
      right: 10px
   }

   .success-stories-text-5 {
      --r-font-size: 16px
   }

   .stories-panel-6 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-6 {
      right: 10px
   }

   .success-stories-text-6 {
      --r-font-size: 16px
   }

   .stories-panel-7 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-7 {
      right: 10px
   }

   .success-stories-text-7 {
      --r-font-size: 16px
   }

   .stories-panel-8 {
      --r-left: 10px;
      --r-bottom: 10px;
      --r-padding: 10px 12px
   }

   :is(#app, #appo) .page-root .stories-panel-8 {
      right: 10px
   }

   .success-stories-text-8 {
      --r-font-size: 16px
   }

   .success-stories-block-3 {
      --r-gap: 20px
   }

   .stories-quote-item-1 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-2) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-3) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-4) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-5) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-6) {
      width: 14px;
      height: 14px
   }

   .stories-quote-9 {
      --r-font-size: 17px
   }

   .stories-quote-item-2 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-7) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-8) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-9) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-10) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-11) {
      width: 14px;
      height: 14px
   }

   .stories-quote-10 {
      --r-font-size: 17px
   }

   .stories-quote-item-3 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-12) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-13) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-14) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-15) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-16) {
      width: 14px;
      height: 14px
   }

   .stories-quote-11 {
      --r-font-size: 17px
   }

   .stories-quote-item-4 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-17) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-18) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-19) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-20) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-21) {
      width: 14px;
      height: 14px
   }

   .stories-quote-12 {
      --r-font-size: 17px
   }

   .stories-quote-item-5 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-22) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-23) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-24) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-25) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-26) {
      width: 14px;
      height: 14px
   }

   .stories-quote-13 {
      --r-font-size: 17px
   }

   .stories-quote-item-6 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-27) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-28) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-29) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-30) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-31) {
      width: 14px;
      height: 14px
   }

   .stories-quote-14 {
      --r-font-size: 17px
   }

   .stories-quote-item-7 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-32) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-33) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-34) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-35) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-36) {
      width: 14px;
      height: 14px
   }

   .stories-quote-15 {
      --r-font-size: 17px
   }

   .stories-quote-item-8 {
      --r-gap: 14px
   }

   :where(.success-stories-icon-37) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-38) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-39) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-40) {
      width: 14px;
      height: 14px
   }

   :where(.success-stories-icon-41) {
      width: 14px;
      height: 14px
   }

   .stories-quote-16 {
      --r-font-size: 17px
   }

   .success-stories-block-4 {
      --r-gap: 16px
   }

   .stories-nav-button-1 {
      --r-width: 40px;
      --r-height: 40px
   }

   .stories-nav-button-2 {
      --r-width: 40px;
      --r-height: 40px
   }

   .stories-counter-2 {
      --r-font-size: 26px
   }

   .success-stories-block-5 {
      --r-margin-top: 24px
   }

   .resources-block-1 {
      --r-padding: 48px 0 0;
      --r-gap: 28px
   }

   :is(#app, #appo) .page-root .resources-block-2 {
      padding: 0 20px
   }

   .resources-heading-2 {
      --r-max-width: 350px;
      --r-font-size: 28px;
      --r-letter-spacing: -0.02em
   }

   .resources-paragraph-1 {
      --r-font-size: 16px
   }

   .resources-scroller-1 {
      --r-gap: 12px;
      --r-padding: 8px 20px 24px;
      --r-margin: -8px 0 -24px;
      --r-scroll-padding: 0 20px
   }

   .resources-card-11 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-13 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-11 {
      --r-font-size: 19px
   }

   .resources-card-description-11 {
      --r-font-size: 14px
   }

   .resources-card-image-11 {
      --r-height: 88px;
      --r-width: 88px;
      --r-margin-right: 14px
   }

   .resources-card-12 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-14 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-12 {
      --r-font-size: 19px
   }

   .resources-card-description-12 {
      --r-font-size: 14px
   }

   .resources-card-image-12 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-12 {
      width: 88px
   }

   .resources-card-13 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-15 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-13 {
      --r-font-size: 19px
   }

   .resources-card-description-13 {
      --r-font-size: 14px
   }

   .resources-card-image-13 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-13 {
      width: 88px
   }

   .resources-card-14 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-16 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-14 {
      --r-font-size: 19px
   }

   .resources-card-description-14 {
      --r-font-size: 14px
   }

   .resources-card-image-14 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-14 {
      width: 88px
   }

   .resources-card-15 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-17 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-15 {
      --r-font-size: 19px
   }

   .resources-card-description-15 {
      --r-font-size: 14px
   }

   .resources-card-image-15 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-15 {
      width: 88px
   }

   .resources-card-16 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-18 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-16 {
      --r-font-size: 19px
   }

   .resources-card-description-16 {
      --r-font-size: 14px
   }

   .resources-card-image-16 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-16 {
      width: 88px
   }

   .resources-card-17 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-19 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-17 {
      --r-font-size: 19px
   }

   .resources-card-description-17 {
      --r-font-size: 14px
   }

   .resources-card-image-17 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-17 {
      width: 88px
   }

   .resources-card-18 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-20 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-18 {
      --r-font-size: 19px
   }

   .resources-card-description-18 {
      --r-font-size: 14px
   }

   .resources-card-image-18 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-18 {
      width: 88px
   }

   .resources-card-19 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-21 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-19 {
      --r-font-size: 19px
   }

   .resources-card-description-19 {
      --r-font-size: 14px
   }

   .resources-card-image-19 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-19 {
      width: 88px
   }

   .resources-card-20 {
      --r-height: 210px;
      --r-width: 300px
   }

   .resources-block-22 {
      --r-padding: 20px 16px 18px
   }

   .resources-card-title-20 {
      --r-font-size: 19px
   }

   .resources-card-description-20 {
      --r-font-size: 14px
   }

   .resources-card-image-20 {
      --r-height: 88px;
      --r-margin-right: 14px
   }

   :is(#app, #appo) .page-root .resources-card-image-20 {
      width: 88px
   }

   .resources-block-23 {
      --r-padding: 0 20px
   }

   .faq-block-1 {
      --r-padding: 48px 20px;
      --r-gap: 24px
   }

   .faq-heading-2 {
      --r-font-size: 30px
   }

   .faq-paragraph-15 {
      --r-font-size: 15px
   }

   .faq-question-14 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-14 {
      --r-font-size: 15px
   }

   .faq-answer-inner-14 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-16 {
      --r-font-size: 14px
   }

   .faq-question-15 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-15 {
      --r-font-size: 15px
   }

   .faq-answer-inner-15 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-17 {
      --r-font-size: 14px
   }

   .faq-question-16 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-16 {
      --r-font-size: 15px
   }

   .faq-answer-inner-16 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-18 {
      --r-font-size: 14px
   }

   .faq-question-17 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-17 {
      --r-font-size: 15px
   }

   .faq-answer-inner-17 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-19 {
      --r-font-size: 14px
   }

   .faq-question-18 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-18 {
      --r-font-size: 15px
   }

   .faq-answer-inner-18 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-20 {
      --r-font-size: 14px
   }

   .faq-question-19 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-19 {
      --r-font-size: 15px
   }

   .faq-answer-inner-19 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-21 {
      --r-font-size: 14px
   }

   .faq-question-20 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-20 {
      --r-font-size: 15px
   }

   .faq-answer-inner-20 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-22 {
      --r-font-size: 14px
   }

   .faq-question-21 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-21 {
      --r-font-size: 15px
   }

   .faq-answer-inner-21 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-23 {
      --r-font-size: 14px
   }

   .faq-question-22 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-22 {
      --r-font-size: 15px
   }

   .faq-answer-inner-22 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-24 {
      --r-font-size: 14px
   }

   .faq-question-23 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-23 {
      --r-font-size: 15px
   }

   .faq-answer-inner-23 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-25 {
      --r-font-size: 14px
   }

   .faq-question-24 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-24 {
      --r-font-size: 15px
   }

   .faq-answer-inner-24 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-26 {
      --r-font-size: 14px
   }

   .faq-question-25 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-25 {
      --r-font-size: 15px
   }

   .faq-answer-inner-25 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-27 {
      --r-font-size: 14px
   }

   .faq-question-26 {
      --r-gap: 12px;
      --r-padding: 16px
   }

   .faq-question-text-26 {
      --r-font-size: 15px
   }

   .faq-answer-inner-26 {
      --r-padding: 0 16px 18px 46px
   }

   .faq-paragraph-28 {
      --r-font-size: 14px
   }

   .faq-help-2 {
      --r-padding: 22px
   }

   .about-vasy-block-1 {
      --r-padding: 8px 20px 0;
      --r-gap: 24px
   }

   .about-vasy-heading-1 {
      --r-font-size: 26px
   }

   .about-vasy-paragraph-1 {
      --r-font-size: 15px
   }

   .about-panel-1 {
      --r-padding: 12px
   }

   .about-vasy-block-2 {
      --r-display: flex;
      --r-gap: 16px
   }

   :is(#app, #appo) .page-root .about-vasy-block-2 {
      flex-direction: column;
      min-width: 0
   }

   .unused-style-913 {
      --r-margin: 0 -12px;
      --r-padding: 2px 12px 6px
   }

   .about-scroller-1 {
      --r-height: 520px;
      --r-padding: 0 20px
   }

   .about-section-1 {
      --r-padding: 22px 0 20px
   }

   .about-vasy-paragraph-2 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-3 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-4 {
      --r-font-size: 14px
   }

   .about-section-2 {
      --r-padding: 20px 0
   }

   .about-vasy-heading-2 {
      --r-font-size: 21px
   }

   .about-vasy-paragraph-5 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-6 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-7 {
      --r-font-size: 14px
   }

   .about-section-3 {
      --r-padding: 20px 0
   }

   .about-vasy-h4-1 {
      --r-font-size: 17px
   }

   .about-vasy-paragraph-8 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-9 {
      --r-font-size: 14px
   }

   .about-section-4 {
      --r-padding: 20px 0
   }

   .about-vasy-h4-2 {
      --r-font-size: 17px
   }

   .about-vasy-paragraph-10 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-11 {
      --r-font-size: 14px
   }

   .about-section-5 {
      --r-padding: 20px 0
   }

   .about-vasy-h4-3 {
      --r-font-size: 17px
   }

   .about-vasy-paragraph-12 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-13 {
      --r-font-size: 14px
   }

   .about-section-6 {
      --r-padding: 20px 0
   }

   .about-vasy-h4-4 {
      --r-font-size: 17px
   }

   .about-vasy-paragraph-14 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-15 {
      --r-font-size: 14px
   }

   .about-section-7 {
      --r-padding: 20px 0
   }

   .about-vasy-h4-5 {
      --r-font-size: 17px
   }

   .about-vasy-paragraph-16 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-17 {
      --r-font-size: 14px
   }

   .about-section-8 {
      --r-padding: 20px 0
   }

   .about-vasy-h4-6 {
      --r-font-size: 17px
   }

   .about-vasy-paragraph-18 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-19 {
      --r-font-size: 14px
   }

   .about-section-9 {
      --r-padding: 20px 0
   }

   .about-vasy-heading-3 {
      --r-font-size: 21px
   }

   .about-vasy-paragraph-20 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-21 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-1 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-2 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-3 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-4 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-5 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-6 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-22 {
      --r-font-size: 14px
   }

   .about-section-10 {
      --r-padding: 20px 0
   }

   .about-vasy-heading-4 {
      --r-font-size: 21px
   }

   .about-vasy-paragraph-23 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-24 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-7 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-8 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-9 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-10 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-11 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-12 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-13 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-25 {
      --r-font-size: 14px
   }

   .about-section-11 {
      --r-padding: 20px 0
   }

   .about-vasy-heading-5 {
      --r-font-size: 21px
   }

   .about-vasy-paragraph-26 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-27 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-14 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-15 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-16 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-17 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-18 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-19 {
      --r-font-size: 14px
   }

   .about-section-12 {
      --r-padding: 20px 0
   }

   .about-vasy-heading-6 {
      --r-font-size: 21px
   }

   .about-vasy-paragraph-28 {
      --r-font-size: 14px
   }

   .about-vasy-paragraph-29 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-20 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-21 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-22 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-23 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-24 {
      --r-font-size: 14px
   }

   .about-vasy-list-item-25 {
      --r-font-size: 14px
   }

   .book-demo-block-1 {
      --r-padding: 48px 20px 0
   }

   .book-demo-panel-1 {
      --r-border-radius: 20px;
      --r-padding: 12px
   }

   .book-demo-block-2 {
      --r-display: flex;
      --r-gap: 20px
   }

   :is(#app, #appo) .page-root .book-demo-block-2 {
      flex-direction: column
   }

   .book-demo-left-1 {
      --r-align-items: center;
      --r-padding: 36px 8px 8px
   }

   .book-demo-pill-1 {
      --r-height: 44px;
      --r-padding: 0 14px;
      --r-gap: 10px
   }

   :where(.book-demo-icon-1) {
      width: 13px;
      height: 13px
   }

   .book-demo-bold-1 {
      --r-font-size: 15px
   }

   .book-demo-text-1 {
      --r-font-size: 12px
   }

   .book-demo-divider-1 {
      --r-margin: 11px 0
   }

   :where(.book-demo-icon-2) {
      width: 13px;
      height: 13px
   }

   .book-demo-bold-2 {
      --r-font-size: 15px
   }

   .book-demo-text-2 {
      --r-font-size: 12px
   }

   .book-demo-split-heading-1 {
      --r-align-items: center;
      --r-text-align: center
   }

   .book-demo-heading-1 {
      --r-max-width: 310px;
      --r-font-size: 28px;
      --r-letter-spacing: -0.02em
   }

   .book-demo-paragraph-1 {
      --r-max-width: 310px;
      --r-font-size: 16px
   }

   .book-demo-stat-1 {
      --r-flex-direction: column
   }

   :is(#app, #appo) .page-root .book-demo-stat-1 {
      width: 100%
   }

   .book-demo-ring-1 {
      --r-width: 100%;
      --r-height: 100%
   }

   .book-demo-ring-2 {
      --r-width: 100%;
      --r-height: 100%
   }

   .book-demo-ring-3 {
      --r-width: 100%;
      --r-height: 100%
   }

   .book-demo-ring-4 {
      --r-width: 100%;
      --r-height: 100%
   }

   .book-demo-iso-badge-1 {
      --r-width: 88%;
      --iso: rotateX(16deg) rotateY(-10deg) rotateZ(3deg);
      --iso-h: rotateX(10deg) rotateY(-6deg) rotateZ(2deg)
   }

   .book-demo-card-1 {
      --r-padding: 18px;
      --r-gap: 14px
   }

   .book-demo-image-1 {
      --r-width: 36px;
      --r-height: 36px
   }

   .book-demo-block-3 {
      --r-font-size: 17px
   }

   .book-demo-block-4 {
      --r-font-size: 12px
   }

   .book-demo-day-1 {
      --r-height: 56px
   }

   .book-demo-day-2 {
      --r-height: 56px
   }

   .book-demo-day-3 {
      --r-height: 56px
   }

   .book-demo-day-4 {
      --r-height: 56px
   }

   .book-demo-day-5 {
      --r-height: 56px
   }

   .book-demo-time-slot-1 {
      --r-height: 42px
   }

   .book-demo-time-slot-2 {
      --r-height: 42px
   }

   .book-demo-time-slot-3 {
      --r-height: 42px
   }

   .book-demo-time-slot-4 {
      --r-height: 42px
   }

   .book-demo-confirm-button-1 {
      --r-height: 42px
   }

   .explore-vasy-block-1 {
      --r-padding: 48px 20px 0
   }

   .explore-panel-1 {
      --r-padding: 18px;
      --r-gap: 18px
   }

   :is(#app, #appo) .page-root .explore-vasy-split-heading-1 {
      flex-direction: column
   }

   .explore-vasy-heading-1 {
      --r-font-size: 26px
   }

   .explore-vasy-paragraph-1 {
      --r-font-size: 14px
   }

   .unused-style-1045 {
      --r-margin-top: 48px
   }

   .footer-block-1 {
      --r-padding: 44px 20px 20px
   }

   .footer-card-1 {
      --r-border-radius: 22px;
      --r-gap: 28px
   }

   .footer-back-to-top-1 {
      --r-top: -66px
   }

   .footer-block-2 {
      --r-grid-template-columns: 1fr 1fr;
      --r-gap: 28px 16px
   }

   .footer-block-3 {
      --r-max-width: 100%
   }

   :is(#app, #appo) .page-root .footer-block-3 {
      grid-column: 1 / -1
   }

   .footer-image-1 {
      --r-height: 34px
   }

   .footer-block-4 {
      --r-box-shadow: inset 0 1px 0 #D9DEE5
   }

   :is(#app, #appo) .page-root .footer-block-4 {
      grid-column: 1 / -1;
      padding-top: 24px
   }

   .footer-block-5 {
      --r-flex-direction: row
   }

   :is(#app, #appo) .page-root .footer-block-5 {
      flex-wrap: wrap
   }

   .footer-contact-strip-1 {
      --r-flex-direction: column;
      --r-align-items: stretch;
      --r-gap: 16px;
      --r-padding: 18px 16px
   }

   .footer-block-6 {
      --r-flex-direction: column;
      --r-gap: 12px
   }

   :is(#app, #appo) .page-root .footer-text-1 {
      height: 1px
   }

   .footer-block-7 {
      --r-justify-content: flex-start;
      --r-gap: 16px 20px
   }

   .footer-block-8 {
      --r-flex-direction: column
   }

   .footer-statement-wrapper-1 {
      --r-padding: 28px 0 4px
   }

   .footer-statement-1 {
      --r-font-size: 46px
   }

   .hero-scroll-hint-1 {
      --r-bottom: 20px
   }

   .video-modal-box-1 {
      --r-width: calc(100% - 32px);
      --r-padding: 10px
   }

   .text-1 {
      --r-font-size: 14px
   }

   .page-bottom-blur-1 {
      --r-height: 96px
   }

   .unused-style-1065 {
      --r-width: 350px;
      --r-height: 60px;
      --r-padding: 0 8px 0 16px;
      --r-gap: 8px
   }

   :is(#app, #appo) .page-root .header-menu-item-rise-1 {
      flex-grow: 1
   }

   .header-image-1 {
      --r-height: 32px
   }

   .header-menu-item-rise-2 {
      --r-transition-delay: 120ms
   }

   .header-menu-item-rise-3 {
      --r-transition-delay: 160ms
   }

   .header-mobile-menu-panel-1 {
      --r-max-height: 744px;
      --r-padding: 8px 16px 16px
   }

   .header-block-2 {
      --r-display: flex;
      --r-gap: 0px;
      --r-padding: 0 0 16px
   }

   :is(#app, #appo) .page-root .header-block-2 {
      flex-direction: column
   }

   .header-block-3 {
      --r-padding: 0 0 16px
   }

   .header-submenu-fade-1 {
      --r-padding-bottom: 8px
   }

   .header-block-4 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-5 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-6 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-7 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-8 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-9 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-10 {
      --r-padding: 0 0 8px 8px
   }

   .header-block-11 {
      --r-display: flex;
      --r-gap: 0px;
      --r-padding: 0 0 16px
   }

   :is(#app, #appo) .page-root .header-block-11 {
      flex-direction: column
   }

   .header-block-12 {
      --r-display: flex;
      --r-gap: 0px;
      --r-padding: 0 0 16px
   }

   :is(#app, #appo) .page-root .header-block-12 {
      flex-direction: column
   }

   .header-block-13 {
      --r-display: flex;
      --r-gap: 0px;
      --r-padding: 0 0 16px
   }

   :is(#app, #appo) .page-root .header-block-13 {
      flex-direction: column
   }
}

/* ---- Smoothness layer ------------------------------------------------------
   Layers that are moved every frame by scroll or by script are promoted to their
   own compositor layer, so they animate with transform/opacity only and never
   repaint the page behind them. */
.page-root [data-js~="hero-tilt"],
.page-root [data-js~="hero-wake"],
.page-root [data-js~="hero-copy"],
.page-root .hero-fly-card-mover,
.page-root [data-js~="sol-strip"],
.page-root [data-js~="features-fill"],
.page-root [data-js~="vina-dev"],
.page-root [data-js~="customers-b1"],
.page-root [data-js~="customers-b2"],
.page-root [data-js~="customers-globe"],
.page-root [data-js~="stories-panel"],
.page-root .hero-demo-cursor,
.page-root .book-demo-cursor,
.page-root .integrations-progress-fill,
.page-root .stories-progress-fill,
.page-root [data-mq] > *,
.page-root [data-js~="marquee"] > * {
   will-change: transform, opacity;
   backface-visibility: hidden
}

.page-root .page-scroller,
.page-root [data-js~="page-scroller"] {
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch
}

@media (prefers-reduced-motion: reduce) {
   .page-root * {
      scroll-behavior: auto !important
   }
}


/* ---- Navigation hover card: fixed 500px (desktop + laptop), every tab ------------
   Header band on top, banner pinned to the bottom of the card, and only the middle
   list of cards scrolls. Applies to Solutions, Industries (Retail + Manufacturing),
   Features, Resources and Company. */
.page-root .dropdown:has(.menu-panel.is-active) {
   height: 500px;
   overflow: hidden
}

.page-root .dropdown .menu-panel.is-active {
   height: 100%
}

.page-root .dropdown .section-band {
   flex-shrink: 0
}

.page-root .dropdown .menu-panel-items {
   flex: 1 1 auto;
   min-height: 0;
   align-content: start;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: #BFE0F0 transparent;
   padding: 2px 6px 2px 2px;
   margin: -2px -6px -2px -2px
}

.page-root .dropdown .menu-panel-items::-webkit-scrollbar {
   width: 6px
}

.page-root .dropdown .menu-panel-items::-webkit-scrollbar-thumb {
   background: #BFE0F0;
   border-radius: 999px
}

.page-root .dropdown .menu-banner {
   flex-shrink: 0;
   margin-top: auto
}

/* Industries: category list on the left, panes on the right */
.page-root .dropdown .menu-pane-stack {
   height: 100%;
   min-height: 0
}

.page-root .dropdown .menu-pane.is-active {
   height: 100%;
   min-height: 0 !important
}

.page-root .dropdown .menu-panel[data-menu="industries"] > div:first-child {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: #BFE0F0 transparent
}

/* ---- Navigation hover reliability ------------------------------------------------
   Hidden menu panels (and the whole dropdown while it is closed) must never receive
   the pointer. Previously an invisible Industries pane kept pointer-events:auto and sat
   on top of the cards of the other tabs, so only the first column of cards reacted. */
.page-root .menu-panel:not(.is-active),
.page-root .menu-panel:not(.is-active) *,
.page-root .dropdown-wrapper:not(.is-open),
.page-root .dropdown-wrapper:not(.is-open) * {
   pointer-events: none !important
}

.page-root .menu-panel:not(.is-active) {
   visibility: hidden;
   transition: opacity 180ms var(--e), visibility 0s linear 180ms
}

.page-root .menu-panel.is-active {
   visibility: visible
}


/* ---- Hero: client name strip under the three trust points -------------------------
   Names come from the client wall on the live Vasy homepage, set as <h3> in Vasy black.
   The strip uses the col-10 width (10/12 = 83.3333% of the hero content), centered, and
   scrolls on its own (shared marquee script: pauses on hover, can be dragged). */
.page-root .hero-logo-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   align-self: stretch;
   gap: 0;
   width: 100%
}

.page-root .hero-logo-strip {
   margin-top: 12px;
   flex: 0 0 83.333333%;
   width: 83.333333%;
   max-width: 83.333333%;
   box-sizing: border-box;
   padding: 4px 0;
   opacity: 0;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}

.page-root.is-ready .hero-logo-strip {
   animation: inUp 520ms var(--e) 640ms both
}

.page-root .hero-logo-track {
   display: flex;
   align-items: center;
   width: max-content
}

.page-root h3.hero-logo-name {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   margin: 0;
   padding: 0 34px;
   line-height: 0
}

.page-root h3.hero-logo-name img {
   display: block;
   max-width: none;
   user-select: none;
   -webkit-user-drag: none
}

.page-root .hero-logo-divider {
   flex-shrink: 0;
   width: 2px;
   border-radius: 1px;
   height: 28px;
   background: #CBD3DC
}

@media (max-width: 599.98px) {
   .page-root .hero-logo-group {
      display: block
   }

   .page-root .hero-logo-strip {
      margin: 12px auto 0
   }
}


/* ---- Hero dashboard: Business Health Index + Target vs Actual --------------------
   Replaces the Live Activity and Recent Orders cards. Same layout on desktop, laptop and
   tablet (the tablet dashboard is this layout scaled down); the phone shows the two cards
   stacked. */
.page-root .hero-dashboard-body {
   flex: 1 1 auto;
   min-height: 0;
   box-sizing: border-box
}

/* desktop, laptop and tablet: KPI tiles (2 x 2) and the sales chart on the left, the BHI and
   Target vs Actual cards stacked in a column on the right, starting at the top */
@media (min-width: 600px) {
   .page-root .hero-dashboard-body {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 300px;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 16px !important
   }

   .page-root .hero-dashboard-body > :nth-child(1) {
      grid-column: 1;
      grid-row: 1;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }

   .page-root .hero-dashboard-grid {
      display: contents !important
   }

   .page-root .hero-dashboard-grid > .card:first-child {
      grid-column: 1;
      grid-row: 2;
      min-height: 0
   }

   .page-root .hero-dashboard-side {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: start
   }
}

.page-root .hero-dashboard-grid > .card {
   min-height: 0
}

.page-root .hero-dashboard-side {
   display: flex;
   flex-direction: column;
   gap: 16px;
   min-width: 0;
   min-height: 0
}

.page-root .hero-dashboard .bhi-card,
.page-root .hero-dashboard .target-card {
   display: flex;
   flex-direction: column;
   gap: 10px;
   box-sizing: border-box;
   padding: 18px;
   border-radius: 12px;
   background: #FFFFFF;
   box-shadow: inset 0 0 0 1px #E4E8ED
}

.page-root .bhi-gauge {
   position: relative;
   margin-top: 4px
}

.page-root .bhi-gauge svg {
   display: block;
   width: 100%;
   height: auto
}

.page-root .bhi-track {
   fill: none;
   stroke: #E3E8EF;
   stroke-width: 40
}

.page-root .bhi-arc {
   fill: none;
   stroke: url(#bhi-arc-gradient);
   stroke-width: 40
}

.page-root .bhi-readout {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 2px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center
}

.page-root .bhi-percent {
   font-size: 26px;
   line-height: 30px;
   font-weight: 600;
   letter-spacing: -0.01em;
   color: #0F6D99;
   font-variant-numeric: tabular-nums
}

.page-root .bhi-score {
   font-size: 15px;
   line-height: 20px;
   font-weight: 600;
   color: #5B6472;
   font-variant-numeric: tabular-nums
}

.page-root .bhi-status {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-size: 15px;
   line-height: 20px;
   color: #1E8E5A
}

.page-root .bhi-status b {
   font-weight: 700
}

.page-root .bhi-asof {
   text-align: center;
   font-size: 11px;
   line-height: 15px;
   color: #5B6472
}

.page-root .bhi-refresh {
   align-self: center;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 34px;
   padding: 0 16px;
   margin-top: 4px;
   border: 1px solid #BFE6F7;
   border-radius: 8px;
   background: #F5FBFE;
   color: #0F6D99;
   font-size: 13px;
   font-weight: 600
}

.page-root .target-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px
}

.page-root .target-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #5B6472
}

.page-root .target-icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 8px
}

.page-root .target-refresh {
   width: 20px
}

.page-root .target-filter {
   border: 1px solid #D9DEE5;
   background: #FFFFFF
}

.page-root .target-empty {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 0 4px;
   font-size: 13px;
   line-height: 18px;
   color: #5B6472
}

/* phone: the two new cards take the place of the KPI tiles and the sales chart */
@media (max-width: 599.98px) {
   .page-root .hero-dashboard-main .hero-dashboard .topbar + div > div:nth-child(1) {
      display: none !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .hero-dashboard-grid > .card:first-child {
      display: none !important
   }

   .page-root .hero-dashboard-main .hero-dashboard .hero-dashboard-side {
      gap: 10px
   }

   .page-root .hero-dashboard-main .hero-dashboard .bhi-card,
   .page-root .hero-dashboard-main .hero-dashboard .target-card {
      padding: 12px;
      gap: 8px
   }

   .page-root .hero-dashboard-main .hero-dashboard .bhi-percent {
      font-size: 24px;
      line-height: 28px
   }

   .page-root .hero-dashboard-main .hero-dashboard .bhi-score,
   .page-root .hero-dashboard-main .hero-dashboard .bhi-status {
      font-size: 14px
   }

   .page-root .hero-dashboard-main .hero-dashboard .bhi-asof {
      font-size: 10px
   }

   .page-root .hero-dashboard-main .hero-dashboard .bhi-refresh {
      height: 30px;
      font-size: 12px
   }

   .page-root .hero-dashboard-main .hero-dashboard .target-empty {
      padding: 6px 0 0
   }
}


/* ---- Solutions: no pinned scroll ---------------------------------------------------
   The section is now a normal block. The image column glides to the next solution when the
   tab changes (click or automatic). */
.page-root .solutions-block-2 {
   height: auto !important
}

.page-root .solutions-block-3 {
   position: relative !important;
   top: auto !important
}

.page-root [data-js~="sol-strip"] {
   transition: transform 700ms var(--e)
}


/* ---- Features: no pinned scroll ------------------------------------------------------ */
.page-root .features-block-2 {
   height: auto !important
}

.page-root .features-block-3 {
   position: relative !important;
   top: auto !important
}


/* ---- Target vs Actual: target 10 Lakhs, achieved 8.5 Lakhs ------------------------- */
.page-root .target-body {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding-top: 6px
}

.page-root .target-row {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.page-root .target-row-head {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   line-height: 16px;
   color: #5B6472
}

.page-root .target-dot {
   flex-shrink: 0;
   width: 8px;
   height: 8px;
   border-radius: 99px
}

.page-root .target-dot-target {
   background: #BFE6F7
}

.page-root .target-dot-achieved {
   background: #22A7E0
}

.page-root .target-value {
   margin-left: auto;
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
   color: #2E2E2E;
   font-variant-numeric: tabular-nums
}

.page-root .target-bar {
   height: 8px;
   border-radius: 99px;
   background: #EEF2F6;
   overflow: hidden
}

.page-root .target-bar-fill {
   display: block;
   height: 100%;
   border-radius: 99px
}

.page-root .target-bar-fill-target {
   background: #BFE6F7
}

.page-root .target-bar-fill-achieved {
   background: linear-gradient(90deg, #22A7E0, #0F6D99)
}

.page-root .target-foot {
   font-size: 12px;
   line-height: 16px;
   color: #5B6472
}

.page-root .target-foot b {
   font-size: 13px;
   font-weight: 600;
   color: #0F6D99;
   font-variant-numeric: tabular-nums
}

@media (max-width: 599.98px) {
   .page-root .hero-dashboard-main .hero-dashboard .target-body {
      gap: 9px;
      padding-top: 2px
   }

   .page-root .hero-dashboard-main .hero-dashboard .target-value {
      font-size: 13px
   }
}

.page-root .target-percent {
   padding: 1px 7px;
   border-radius: 99px;
   background: #E9F6FC;
   font-size: 11px;
   line-height: 16px;
   font-weight: 600;
   color: #0F6D99;
   font-variant-numeric: tabular-nums
}

.page-root .target-body {
   gap: 10px !important
}


/* ---- Solutions on phones: hide the sub text of six slides and close the gap ----------------
   All seven slides show only the tag, the heading and the "View more" link on phones. Only the active slide takes up room
   in the text row, so the image never floats below an empty gap. Tablet and desktop unchanged. */
@media (max-width: 599.98px) {
   .page-root .solution-slide.solution-slide-hide-subtext-mobile > p.solution-slide-text {
      display: none !important
   }

   .page-root .solutions-block-4 > .solution-slide:not(.is-active) {
      position: absolute;
      top: 0;
      left: 0;
      right: 0
   }
}


/* ---- Trust & credibility strip (below the hero) -------------------------------------
   Six indicators in one row on desktop, a 2 x 3 grid on phones. White surface, Vasy blue
   (#0081B6) line icons and hover accents, hairline dividers. Items fade up in turn when the
   strip scrolls into view (the shared reveal observer adds .is-visible). */
.page-root .trust-section {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   align-self: center;
   flex: 0 0 auto;
   width: 83.333333%;
   padding: 22px 0 0
}

.page-root .trust-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   margin: 0;
   padding: 14px 6px;
   list-style: none;
   box-sizing: border-box;
   border: 1px solid #E6ECF1;
   border-radius: 18px;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 36px rgba(0, 129, 182, .07)
}

.page-root .trust-item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
   padding: 4px 10px;
   text-align: center;
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 600ms var(--e), transform 600ms var(--e);
   transition-delay: calc(var(--i) * 80ms)
}

.page-root .trust-item + .trust-item::before {
   content: "";
   position: absolute;
   left: 0;
   top: 14%;
   bottom: 14%;
   width: 1px;
   background: #E6ECF1
}

.page-root .trust-grid.is-visible .trust-item {
   opacity: 1;
   transform: none
}

.page-root .trust-grid.is-visible .trust-item:hover {
   transform: translateY(-3px);
   transition-delay: 0ms;
   transition-duration: 220ms
}

.page-root .trust-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   margin-bottom: 4px;
   border-radius: 12px;
   background: #EEF7FB;
   color: #0081B6;
   transition: background-color 220ms var(--e), color 220ms var(--e), transform 220ms var(--e)
}

.page-root .trust-item:hover .trust-icon {
   background: #0081B6;
   color: #FFFFFF;
   transform: scale(1.06)
}

.page-root .trust-value {
   font-size: 22px;
   font-weight: 600;
   line-height: 28px;
   letter-spacing: -0.02em;
   color: #2E2E2E;
   white-space: nowrap
}

.page-root .trust-unit {
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0;
   color: #0081B6
}

.page-root .trust-label {
   font-size: 13px;
   line-height: 18px;
   color: #5B6472
}

.page-root .trust-item::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 22px;
   height: 2px;
   margin-left: -11px;
   border-radius: 2px;
   background: #0081B6;
   opacity: 0;
   transform: scaleX(.3);
   transition: opacity 220ms var(--e), transform 220ms var(--e)
}

.page-root .trust-item:hover::after {
   opacity: 1;
   transform: none
}

/* tablet and phone: still ONE horizontal row, swipe / drag sideways to see the rest */
@media (max-width: 1023.98px) {
   .page-root .trust-grid {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      cursor: grab;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%)
   }

   .page-root .trust-grid::-webkit-scrollbar {
      display: none
   }

   .page-root .trust-grid.is-dragging {
      cursor: grabbing;
      scroll-snap-type: none
   }

   .page-root .trust-item {
      flex: 0 0 auto;
      min-width: 168px;
      scroll-snap-align: start
   }
}

@media (max-width: 599.98px) {
   .page-root .trust-section {
      width: 100%;
      padding: 20px 0 0
   }

   .page-root .trust-grid {
      padding: 12px 4px;
      border-radius: 16px
   }

   .page-root .trust-item {
      min-width: 148px;
      padding: 8px 8px 10px
   }

   .page-root .trust-icon {
      width: 34px;
      height: 34px
   }

   .page-root .trust-value {
      font-size: 19px;
      line-height: 24px
   }

   .page-root .trust-label {
      font-size: 12px;
      line-height: 16px
   }
}

@media (prefers-reduced-motion: reduce) {
   .page-root .trust-item {
      opacity: 1;
      transform: none;
      transition: none
   }
}


/* long value: "VAPT · HIPAA · GDPR" sits on one line at a slightly smaller size */
.page-root .trust-value-compact {
   font-size: 17px;
   letter-spacing: -0.01em
}

@media (max-width: 599.98px) {
   .page-root .trust-item {
      min-width: 162px
   }

   .page-root .trust-value-compact {
      font-size: 15px
   }
}

/* keep every label on the same baseline row (the small "/5" must not make its line taller) */
.page-root .trust-value {
   height: 28px
}

.page-root .trust-unit {
   line-height: 0
}

/* ---- Integration partners: slot positions for the 20 partners ----------------------------- */
@media (min-width: 1600px) {
   .page-root .integrations-chip-1 {
      --r-left: 204px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-2 {
      --r-left: 34px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-3 {
      --r-left: 204px;
      --r-top: 436px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-4 {
      --r-left: 704px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-5 {
      --r-left: 874px;
      --r-top: 344px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-6 {
      --r-left: 704px;
      --r-top: 436px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-7 {
      --r-left: 204px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-8 {
      --r-left: 34px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-9 {
      --r-left: 204px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-10 {
      --r-left: 34px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-11 {
      --r-left: 704px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-12 {
      --r-left: 874px;
      --r-top: 68px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-13 {
      --r-left: 704px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-14 {
      --r-left: 874px;
      --r-top: 160px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-15 {
      --r-left: 204px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-16 {
      --r-left: 34px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-17 {
      --r-left: 704px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-18 {
      --r-left: 874px;
      --r-top: 252px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-19 {
      --r-left: 34px;
      --r-top: 436px;
      --r-width: 132px;
      --r-height: 56px
   }
   .page-root .integrations-chip-20 {
      --r-left: 874px;
      --r-top: 436px;
      --r-width: 132px;
      --r-height: 56px
   }
}
@media (min-width: 1024px) and (max-width: 1599.98px) {
   .page-root .integrations-chip-1 {
      --r-left: 193px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-2 {
      --r-left: 39px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-3 {
      --r-left: 193px;
      --r-top: 419px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-4 {
      --r-left: 645px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-5 {
      --r-left: 799px;
      --r-top: 331px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-6 {
      --r-left: 645px;
      --r-top: 419px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-7 {
      --r-left: 193px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-8 {
      --r-left: 39px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-9 {
      --r-left: 193px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-10 {
      --r-left: 39px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-11 {
      --r-left: 645px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-12 {
      --r-left: 799px;
      --r-top: 67px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-13 {
      --r-left: 645px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-14 {
      --r-left: 799px;
      --r-top: 155px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-15 {
      --r-left: 193px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-16 {
      --r-left: 39px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-17 {
      --r-left: 645px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-18 {
      --r-left: 799px;
      --r-top: 243px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-19 {
      --r-left: 39px;
      --r-top: 419px;
      --r-width: 124px;
      --r-height: 54px
   }
   .page-root .integrations-chip-20 {
      --r-left: 799px;
      --r-top: 419px;
      --r-width: 124px;
      --r-height: 54px
   }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
   .page-root .integrations-chip-1 {
      --r-left: 169px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-2 {
      --r-left: 41px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-3 {
      --r-left: 169px;
      --r-top: 341px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-4 {
      --r-left: 513px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-5 {
      --r-left: 641px;
      --r-top: 269px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-6 {
      --r-left: 513px;
      --r-top: 341px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-7 {
      --r-left: 169px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-8 {
      --r-left: 41px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-9 {
      --r-left: 169px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-10 {
      --r-left: 41px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-11 {
      --r-left: 513px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-12 {
      --r-left: 641px;
      --r-top: 53px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-13 {
      --r-left: 513px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-14 {
      --r-left: 641px;
      --r-top: 125px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-15 {
      --r-left: 169px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-16 {
      --r-left: 41px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-17 {
      --r-left: 513px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-18 {
      --r-left: 641px;
      --r-top: 197px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-19 {
      --r-left: 41px;
      --r-top: 341px;
      --r-width: 104px;
      --r-height: 46px
   }
   .page-root .integrations-chip-20 {
      --r-left: 641px;
      --r-top: 341px;
      --r-width: 104px;
      --r-height: 46px
   }
}
@media (max-width: 599.98px) {
   .page-root .integrations-chip-1 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-2 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-3 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-4 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-5 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-6 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-7 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-8 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-9 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-10 {
      --r-left: 187px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-11 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-12 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-13 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-14 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-15 {
      --r-left: 12px;
      --r-top: 326px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-16 {
      --r-left: 187px;
      --r-top: 326px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-17 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-18 {
      --r-left: 12px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-19 {
      --r-left: 12px;
      --r-top: 246px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-chip-20 {
      --r-left: 187px;
      --r-top: 166px;
      --r-width: 151px;
      --r-height: 60px
   }
   .page-root .integrations-stage-1 {
      --r-height: 394px
   }

   .page-root .integrations-block-4 {
      --r-height: 394px
   }
}


/* ---- Trust strip, compact version -----------------------------------------------------------
   Icon on the left, figure + label on the right: the strip is roughly half as tall as before, so it
   no longer pushes the hero dashboard down. Same colours, dividers, fade-in and hover effects. */
.page-root .trust-section {
   padding-top: 14px
}

.page-root .trust-grid {
   padding: 8px 4px;
   border-radius: 14px
}

.page-root .trust-item {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto auto;
   align-items: center;
   justify-content: center;
   justify-items: start;
   column-gap: 10px;
   row-gap: 0;
   padding: 6px 12px;
   text-align: left
}

.page-root .trust-icon {
   grid-row: 1 / span 2;
   width: 32px;
   height: 32px;
   margin: 0;
   border-radius: 10px
}

.page-root .trust-icon svg {
   width: 19px;
   height: 19px
}

.page-root .trust-value {
   height: auto;
   font-size: 18px;
   line-height: 22px
}

.page-root .trust-unit {
   font-size: 12px
}

.page-root .trust-label {
   font-size: 12px;
   line-height: 15px
}

.page-root .trust-value-compact {
   font-size: 14.5px;
   line-height: 22px
}

.page-root .trust-item::after {
   left: 52px;
   margin-left: 0
}

@media (max-width: 1023.98px) {
   .page-root .trust-item {
      min-width: 196px
   }
}

@media (max-width: 599.98px) {
   .page-root .trust-section {
      padding-top: 12px
   }

   .page-root .trust-grid {
      padding: 6px 2px;
      border-radius: 12px
   }

   .page-root .trust-item {
      min-width: 188px;
      padding: 6px 10px
   }

   .page-root .trust-icon {
      width: 30px;
      height: 30px
   }

   .page-root .trust-value {
      font-size: 17px;
      line-height: 21px
   }

   .page-root .trust-value-compact {
      font-size: 13.5px
   }
}





/* =====================================================================================
   Hero demo · Vasy POS billing journey (plays after the vina scene)
   Desktop / laptop / tablet use the full POS screen (fixed 1200 x 760 design, scaled to fit);
   phones get a dedicated mobile POS (300 x 600). Everything is prefixed pos-.
   ===================================================================================== */
.page-root .hero-demo-cursor {
   z-index: 60
}

.page-root .pos-pane {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 30;
   overflow: hidden;
   background: #F4F6F9;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: scale(1.045) translate3d(0, 14px, 0);
   transform-origin: 50% 40%;
   transition: opacity 560ms var(--e), transform 760ms var(--e), visibility 0s linear 760ms
}

.page-root .pos-pane.is-open {
   opacity: 1;
   visibility: visible;
   transform: none;
   transition: opacity 560ms var(--e), transform 760ms var(--e), visibility 0s
}

.page-root .pos-pane * {
   box-sizing: border-box
}

.page-root .pos-desktop,
.page-root .pos-mobile {
   position: absolute;
   left: 0;
   top: 0;
   overflow: hidden;
   color: #1F2933;
   font-family: inherit;
   background: #F4F6F9;
   user-select: none
}

.page-root .pos-desktop {
   width: 1200px;
   height: 640px;
   transform-origin: 0 0
}

.page-root .pos-mobile {
   width: 100%;
   height: 100%
}

.page-root .pos-pane b {
   font-weight: 600
}

.page-root .pos-pane small {
   font-size: 9px;
   color: #6B7785
}

.page-root .pos-pane i,
.page-root .pos-pane em {
   font-style: normal
}

.page-root .pos-pane .is-placeholder {
   color: #7C8794
}

/* ---- top bar -------------------------------------------------------------------- */
.page-root .pos-topbar {
   display: flex;
   align-items: center;
   gap: 12px;
   height: 42px;
   padding: 0 14px;
   background: #FFFFFF;
   font-size: 11.5px;
   font-weight: 500;
   box-shadow: 0 1px 0 #E6EAF0
}

.page-root .pos-hamburger {
   display: inline-flex;
   color: #232B36
}

.page-root .pos-logo {
   display: block;
   height: 24px;
   width: auto;
   margin: 0 8px 0 2px
}

.page-root .pos-radio {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap
}

.page-root .pos-radio i {
   width: 14px;
   height: 14px;
   border: 1.5px solid #232B36;
   border-radius: 99px
}

.page-root .pos-radio.is-on i {
   border: 4px solid #1287E0;
   background: #fff
}

.page-root .pos-salesman {
   margin-left: 6px
}

.page-root .pos-select {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 28px;
   padding: 0 10px;
   border: 1px solid #D5DBE3;
   border-radius: 7px;
   background: #fff;
   font-weight: 500
}

.page-root .pos-switch {
   position: relative;
   display: inline-block;
   width: 34px;
   height: 18px;
   border-radius: 99px;
   background: #C9D1DB
}

.page-root .pos-switch::after {
   content: "";
   position: absolute;
   top: 2px;
   left: 2px;
   width: 14px;
   height: 14px;
   border-radius: 99px;
   background: #fff;
   transition: transform 200ms var(--e)
}

.page-root .pos-switch.is-on {
   background: #1287E0
}

.page-root .pos-switch.is-on::after {
   transform: translateX(16px)
}

.page-root .pos-support {
   display: inline-flex;
   align-items: center;
   gap: 5px
}

.page-root .pos-icons {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-left: auto
}

.page-root .pos-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 99px;
   background: #1C232C;
   color: #fff
}

.page-root .pos-icon-back {
   width: 30px;
   height: 30px;
   background: #1287E0
}

/* ---- body layout ---------------------------------------------------------------- */
.page-root .pos-body {
   display: grid;
   grid-template-columns: 718px 130px 322px;
   gap: 10px;
   height: 598px;
   padding: 8px 12px 0
}

.page-root .pos-billing {
   display: flex;
   flex-direction: column;
   gap: 7px;
   min-width: 0;
   height: 584px
}

.page-root .pos-toolbar {
   display: grid;
   grid-template-columns: 1fr 1.15fr 1fr;
   gap: 8px
}

.page-root .pos-field {
   position: relative;
   display: flex;
   align-items: center;
   gap: 7px;
   height: 32px;
   padding: 0 10px;
   border: 1px solid #DCE2EA;
   border-radius: 8px;
   background: #fff;
   font-size: 11px;
   color: #3A4553;
   white-space: nowrap;
   overflow: hidden;
   transition: border-color 220ms var(--e), box-shadow 220ms var(--e)
}

.page-root .pos-field > svg {
   flex-shrink: 0;
   color: #5C6B7C
}

.page-root .pos-field.is-focus {
   border-color: #1287E0;
   box-shadow: 0 0 0 3px rgba(18, 135, 224, .18)
}

.page-root .pos-field-text {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis
}

.page-root .pos-field-text:not(.is-placeholder) {
   color: #1F2933;
   font-weight: 500
}

.page-root .pos-field-edit {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   background: #E8F3FD;
   color: #1287E0
}

.page-root .pos-table {
   position: relative;
   flex: 1 1 auto;
   min-height: 0;
   border-radius: 9px;
   background: #fff;
   box-shadow: 0 0 0 1px #E3E8EF;
   overflow: hidden
}

.page-root .pos-table-head,
.page-root .pos-row {
   display: grid;
   grid-template-columns: 24px 92px minmax(0, 1fr) 92px 62px 78px 72px 22px;
   align-items: center;
   column-gap: 6px;
   padding: 0 12px
}

.page-root .pos-table-head {
   height: 32px;
   background: #F1F4F8;
   font-size: 10.5px;
   font-weight: 600;
   color: #1F2933
}

.page-root .pos-table-head .c {
   text-align: center
}

.page-root .pos-table-head .r {
   text-align: right
}

.page-root .pos-row {
   height: 40px;
   border-top: 1px solid #EEF1F5;
   font-size: 11px
}

.page-root .pos-row.is-new {
   animation: posRowIn 640ms var(--e) both
}

.page-root .pos-row.is-flash::before {
   content: "";
   position: absolute;
   inset: 0
}

@keyframes posRowIn {
   0% {
      opacity: 0;
      transform: translateY(14px);
      background: #DFF1FE
   }

   55% {
      opacity: 1;
      transform: none;
      background: #E9F5FE
   }

   100% {
      background: transparent
   }
}

.page-root .pos-row b {
   font-weight: 500
}

.page-root .pos-row .name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 500
}

.page-root .pos-row .r {
   text-align: right;
   font-variant-numeric: tabular-nums
}

.page-root .pos-qty {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px
}

.page-root .pos-qty b {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 4px;
   background: #1C232C;
   color: #fff
}

.page-root .pos-qty i {
   min-width: 26px;
   height: 20px;
   padding: 0 3px;
   border: 1px solid #D5DBE3;
   border-radius: 4px;
   font-size: 11px;
   line-height: 18px;
   text-align: center;
   font-variant-numeric: tabular-nums
}

.page-root .pos-qty i.is-bump {
   animation: posBump 520ms var(--e)
}

@keyframes posBump {
   0% {
      background: #CFE9FD;
      transform: scale(1.25)
   }

   100% {
      background: #fff;
      transform: none
   }
}

.page-root .pos-trash {
   color: #E04B4B;
   display: inline-flex
}

.page-root .pos-row .pos-disc {
   display: inline-flex;
   justify-content: flex-end;
   gap: 3px;
   align-items: center
}

.page-root .pos-row .pos-disc em {
   display: inline-block;
   min-width: 40px;
   padding: 2px 6px;
   border: 1px solid #DCE2EA;
   border-radius: 4px;
   background: #fff;
   text-align: right;
   font-size: 10.5px
}

.page-root .pos-row.has-disc .pos-disc em {
   border-color: #2E9E57;
   background: #E7F6EC;
   color: #1E7A41;
   font-weight: 600
}

/* ---- scanner -------------------------------------------------------------------- */
.page-root .pos-scanner {
   position: absolute;
   inset: 0;
   z-index: 12;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(244, 246, 249, .78);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
   opacity: 0;
   visibility: hidden;
   transition: opacity 320ms var(--e), visibility 0s linear 320ms
}

.page-root .pos-scanner.is-open {
   opacity: 1;
   visibility: visible;
   transition: opacity 320ms var(--e), visibility 0s
}

.page-root .pos-scanner-card {
   width: 330px;
   padding: 14px 16px 14px;
   border-radius: 14px;
   background: #fff;
   box-shadow: 0 18px 50px rgba(15, 25, 40, .18), 0 0 0 1px #E3E8EF;
   transform: scale(.96);
   transition: transform 420ms var(--e)
}

.page-root .pos-scanner.is-open .pos-scanner-card {
   transform: none
}

.page-root .pos-scanner-title {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 11.5px;
   font-weight: 600;
   color: #1F2933
}

.page-root .pos-scanner-title i {
   width: 8px;
   height: 8px;
   border-radius: 99px;
   background: #E04B4B;
   animation: posBlink 1s ease-in-out infinite
}

@keyframes posBlink {
   50% {
      opacity: .25
   }
}

.page-root .pos-barcode {
   position: relative;
   display: flex;
   justify-content: center;
   margin: 10px 0 8px;
   padding: 8px 0 4px;
   border-radius: 9px;
   background: #FAFBFC;
   box-shadow: inset 0 0 0 1px #EAEEF3;
   overflow: hidden
}

.page-root .pos-barcode-svg {
   display: block;
   max-width: 100%
}

.page-root .pos-scanline {
   position: absolute;
   left: 0;
   right: 0;
   top: 6px;
   height: 2px;
   background: #E5322D;
   box-shadow: 0 0 10px 2px rgba(229, 50, 45, .45);
   opacity: 0
}

.page-root .pos-scanner.is-scanning .pos-scanline {
   opacity: 1;
   animation: posScan 1100ms ease-in-out 1 both
}

@keyframes posScan {
   0% {
      top: 6px
   }

   50% {
      top: calc(100% - 8px)
   }

   100% {
      top: 6px
   }
}

.page-root .pos-scan-result {
   display: flex;
   align-items: center;
   gap: 9px;
   height: 38px;
   padding: 0 10px;
   border-radius: 9px;
   background: #E7F6EC;
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 320ms var(--e), transform 320ms var(--e)
}

.page-root .pos-scanner.is-found .pos-scan-result {
   opacity: 1;
   transform: none
}

.page-root .pos-scan-result b {
   display: block;
   font-size: 11.5px;
   color: #17603A
}

.page-root .pos-scan-result small {
   display: block;
   color: #3C7B55
}

.page-root .pos-scan-ok {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 99px;
   background: #2E9E57;
   color: #fff
}

/* ---- summary + payment ---------------------------------------------------------- */
.page-root .pos-summary {
   border-radius: 9px;
   background: #fff;
   box-shadow: 0 0 0 1px #E3E8EF;
   padding: 6px 12px 5px
}

.page-root .pos-summary-top {
   display: flex;
   align-items: center;
   gap: 14px
}

.page-root .pos-remarks {
   flex: 1 1 auto;
   height: 30px;
   padding: 0 10px;
   border: 1px solid #DCE2EA;
   border-radius: 8px;
   font-size: 11px;
   line-height: 28px;
   color: #6B7785
}

.page-root .pos-amount-label {
   font-size: 12px;
   font-weight: 600;
   color: #1287E0
}

.page-root .pos-amount {
   min-width: 112px;
   text-align: right;
   font-size: 28px;
   line-height: 30px;
   font-weight: 600;
   color: #1287E0;
   font-variant-numeric: tabular-nums
}

.page-root .pos-metrics {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 6px;
   align-items: end;
   margin-top: 4px;
   text-align: center
}

.page-root .pos-metrics > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   gap: 3px
}

.page-root .pos-metrics b {
   font-size: 12.5px;
   font-variant-numeric: tabular-nums
}

.page-root .pos-metrics small {
   font-size: 10px;
   color: #3A4553
}

.page-root .pos-flat {
   position: relative
}

.page-root .pos-flat i {
   position: absolute;
   left: 4px;
   top: 0;
   width: 22px;
   height: 20px;
   border-radius: 4px;
   background: #1C232C;
   color: #fff;
   font-size: 11px;
   line-height: 20px
}

.page-root .pos-pay {
   position: relative;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 6px;
   padding: 4px 6px;
   margin: 0 -6px;
   border-radius: 11px;
   transition: background-color 300ms var(--e), box-shadow 300ms var(--e)
}

.page-root .pos-pay.is-glow {
   background: rgba(18, 135, 224, .09);
   box-shadow: 0 0 0 2px rgba(18, 135, 224, .38), 0 10px 28px rgba(18, 135, 224, .18)
}

.page-root .pos-pay-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   height: 30px;
   border-radius: 7px;
   background: #1287E0;
   color: #fff;
   font-size: 10.5px;
   font-weight: 600;
   white-space: nowrap;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset;
   transition: transform 200ms var(--e), box-shadow 200ms var(--e)
}

.page-root .pos-pay-btn.is-press {
   transform: scale(.95);
   box-shadow: 0 0 0 3px rgba(18, 135, 224, .3)
}

/* ---- category tree -------------------------------------------------------------- */
.page-root .pos-tree {
   height: 584px;
   padding: 8px 6px;
   border-radius: 9px;
   background: #fff;
   box-shadow: 0 0 0 1px #E3E8EF;
   font-size: 10.5px;
   overflow: hidden
}

.page-root .pos-tree-top {
   height: 28px;
   padding: 0 10px;
   border-radius: 5px;
   background: #1287E0;
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   line-height: 28px
}

.page-root .pos-tree-plain {
   display: flex;
   gap: 8px;
   padding: 5px 10px;
   font-weight: 500
}

.page-root .pos-tree-group {
   margin-top: 4px
}

.page-root .pos-tree-head {
   display: flex;
   align-items: center;
   gap: 7px;
   height: 26px;
   padding: 0 8px;
   border-radius: 99px;
   background: var(--g);
   font-size: 11px
}

.page-root .pos-tree-head i {
   width: 14px;
   height: 14px;
   border-radius: 4px
}

.page-root .pos-tree-head b {
   flex: 1 1 auto
}

.page-root .pos-tree-group ul {
   margin: 3px 0 0;
   padding: 0 0 0 16px;
   list-style: none
}

.page-root .pos-tree-group li {
   padding: 2.6px 0;
   color: #2A3440
}

/* ---- catalogue ------------------------------------------------------------------ */
.page-root .pos-catalog {
   position: relative;
   height: 584px;
   padding: 8px;
   border-radius: 9px;
   background: #fff;
   box-shadow: 0 0 0 1px #E3E8EF;
   overflow: hidden;
   transition: box-shadow 320ms var(--e)
}

.page-root .pos-catalog.is-glow {
   box-shadow: 0 0 0 2px rgba(18, 135, 224, .45), 0 10px 30px rgba(18, 135, 224, .16)
}

.page-root .pos-cat-select {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 30px;
   padding: 0 10px;
   border: 1px solid #DCE2EA;
   border-radius: 7px;
   font-size: 11.5px
}

.page-root .pos-cats {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 5px;
   margin: 6px 0
}

.page-root .pos-cat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   padding: 4px 2px 5px;
   border: 1.5px solid #E6EBF1;
   border-radius: 8px;
   font-size: 9.5px;
   font-weight: 600;
   transition: border-color 260ms var(--e), box-shadow 260ms var(--e), background-color 260ms var(--e)
}

.page-root .pos-cat img {
   display: block;
   width: 100%;
   height: 38px;
   border-radius: 5px;
   object-fit: cover
}

.page-root .pos-cat.is-on {
   border-color: #1287E0;
   background: #EEF6FE;
   box-shadow: 0 0 0 3px rgba(18, 135, 224, .15)
}

.page-root .pos-search {
   display: flex;
   align-items: center;
   gap: 7px;
   height: 28px;
   padding: 0 9px;
   border: 1px solid #DCE2EA;
   border-radius: 7px;
   font-size: 10.5px;
   color: #7C8794
}

.page-root .pos-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 6px;
   margin-top: 6px
}

.page-root .pos-tile {
   padding: 4px 4px 5px;
   border-radius: 8px;
   background: #fff;
   box-shadow: 0 0 0 1px #E6EBF1;
   transition: box-shadow 260ms var(--e), transform 260ms var(--e)
}

.page-root .pos-tile.is-picked {
   box-shadow: 0 0 0 2px #1287E0, 0 8px 22px rgba(18, 135, 224, .22);
   transform: translateY(-2px)
}

.page-root .pos-tile-photo {
   display: block;
   overflow: hidden;
   border-radius: 6px;
   background: #F3EFE9
}

.page-root .pos-tile-photo img {
   display: block;
   width: 100%;
   height: 58px;
   object-fit: cover
}

.page-root .pos-tile-name {
   display: block;
   margin-top: 3px;
   min-height: 24px;
   font-size: 10.5px;
   line-height: 13px;
   font-weight: 600
}

.page-root .pos-tile-code {
   display: block;
   font-size: 9px
}

.page-root .pos-tile-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 3px;
   font-size: 11px
}

.page-root .pos-add {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 5px;
   background: #1287E0;
   color: #fff;
   transition: transform 200ms var(--e)
}

.page-root .pos-add.is-press {
   transform: scale(.82)
}

/* ---- customer dropdown / coupon / payment modal / toast ------------------------- */
.page-root .pos-dropdown {
   position: absolute;
   left: 266px;
   top: 86px;
   z-index: 14;
   width: 296px;
   padding: 6px;
   border-radius: 10px;
   background: #fff;
   box-shadow: 0 16px 40px rgba(15, 25, 40, .18), 0 0 0 1px #E3E8EF;
   opacity: 0;
   transform: translateY(-6px);
   visibility: hidden;
   transition: opacity 260ms var(--e), transform 260ms var(--e), visibility 0s linear 260ms
}

.page-root .pos-dropdown.is-open {
   opacity: 1;
   transform: none;
   visibility: visible;
   transition: opacity 260ms var(--e), transform 260ms var(--e), visibility 0s
}

.page-root .pos-sugg {
   display: none;
   align-items: center;
   gap: 9px;
   padding: 7px 8px;
   border-radius: 7px;
   transition: background-color 200ms var(--e)
}

.page-root .pos-dropdown.has-sugg .pos-sugg,
.page-root .pos-sheet.has-sugg .pos-sugg {
   display: flex
}

.page-root .pos-sugg.is-hot {
   background: #E8F3FD
}

.page-root .pos-sugg b {
   display: block;
   font-size: 11.5px
}

.page-root .pos-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 99px;
   background: #1287E0;
   color: #fff;
   font-size: 10.5px;
   font-weight: 600
}

.page-root .pos-dropdown::before {
   content: "Search customers";
   display: block;
   padding: 2px 8px 6px;
   font-size: 9.5px;
   color: #7C8794
}

.page-root .pos-coupon {
   position: absolute;
   left: 24px;
   top: 400px;
   z-index: 14;
   width: 300px;
   padding: 10px 12px 12px;
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 18px 48px rgba(15, 25, 40, .2), 0 0 0 1px #E3E8EF;
   opacity: 0;
   transform: translateY(10px) scale(.97);
   visibility: hidden;
   transition: opacity 280ms var(--e), transform 320ms var(--e), visibility 0s linear 320ms
}

.page-root .pos-coupon.is-open {
   opacity: 1;
   transform: none;
   visibility: visible;
   transition: opacity 280ms var(--e), transform 320ms var(--e), visibility 0s
}

.page-root .pos-pop-title {
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 8px
}

.page-root .pos-coupon-row {
   display: flex;
   gap: 7px
}

.page-root .pos-coupon-input {
   flex: 1 1 auto;
   height: 32px;
   padding: 0 10px;
   border: 1px solid #DCE2EA;
   border-radius: 8px;
   font-size: 12px;
   line-height: 30px;
   font-weight: 600;
   letter-spacing: .06em;
   color: #1F2933;
   transition: border-color 220ms var(--e), box-shadow 220ms var(--e)
}

.page-root .pos-coupon-input em {
   font-weight: 400;
   letter-spacing: 0;
   color: #7C8794
}

.page-root .pos-coupon-input.is-focus {
   border-color: #1287E0;
   box-shadow: 0 0 0 3px rgba(18, 135, 224, .18)
}

.page-root .pos-coupon-apply {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 62px;
   height: 32px;
   border-radius: 8px;
   background: #1287E0;
   color: #fff;
   font-size: 11.5px;
   font-weight: 600;
   transition: transform 200ms var(--e)
}

.page-root .pos-coupon-apply.is-press {
   transform: scale(.94)
}

.page-root .pos-coupon-status {
   display: flex;
   align-items: center;
   gap: 7px;
   min-height: 0;
   margin-top: 0;
   font-size: 11px;
   color: #6B7785;
   opacity: 0;
   transition: opacity 260ms var(--e), margin-top 260ms var(--e)
}

.page-root .pos-coupon-status.is-shown {
   min-height: 24px;
   margin-top: 9px;
   opacity: 1
}

.page-root .pos-coupon-status.is-ok {
   color: #17703F;
   font-weight: 600
}

.page-root .pos-spin {
   width: 13px;
   height: 13px;
   border: 2px solid #CFE0F2;
   border-top-color: #1287E0;
   border-radius: 99px;
   animation: posSpin 700ms linear infinite
}

@keyframes posSpin {
   to {
      transform: rotate(360deg)
   }
}

.page-root .pos-modal {
   position: absolute;
   inset: 0;
   z-index: 20;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(20, 30, 45, .34);
   opacity: 0;
   visibility: hidden;
   transition: opacity 320ms var(--e), visibility 0s linear 320ms
}

.page-root .pos-modal.is-open {
   opacity: 1;
   visibility: visible;
   transition: opacity 320ms var(--e), visibility 0s
}

.page-root .pos-modal-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 7px;
   width: 300px;
   padding: 22px 22px 20px;
   border-radius: 16px;
   background: #fff;
   box-shadow: 0 24px 60px rgba(15, 25, 40, .28);
   text-align: center;
   transform: scale(.95);
   transition: transform 420ms var(--e)
}

.page-root .pos-modal.is-open .pos-modal-card {
   transform: none
}

.page-root .pos-modal-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   border-radius: 99px;
   background: #E8F3FD;
   color: #1287E0;
   transition: background-color 300ms var(--e), color 300ms var(--e), transform 400ms var(--e)
}

.page-root .pos-modal.is-done .pos-modal-icon {
   background: #2E9E57;
   color: #fff;
   transform: scale(1.06)
}

.page-root .pos-modal-title {
   font-size: 13px
}

.page-root .pos-modal-amount {
   font-size: 22px;
   font-weight: 600;
   font-variant-numeric: tabular-nums
}

.page-root .pos-progress {
   width: 100%;
   height: 6px;
   margin-top: 4px;
   border-radius: 99px;
   background: #E6EBF1;
   overflow: hidden
}

.page-root .pos-progress i {
   display: block;
   width: 0;
   height: 100%;
   border-radius: 99px;
   background: linear-gradient(90deg, #22A7E0, #1287E0)
}

.page-root .pos-modal.is-done .pos-progress i {
   background: #2E9E57
}

.page-root .pos-toast {
   position: absolute;
   left: 50%;
   top: 50px;
   z-index: 22;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px 7px 8px;
   border-radius: 99px;
   background: #14301F;
   color: #fff;
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
   opacity: 0;
   transform: translate3d(-50%, -8px, 0);
   transition: opacity 280ms var(--e), transform 320ms var(--e)
}

.page-root .pos-toast.is-open {
   opacity: 1;
   transform: translate3d(-50%, 0, 0)
}

.page-root .pos-toast i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   border-radius: 99px;
   background: #2E9E57
}

/* ---- invoice + splash ----------------------------------------------------------- */
.page-root .pos-invoice {
   position: absolute;
   inset: 0;
   z-index: 24;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #E9EDF2;
   opacity: 0;
   visibility: hidden;
   transform: translate3d(0, 30px, 0);
   transition: opacity 520ms var(--e), transform 620ms var(--e), visibility 0s linear 620ms
}

.page-root .pos-invoice.is-open {
   opacity: 1;
   visibility: visible;
   transform: none;
   transition: opacity 520ms var(--e), transform 620ms var(--e), visibility 0s
}

.page-root .pos-invoice-sheet {
   width: 470px;
   padding: 22px 26px 20px;
   border-radius: 6px;
   background: #fff;
   box-shadow: 0 24px 60px rgba(15, 25, 40, .18), 0 0 0 1px #DCE2EA
}

.page-root .pos-invoice-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 12px;
   border-bottom: 2px solid #1287E0
}

.page-root .pos-invoice-head img {
   display: block;
   height: 28px;
   width: auto
}

.page-root .pos-invoice-head div {
   text-align: right
}

.page-root .pos-invoice-head b {
   display: block;
   font-size: 14px;
   letter-spacing: .08em;
   color: #1287E0
}

.page-root .pos-invoice-meta {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   padding: 12px 0;
   font-size: 10.5px
}

.page-root .pos-invoice-meta small,
.page-root .pos-invoice-meta em {
   display: block;
   font-size: 9px;
   color: #7C8794
}

.page-root .pos-invoice-meta b {
   display: block;
   margin-top: 1px;
   font-size: 11px
}

.page-root .pos-inv-row {
   display: grid;
   grid-template-columns: 1fr 40px 70px 78px;
   align-items: center;
   gap: 8px;
   height: 26px;
   padding: 0 6px;
   font-size: 11px;
   border-bottom: 1px solid #EEF1F5
}

.page-root .pos-inv-row span:not(:first-child) {
   text-align: right;
   font-variant-numeric: tabular-nums
}

.page-root .pos-inv-th {
   background: #F1F4F8;
   font-size: 10px;
   font-weight: 600;
   border-bottom: 0
}

.page-root .pos-inv-row.is-new {
   animation: posRowIn 600ms var(--e) both
}

.page-root .pos-invoice-totals {
   margin: 10px 0 0 auto;
   width: 260px;
   font-size: 11px
}

.page-root .pos-invoice-totals div {
   display: flex;
   justify-content: space-between;
   padding: 3px 0;
   font-variant-numeric: tabular-nums
}

.page-root .pos-invoice-totals .is-green {
   color: #17703F
}

.page-root .pos-invoice-totals .pos-invoice-total {
   margin-top: 5px;
   padding: 7px 0 0;
   border-top: 1.5px solid #1F2933;
   font-size: 14px;
   font-weight: 600
}

.page-root .pos-invoice-ok {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 34px;
   margin-top: 14px;
   border-radius: 99px;
   background: #E7F6EC;
   color: #17703F;
   font-size: 12px;
   font-weight: 600;
   opacity: 0;
   transform: translateY(8px) scale(.97);
   transition: opacity 360ms var(--e), transform 420ms var(--e)
}

.page-root .pos-invoice-ok.is-open {
   opacity: 1;
   transform: none
}

.page-root .pos-invoice-ok i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 99px;
   background: #2E9E57;
   color: #fff
}

.page-root .pos-splash {
   position: absolute;
   inset: 0;
   z-index: 28;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   opacity: 0;
   visibility: hidden;
   transition: opacity 520ms var(--e), visibility 0s linear 520ms
}

.page-root .pos-splash.is-open {
   opacity: 1;
   visibility: visible;
   transition: opacity 520ms var(--e), visibility 0s
}

.page-root .pos-splash img {
   display: block;
   transform: scale(.94);
   transition: transform 900ms var(--e)
}

.page-root .pos-splash.is-open img {
   transform: none
}

.page-root .pos-fly {
   position: absolute;
   z-index: 26;
   border-radius: 8px;
   object-fit: cover;
   box-shadow: 0 14px 30px rgba(15, 25, 40, .26);
   pointer-events: none;
   transition: transform 640ms var(--e), opacity 640ms var(--e)
}

/* ---- mobile POS ------------------------------------------------------------------ */
.page-root .pos-mtop {
   display: flex;
   align-items: center;
   gap: 8px;
   height: 42px;
   padding: 0 10px;
   background: #fff;
   font-size: 11px;
   font-weight: 500;
   box-shadow: 0 1px 0 #E6EAF0
}

.page-root .pos-mtop .pos-logo {
   height: 21px;
   margin: 0 4px 0 0
}

.page-root .pos-mtop-sp {
   flex: 1 1 auto
}

.page-root .pos-mtools {
   display: grid;
   grid-template-columns: 1.35fr 1fr;
   gap: 6px;
   padding: 8px 8px 0
}

.page-root .pos-mobile .pos-field {
   height: 30px;
   padding: 0 8px;
   gap: 5px;
   font-size: 10px
}

.page-root .pos-mobile .pos-field-edit {
   width: 28px
}

.page-root .pos-mchips {
   display: flex;
   gap: 5px;
   padding: 8px 8px 0;
   overflow: hidden
}

.page-root .pos-mchip {
   flex-shrink: 0;
   padding: 5px 10px;
   border-radius: 99px;
   background: #fff;
   box-shadow: 0 0 0 1px #DCE2EA;
   font-size: 10px;
   font-weight: 600
}

.page-root .pos-mchip.is-on {
   background: #1287E0;
   color: #fff;
   box-shadow: none
}

.page-root .pos-mgrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
   padding: 8px 8px 0;
   transition: box-shadow 300ms var(--e)
}

.page-root .pos-mtile {
   padding: 4px;
   border-radius: 9px;
   background: #fff;
   box-shadow: 0 0 0 1px #E6EBF1;
   transition: box-shadow 260ms var(--e), transform 260ms var(--e)
}

.page-root .pos-mtile.is-picked {
   box-shadow: 0 0 0 2px #1287E0, 0 8px 20px rgba(18, 135, 224, .22);
   transform: translateY(-2px)
}

.page-root .pos-mtile-photo {
   display: block;
   overflow: hidden;
   border-radius: 6px
}

.page-root .pos-mtile-photo img {
   display: block;
   width: 100%;
   height: 52px;
   object-fit: cover
}

.page-root .pos-mtile > b {
   display: block;
   margin-top: 3px;
   font-size: 10px;
   line-height: 12px
}

.page-root .pos-mtile-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 2px;
   font-size: 10.5px
}

.page-root .pos-mcart {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 7px 10px 9px;
   border-radius: 16px 16px 0 0;
   background: #fff;
   box-shadow: 0 -8px 26px rgba(15, 25, 40, .12), 0 0 0 1px #E3E8EF
}

.page-root .pos-mcart-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 11px
}

.page-root .pos-mcart-head b {
   display: inline-flex;
   align-items: center;
   gap: 5px
}

.page-root .pos-mcart-head span {
   font-size: 10px;
   color: #6B7785
}

.page-root .pos-mrows {
   height: 96px;
   margin: 4px 0 2px;
   overflow: hidden
}

.page-root .pos-mrow {
   display: grid;
   grid-template-columns: 26px 1fr auto 48px;
   align-items: center;
   gap: 7px;
   height: 32px;
   border-top: 1px solid #EEF1F5;
   font-size: 10px
}

.page-root .pos-mrow.is-new {
   animation: posRowIn 640ms var(--e) both
}

.page-root .pos-mrow img {
   display: block;
   width: 26px;
   height: 26px;
   border-radius: 6px;
   object-fit: cover;
   background: #F1EDE6
}

.page-root .pos-mrow .pos-mdot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 6px;
   background: #EEF3F9;
   color: #5C6B7C
}

.page-root .pos-mrow strong {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600
}

.page-root .pos-mrow small {
   display: block;
   font-size: 9px
}

.page-root .pos-mrow .q {
   min-width: 22px;
   padding: 2px 6px;
   border-radius: 99px;
   background: #E8F3FD;
   color: #0F6DB8;
   font-weight: 600;
   text-align: center
}

.page-root .pos-mrow .q.is-bump {
   animation: posBump 520ms var(--e)
}

.page-root .pos-mrow .a {
   text-align: right;
   font-weight: 600;
   font-variant-numeric: tabular-nums
}

.page-root .pos-mtotals {
   padding-top: 3px;
   border-top: 1px solid #EEF1F5;
   font-size: 10px
}

.page-root .pos-mtotals > div {
   display: flex;
   justify-content: space-between;
   padding: 1.5px 0;
   font-variant-numeric: tabular-nums
}

.page-root .pos-mtotals .pos-mdisc {
   height: 0;
   padding: 0;
   overflow: hidden;
   color: #17703F;
   opacity: 0;
   transition: height 320ms var(--e), opacity 320ms var(--e), padding 320ms var(--e)
}

.page-root .pos-mtotals .pos-mdisc.is-open {
   height: 17px;
   padding: 1.5px 0;
   opacity: 1
}

.page-root .pos-mtotals .pos-mtotal {
   margin-top: 2px;
   font-size: 13px;
   font-weight: 600
}

.page-root .pos-mtotals .pos-mtotal b {
   color: #1287E0;
   font-size: 15px
}

.page-root .pos-mactions {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 5px;
   margin-top: 5px
}

.page-root .pos-mbtn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   height: 30px;
   border-radius: 8px;
   background: #1287E0;
   color: #fff;
   font-size: 10px;
   font-weight: 600;
   transition: transform 200ms var(--e), box-shadow 200ms var(--e)
}

.page-root .pos-mbtn-light {
   background: #E8F3FD;
   color: #0F6DB8
}

.page-root .pos-mbtn.is-press {
   transform: scale(.94);
   box-shadow: 0 0 0 3px rgba(18, 135, 224, .3)
}

.page-root .pos-mactions.is-glow {
   box-shadow: 0 0 0 4px rgba(18, 135, 224, .2);
   border-radius: 10px
}

.page-root .pos-mobile .pos-scanner-card {
   width: 250px;
   padding: 12px
}

.page-root .pos-mobile .pos-toast {
   top: 46px;
   font-size: 10px
}

.page-root .pos-mobile .pos-modal-card {
   width: 236px;
   padding: 18px 16px
}

.page-root .pos-sheet {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 16;
   padding: 8px 12px 14px;
   border-radius: 18px 18px 0 0;
   background: #fff;
   box-shadow: 0 -14px 40px rgba(15, 25, 40, .2), 0 0 0 1px #E3E8EF;
   font-size: 11px;
   transform: translate3d(0, 105%, 0);
   visibility: hidden;
   transition: transform 440ms var(--e), visibility 0s linear 440ms
}

.page-root .pos-sheet.is-open {
   transform: none;
   visibility: visible;
   transition: transform 440ms var(--e), visibility 0s
}

.page-root .pos-sheet-grab {
   width: 34px;
   height: 4px;
   margin: 0 auto 8px;
   border-radius: 99px;
   background: #D5DBE3
}

.page-root .pos-sheet > b {
   display: block;
   margin-bottom: 7px;
   font-size: 12px
}

.page-root .pos-sheet-input {
   height: 32px;
   padding: 0 10px;
   margin-bottom: 6px;
   border: 1.5px solid #1287E0;
   border-radius: 8px;
   font-size: 12px;
   line-height: 29px;
   font-weight: 500;
   box-shadow: 0 0 0 3px rgba(18, 135, 224, .15)
}

.page-root .pos-sheet-input em {
   font-weight: 400;
   color: #7C8794
}

.page-root .hero-fade,
.page-root .hero-bottom-bar {
   transition: opacity 600ms var(--e)
}

.page-root .hero-fade.is-hidden-for-pos,
.page-root .hero-bottom-bar.is-hidden-for-pos,
.page-root [data-js~="hero-hint"].is-hidden-for-pos {
   opacity: 0 !important
}

/* phone: keep the phone status bar (time / island) visible above the POS screen */
@media (max-width: 599.98px) {
   .page-root .pos-pane {
      top: 40px
   }

   .page-root .pos-mobile .pos-inv-row {
      grid-template-columns: 1fr 26px 62px
   }

   .page-root .pos-mobile .pos-invoice {
      background: #F4F6F9
   }

   .page-root .pos-mobile .pos-invoice-sheet {
      width: 276px;
      padding: 14px 14px 12px
   }

   .page-root .pos-mobile .pos-invoice-meta {
      grid-template-columns: 1fr 1fr;
      gap: 6px 10px;
      padding: 8px 0
   }

   .page-root .pos-mobile .pos-invoice-totals {
      width: 100%
   }

   .page-root .pos-mobile .pos-invoice-ok {
      font-size: 10.5px;
      height: 30px;
      margin-top: 10px
   }
}

/* tablet fades the lower part of the dashboard with a mask - switch it off while the POS is on screen */
.page-root .hero-dashboard-tilt.is-hidden-for-pos {
   -webkit-mask-image: none !important;
   mask-image: none !important
}

/* =====================================================================================
   POS demo v2 additions: coupon picker, reference-style receipt, digital bill delivery
   ===================================================================================== */
.page-root .pos-coupon {
   width: 372px
}

.page-root .pos-cpn-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-top: 10px
}

.page-root .pos-cpn {
   position: relative;
   display: grid;
   grid-template-columns: 28px minmax(0, 1fr) auto 16px;
   align-items: center;
   gap: 9px;
   padding: 7px 10px;
   border-radius: 10px;
   background: #fff;
   box-shadow: 0 0 0 1px #E3E8EF;
   transition: box-shadow 240ms var(--e), background-color 240ms var(--e), transform 240ms var(--e)
}

.page-root .pos-cpn.is-no {
   opacity: .5
}

.page-root .pos-cpn.is-hot {
   background: #F3F9FE
}

.page-root .pos-cpn.is-selected {
   background: #EEF6FE;
   box-shadow: 0 0 0 2px #1287E0, 0 8px 20px rgba(18, 135, 224, .16);
   transform: translateY(-1px)
}

.page-root .pos-cpn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 99px;
   background: #E8F3FD;
   color: #1287E0
}

.page-root .pos-cpn-main b {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 11.5px;
   letter-spacing: .05em
}

.page-root .pos-cpn-main u {
   padding: 1px 6px;
   border-radius: 99px;
   background: #E7F6EC;
   color: #17703F;
   font-size: 8.5px;
   font-weight: 600;
   letter-spacing: .02em;
   text-decoration: none
}

.page-root .pos-cpn-main small {
   display: block;
   font-size: 9.5px;
   line-height: 12px;
   color: #3A4553
}

.page-root .pos-cpn-main small.c {
   color: #7C8794
}

.page-root .pos-cpn-save {
   font-size: 10.5px;
   font-weight: 600;
   color: #17703F
}

.page-root .pos-cpn.is-no .pos-cpn-save {
   color: #8A94A1;
   font-weight: 500
}

.page-root .pos-cpn-dot {
   width: 14px;
   height: 14px;
   border: 1.5px solid #C9D1DB;
   border-radius: 99px;
   background: #fff;
   transition: border 220ms var(--e)
}

.page-root .pos-cpn.is-selected .pos-cpn-dot {
   border: 4.5px solid #1287E0
}

/* ---- receipt (same layout as the supplied thermal invoice) ----------------------- */
.page-root .pos-invoice {
   background: #E9EDF2
}

.page-root .pos-receipt-window {
   position: relative;
   width: 330px;
   height: 574px;
   overflow: hidden;
   border-radius: 6px;
   background: #fff;
   box-shadow: 0 24px 60px rgba(15, 25, 40, .2), 0 0 0 1px #D5DBE3;
   transition: transform 560ms var(--e), opacity 480ms var(--e)
}

.page-root .pos-invoice.is-sending .pos-receipt-window {
   transform: scale(.9) translateY(-14px);
   opacity: 0
}

.page-root .pos-receipt {
   width: 100%;
   padding: 16px 14px 12px;
   font-family: "Times New Roman", Times, serif;
   font-weight: 700;
   font-size: 12.5px;
   line-height: 1.28;
   color: #000;
   clip-path: inset(0 0 100% 0);
   will-change: transform, clip-path;
   background: #fff
}

.page-root .pos-invoice.is-printing .pos-receipt {
   clip-path: inset(0 0 0 0);
   transition: clip-path 2200ms linear
}

.page-root .pos-receipt b {
   font-weight: 700
}

.page-root .pos-receipt .r-head {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center
}

.page-root .pos-receipt .r-store {
   font-size: 19px;
   line-height: 24px
}

.page-root .pos-receipt .r-head span {
   font-size: 14px;
   font-weight: 500;
   line-height: 17px
}

.page-root .pos-receipt .r-head b:last-child {
   font-size: 13.5px
}

.page-root .pos-receipt .r-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center
}

.page-root .pos-receipt .r-center.r-gap {
   margin-top: 12px
}

.page-root .pos-receipt .r-center.r-gap b {
   font-size: 13.5px
}

.page-root .pos-receipt .r-meta {
   margin-top: 8px;
   font-size: 13px
}

.page-root .pos-receipt .r-meta div {
   display: flex;
   gap: 12px
}

.page-root .pos-receipt .r-meta b {
   min-width: 66px
}

.page-root .pos-receipt .r-table {
   margin-top: 8px
}

.page-root .pos-receipt .r-line {
   display: grid;
   grid-template-columns: 14px minmax(0, 1fr) 24px 52px 44px 58px;
   column-gap: 3px;
   align-items: baseline;
   font-size: 10.5px
}

.page-root .pos-receipt .r-line .r-n {
   text-align: right
}

.page-root .pos-receipt .r-line .r-q {
   text-align: center
}

.page-root .pos-receipt .r-th {
   padding: 3px 0 2px;
   border-top: 1px dashed #000;
   border-bottom: 1px dashed #000;
   font-size: 12.5px
}

.page-root .pos-receipt .r-item {
   padding: 3px 0 1px;
   border-bottom: 1px dashed #000
}

.page-root .pos-receipt .r-gst {
   padding: 0 0 2px 17px;
   font-size: 8.5px;
   font-weight: 500;
   line-height: 10px
}

.page-root .pos-receipt .r-sum {
   border-bottom: 1px dashed #000
}

.page-root .pos-receipt .r-sum div {
   display: flex;
   justify-content: space-between;
   padding: 1.5px 0;
   font-size: 12px
}

.page-root .pos-receipt .r-stats {
   margin-top: 8px;
   font-size: 13px
}

.page-root .pos-receipt .r-taxhead {
   margin-top: 10px;
   font-size: 13px
}

.page-root .pos-receipt .r-tax {
   margin-top: 4px;
   border: 1px dashed #000
}

.page-root .pos-receipt .r-tax-row {
   display: grid;
   grid-template-columns: .8fr 1.3fr 1fr 1fr;
   padding: 3px 4px;
   text-align: center;
   font-size: 9.5px
}

.page-root .pos-receipt .r-tax-th {
   border-bottom: 1px dashed #000;
   font-size: 8.5px
}

.page-root .pos-receipt .r-tc {
   margin-top: 8px;
   font-size: 12.5px
}

.page-root .pos-receipt .r-tc ul {
   margin: 2px 0 0;
   padding-left: 13px
}

.page-root .pos-receipt .r-tc li {
   margin-bottom: 2px
}

.page-root .pos-receipt .r-thanks {
   margin-top: 12px;
   text-align: center;
   font-size: 12px
}

.page-root .pos-receipt .r-barcode {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   margin-top: 10px
}

.page-root .pos-receipt .r-barcode b {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   letter-spacing: .08em
}

.page-root .pos-receipt .r-foot {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   font-size: 8.5px
}

/* ---- digital bill delivery (WhatsApp / SMS) -------------------------------------- */
.page-root .pos-send {
   position: absolute;
   inset: 0;
   z-index: 26;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #E9EDF2;
   opacity: 0;
   visibility: hidden;
   transition: opacity 480ms var(--e), visibility 0s linear 480ms
}

.page-root .pos-send.is-open {
   opacity: 1;
   visibility: visible;
   transition: opacity 480ms var(--e), visibility 0s
}

.page-root .pos-send-card {
   width: 372px;
   overflow: hidden;
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 24px 60px rgba(15, 25, 40, .2), 0 0 0 1px #D5DBE3;
   transform: translateY(18px) scale(.97);
   transition: transform 620ms var(--e)
}

.page-root .pos-send.is-open .pos-send-card {
   transform: none
}

.page-root .pos-send-head {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   background: #128C7E;
   color: #fff
}

.page-root .pos-wa {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 99px;
   background: #25D366
}

.page-root .pos-send-head b {
   display: block;
   font-size: 13px
}

.page-root .pos-send-head small {
   display: block;
   font-size: 10px;
   color: rgba(255, 255, 255, .84)
}

.page-root .pos-send-head em {
   margin-left: auto;
   padding: 3px 10px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .2);
   font-size: 10.5px;
   font-weight: 500
}

.page-root .pos-send-to {
   display: flex;
   align-items: baseline;
   gap: 8px;
   padding: 11px 14px 9px;
   font-size: 11px
}

.page-root .pos-send-to small {
   font-size: 10px
}

.page-root .pos-send-to span {
   margin-left: auto;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .02em;
   color: #128C7E
}

.page-root .pos-chat {
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
   min-height: 188px;
   padding: 14px;
   background: #ECE5DD
}

.page-root .pos-bubble {
   width: 268px;
   padding: 7px 8px 5px;
   border-radius: 10px 10px 2px 10px;
   background: #DCF8C6;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .14);
   opacity: 0;
   transform: translateY(26px) scale(.95);
   transform-origin: 100% 100%;
   transition: opacity 520ms var(--e), transform 620ms var(--e)
}

.page-root .pos-send.is-bubble .pos-bubble {
   opacity: 1;
   transform: none
}

.page-root .pos-bubble-doc {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px;
   border-radius: 7px;
   background: rgba(255, 255, 255, .7)
}

.page-root .pos-doc-thumb {
   display: flex;
   flex-direction: column;
   gap: 3px;
   width: 34px;
   height: 44px;
   padding: 7px 6px;
   border-radius: 4px;
   background: #fff;
   box-shadow: 0 0 0 1px #CFD8DC
}

.page-root .pos-doc-thumb i {
   height: 2px;
   border-radius: 2px;
   background: #9AA7B0
}

.page-root .pos-doc-meta b {
   display: block;
   font-size: 10.5px
}

.page-root .pos-doc-meta small {
   display: block;
   font-size: 9px;
   color: #667781
}

.page-root .pos-bubble p {
   margin: 6px 2px 2px;
   font-size: 11px;
   line-height: 14px;
   color: #1F2933
}

.page-root .pos-ticks {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 3px;
   font-size: 9px;
   color: #667781
}

.page-root .pos-ticks i {
   margin-left: -5px;
   font-size: 12px;
   color: #9AA7B0;
   transition: color 300ms var(--e), opacity 300ms var(--e)
}

.page-root .pos-ticks .t1 {
   margin-left: 2px;
   opacity: 0
}

.page-root .pos-ticks .t2 {
   opacity: 0
}

.page-root .pos-send.is-t1 .pos-ticks .t1 {
   opacity: 1
}

.page-root .pos-send.is-delivered .pos-ticks .t2 {
   opacity: 1
}

.page-root .pos-send.is-read .pos-ticks i {
   color: #34B7F1
}

.page-root .pos-send-chans {
   display: flex;
   gap: 8px;
   padding: 11px 14px 0
}

.page-root .pos-chan {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 5px 11px;
   border-radius: 99px;
   background: #F1F4F8;
   font-size: 10.5px;
   font-weight: 600;
   color: #6B7785;
   transition: background-color 300ms var(--e), color 300ms var(--e)
}

.page-root .pos-chan-dot {
   width: 8px;
   height: 8px;
   border-radius: 99px;
   background: #C9D1DB
}

.page-root .pos-chan.is-sending .pos-chan-dot {
   background: #F5A524;
   animation: posBlink 800ms ease-in-out infinite
}

.page-root .pos-chan.is-done {
   background: #E7F6EC;
   color: #17703F
}

.page-root .pos-chan.is-done .pos-chan-dot {
   background: #2E9E57;
   animation: none
}

.page-root .pos-send-ok {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 36px;
   margin: 12px 14px 14px;
   border-radius: 99px;
   background: #E7F6EC;
   color: #17703F;
   font-size: 12.5px;
   font-weight: 600;
   opacity: 0;
   transform: translateY(8px) scale(.97);
   transition: opacity 380ms var(--e), transform 440ms var(--e)
}

.page-root .pos-send-ok.is-open {
   opacity: 1;
   transform: none
}

.page-root .pos-send-ok i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 99px;
   background: #2E9E57;
   color: #fff
}

/* ---- phone ----------------------------------------------------------------------- */
@media (max-width: 599.98px) {
   .page-root .pos-mobile .pos-cpn-list {
      gap: 5px;
      margin-top: 8px
   }

   .page-root .pos-mobile .pos-cpn {
      grid-template-columns: 24px minmax(0, 1fr) auto 14px;
      gap: 7px;
      padding: 5px 8px
   }

   .page-root .pos-mobile .pos-cpn-icon {
      width: 24px;
      height: 24px
   }

   .page-root .pos-mobile .pos-cpn small.c {
      display: none
   }

   .page-root .pos-mobile .pos-cpn-main b {
      font-size: 10.5px
   }

   .page-root .pos-mobile .pos-cpn-main small {
      font-size: 9px
   }

   .page-root .pos-mobile .pos-cpn-save {
      font-size: 9.5px
   }

   .page-root .pos-mobile .pos-receipt-window {
      width: 262px;
      height: 520px
   }

   .page-root .pos-mobile .pos-receipt {
      padding: 12px 11px 10px;
      font-size: 11px
   }

   .page-root .pos-mobile .pos-receipt .r-store {
      font-size: 16px;
      line-height: 20px
   }

   .page-root .pos-mobile .pos-receipt .r-head span {
      font-size: 11.5px;
      line-height: 14px
   }

   .page-root .pos-mobile .pos-receipt .r-head b:last-child,
   .page-root .pos-mobile .pos-receipt .r-center.r-gap b,
   .page-root .pos-mobile .pos-receipt .r-meta,
   .page-root .pos-mobile .pos-receipt .r-stats,
   .page-root .pos-mobile .pos-receipt .r-taxhead {
      font-size: 11px
   }

   .page-root .pos-mobile .pos-receipt .r-line {
      grid-template-columns: 12px minmax(0, 1fr) 20px 44px 38px 50px;
      font-size: 9px
   }

   .page-root .pos-mobile .pos-receipt .r-th {
      font-size: 10.5px
   }

   .page-root .pos-mobile .pos-receipt .r-gst {
      font-size: 7.5px
   }

   .page-root .pos-mobile .pos-receipt .r-sum div {
      font-size: 10.5px
   }

   .page-root .pos-mobile .pos-receipt .r-tc {
      font-size: 10.5px
   }

   .page-root .pos-mobile .pos-receipt .r-thanks {
      font-size: 10.5px
   }

   .page-root .pos-mobile .pos-receipt .r-barcode b {
      font-size: 17px
   }

   .page-root .pos-mobile .pos-send-card {
      width: 268px
   }

   .page-root .pos-mobile .pos-send-to span {
      font-size: 12px
   }

   .page-root .pos-mobile .pos-chat {
      min-height: 172px;
      padding: 10px
   }

   .page-root .pos-mobile .pos-bubble {
      width: 236px
   }

   .page-root .pos-mobile .pos-send-chans {
      padding: 9px 12px 0
   }

   .page-root .pos-mobile .pos-send-ok {
      margin: 10px 12px 12px;
      font-size: 11px
   }
}

/* ---- v3: category icons, Vasy logo on the WhatsApp card ---------------------------- */
.page-root .pos-tree-ico {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 19px;
   height: 19px;
   border-radius: 6px;
   color: #fff
}

.page-root .pos-tree-head i.pos-tree-ico {
   width: 19px;
   height: 19px;
   border-radius: 6px
}

.page-root .pos-cat-select b {
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.page-root .pos-mchip {
   display: inline-flex;
   align-items: center;
   gap: 5px
}

.page-root .pos-mchip svg {
   flex-shrink: 0
}

.page-root .pos-wa.pos-wa-logo {
   background: #fff;
   overflow: hidden
}

.page-root .pos-wa.pos-wa-logo img {
   display: block;
   width: 26px;
   height: 26px;
   object-fit: contain
}

.page-root .pos-receipt .r-store {
   font-size: 17px
}

@media (max-width: 599.98px) {
   .page-root .pos-mobile .pos-receipt .r-store {
      font-size: 14px;
      line-height: 18px
   }
}

/* ---- v4: store-experience feedback link in the WhatsApp message --------------------- */
.page-root .pos-bubble .pos-bubble-rate {
   display: flex;
   flex-direction: column;
   gap: 3px;
   margin: 6px 2px 3px;
   padding-top: 6px;
   border-top: 1px solid rgba(0, 0, 0, .08);
   font-size: 11px;
   line-height: 14px;
   color: #1F2933
}

.page-root .pos-stars {
   display: flex;
   gap: 3px;
   font-size: 15px;
   line-height: 17px;
   color: #F5A524
}

.page-root .pos-stars i {
   font-style: normal;
   opacity: .55;
   transform: scale(.9)
}

.page-root .pos-send.is-delivered .pos-stars i {
   animation: posStar 620ms var(--e) both;
   animation-delay: calc(var(--i) * 110ms)
}

@keyframes posStar {
   0% {
      opacity: .4;
      transform: scale(.7)
   }

   60% {
      opacity: 1;
      transform: scale(1.2)
   }

   100% {
      opacity: 1;
      transform: scale(1)
   }
}

.page-root .pos-bubble .pos-link {
   font-weight: 500;
   color: #027EB5;
   text-decoration: underline;
   text-underline-offset: 2px;
   word-break: break-all
}

@media (max-width: 599.98px) {
   .page-root .pos-mobile .pos-bubble .pos-bubble-rate {
      font-size: 10px;
      line-height: 13px
   }

   .page-root .pos-mobile .pos-stars {
      font-size: 14px
   }
}

/* ---- v5: black action buttons, one pastel for all four categories, black (+) buttons ---- */
.page-root .pos-pane {
   --pos-ink: #111111;
   --pos-cat: #E8F1F9
}

/* checkout / payment buttons: solid black, white text and icons */
.page-root .pos-pay-btn,
.page-root .pos-mbtn,
.page-root .pos-mbtn-light,
.page-root .pos-coupon-apply {
   background: var(--pos-ink);
   color: #fff;
   box-shadow: none
}

.page-root .pos-pay-btn svg,
.page-root .pos-mbtn svg {
   color: #fff;
   stroke: #fff
}

.page-root .pos-pay-btn.is-press,
.page-root .pos-mbtn.is-press,
.page-root .pos-coupon-apply.is-press {
   box-shadow: 0 0 0 3px rgba(17, 17, 17, .22)
}

.page-root .pos-pay.is-glow {
   background: rgba(17, 17, 17, .05);
   box-shadow: 0 0 0 2px rgba(17, 17, 17, .4), 0 10px 28px rgba(17, 17, 17, .14)
}

.page-root .pos-mactions.is-glow {
   box-shadow: 0 0 0 4px rgba(17, 17, 17, .16)
}

/* product "+" buttons: black with a white plus */
.page-root .pos-add {
   background: var(--pos-ink);
   color: #fff
}

.page-root .pos-add svg {
   stroke: #fff
}

/* the four categories share one light pastel */
.page-root .pos-tree-group {
   --g: var(--pos-cat)
}

.page-root .pos-tree-head {
   background: var(--pos-cat);
   color: #1B232C
}

.page-root .pos-tree-head b {
   color: #1B232C
}

.page-root .pos-tree-ico,
.page-root .pos-tree-head i.pos-tree-ico {
   background: var(--pos-ink) !important;
   color: #fff
}

.page-root .pos-mchip,
.page-root .pos-mchip.is-on {
   background: var(--pos-cat);
   color: #1B232C;
   box-shadow: none
}

.page-root .pos-mchip.is-on {
   box-shadow: inset 0 0 0 1.5px var(--pos-ink)
}

.page-root .pos-mchip svg {
   color: #1B232C
}

/* phone: show the Point of Sale tab next to Dashboard / vina so the demo can open it */
@media (max-width: 599.98px) {
   .page-root .hero-dashboard .dashboard-nav-item[data-h2="np"] {
      display: flex !important
   }

   .page-root .hero-dashboard .dashboard-nav-item[data-h2="np"] .dashboard-nav-chevron {
      display: none
   }
}
/* hero floating cards: compact sizes so they fit beside the dashboard (set by pop() in the JS) */
.page-root .hero-flying-cards[data-size] .hero-fly-card,
.page-root .hero-flying-cards[data-size] .hero-fly-card-inner {
   width: auto !important;
   --r-height: 56px;
   --r-padding: 0 8px;
   --r-gap: 10px;
}

.page-root .hero-flying-cards[data-size="icon"] .hero-fly-card,
.page-root .hero-flying-cards[data-size="icon"] .hero-fly-card-inner {
   --r-height: 52px;
}

.page-root .hero-flying-cards[data-size] .hero-fly-card-inner i{
   display: none !important
}

.page-root .hero-flying-cards[data-size="title"] .hero-fly-card-inner b {
   font-size: 15px !important;
   overflow: hidden;
   text-overflow: ellipsis
}
/* hero trust bar: show the card together with its items (no empty box while the page is loading) */
.page-root .trust-grid {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 600ms var(--e), transform 600ms var(--e)
}

.page-root .trust-grid.is-visible {
   opacity: 1;
   transform: none
}
/* floating header: dock the bar to the top edge (fills the 16px gap above it, no line across its top) */
.page-root .nav-bar.is-floating,
.page-root .nav-bar.is-menu-open {
   border-top-color: #FFFFFF;
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
   box-shadow: 0 12px 12px -8px rgba(46, 46, 46, .10)   /* shadow only below and at the sides, nothing above the bar */
}

.page-root .nav-bar.is-floating::before,
.page-root .nav-bar.is-menu-open::before {
   content: "";
   position: absolute;
   z-index: -1;
   left: -1px;
   right: -1px;
   top: -17px;
   height: 40px;
   box-sizing: border-box;
   background: #FFFFFF;
   border-left: 1px solid #E4E8ED;
   border-right: 1px solid #E4E8ED
}
video{
   position: relative;
   &::after {
      position: absolute;
      height: 100%;
      width: 50px;
      content: '';
      right: 0px;
      bottom: 0px;
      background: var(--white);
   }
}
/* Solutions image column: stacked videos, cross-fade, no sliding */
.page-root .solutions-block-5,
.page-root .solution-grid-view {
   isolation: isolate;
   clip-path: inset(0 round 10px);   /* hard clip: no leaks at the rounded corners */
}
.page-root .solution-grid-view { clip-path: inset(0 round 12px); }

.page-root [data-js~="sol-strip"] {
   position: absolute !important;
   inset: 0;
   height: 100% !important;          /* was 700% */
   transform: none !important;
   transition: none !important;
   will-change: auto !important;
   backface-visibility: visible !important;
}

.page-root [data-js~="sol-strip"] > video {
   position: absolute !important;
   inset: 0;
   width: 100% !important;
   height: 100% !important;          /* was 14.2857% */
   box-sizing: border-box;
   opacity: 0;
   transition: opacity 450ms var(--e);
   will-change: auto !important;
   backface-visibility: visible !important;
}
.page-root [data-js~="sol-strip"] > video.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
   .page-root [data-js~="sol-strip"] > video { transition: none; }
}
/* Mobile / tablet menu: fit inside the screen and scroll inside the panel */
@media (max-width: 1023.98px) {
   .page-root .mobile-menu-panel {
      max-height: calc(100vh - 112px) !important;      /* fallback */
      max-height: calc(100dvh - 112px) !important;     /* real visible height on phones */
      overflow-y: auto;
      overscroll-behavior: contain;                     /* don't scroll the page behind */
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
   }

   .page-root .mobile-menu-panel::-webkit-scrollbar { display: none; }
}
.page-root .erp-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  height: 0; /* Prevent hidden panels from occupying vertical space */
  overflow: hidden;
  transition: opacity 420ms linear, visibility 0s linear 420ms;
}

.page-root .erp-panel.is-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  height: auto; /* Let active panel scale naturally */
  overflow: visible;
  transition: opacity 420ms linear;
}