/* ===== 06 Works Seamlessly With Your ATS ===== */
.wh-ats {
  padding: 80px 0;
  background: var(--white);
  font-family: var(--font-sans);
  color: var(--ink-900);
}
.wh-ats__container {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.wh-ats__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 60px;
}
.wh-ats__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 780px;
}
.wh-ats__head h2 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--ink-700);
  text-align: center;
}
.wh-ats__head p {
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: var(--gray-500);
  text-align: center;
  max-width: 780px;
}
.wh-ats__tiles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.wh-ats__tile {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  border: 1px solid rgb(232, 232, 232);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}
.wh-ats__tile img {
  width: 55px;
  height: 55px;
  display: block;
}
.wh-ats__more {
  width: 100%;
  padding: 20px 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.wh-ats__more a {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--blue-600);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: 0.2s;
  cursor: pointer;
}
.wh-ats__more a svg {
  width: 24px;
  height: 24px;
  padding: 2px 0 0;
  display: block;
  overflow: hidden;
}
.wh-ats__more a:hover {
  text-decoration: underline;
  color: rgb(48, 66, 165);
}

/* ===== 07 Grow Revenue. Not Headcount. (CTA) ===== */
.wh-cta {
  padding: 80px 0 160px;
  background: var(--white);
  font-family: var(--font-sans);
}
.wh-cta__container {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.wh-cta__card {
  background-image: linear-gradient(#111418 0%, #161a20 50%, #1c2128 100%);
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  border-radius: 16px;
  border: 1px solid rgb(232, 232, 232);
  position: relative;
}
.wh-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 15px;
  overflow: hidden;
}
.wh-cta__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wh-cta__copy {
  position: relative;
  z-index: 1;
  max-width: 910px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
}
.wh-cta__copy h2 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
}
.wh-cta__copy p {
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: var(--white);
  text-align: center;
}
.wh-cta__actions {
  width: 100%;
  max-width: 1030px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.wh-cta__btn {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  color: var(--blue-600);
  background-color: var(--white);
  padding: 16px 12px;
  width: 232px;
  max-width: 232px;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-shadow: rgb(232, 232, 232) 0 0 0 1px inset;
  transition: box-shadow 0.3s;
  cursor: pointer;
  white-space: nowrap;
}
.wh-cta__btn:hover {
  box-shadow: var(--glow-hover);
}

/* ===== responsive ===== */
@media (max-width: 1180px) {
  .wh-ats__container,
  .wh-cta__container {
    padding: 0 15px;
  }
}
@media (max-width: 768px) {
  .wh-ats {
    padding: 40px 0;
  }
  .wh-ats__inner {
    gap: 40px;
  }
  .wh-ats__head h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .wh-ats__tiles {
    gap: 15px;
  }
  .wh-ats__tile {
    width: 60px;
    height: 60px;
  }
  .wh-ats__tile img {
    width: 40px;
    height: 40px;
  }
  .wh-cta {
    padding: 40px 0 80px;
  }
  .wh-cta__card {
    padding: 30px 20px;
    gap: 30px;
  }
  .wh-cta__copy h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .wh-cta__copy p {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Mobile fixes (owner review 2026-09-04): eight tiles in a 4x2 grid
   instead of a wrapping row that clipped the outer tiles; the CTA
   card's decorative circuit image is cropped to a stray arc at phone
   widths, so the gradient carries the card alone there. */
@media (max-width: 768px) {
  .wh-ats__tiles {
    display: grid;
    grid-template-columns: repeat(4, 64px);
    justify-content: center;
    gap: 14px;
  }
  .wh-ats__tile { width: 64px; height: 64px; }
  .wh-ats__tile img { width: 40px; height: 40px; }
  .wh-cta__bg img { display: none; }
}

/* Hairline grid (owner request 2026-09-08): the integrations band and
   the CTA band get the same grid as How it works, fading in from the
   tinted agents section above and out again before the footer. */
.wh-ats {
  background-image:
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 200px),
    linear-gradient(rgba(17, 20, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 20, 24, 0.035) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, repeat, repeat;
  background-color: var(--white);
}
.wh-cta {
  background-image:
    linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 160px),
    linear-gradient(rgba(17, 20, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 20, 24, 0.035) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  background-repeat: no-repeat, repeat, repeat;
  background-color: var(--white);
}

/* CTA card in ivy (owner pick A, 2026-09-09): brand green as one surface
   with a mint light in the corner and a white button. */
.wh-cta__card {
  background-image: linear-gradient(160deg, #2e6b44 0%, #3d7f56 100%);
  box-shadow: 0 30px 60px -20px rgba(46, 107, 68, .45);
}
.wh-cta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(60% 80% at 80% 0%, rgba(183, 217, 192, .28), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.wh-cta__copy, .wh-cta__actions { position: relative; z-index: 1; }
.wh-cta__bg img { display: none; }
.wh-cta__btn { background: #fff; color: #2e6b44; }
.wh-cta__btn:hover { background: #f1f7f3; color: #2e6b44; }