/* ============================================================= */
/* Section: 09-setup */
/* ============================================================= */
/* ===== Accident Claim Setup Support — Figma node 12183:1192 (1440 x 658) ===== */

.ai-setup-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ---------- Left column (12183:1194) ---------- */
.ai-setup-copy {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 430px;
}

.ai-setup-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ai-setup-title {
  color: var(--ai-blue);
  font-size: 32px;
  font-weight: 700;
  line-height: 45px;
}

.ai-setup-accent {
  color: var(--ai-orange);
}

.ai-setup-bar {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 9999px;
  background: var(--ai-orange);
  transform-origin: left center;
}

.ai-setup-lead {
  color: var(--ai-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 25.2px;
}

.ai-setup-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ai-setup-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ai-setup-item-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 9999px;
  background: var(--ai-white);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  transition: transform 0.3s var(--ai-ease);
}

.ai-setup .ai-setup-item-icon img {
  display: block;
  max-width: none;
}

.ai-setup-item:hover .ai-setup-item-icon {
  transform: translateY(-3px) scale(1.06);
}

.ai-setup-item-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 20px;
  width: 340px;
  min-width: 0;
}

.ai-setup-item-text {
  color: var(--ai-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
}

/* Line 129: a zero-height rule whose 5.33px end dot overflows to the right. The SVG is drawn at its
   natural size from the right edge (so its dot never stretches) and a matching 2px line fills any
   extra width on wider single-column layouts. */
.ai-setup .ai-setup-item-rule {
  display: block;
  width: calc(100% + 5.333px);
  max-width: none;
  height: 10.667px;
  margin: -5.333px 0;
  object-fit: none;
  object-position: right center;
  background: linear-gradient(rgba(39, 55, 117, 0.3), rgba(39, 55, 117, 0.3)) left center / calc(100% - 345.333px) 2px no-repeat;
}

.ai-setup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 8px 14px;
  border-radius: 75px;
  background: var(--ai-orange);
  color: var(--ai-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ai-ease), box-shadow 0.3s var(--ai-ease), transform 0.3s var(--ai-ease);
}

.ai-setup-btn-arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: var(--ai-white);
  transition: transform 0.3s var(--ai-ease);
}

.ai-setup .ai-setup-btn-arrow img {
  display: block;
  max-width: none;
}

.ai-setup-btn:hover,
.ai-setup-btn:focus-visible {
  background: #e9474b;
  box-shadow: 0 10px 22px rgba(252, 93, 97, 0.3);
  color: var(--ai-white);
  text-decoration: none;
  transform: translateY(-2px);
}

.ai-setup-btn:hover .ai-setup-btn-arrow,
.ai-setup-btn:focus-visible .ai-setup-btn-arrow {
  transform: translateX(4px);
}

/* ---------- Right panel (12183:1232): 2px border inside a 20px Figma padding ---------- */
.ai-setup-panel {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  min-width: 0;
  padding: 18px;
  border: 2px solid #eff2ff;
  border-radius: 10px;
  background: rgba(239, 242, 255, 0.28);
  box-shadow: 0 2.704px 11.561px #eff2ff, inset 0 0 64px #eff2ff;
  overflow: clip;
}

/* tdesign:secured watermark (87px, 30% opacity) with the medical cross inside it. */
.ai-setup-watermark {
  position: absolute;
  top: 16.23px;
  right: 26px;
  width: 87px;
  height: 87px;
  opacity: 0.3;
  pointer-events: none;
}

.ai-setup .ai-setup-shield,
.ai-setup .ai-setup-cross {
  position: absolute;
  display: block;
  max-width: none;
}

.ai-setup .ai-setup-shield {
  top: 2.255px;
  left: 7.875px;
  width: 71.25px;
  height: 82.48px;
}

.ai-setup .ai-setup-cross {
  top: 29px;
  left: 29px;
  width: 30px;
  height: 30px;
}

.ai-setup-badge,
.ai-setup-stats {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 90px;
  padding: 16px;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  background: var(--ai-white);
  filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.1));
}

.ai-setup-stats {
  width: 100%;
}

.ai-setup-badge-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  background: var(--ai-white);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

.ai-setup .ai-setup-badge-icon img {
  display: block;
  max-width: none;
}

.ai-setup-badge-body,
.ai-setup-stat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.ai-setup-badge-title {
  color: var(--ai-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.ai-setup-badge-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ai-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.ai-setup .ai-setup-badge-dot {
  display: block;
  flex: none;
}

/* Steps (12183:1244) with the gradient timeline (12183:1233) and number bubbles. */
.ai-setup-flow {
  position: relative;
  width: 100%;
}

.ai-setup .ai-setup-line {
  position: absolute;
  top: -15.68px;
  left: -2px;
  width: calc(100% + 2px);
  height: 21.02px;
  max-width: none;
  pointer-events: none;
}

.ai-setup-steps {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.ai-setup-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 258px;
  padding: 16px;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  background: var(--ai-white);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
  text-align: center;
  transition: transform 0.3s var(--ai-ease), box-shadow 0.3s var(--ai-ease), border-color 0.3s var(--ai-ease);
}

.ai-setup-step:hover {
  transform: translateY(-6px);
  border-color: rgba(252, 93, 97, 0.25);
  box-shadow: 0 14px 30px rgba(39, 55, 117, 0.14);
}

.ai-setup-step-num {
  position: absolute;
  top: -27.77px; /* 133.23 in the panel, against the card top at 160 (minus the 1px border) */
  left: calc(50% - 16.75px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 3px;
  border: 3px solid var(--ai-white);
  border-radius: 31px;
  background: var(--ai-white);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.21));
  color: var(--ai-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
}

.ai-setup-step:first-child .ai-setup-step-num {
  left: calc(50% - 16.25px);
}

.ai-setup-step-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--ai-white);
  filter: drop-shadow(0 1px 2.5px rgba(0, 0, 0, 0.18));
  transition: transform 0.3s var(--ai-ease);
}

.ai-setup .ai-setup-step-icon img {
  display: block;
  max-width: none;
}

.ai-setup-step:hover .ai-setup-step-icon {
  transform: scale(1.08);
}

.ai-setup-step-title {
  color: var(--ai-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 22.5px;
}

.ai-setup-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ai-setup-step-bar {
  display: block;
  flex: none;
  width: 28px;
  height: 4px;
  border-radius: 9999px;
  background: var(--ai-orange);
}

.ai-setup-step-text {
  color: var(--ai-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16.25px;
}

/* Bottom stats card (12183:1287). */
.ai-setup-stat {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ai-setup-stat-body {
  flex: 1 1 0;
  min-width: 0;
}

.ai-setup-progress {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.ai-setup-progress-track {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  border-radius: 28px;
  background: #fedfe0;
}

/* Figma's fill is 192px of the ~253px track. */
.ai-setup-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 75.8%;
  height: 7px;
  border-radius: 28px;
  background: var(--ai-orange);
  transform-origin: left center;
}

.ai-setup-progress-value {
  flex: none;
  color: var(--ai-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.ai-setup-divider {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 0.603px;
  height: 45.54px;
}

.ai-setup .ai-setup-divider img {
  display: block;
  flex: none;
  max-width: none;
  width: 45.546px;
  height: 1px;
  rotate: -90.76deg;
}

.ai-setup-stat-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.ai-setup-stat-meta strong {
  color: var(--ai-orange);
  font-weight: 700;
}

.ai-setup-stat-meta > span {
  color: var(--ai-blue);
  font-weight: 400;
}

/* ---------- Animation ---------- */
@keyframes ai-setup-draw-x {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes ai-setup-grow-x {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes ai-setup-pop {
  0%   { opacity: 0; scale: 0.3; }
  70%  { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

@keyframes ai-setup-ghost {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: 0.3; scale: 1; }
}

@keyframes ai-setup-blink {
  0%, 100% { opacity: 0.5; scale: 0.92; }
  50%      { opacity: 1; scale: 1.08; }
}

.ai-setup.is-armed:not(.is-in) :is(.ai-setup-head > *, .ai-setup-item, .ai-setup-btn, .ai-setup-panel, .ai-setup-badge, .ai-setup-line, .ai-setup-step, .ai-setup-step-num, .ai-setup-stats, .ai-setup-watermark) {
  opacity: 0;
}

.ai-setup.is-in .ai-setup-head > * {
  animation: ai-rise 0.7s var(--ai-ease) backwards;
}

.ai-setup.is-in .ai-setup-head > :nth-child(2) { animation: ai-setup-grow-x 0.6s var(--ai-ease) 0.2s backwards; }
.ai-setup.is-in .ai-setup-head > :nth-child(3) { animation-delay: 0.25s; }

.ai-setup.is-in .ai-setup-item {
  animation: ai-slide-left 0.7s var(--ai-ease) 0.4s backwards;
}

.ai-setup.is-in .ai-setup-item:nth-child(2) { animation-delay: 0.52s; }
.ai-setup.is-in .ai-setup-item:nth-child(3) { animation-delay: 0.64s; }

.ai-setup.is-in .ai-setup-item-icon {
  animation: ai-setup-pop 0.6s var(--ai-ease) 0.5s backwards;
}

.ai-setup.is-in .ai-setup-item:nth-child(2) .ai-setup-item-icon { animation-delay: 0.62s; }
.ai-setup.is-in .ai-setup-item:nth-child(3) .ai-setup-item-icon { animation-delay: 0.74s; }

/* the progress rules fill in from the left */
.ai-setup.is-in .ai-setup-item-rule {
  animation: ai-setup-draw-x 0.9s var(--ai-ease) 0.7s backwards;
}

.ai-setup.is-in .ai-setup-item:nth-child(2) .ai-setup-item-rule { animation-delay: 0.82s; }
.ai-setup.is-in .ai-setup-item:nth-child(3) .ai-setup-item-rule { animation-delay: 0.94s; }

.ai-setup.is-in .ai-setup-btn {
  animation: ai-rise 0.7s var(--ai-ease) 0.85s backwards;
}

/* Panel slides in, then the workflow assembles: badge, timeline draws, numbers pop, cards rise. */
.ai-setup.is-in .ai-setup-panel {
  animation: ai-slide-right 0.8s var(--ai-ease) 0.1s backwards;
}

.ai-setup.is-in .ai-setup-watermark {
  animation: ai-setup-ghost 0.8s var(--ai-ease) 0.5s backwards, ai-float 5s ease-in-out 1.4s infinite;
}

.ai-setup.is-in .ai-setup-badge {
  animation: ai-pop 0.6s var(--ai-ease) 0.4s backwards;
}

.ai-setup.is-in .ai-setup-badge-dot {
  animation: ai-setup-blink 1.8s ease-in-out 1.2s infinite;
}

.ai-setup.is-in .ai-setup-line {
  animation: ai-setup-draw-x 1.3s cubic-bezier(0.45, 0, 0.2, 1) 0.6s backwards;
}

.ai-setup.is-in .ai-setup-step {
  animation: ai-rise 0.7s var(--ai-ease) 0.7s backwards;
}

.ai-setup.is-in .ai-setup-step:nth-child(2) { animation-delay: 0.95s; }
.ai-setup.is-in .ai-setup-step:nth-child(3) { animation-delay: 1.2s; }
.ai-setup.is-in .ai-setup-step:nth-child(4) { animation-delay: 1.45s; }

.ai-setup.is-in .ai-setup-step-num {
  animation: ai-setup-pop 0.55s var(--ai-ease) 0.85s backwards;
}

.ai-setup.is-in .ai-setup-step:nth-child(2) .ai-setup-step-num { animation-delay: 1.1s; }
.ai-setup.is-in .ai-setup-step:nth-child(3) .ai-setup-step-num { animation-delay: 1.35s; }
.ai-setup.is-in .ai-setup-step:nth-child(4) .ai-setup-step-num { animation-delay: 1.6s; }

.ai-setup.is-in .ai-setup-step-icon {
  animation: ai-setup-pop 0.6s var(--ai-ease) 0.95s backwards;
}

.ai-setup.is-in .ai-setup-step:nth-child(2) .ai-setup-step-icon { animation-delay: 1.2s; }
.ai-setup.is-in .ai-setup-step:nth-child(3) .ai-setup-step-icon { animation-delay: 1.45s; }
.ai-setup.is-in .ai-setup-step:nth-child(4) .ai-setup-step-icon { animation-delay: 1.7s; }

.ai-setup.is-in .ai-setup-step-bar {
  animation: ai-setup-grow-x 0.5s var(--ai-ease) 1.1s backwards;
}

.ai-setup.is-in .ai-setup-step:nth-child(2) .ai-setup-step-bar { animation-delay: 1.35s; }
.ai-setup.is-in .ai-setup-step:nth-child(3) .ai-setup-step-bar { animation-delay: 1.6s; }
.ai-setup.is-in .ai-setup-step:nth-child(4) .ai-setup-step-bar { animation-delay: 1.85s; }

.ai-setup.is-in .ai-setup-stats {
  animation: ai-rise 0.7s var(--ai-ease) 0.8s backwards;
}

.ai-setup.is-in .ai-setup-progress-fill {
  animation: ai-setup-grow-x 1.4s var(--ai-ease) 0.9s backwards;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .ai-setup-row {
    flex-direction: column;
    gap: 40px;
  }

  .ai-setup-copy {
    width: 100%;
    max-width: 720px;
  }

  .ai-setup-item-body {
    flex: 1 1 0;
    width: auto;
  }

  .ai-setup-panel {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .ai-setup-title {
    font-size: 30px;
    line-height: 40px;
  }

  .ai-setup-steps {
    flex-wrap: wrap;
    row-gap: 46px;
  }

  .ai-setup-step {
    flex: 1 1 calc(50% - 10px);
    min-height: 0;
  }

  .ai-setup .ai-setup-line {
    display: none;
  }
}

/* ---------- Mobile — Figma node 12183:3385 (400px column in the 440 frame) ----------
   Copy (20px gaps): one-line 24/30 title, 48px bar, 16/25.2 lead; checklist with 54px icons and
   14/25 text over a rule; auto-width 50px button. 20px to the panel.
   Panel (12183:3425): 20px padding, 30px gaps. Claim Readiness badge (auto width), steps as a
   2 x 2 grid (20px gaps, no numbers or timeline), stats card stacked with a full-width rule,
   87px watermark 19px / 18.18px from the panel corner. */
@media (max-width: 767px) {
  .ai-setup-row {
    gap: 20px;
  }

  .ai-setup-copy {
    gap: 20px;
  }

  /* Figma shows the title on one line (373px at 24px); scale it down on narrower phones. */
  .ai-setup-title {
    font-size: min(24px, calc((100vw - 40px) * 24 / 376));
    line-height: 30px;
    white-space: nowrap;
  }

  .ai-setup-title .ai-setup-d {
    display: none;
  }

  .ai-setup-item-text {
    font-size: 14px;
  }

  .ai-setup-btn {
    padding: 8px 20px;
  }

  .ai-setup-panel {
    gap: 30px;
  }

  .ai-setup-watermark {
    top: 18.18px;
    right: 19px;
    z-index: 1;
  }

  /* Keep the workflow badge clear of the shield logo beside it, as in the mobile reference. */
  .ai-setup-badge {
    z-index: 2;
    width: calc(100% - 82px);
    min-height: 90px;
    height: auto;
    gap: 10px;
    padding: 12px;
    background: var(--ai-white);
  }

  .ai-setup-badge-icon {
    width: 40px;
    height: 40px;
  }

  .ai-setup-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
  }

  .ai-setup-step-num {
    display: none;
  }

  .ai-setup-step {
    min-height: 0;
  }

  .ai-setup-stats {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    height: auto;
  }

  .ai-setup-divider {
    width: 100%;
    height: 1px;
  }

  .ai-setup .ai-setup-divider img {
    width: 100%;
    rotate: none;
  }
}

@media (max-width: 400px) {
  .ai-setup-step {
    padding: 16px 10px;
  }

  .ai-setup-badge-title {
    white-space: normal;
  }
}