/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:  relative;
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Landscape mobile (≤767px): 2rem × 2 = 4rem */
@media (max-width: 767px) {
  .container {
    max-width: calc(100% - 4rem);
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1360px + 96px);   /* 1360px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }

  .container-wide > * {
    margin-left:  -1rem;
    width:        calc(100% + 2rem) !important;
  }
}


/* ============================================================
   Shared homepage section patterns
   Import in any section component that uses the sticky badge rail.

   Provides: .hp-section shell, .hp-rail sticky rail,
   .hp-badge pill, .hp-heading, .hp-body
   ============================================================ */


/* ---- Section shell ----------------------------------------
   Background-color is intentionally omitted — each section
   sets its own via a single-rule override. */

.hp-section {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4rem;      /* 64px */
  padding:        8rem 0;   /* 128px top + bottom */
  font-family:    var(--font-family-default);
  width:          100%;
  box-sizing:     border-box;
}

/* Tablet (≤991px) */
@media (max-width: 991px) {
  .hp-section {
    padding: 6rem 0;
    gap:     3rem;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .hp-section {
    padding: 4rem 0;
    gap:     2rem;
  }
}


/* ---- Sticky badge rail ------------------------------------
   Absolutely positioned inside the first .container, pushed
   left via right: 100%.  .container has position: relative so
   the rail is bounded to the container's height — badge stops
   when the container ends.
   Width = gutter between container (1024px) and container-wide
   (1360px): (1360 − 1024) / 2 = 168px.
   Shown only at ≥1488px — when the gutter is a fixed, predictable size. */

.hp-rail {
  display:        none;
  position:       absolute;
  right:          100%;
  top:            0;
  bottom:         0;
  width:          calc((1360px - 1024px) / 2);   /* 168px */
  pointer-events: none;
}

.hp-rail__sticky {
  position:        sticky;
  top:             8rem;
  display:         flex;
  justify-content: flex-end;
  align-items:     flex-start;
  padding-right:   12px;   /* 12px gap from the container's left edge */
}

@media (min-width: 1488px) {
  .hp-rail {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-start;
  }
}


/* ---- Badge pill -------------------------------------------
   Base pill used in the sticky rail and as the inline badge.
   .hp-badge--inline controls visibility relative to breakpoint. */

.hp-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  height:          26px;
  padding:         0 var(--spacing-3);
  background:      var(--card);
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
  white-space:     nowrap;
}

/* Inline variant — shown below 1488px, hidden at and above
   (matches the rail breakpoint so there is never a gap where
   neither badge is shown) */
.hp-badge--inline {
  margin-bottom: var(--spacing-6);
}

@media (min-width: 1488px) {
  .hp-badge--inline {
    display: none;
  }
}

@media (max-width: 767px) {
  .hp-badge--inline {
    margin-bottom: 1rem;
  }
}

/* Live indicator dot (DemoSection "Live demo" badge) */
.hp-badge__dot {
  display:          block;
  width:            6px;
  height:           6px;
  border-radius:    var(--radius-full);
  background-color: var(--primary);
  flex-shrink:      0;
}


/* ---- Section heading --------------------------------------
   36px regular weight; <strong> inside uses bold. */

.hp-heading {
  margin:      0;
  font-size:   2.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 2.5rem;
  color:       var(--foreground);
}

.hp-heading strong {
  font-weight: var(--font-weight-bold);
}


/* ---- Section body text ------------------------------------
   20px regular — used in header intro blocks. */

.hp-body {
  margin:      0;
  font-size:   1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.hp-body strong {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 767px) {
  .hp-heading {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  .hp-body {
    font-size:   1.125rem;  /* 18px */
    line-height: 1.75rem;   /* 28px */
  }
}


/* ---- Shared card shell ------------------------------------
   Secondary background + hairline border + 12px radius.
   Use alongside component class for layout-specific rules. */

.card-secondary {
  background:    var(--secondary);
  border:        0.5px solid var(--border);
  border-radius: 12px;
  box-sizing:    border-box;
}


/* ---- 26px number pill -------------------------------------
   Circular badge used for step numbers.
   Color (background) set per-component. */

.num-pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  color:           var(--foreground);
}


/* ---- Card typography --------------------------------------
   Base/bold title and base/regular muted body.
   Color overrides applied per-component as needed. */

.card-title {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.card-body {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}

.workforce-section__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  margin-bottom: 64px;
}

.workforce-section__heading {
  max-width: 800px;
}

.social-proof__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);   /* 24px between tagline and ratings */
  width:          100%;
  margin-bottom: 64px;
}


/* ============================================================
   Tagline
   ============================================================ */

.social-proof__tagline {
  margin:      0;
  font-size:   var(--font-size-base);   /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base); /* 24px */
  color:       var(--foreground);
}

.social-proof__tagline strong {
  font-weight: var(--font-weight-bold);
}


/* ============================================================
   Rating badges — 4-column grid
   ============================================================ */

.social-proof__ratings {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:        1fr;
  gap:                   12px;
}

.social-proof__rating {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-3);
  padding:         1.5rem;
  background:      var(--secondary);
  border:          0.5px solid var(--border);
  border-radius:   1.5rem;             /* 24px */
  box-sizing:      border-box;
  min-width:       0;
}

/* Platform logo slot — fixed to width of the widest logo (64px = Capterra/Trustpilot)
   so stars + score start at the same horizontal position across all 4 cards */
.social-proof__rating-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  width:       64px;
}

/* Stars + score row */
.social-proof__rating-meta {
  display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;

}

.social-proof__rating-stars {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items:           center;
  gap:                   4.16%;   /* = 4/96 — always 25% of each star's width */
  color:                 var(--primary);
  flex:                  1 1 0;
  max-width:             96px;    /* 5×16px + 4×4px — stars start at 16px, shrink only if needed */
}

.social-proof__star {
  display:      block;
  min-width:    0;
  width:        100%;
  height:       auto;   /* lets height scale with width; overrides the SVG height="16" attribute */
  aspect-ratio: 1;
}

.social-proof__rating-score {
  font-size:   var(--font-size-xs);    /* 12px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);  /* 16px */
  color:       var(--muted-foreground);
  width: 1.25rem;                  /* holds any X.X value; aligns score across cards */
  text-align:  center;
}

/* ---- Platform logo sub-styles ---- */

.social-proof__brand-wordmark {
  font-size:   1rem;                   /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color:       var(--foreground);
  white-space: nowrap;
}

.social-proof__brand-img {
  display:    block;
  width:      auto;
  max-width:  100%;        /* never exceed the 64px slot */
  height:     auto;
  max-height: 100%;        /* cap at Figma's ~14–16px logo height */
  object-fit: contain;
}

.social-proof__brand-combo {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--font-size-sm);    /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color:       var(--foreground);
  white-space: nowrap;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.4s ease;
}

.slide {
  min-width: 100%;
  display: flex;
  gap: 20px;
}
.review-card {
    padding: 36px;
    border-radius: 24px;
}

.review-card .header-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
}

.review-card .stars {
  max-width: 96px;
  display: flex;
  align-items: center;
  color: #C64110;
}

.review-card .slider-content {
    font-size: 24px;
    font-weight: 300;
    color: #282825;
    line-height: 32px;
    margin-bottom: 36px;
}

.review-card strong {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #282825;
    line-height: 24px;
}

.review-card span {
    color: #85857A;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.review-card {
  background: #fff;
  width: 100%;
}

/* Arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
}

.arrow.left { left: 10px; }
.arrow.right { right: 10px; }


.slider {
  display: flex;
  align-items: center;
  position: relative;
}

.cards {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow: hidden;
}

.card {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  width: 400px;
  transition: 0.3s;
  opacity: 0.5;
}

.card.active {
  opacity: 1;
}

.card.next {
  opacity: 0.7;
}

.nav {
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
}

.dots {
  margin-top: 20px;
  text-align: center;
}

.slick-slide {
  padding: 0 10px !important;
}

.slick-slider{
  overflow: visible;
}

.slick-next {
  right: -70px !important;
  background: url(https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69ebc0b4b9f01913791c66db_rightArrow.png) no-repeat !important;
  width: 40px !important;
  height: 40px !important;
}

.slick-prev {
  left: -70px !important;
  background: url(https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69ebc0b4b9f01913791c66db_rightArrow.png) no-repeat !important;
  width: 40px !important;
  height: 40px !important;
  transform: rotate(180deg) !important;
  top: 46.5% !important;
}

.slick-next:before,
.slick-prev:before{
  display: none !important;
}

.slick-dots{
  bottom: -50px !important;
}
.slick-dots li {
  height: 12px !important;
  width: 12px !important;
  padding: 0px !important;
  margin: 0px 4px !important;
}

.slick-dots li button {
    display: block;
    width: 12px !important;
    height: 12px !important;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    font-size: 0 !important;
    line-height: 0 !important;
    outline: none;
    background: #D6CFC2 !important;
    border-radius: 50%;
}

.slick-dots li.slick-active button{
    background: #C64110 !important;
}
.slick-dots li button:before {
  display: none !important;
}


@media (max-width: 991px) {
  .social-proof__ratings {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* ============================================================
   Portrait mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .social-proof__rating {
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: space-between;
    height:          auto;
    gap:             var(--spacing-4);
    padding-bottom:  2rem;
  }

  .social-proof__rating-meta {
    justify-content: flex-start;
    flex:            unset;
  }
  .social-proof__rating-logo{
    flex-grow: 1;
  }
  .review-card .slider-content {
    font-size: 18px;
    line-height: 24px;
  }
  .slick-dots li {
    height: 8px !important;
    width: 8px !important;
    padding: 0px !important;
    margin: 0px 2px !important;
  }

  .slick-dots li button {
    width: 5px !important;
    height: 5px !important;
    padding: 2px !important;
  }
  .container {
    max-width: calc(100% - 2rem);
  }
  .review-card{
    padding: 24px;
    border-radius: 12px;
  }
}


/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(https://code-components.website-files.com/6a01b0b517ef6239f328f4d3%2Fmodule%2Ffb6f3c230cb846e25247-ajax-loader.gif) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(https://code-components.website-files.com/6a01b0b517ef6239f328f4d3%2Fmodule%2Fa4e97f5a2a64f0ab1323-slick.eot);
    src: url(https://code-components.website-files.com/6a01b0b517ef6239f328f4d3%2Fmodule%2Fa4e97f5a2a64f0ab1323-slick.eot?#iefix) format('embedded-opentype'), url(https://code-components.website-files.com/6a01b0b517ef6239f328f4d3%2Fmodule%2F295183786cd8a1389865-slick.woff) format('woff'), url(https://code-components.website-files.com/6a01b0b517ef6239f328f4d3%2Fmodule%2Fc94f7671dcc99dce43e2-slick.ttf) format('truetype'), url(https://code-components.website-files.com/6a01b0b517ef6239f328f4d3%2Fmodule%2F2630a3e3eab21c607e21-slick.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}