/* Animate the image inside its frame so responsive phone positioning is preserved. */
.ai-cover .ai-phone-visual > img {
  animation: ai-phone-enter .95s cubic-bezier(.22, 1, .36, 1) .1s both;
}

/* Individual scale/translate preserve the callouts' existing responsive transforms. */
.ai-cover .ai-callout {
  animation: ai-callout-enter .65s ease-out both;
}
.ai-cover .ai-callout-savings { animation-delay: 1.05s; }
.ai-cover .ai-callout-channels { animation-delay: 1.25s; }
.ai-cover .ai-callout-always { animation-delay: 1.45s; }
.ai-cover .ai-callout-support { animation-delay: 1.65s; }

@keyframes ai-phone-enter {
  from { opacity: 0; translate: 0 100%; }
  30% { opacity: 1; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ai-callout-enter {
  0% { opacity: 0; scale: .55; translate: 0 18px; }
  55% { opacity: 1; scale: 1.08; translate: 0 -5px; }
  75% { opacity: 1; scale: .97; translate: 0 2px; }
  90% { opacity: 1; scale: 1.02; translate: 0 -1px; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-cover .ai-phone-visual > img,
  .ai-cover .ai-callout {
    animation: none;
  }
}

/* Capabilities carousel: visible arrow controls next to the heading. */
.ai-capabilities-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-right: 37.5px;
}
.ai-carousel-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.ai-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--blue, #2f4df1);
  border-radius: 50%;
  background: #fff;
  color: var(--blue, #2f4df1);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ai-carousel-btn:hover {
  background: var(--blue, #2f4df1);
  color: #fff;
}
.ai-carousel-btn:focus-visible {
  outline: 2px solid var(--blue-light, #6980ff);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .ai-capabilities-head {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding-right: 20px;
  }
  .ai-carousel-nav {
    justify-content: flex-end;
  }
  .ai-carousel-btn {
    width: 38px;
    height: 38px;
  }
}

/* Six connection steps form an even 3×2 grid; the connector art was drawn for 3+3+1 cards. */
.ai-steps li:last-child {
  grid-column: auto;
}
.ai-steps-connector {
  overflow: hidden;
}

/* AI assistant bubbles: keep the second row clear of the first row's tails, centre text in the bubble body. */
@media (min-width: 701px) {
  .ai-assistant-card {
    padding-bottom: 30px;
  }
  .ai-assistant-card-3,
  .ai-assistant-card-4 {
    top: 125px;
  }
}