/* ==========================================================================
   Product — Automate technical support
   Hero (email lottie) + four alternating numbered steps (lotties) + CTA.
   Vertical offsets are measured from the 1440 / 768 / 360 screenshots; each
   lottie canvas carries transparent padding around its cards, so the art
   boxes are nudged (--ax / --ay / negative margins) to put the *cards* where
   the design has them.
   ========================================================================== */

.ats {
  /* white on the left fading to a faint lavender on the right */
  background: linear-gradient(90deg, #fff 0%, #f5f5ff 100%);
  overflow-x: clip;
}

/* ---------- Hero ---------- */
.ats-hero { padding-top: 44px; text-align: center; }
.ats-hero__inner { display: flex; flex-direction: column; align-items: center; }
.ats-hero__title { max-width: 880px; margin-top: 25px; }
.ats-hero__lead { max-width: 810px; margin-top: 18px; }
.ats-hero__cta { margin-top: 19px; }
/* 854px = the email card at ~1.2× its former 712px (client: "illustrations a bit larger") */
.ats-hero__art {
  --aw: 854px;
  width: var(--aw);
  max-width: none;
  margin: 0 calc((100% - var(--aw)) / 2);
}

/* ---------- Steps ---------- */
.ats-steps { padding: 79px 0 79px; }
.ats-steps__list { max-width: 1072px; margin-inline: auto; padding-left: 8px; }

.ats-step {
  display: grid;
  grid-template-columns: 480px 480px;
  column-gap: 104px;
  align-items: center;
  margin-top: var(--my, 0);
}
.ats-step__text { grid-column: 1; grid-row: 1; margin-top: var(--ty, 0); }
.ats-step__art {
  grid-column: 2; grid-row: 1;
  justify-self: center;
  width: var(--aw, 416px);
  max-width: none;
  margin-top: var(--ay, 0);
  translate: var(--ax, 0) 0;
}
.ats-step--flip .ats-step__text { grid-column: 2; }
.ats-step--flip .ats-step__art { grid-column: 1; }
.ats-step__float { }

/* Desktop: the step illustrations render at 1.3× their 320-unit canvas (416px; the cards'
   8-unit body text reads at ~10px) and each row centres text against art. The dashboard row
   gives the art the wider column (600px visible card = 662px canvas). */
.ats-step--2, .ats-step--3 { --my: 104px; }
.ats-step--4 { --my: 104px; grid-template-columns: 600px 408px; column-gap: 56px; --aw: 662px; }

/* Number badge */
.ats-num {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.8s var(--ease-out), transform 0.7s var(--ease-spring), box-shadow 0.6s var(--ease-out);
}
.ats-num[data-reveal="scale"] { transform: scale(0.6); }
.ats-num[data-reveal="scale"].is-in { transform: none; }
.ats-step:hover .ats-num { transform: scale(1.06); box-shadow: 0 10px 22px -10px rgba(53, 90, 240, 0.7); }

.ats-step__title {
  max-width: 480px;
  margin-top: 17px;
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.038em;
}
.ats-step__body {
  max-width: 472px;
  margin-top: 16px;
  font-size: 20px;
  line-height: 32px;
}

/* Lottie art gets a soft lift on hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .ats-step__art .lottie { transition: transform 0.8s var(--ease-out); }
  .ats-step__art:hover .lottie { transform: translateY(-6px); }
}

/* ---------- CTA band (inline: secondary button → ROI calculator) ---------- */
.ats-cta { padding: 64px 0 60px; }
.ats-cta .eyebrow { margin: 0 auto 26px; }
.ats-cta p.lead { margin: 18px auto 19px; }

/* ==========================================================================
   Tablet ≤ 1199
   ========================================================================== */
@media (max-width: 1199px) {
  .ats-hero { padding-top: 39px; }
  .ats-hero__title { max-width: 688px; margin-top: 16px; font-size: 44px; line-height: 49px; }
  .ats-hero__lead { max-width: 672px; margin-top: 13px; font-size: 16px; line-height: 22px; }
  .ats-hero__cta { width: 100%; max-width: 672px; margin-top: 16px; }
  .ats-hero__btn { width: 100%; }
  .ats-hero__art { margin-top: 0; margin-bottom: -31px; }

  .ats-steps { padding: 0 0 48px; }
  .ats-steps__list { max-width: none; padding-left: 0; }
  .ats-hero__art { --aw: min(854px, calc(100% * 1.11)); }

  /* Art gets the wider column (47/53) and its canvas is 1.13× the column, so the visible
     card spans the column (at 768: 400px canvas = 1.25×, ~10px card text); the transparent
     canvas padding bleeds 20px into the gutter. Capped at 1.5× on wide tablets. */
  .ats-step { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); column-gap: 20px; }
  .ats-step--flip { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
  .ats-step__art {
    --aw: min(calc(100% * 1.13), 480px);
    justify-self: end; translate: none; margin-right: -20px; margin-left: 0;
  }
  .ats-step--flip .ats-step__art { justify-self: start; margin-right: 0; margin-left: -20px; }

  .ats-step--2, .ats-step--3 { --my: 64px; }
  /* The dashboard stacks under its copy so it can use the full content width */
  .ats-step--4 { display: block; --my: 80px; }
  .ats-step--4 .ats-step__title, .ats-step--4 .ats-step__body { max-width: 600px; }
  .ats-step--4 .ats-step__art, .ats-step--flip.ats-step--4 .ats-step__art {
    --aw: min(calc(100% * 1.104), 840px);
    margin: 20px 0 0 calc((100% - var(--aw)) / 2);
  }

  .ats-num { width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }
  .ats-step__title { max-width: 344px; margin-top: 18px; font-size: 35px; line-height: 44px; }
  .ats-step__body { max-width: 336px; margin-top: 19px; font-size: 16px; line-height: 22px; }

  .ats-cta { padding: 39px 0 40px; }
  .ats-cta .eyebrow { margin-bottom: 16px; }
  .ats-cta h2 { max-width: 420px; font-size: 39px; line-height: 44px; }
  .ats-cta p.lead { max-width: 300px; margin: 15px auto 16px; font-size: 16px; line-height: 22px; }
  .ats-cta .btn-row { flex-direction: column; gap: 8px; }
  .ats-cta .btn { width: 100%; }
}

/* ==========================================================================
   Phone ≤ 767
   ========================================================================== */
@media (max-width: 767px) {
  .ats-hero { padding-top: 40px; }
  .ats-hero__title { max-width: 300px; margin-top: 16px; font-size: 36px; line-height: 44px; }
  .ats-hero__lead { margin-top: 16px; }
  .ats-hero__cta { max-width: none; }
  .ats-hero__art { --aw: calc(100% * 1.165); margin-top: 21px; margin-bottom: 0; }

  .ats-steps { padding: 0 0 8px; margin-top: -3px; }
  .ats-step { display: block; }
  .ats-step__text { margin-top: 0; }
  /* justify-self must be reset: Chromium honours the tablet `end`/`start` on block-level boxes
     too, which pushed steps 1 & 3 ~20px left and clipped the step-3 card at the viewport edge. */
  .ats-step__art, .ats-step--flip .ats-step__art, .ats-step--4 .ats-step__art, .ats-step--flip.ats-step--4 .ats-step__art {
    --aw: calc(100% * var(--bleed, 1.12));
    justify-self: auto;
    margin: var(--ay, 0) 0 0 calc((100% - var(--aw)) / 2);
  }
  /* bleed = canvas width / column: the visible cards now span the column plus 8px of each
     gutter (344px at 360) — as large as the phone width allows */
  .ats-step--1 { --my: 0px; --ay: 17px; --bleed: 1.171; }
  .ats-step--2 { --my: -7px; --ay: 7px; --bleed: 1.199; }
  .ats-step--3 { --my: 15px; --ay: 8px; --bleed: 1.199; }
  .ats-step--4 { --my: -20px; --ay: 16px; --bleed: 1.154; }

  .ats-num { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; }
  .ats-step__title { max-width: none; margin-top: 16px; font-size: 24px; line-height: 30px; }
  /* the design sets steps 3 & 4 in the larger display size on phone */
  .ats-step--3 .ats-step__title, .ats-step--4 .ats-step__title { font-size: 34px; line-height: 38px; }
  .ats-step--3 .ats-step__body, .ats-step--4 .ats-step__body { margin-top: 14px; }
  .ats-step__body { max-width: none; margin-top: 16px; }

  .ats-cta { padding: 40px 0 40px; }
  .ats-cta h2 { max-width: 250px; font-size: 36px; line-height: 44px; }
  .ats-cta p.lead { margin-top: 17px; }
}

/* ==========================================================================
   German (html[lang="de"]) — wrap tuning for the longer copy. EN is untouched.
   ========================================================================== */
html[lang="de"] .nobr { white-space: nowrap; }
/* step titles sit inside <li>, which inherits the shared DE running-text hyphenation —
   split-line headings must never hyphenate */
html[lang="de"] .ats-step__title { -webkit-hyphens: manual; hyphens: manual; }
/* "Die richtige Antwort," is 482px at 48px — give the title a few px of the column gap
   so the heading breaks as "Die richtige Antwort, / in Sekunden" instead of three lines. */
html[lang="de"] .ats-step--3 .ats-step__title { max-width: 500px; margin-right: -20px; }
@media (max-width: 1199px) {
  /* "Die richtige Antwort," must stay on one line in the narrower tablet text column */
  html[lang="de"] .ats-step--3 .ats-step__title { max-width: 340px; margin-right: -20px; font-size: 32px; line-height: 40px; }
}
@media (max-width: 767px) {
  html[lang="de"] .ats-step--3 .ats-step__title { max-width: none; margin-right: 0; }
  /* 34px display size fits no German line of steps 3/4 on 328px; 32px keeps the two-line rhythm */
  html[lang="de"] .ats-step--3 .ats-step__title,
  html[lang="de"] .ats-step--4 .ats-step__title { font-size: 32px; line-height: 38px; }
  /* the German step-1 illustration starts higher in its canvas — keep it clear of the copy */
  html[lang="de"] .ats-step--1 { --ay: 29px; }
}