/* Styles added on top of Webflow's shared stylesheet (public/css/webflow.css). */

/* Announcement banner, formerly a Webflow code component (Tailwind in a shadow root). */
.announcement-banner { display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; padding: 12px 24px; background-color: var(--deep-green); font-family: "Work Sans", sans-serif; }
.announcement-banner__badge { flex-shrink: 0; padding: 4px 10px; font-family: Syne, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; background-color: var(--poppy-coral); color: var(--deep-green); }
.announcement-banner__message { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 14px; line-height: 1.625; color: var(--pure-white); }
.announcement-banner__link { flex-shrink: 0; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 600; color: var(--poppy-coral); text-decoration: none; transition: opacity 0.2s; touch-action: manipulation; }
.announcement-banner__link:hover { opacity: 0.7; }
@media (max-width: 768px) { .announcement-banner { gap: 8px; padding: 10px 16px; } }
@media (max-width: 480px) { .announcement-banner { flex-direction: column; } .announcement-banner__message { white-space: normal; } }

/* Site-wide CSS from the Webflow "global styles" embed, carried verbatim. */
.hero-header_gradient {
	background: linear-gradient(188.61deg, #1AC5A6 18.88%, rgba(148, 236, 220, 0) 65.82%, rgba(169, 243, 230, 0) 90.66%);
}

.platform-header {
	background: linear-gradient(176.61deg, #1AC5A6 18.88%, rgba(148, 236, 220, 0) 79.82%, rgba(169, 243, 230, 0) 90.66%);
}

.feature_image-ellipse.is-green {
	background: radial-gradient(60.95% 60.95% at 49.93% 50.07%, rgba(24, 205, 172, 0.5) 0%, rgba(24, 205, 172, 0) 75%);
}

.feature_image-ellipse.is-pink {
	background: radial-gradient(60.95% 60.95% at 49.93% 50.07%, rgba(248, 101, 151, 0.4) 0%, rgba(248, 101, 151, 0) 75%);
}

.feature_image-ellipse.is-red {
	background: radial-gradient(60.95% 60.95% at 49.93% 50.07%, rgba(255, 75, 85, 0.4) 0%, rgba(255, 75, 85, 0) 75%);
}

.feature_image-ellipse.is-darkgreen {
	background: radial-gradient(60.95% 60.95% at 49.93% 50.07%, rgba(24, 170, 156, 0.8) 0%, rgba(24, 170, 156, 0) 75%);
}


.difference_card {
box-shadow: 0px 0px 38.272422790527344px 0px #333F5829;}
  
  .gradient-coral { background-color: #F8655E;background: linear-gradient(180deg, #F8655E 0%, #F86597 100%); }
  .gradient-green-invert { background-color: #18CDAC;background: linear-gradient(90deg, #18CDAC 0%, #18AA9C 100%); }
  .gradient-white { background-color: #FFFFFF;background: linear-gradient(180deg, #FFFFFF 0%, #E9E1D2 100%); }
  
  .gradient-green { background-color: #18AA9C;background: linear-gradient(180deg, #18AA9C 0%, #18CDAC 100%); }
  .gradient-green-central { background-color: #18AA9C;background: linear-gradient(90deg, #18AA9C 0%, #18CDAC 50%, #18AA9C 100%); }
  
  .uc-card { box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1); }  
  .navbar__shadow { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11); }
  
  .be__tabs {white-space: nowrap;}
  
  * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
  

  .be--tabs__circle.be--tabs__circle--green.be--tabs__circle--green-abs:after {
  	position: absolute;
    content: "";
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    border: solid 1px #18cdac;
    border-radius: 50%;
  }
  
  .w-slider-dot {
  	width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #D9D9D9 !important;
    margin-right: 6px !important;
    margin-left: 6px !important;
  }
  
  .w-slider-dot.w-active {
  	background: #F7655E !important;
  }
  
  
 .growth_card {
 	box-shadow: 0px 0px 38.2724px rgba(51, 63, 88, 0.16);
 }
 
 .growth_card.is-large {
 	box-shadow: 0px 0px 32px rgba(51, 63, 88, 0.06);
 }
 
 .leaders_container {
 	box-shadow: 0px 0px 38.2724px rgba(51, 63, 88, 0.16);
 }
 
 .leaders_mobile-slider {
 	box-shadow: 0px 0px 38.2724px rgba(51, 63, 88, 0.16);
 }
 
 .home_testimonial {
 	box-shadow: 0px 0px 38.2724px rgba(51, 63, 88, 0.16);
 }
 
 .success-story_content {
 	background: linear-gradient(182.56deg, rgba(255, 255, 255, 0) 5%, rgba(0, 138, 113, 0.37) 93.72%);
 }
 
.ss_description-card {
 	box-shadow: 0px 0px 32px rgba(51, 63, 88, 0.06);
 }
 
 .success-story_content .success-story_numbers-card {
 	box-shadow: 0px 0px 32px rgba(51, 63, 88, 0.06);
 }
 
 .use-case_solutions_card {
 	box-shadow: 0px 0px 32px rgba(51, 63, 88, 0.06);
 }
 
 .feature_image_overlay {
 	background: linear-gradient(180deg, #F7655E 0%, rgba(247, 101, 94, 0) 100%);
 }
 
 .content_table,
 .clients_content_card, 
 .filter_card {
 	box-shadow: 0px 0px 32px rgba(51, 63, 88, 0.06);
 }

/* == core pages == */
/* Live code component: Tailwind's border-b had no border-style in its shadow root, so no underline showed. */
.announcement-banner__link { border-bottom-style: none; line-height: 20px; }
/* Webflow site-wide head embed (was an inline <style> in layout.tsx). */
#hubspot-messages-iframe-container {z-index: 201!important;}
a:focus, button:focus, input:focus, textarea:focus, *:focus { outline: none !important; }
a { -webkit-touch-callout: none!important; -webkit-user-select: none!important; -moz-user-select: none!important; -ms-user-select: none!important; }

/* == cms == */
/* /resources pagination: current page (webflow.js strips w--current, see
   src/components/cms/resources-browser.tsx). */
.page-button[data-current] {
  background-color: var(--tan-hide);
  color: var(--pure-white);
  padding-left: 12px;
  padding-right: 12px;
}
/* Phone overflow (Webflow bugs, also on the live site): the article TOC bar
   is 100vw wide inside a padded container, and the featured /resources
   image keeps its 400px max-width in a narrower column. */
@media screen and (max-width: 479px) {
  .content_table { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .resource-feature-post { grid-template-columns: minmax(0, 1fr); }
  .rfp_image { max-width: 100%; }
}
/* Home flip cards (.grid-12): three fixed 350px cards overflowed the page
   horizontally between 480px and ~1200px on Webflow too. */
@media screen and (min-width: 480px) and (max-width: 1199px) {
  .grid-12 { margin-left: 24px; margin-right: 24px; }
  .grid-12 .flip-wrapper { width: auto; min-width: 0; }
  .grid-12 .flip-wrapper img { max-width: 100%; height: auto; }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  .grid-12 { grid-template-columns: 1fr; justify-items: center; }
  .grid-12 .flip-wrapper { width: 350px; max-width: 100%; }
}
/* Home growth stats (.grid-6): three columns overflowed between 480px and 767px. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .grid-6 { grid-template-columns: 1fr; }
}
/* Home key figures (.grid-14, five columns) and the cookie banner text
   (margin-right in a column layout) overflowed between 480px and 767px. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .grid-14 { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; margin: 24px; }
  .fs-cc-banner_text { margin-right: 0; }
}
/* Home hero image (.image-4, max-width: 150%) overflowed the page between
   992px and ~1200px; clipping at the hero keeps it looking the same. */
.hero-header-v2 { overflow-x: clip; }

/* == integration fixes == */
/* Success-story header: its decorative flow asset is positioned past the
   right edge and made every story scroll sideways (1860px wide at 1440). */
.success-story_header { overflow-x: clip; }
/* Announcement strip as the navbar's first row (home). The navbar's own top
   padding moves below the strip, and the hero spacer grows by the strip's
   height so the hero content keeps its distance from the navbar. */
.navbar.navbar--announcement { padding-top: 0; }
.navbar--announcement .announcement-banner { margin-bottom: 24px; }
.navbar--announcement .navbar__shadow { top: 0; }
/* Phones: one compact row (badge, message on up to 2 lines, link). */
@media (max-width: 767px) {
  .navbar--announcement .announcement-banner { flex-direction: row; gap: 10px; padding: 8px 16px; margin-bottom: 16px; }
  .navbar--announcement .announcement-banner__badge { font-size: 10px; padding: 3px 6px; }
  .navbar--announcement .announcement-banner__message { white-space: normal; text-align: left; font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .navbar--announcement .announcement-banner__link { font-size: 12px; }
}
/* Once scrolled, Webflow's interaction lifts the navbar by 12px
   (inline transform translate3d(0, -12px, 0)); push the strip back down so
   it isn't cut off. */
.navbar--announcement[style*="0px, -12px"] .announcement-banner { margin-top: 12px; }
/* Spacer under the fixed navbar: Webflow grew it to 294-302px on phones for
   a ~84px navbar, leaving a large empty band above every hero. Sized to the
   navbar (with the announcement strip) plus a small gap. */
@media screen and (max-width: 991px) { .header__navbar-placeholder { height: 160px; } }
@media screen and (max-width: 767px) { .header__navbar-placeholder { height: 140px; } }
/* Link was coral, like the badge; white with a coral underline stands out from both. */
.announcement-banner__link { color: var(--pure-white); border-bottom: 2px solid var(--poppy-coral); }
.announcement-banner__link::after { content: " →"; }