/* Global buttons remove border */
.button.button-primary {
  box-shadow: none;
}

/* smooth transition on button border */
.button {
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
  -webkit-transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* secondary button inverted ink text */
.inverse .button.button-primary {
  --button-color: var(--color-ink);
}

/*Layout Container*/
div#products-grid-1,
div#products-grid-2 {
  /* remove gap to make grid */
  --grid-gap: 0rem;

  /* Add transition to default state so it also applies when hover is removed */
  .layout-column {
    transition: background-color 0.18s ease-in-out;
    /* set gap 2.4rem inner card content*/
    gap: 2.4rem;
  }

  /*Hover effect*/
  .layout-column:hover {
    background-color: #232b45;
    /* color gray-800 */
  }

  /* Remove delayed hover effect on children */
  .layout-column:hover *:not(.button) {
    background-color: transparent !important;
  }

  /* Disable hover button */
  a:hover .button {
    --button-background: var(--color-blue-60);
    --button-border: var(--color-blue-60);
  }

  /* Layout container grid color */
  .layout-container.stroke {
    border: 2px solid #232b45;
  }

  /* Improve focus:visible outline */
  >a:focus-visible {
    outline: 0.2rem dotted rgb(var(--color-white));
    outline-offset: 0.1rem;
    z-index: 2;
  }

  .button.button-primary:focus-visible,
  a:focus-visible .button.button-primary {
    --button-background: var(--color-blue-60);
    --button-border: var(--color-blue-60);
  }

  a:nth-of-type(6) .button.button-primary {
    --button-background: var(--color-white);
    --button-border: var(--color-white);
  }
}

div#products-grid-1 {

  /* Remove bottom border*/
  .layout-column:nth-child(1),
  .layout-column:nth-child(2),
  .layout-column:nth-child(3) {
    .layout-container.stroke {
      border-bottom: none;
    }
  }

  /* Styling just for last card of second grid */
  /* Remove bottom border*/
  .layout-column:nth-child(4),
  .layout-column:nth-child(5) {
    .layout-container.stroke {
      border-bottom: none;
    }
  }

  .layout-column:nth-child(6):hover .button {
    /* Disable hover button */
    --button-background: var(--color-white);
    --button-border: var(--color-white);
    --button-color: var(--color-ink);
  }

  /* Custom card black/red gradient class for last products grid card */
  .card-gradient {
    position: relative;
    background:
      linear-gradient(188deg,
        rgba(0, 0, 0, 0) 3.88%,
        rgba(0, 0, 0, 0.85) 76.43%),
      var(--bg-image) lightgray 50% / cover no-repeat !important;
    z-index: 1;
  }

  .card-gradient:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
      linear-gradient(199deg,
        rgba(0, 0, 0, 0) 14.32%,
        rgba(219, 19, 42, 0.85) 89.78%),
      var(--bg-image) lightgray 50% / cover no-repeat !important;
    z-index: -1;
    transition: opacity 0.18s linear;
    opacity: 0;
  }

  .card-gradient:hover::before {
    opacity: 1;
  }
}

/* Desktop styles */
@media screen and (min-width: 768px) {

  /* Homepage typography WEBX-2774 */
  #home-hero h1 {
    line-height: 6.6rem;
    font-size: 5.6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  div#products-grid-1 {

    /* Remove right border for the first and second column */
    .layout-column:nth-child(1),
    .layout-column:nth-child(2) {
      .layout-container.stroke {
        border-right: none;
      }
    }

    /* Remove right and left border for the first and third column */
    .layout-column:nth-child(4),
    .layout-column:nth-child(5) {
      .layout-container.stroke {
        border-right: none;
        border-bottom: 2px solid #232b45;
      }
    }

    .layout-column:nth-child(5) {
      .layout-container.stroke {
        border-bottom: 2px solid #232b45;
      }
    }
  }

  #we-believe-in {
    .button-text {
      color: rgb(var(--color-gray-850));
    }
  }
}

/* Hide logo list */
#ready-set-code .logo-list {
  display: none;
}

:root {
  /* H1 56px */
  --font-title-extra-large: var(--font-size-100);
  /* H2 40px */
  --font-title-medium: var(--font-size-80);
  /* h3 title-small 28px */
  --font-title-small: var(--font-size-68);
  /* h4 title-extra-small 18px */
  --font-title-extra-small: var(--font-size-50);
}

/* Full width */
body {
  margin: 0;
  max-width: 100vw;
}

.navigation-v2 {
  margin-inline: 0;
  max-width: 100vw;
}

.navigation-v2__overlay {
  max-width: none;
  margin-inline: auto;
}

.navigation-v2__main {
  .navigation-v2__container {
    max-width: 160rem;
    margin-inline: auto;
  }
}

.global-header {
  max-width: 100vw;

  .navigation-v2__topnav {
    .navigation-v2__container {
      @media (min-width: 1600px) {
        width: calc(160rem - 2 * 2.3rem);
        margin: 0 auto;
      }
    }
  }
}

.h2-style {
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  font-size: var(--font-title-medium);
  letter-spacing: -0.02em;
}

.h3-style {
  line-height: var(--line-height-extra-small);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  font-size: var(--font-title-small);
  line-height: 3.6rem;
}

/* Freedom for builders section left align */
#freedom-for-builders {
  h2 {
    text-align: left;
  }

  padding-inline: 0rem;

  .layout-column:first-child {
    .layout-container {
      height: 100%;
    }
  }

  figure.media {
    height: 100%;

    .media-image img {
      height: 100%;
      object-fit: cover;
      object-position: right;
    }
  }
}

#freedom-for-builders-copy {
  padding-right: 3rem;
}

#where-innovation {

  /* black gradient */
  .layout-column:has(.card-gradient) {
    background: rgb(var(--color-gray-850));

    /* black gradient */
    .card-gradient {
      background:
        linear-gradient(188deg,
          rgba(0, 0, 0, 0) 3.88%,
          rgba(0, 0, 0, 0.85) 76.43%),
        var(--bg-image) 50% / cover no-repeat !important;
      padding-right: 15rem;
    }
  }

  @media screen and (max-width: 991px) {
    #stats-container {
      padding: 2.4rem;
    }

    #chip-container {
      padding-inline: 2.4rem;
    }
  }
}

@media screen and (max-width: 991px) {
  #testimonial-banner {
    padding-top: 6.4rem;
  }

  #where-innovation {
    padding-bottom: 6.4rem;
  }

  #where-innovation-header {
    padding-bottom: 3.2rem;
  }
}

/* Where innovation header gap 12px */
#where-innovation-header {
  .layout-column {
    gap: 1.2rem;
  }
}

.proof-description {
  margin: 0rem;
}

/* Slider Customer logos force height to avoid losing 1px bottom  */
.slider-button svg {
  height: 4rem;
}

/* Because average experiences section cards personalization */
#because-average {
  .layout-column {
    gap: 1.6rem;
  }

  .layout-container {
    --grid-gap: 1.6rem;
    row-gap: 1.6rem;

    .layout-container {
      padding-inline: 2.4rem;
      padding-block: 2.4rem;
    }
  }
}

/* We believe cards hover effect */
#we-believe-in {
  /* Create space for focus:visible outline */
  padding-inline: 0.4rem;
  max-width: 120.8rem;

  @media (min-width: 768px) {
    --repeat-value: 1;
    --grid-columns: var(--grid-repeat);
  }

  @media (min-width: 992px) {
    --repeat-value: 3;
    --grid-columns: var(--grid-repeat);
  }

  /* Add transition to default state so it also applies when hover is removed */
  .layout-column .layout-container {
    transition: background-color 0.18s ease-in-out;
  }

  .button-text {
    transition: color 0.18s ease-in-out;
  }

  /* adding hover on card */
  .layout-column:hover {
    .layout-container {
      background-color: #ef213a;
    }

    /* show text on hover */
    .button-text {
      color: rgb(var(--button-color));
    }
  }

  /* Remove delayed hover effect on children */
  .layout-column:hover *:not(.layout-container:first-child) {
    background-color: transparent !important;
  }

  /* Make arrow bigger */
  .button-icon {
    width: 3.2rem;
    height: 3.2rem;
    color: rgb(var(--button-color));
  }

  /* Disappear border */
  .button {
    border: none;
    box-shadow: none;
    padding: 0rem;
  }

  /* Remove button background on focus-visible */
  .button[class*="button-"] {
    background-color: unset;
  }

  /* Disappear text */
  .button-text {
    font-size: var(--font-copy-large);
    font-weight: var(--font-weight-semi-bold);
  }

  /* Rounded borders */
  >a {
    border-radius: 2rem;
  }

  >a:focus-visible {
    outline: 0.2rem dotted rgb(var(--color-white));
  }
}

/* Reduce logos gap */
#customer-logos {
  .layout-column {
    gap: 2.4rem;
  }
}

/* Secondary button as primary inverted style */
#builder-is-a-mindset {
  div.tabs-slide div.button-container {
    a.button:nth-child(2) {
      background-color: unset;
      -webkit-box-shadow: inset 0 0 0 var(--border-light) rgb(var(--button-border));
      box-shadow: inset 0 0 0 var(--border-light) rgb(var(--button-border));
      --button-border: var(--color-white);
      --button-color: var(--color-white);
    }

    a.button:nth-child(2):hover {
      background-color: rgb(var(--button-background));
      --button-background: var(--color-blue-60);
      --button-border: var(--color-blue-60);
      --button-color: var(--color-white);
    }

    a.button:focus-visible {
      --button-background: var(--color-blue-70);
      --button-border: var(--color-blue-70);
      --button-color: var(--color-white);
      background-color: rgb(var(--button-background));
      --color-focus-visible: var(--color-white);
    }
  }
}

/* Tablet/mobile styles */
@media screen and (max-width: 1270px) {

  /* Add padding on hero mobile and tablet */
  #home-hero {
    padding-inline: var(--spacing-size-5);
  }

  /* Add padding on section on mobile */
  #because-average {
    padding-inline: var(--spacing-size-5);
  }
}

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

  /* Center h1 and h2 on mobile */
  #home-hero h1 {
    text-align: center;
    font-size: 3.4rem;
    line-height: 4rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  h2 {
    text-align: center;
  }

  /* Hide code snippet */
  #ready-set-code div.code-snippet {
    display: none;
  }

  /* Show logo list instead of code snippet */
  #ready-set-code .logo-list {
    display: flex;
  }

  /* Center align */
  #home-hero {
    text-align: center;

    .copy-small {
      font-size: 1.4rem;
    }
  }

  /* Add padding on section on mobile */
  #the-ultimate-toolbox {
    gap: 2.4rem;

    >.layout-column.layout-column:nth-child(1) {
      padding-inline: var(--spacing-size-5);
    }
  }

  /* Remove left/right padding on mobile    */
  #freedom-for-builders-container {
    padding-inline: 0rem;
  }

  #freedom-for-builders {
    row-gap: 3.2rem;
  }

  #freedom-for-builders-copy {
    padding: 0rem 3.2rem 3.2rem;
  }

  /* Horizontal buttons */
  #builder-is-a-mindset {

    div:nth-child(1).tabs-slide div.button-container,
    div:nth-child(2).tabs-slide div.button-container {
      flex-direction: row;
    }
  }

  /* Horizontal buttons */
  #dont-wait {
    h2 {
      text-align: left;
    }

    div.button-container {
      flex-direction: column;
    }
  }

  div#products-grid-1 {
    padding-inline: 3.2rem;
  }

  #where-innovation {

    /* left align */
    div.richtext p:nth-of-type(even) {
      margin: 0;
    }

    .layout-column:has(.card-gradient) {

      /* black gradient */
      .card-gradient {
        background:
          linear-gradient(188deg,
            rgba(0, 0, 0, 0) 3.88%,
            rgba(0, 0, 0, 0.85) 56.94%),
          var(--bg-image) 50% / cover no-repeat;
        padding-right: 3.2rem;

        /* inner content gap */
        .layout-column {
          gap: 1.6rem;
        }
      }
    }

    .layout-column:has(.chip-list) {

      /* inner content gap */
      .layout-column {
        gap: 0;
      }

      .layout-container {
        gap: 0;
      }
    }
  }

  /*  font-size on mobile */
  :root {
    /* H1 */
    --font-title-extra-large: 3.4rem;
    /* H2 */
    --font-title-medium: 2.8rem;
    /* H3 */
    --font-title-small: 2.4rem;
    /* H4 */
    --font-title-extra-small: 1.8rem;
  }
}

/* Mobile styles */
@media screen and (max-width: 480px) {
  #freedom-for-builders-copy {
    padding: 0rem 3.2rem;
  }
}