:root {
  /* Shadows */
  --shadow-color: 293deg 100% 7%;
  --shadow-sm: 0 0 0 1px hsl(var(--shadow-color) / 0.11);
  --shadow-sm-inset: inset 0 0 0 1px hsl(var(--shadow-color) / 0.11);
  --shadow-md: 0 0 0 1px hsl(var(--shadow-color) / 0.11), 0 2px 2px 0 hsl(var(--shadow-color) / 0.05);
  --shadow-input: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05);
  --shadow-card: 0 0 0 1px var(--colors-general--border), 0 2px 2px 0 hsl(var(--shadow-color) / 0.05);
  --drop-shadow-card: drop-shadow(0 0 1px var(--colors-general--border)) drop-shadow(0 2px 2px hsl(var(--shadow-color) / 0.11));
  --shadow-card-hover: 0 0 0 1px var(--colors-black--400), 0 2px 2px 0 hsl(var(--shadow-color) / 0.05);
  --shadow-overlay: 0px 0px 0px 1px hsl(var(--shadow-color) / 0.11), 0px 1px 1.5px 0px hsl(var(--shadow-color) / 0.01), 0px 2px 3px 0px hsl(var(--shadow-color) / 0.02), 0px 4px 6px 0px hsl(var(--shadow-color) / 0.03), 0px 8px 12px 0px hsl(var(--shadow-color) / 0.04), 0px 16px 24px 0px hsl(var(--shadow-color) / 0.05), 0px 24px 36px 0px hsl(var(--shadow-color) / 0.06), 0px 36px 54px 0px hsl(var(--shadow-color) / 0.07), 0px 54px 81px 0px hsl(var(--shadow-color) / 0.08);
  --shadow-highlight: 0px 1px 1.5px 0px hsl(var(--shadow-color) / 0.01), 0px 2px 3px 0px hsl(var(--shadow-color) / 0.02), 0px 4px 6px 0px hsl(var(--shadow-color) / 0.03), 0px 8px 12px 0px hsl(var(--shadow-color) / 0.04), 0px 16px 24px 0px hsl(var(--shadow-color) / 0.05),
    0px 24px 36px 0px hsl(var(--shadow-color) / 0.06),
    0px 36px 54px 0px hsl(var(--shadow-color) / 0.07),
    0px 54px 81px 0px hsl(var(--shadow-color) / 0.08);
  --shadow-btn: 0 1px 2px hsl(var(--shadow-color) / 0.05), inset 0 10px 24px -10px hsl(0deg 0% 100% / 0.4);
  /*inset 0 1px 1px hsl(0deg 0% 100% / 0.4)*/
  --shadow-app-icon: inset 0 6px 12px hsl(0deg 0% 100% / 0.2), inset 0 1px 1px hsl(0deg 0% 100% / 0.4);
  /* Gradients */
  --gradient-1: linear-gradient(145deg, hsl(340deg 100% 87%), hsl(47deg 100% 87%) 40%, hsl(47deg 100% 87%) 60%, hsl(47deg 100% 53%));
  --gradient-2: linear-gradient(135deg, hsl(47deg 100% 53%), hsl(350deg 100% 73%));
  --gradient-3: linear-gradient(145deg, hsl(47deg 100% 87%), var(--colors-black--100) 30%);
  --gradient-4: linear-gradient(180deg, transparent 30%, var(--colors-black--300));
  --gradient-webflow: linear-gradient(145deg, hsl(216deg 92% 52%), hsl(216deg 92% 92%) 50%);
  --btn-gradient: radial-gradient(100% 100% at 100% 0%, rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
}

.u-bg-black {
  --shadow-sm: 0 0 0 1px var(--colors-white--200);
}

/* Gradients */
.u-bg-gradient-1 {
  background-image: var(--gradient-1);
}

.u-bg-gradient-2 {
  background-image: var(--gradient-2);
}

.u-bg-gradient-3 {
  background-image: var(--gradient-3);
}

.u-bg-gradient-4 {
  background-image: var(--gradient-4);
}

.u-bg-gradient-webflow {
  background-image: var(--gradient-webflow);
}

/* Remove top margin on rich text first child */
.funnelz-richtext>:first-child,
.funnelz-richtext>:first-child h2,
.funnelz-richtext>:first-child p {
  margin-top: 0;
}

/* Remove bottom margin of rich text and col last child */
.funnelz-richtext>:last-child,
.funnelz-richtext ol li:last-child,
.funnelz-richtext ul li:last-child,
.col>:last-child,
.card-body>:last-child,
.u-text-center>:last-child {
  margin-bottom: 0;
}

/* Alternate gutter layout */
.row {

  &.row-no-gutters,
  &.row-no-h-gutters {
    >.col {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &.row-lg-gutters {
    >.col {
      padding-left: var(--_layout---grid--gap);
      padding-right: var(--_layout---grid--gap);
    }
  }

  &.row-sm-gutters {
    >.col {
      padding-left: calc(var(--_layout---grid--gap) / 4);
      padding-right: calc(var(--_layout---grid--gap) / 4);
    }
  }

  &.row-xs-gutters {
    >.col {
      padding-left: calc(var(--_layout---grid--gap) / 8);
      padding-right: calc(var(--_layout---grid--gap) / 8);
    }
  }
}

/* Make fonts pretty */
body {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

body {
  font-feature-settings: 'ss02', 'cv11', 'calt';
}

/* Custom text selection */
::selection {
  background-color: var(--colors-general--primary);
  color: white;
}

::-moz-selection {
  background-color: var(--colors-general--primary);
}

/* Heading styles */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-feature-settings: 'ss03';
  text-wrap: balance;

  strong {
    font-weight: inherit;
  }
}

/* Paragraph styles */
p {
  text-wrap: pretty;
}

/* Icon styles */
[class*="icon"] svg {
  display: flex;
}

/* Navbar dropdown link hover */
.navbar_dropdown-link .u-text-muted {
  transition: color .2s ease-in-out;
}

.navbar_dropdown-link:hover .u-text-muted {
  color: var(--colors-page-wrapper--text);
}

/* Blog row hover */
.blog-item-row-link {
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background-color: var(--colors-general--border);
    transition: background-color .2s ease-in-out;
  }

  &:first-child {
    &:after {
      background-color: transparent;
    }
  }

  &:hover {
    &:after {
      background-color: transparent;
    }

    +.blog-item-row-link {
      &:after {
        background-color: transparent;
      }
    }
  }
}

/* Blog image border */
.border-img-wrapper,
.funnelz-richtext figure div:not(.no-border),
.rich-text-p figure div:not(.no-border) {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--colors-general--border);
    border-radius: var(--component-card--border-radius);
  }
}

/* Hide */
.u-d-none {
  display: none;
}

/* Logo component props */
[data-logo-size="28"] {
  width: 28px;
  height: 28px;
}

[data-logo-size="40"] {
  width: 40px;
  height: 40px;
}

[data-logo-size="64"] {
  width: 64px;
  height: 64px;
}

[data-logo-size="80"] {
  width: 80px;
  height: 80px;
}

/* Font Awesome resize */
.fab,
.fa,
.fa-brands {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &::before {
    transform: scale(.8);
  }
}

/* Specificity fixes */
.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-w-auto {
  width: auto !important;
}

/* Featured icon hover */
a {
  &:hover {
    .featured-icon {
      color: var(--colors-white--1000);
      background-color: var(--colors-black--1000);
    }
  }
}

/* Card hover */
a {
  &.card {
    &:hover {
      border-color: var(--colors-black--400);
    }
  }

  &.card.cc-shadow {
    &:hover {
      box-shadow: var(--shadow-card-hover);
    }
  }
}

.card {
  &.cc-hover {
    &:hover {
      border-color: var(--colors-black--400);
    }
  }
}

.card {
  &:hover {
    .card-top-right-corner {
      &.cc-hover {
        opacity: 1;
      }
    }
  }
}

/* Weird fix to make range slider sync work on the pricing page */
.pricing_tabs {
  .w-tab-pane {
    &:not(.w--tab-active) {
      display: block;
      opacity: 0;
      height: 0;
      pointer-events: none;
    }
  }
}

/* Navbar hero spacing */
.section {
  &.cc-hero {
    .navbar_component {
      margin-bottom: 3rem;
    }
  }
}

/* Card variatons */
.card {
  &.cc-sm {
    --component-card--card-body-padding-lg: 16px;
  }
}

@media screen and (min-width: 992px) {
  .card {
    &.cc-airy {
      background-color: transparent;

      .card-body {
        padding: 48px;
      }
    }

    &.cc-large {
      --component-card--card-body-padding-lg: 32px;
    }

    &.cc-xl {
      --component-card--card-body-padding-lg: 64px;
    }
  }

  .col-lg-4:nth-of-type(3n+1) {
    .card {
      &.cc-airy {
        border-left: none;
      }
    }
  }

  .col-lg-6:nth-of-type(odd) {
    .card {
      &.cc-airy {
        border-left: none;

        .card-body {
          padding-left: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 991px) {
  .card {
    &.cc-airy {
      background-color: transparent;
      border-left: none;
      border-right: none;

      .card-body {
        padding: 24px 0;
      }
    }
  }
}

/* Chrome tab corner */
.chrome_tab-link {
  &.w--current {
    &::before {
      background-image: none;
      content: "";
      position: absolute;
      height: 1.375rem;
      width: 1.375rem;
      bottom: 0;
      left: -1.375rem;
    }

    &::after {
      background-image: none;
      transform: rotate(90deg);
      content: "";
      position: absolute;
      height: 1.375rem;
      width: 1.375rem;
      bottom: 0;
      right: -1.375rem;
    }

    &.cc-large {
      &::before {
        height: 2.875rem;
        width: 2.875rem;
        left: -2.875rem;
      }

      &::after {
        height: 2.875rem;
        width: 2.875rem;
        right: -2.875rem;
      }
    }
  }
}

.u-bg-black,
.btn.cc-dark {

  .u-text-muted,
  [data-icon-color="text-muted"] {
    color: var(--colors-white--600);
  }
}

/* Section inset inner border */
.section-inset,
.section.cc-inset {
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--colors-black--100);
    border-radius: var(--radius--x-large);
  }
}

@media screen and (max-width: 448px) {

  .section-inset,
  .section.cc-inset {
    &::after {
      border-radius: var(--radius--large);
    }
  }
}

.section.cc-inset {
  &::after {
    z-index: 1;
    pointer-events: none;
  }
}

/* Heading anchor hash component */
.anchor_component {
  &:hover {
    .anchor_link {
      opacity: 1;
    }
  }
}

/* Borders in dark sections */
.u-bg-black {
  --colors-general--border: var(--colors-white--200);
  --component-button--border-color: transparent;
}

/* Custom list markers */
.funnelz-richtext ul li {
  list-style-type: disc;
  color: var(--colors-general--primary);
}

.funnelz-richtext ul li::marker {
  color: var(--colors-general--primary);
}

/* Mobile nav z-index fix */
.w-nav-overlay {
  z-index: -1;
}

/* Link child hover */
a {
  &:hover {
    .u-link-child-hover {
      opacity: 1;
    }
  }
}

/* Parent/child hover states */
.u-hover-parent {
  &:hover {
    .u-hover-child {
      opacity: 1;

      &.cc-move-down {
        transform: translateY(1rem);
      }

      &.cc-move-up {
        transform: translateY(-1rem);
      }
    }
  }
}

.gallery_tag:last-child .gallery_tags-comma {
  display: none;
}

/* Code blocks */
pre.w-code-block code {
  all: unset;
  white-space: break-spaces !important;
}

.u-code-block pre {
  margin: 0;

  code.hljs {
    padding: 0;
  }
}

.rich-text pre {
  padding: 1.5rem !important;
}

.avatar-list_item {
  &:first-child {
    margin-right: 0;
  }
}

/* Rich text figure mods */
@media screen and (min-width: 992px) {
  .funnelz-richtext .funnelz-richtext-align-floatright {
    position: absolute;
    margin-top: 1rem;
    width: 16%;
    left: auto;
    right: 0;
    bottom: auto;
    transform: rotate(5deg);
    filter: var(--drop-shadow-card);
    border-radius: 0;
    display: flex;

    div::after {
      border: none !important;
    }
  }

  .funnelz-richtext .funnelz-richtext-align-floatleft {
    position: absolute;
    margin-top: 1rem;
    width: 16%;
    left: 0;
    right: auto;
    bottom: auto;
    transform: rotate(-5deg);
    filter: var(--drop-shadow-card);
    border-radius: 0;
    display: flex;

    div::after {
      border: none !important;
    }
  }

  .funnelz-richtext .funnelz-richtext-align-floatright img,
  .funnelz-richtext .funnelz-richtext-align-floatleft img {
    border-radius: 0;
  }
}

.funnelz-richtext figure .figure-p-2 {
  padding: 2rem !important;
}

@media (max-width: 767px) {
  [data-logo-size="28"] {
    width: 100%;
  }
}

.bento_featured-icon.cc-complete svg {
  width: 12px !important;
  height: 12px !important;
}

/* Revenue per visitor badge */
.revenue-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

.revenue-badge__content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.revenue-badge__label {
  color: var(--colors-page-wrapper--text);
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  font-weight: 500;
}

.revenue-badge__value {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--colors-general--success);
  font-weight: 600;
  font-size: 1.125rem;
  font-family: var(--fonts-general--body-font-family);
}

.revenue-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--colors-general--success);
}

.revenue-badge__icon svg {
  width: 100%;
  height: 100%;
}

/* Logo Marquee - Style défilant */
.logo-marquee {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  margin: auto;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-marquee-wrapper {
  width: 100%;
  overflow: hidden;
}

.logo-marquee-content {
  display: flex;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
  will-change: transform;
}

.logo-marquee-group {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-shrink: 0;
  min-width: 100%;
}

.logo-marquee-group:first-child {
  padding-right: 3rem;
}

.logo-marquee-group img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  max-width: 120px;
  flex-shrink: 0;
}

@keyframes logo-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 3rem));
  }
}

/* Skip link - Accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--colors-general--primary);
  color: #fff;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

html {
  scroll-behavior: smooth;
}