/* "The next financial services channel is agentic." (Figma: home / Section 6755:3681). */

.fl-agentic {
  display: grid;
  /* Figma lays the 1180px section out as 40 pad + 432 copy + 24 gap
     + 652 panel + 32 pad. */
  grid-template-columns: minmax(0, 432px) minmax(0, 652px);
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 32px 0 40px;
  font-family: var(--fl-font-sans);
}

@media (min-width: 1220px) {
  .fl-agentic.fl-section-sep {
    /* Figma Rect 19 behind agentic (7184:15036): pad 97 / 68. */
    --fl-sep-pad-top: 97px;
    --fl-sep-pad-bottom: 68px;
  }
}

.fl-agentic__copy {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 24px;
  position: sticky;
  top: 112px;
}

.fl-agentic__title {
  margin: 0;
  color: var(--fl-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 61.2px;
}

.fl-agentic__script {
  color: var(--fl-green);
  font-family: var(--fl-font-script);
  font-weight: 700;
  white-space: nowrap;
}

.fl-agentic__body {
  max-width: 448px;
  margin: 0;
  padding-bottom: 8px;
  color: var(--fl-text-muted);
  font-size: 16px;
  line-height: 24px;
}

.fl-agentic__cta {
  align-self: flex-start;
  padding: 12px 24px;
  border: 2px solid var(--fl-ink);
  border-radius: var(--fl-radius-pill);
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-md);
  color: var(--fl-ink);
  font-family: var(--fl-font-script);
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fl-agentic__cta:hover {
  background: var(--fl-cta-hover);
  transform: translate(1px, 1px);
  box-shadow: var(--fl-shadow-sm);
}

.fl-agentic__cta:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* Copy fade-in — the heading, body, and button move as one block from 24px
   left at zero opacity to their layout positions. No stagger: they share a
   single animation on the column itself.

   The column is `position: sticky`, and a leftover transform would pin it
   in place instead of sticking. After the run finishes, JS swaps --play for
   --done so the transform is gone. */
.fl-agentic__copy--armed {
  opacity: 0;
}

.fl-agentic__copy--play {
  animation: fl-agentic-copy-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fl-agentic__copy--done {
  opacity: 1;
}

@keyframes fl-agentic-copy-in {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-agentic__copy--armed,
  .fl-agentic__copy--play {
    opacity: 1;
    animation: none;
  }
}

/* Right-hand panel (Figma: home / Section / option 5, node 6879:2898) — the
   Today and Tomorrow journeys side by side, 634px of diagram centred in the
   652px column with the caption 32px below it. */
.fl-agentic__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* 192 + 16 + 83 + 16 + 327 = 634. */
.fl-agentic__flow {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fl-agentic__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.fl-agentic__clip {
  width: 100%;
  overflow: hidden;
}

.fl-agentic__pill {
  margin: 0;
  box-sizing: border-box;
  padding: 8px 34px;
  border: 2px solid var(--fl-ink);
  border-radius: var(--fl-radius-pill);
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-md);
  color: var(--fl-ink);
  font-family: var(--fl-font-script);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
}

.fl-agentic__col--tomorrow .fl-agentic__pill {
  border-color: var(--fl-green);
  box-shadow: 3px 3px 0 0 var(--fl-green);
  color: var(--fl-green);
}

/* Figma stacks the cards with a 2px gap either side of a 20.896px connector. */
.fl-agentic__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24.896px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fl-agentic__stage {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 84px;
  padding: 22px 18px;
  border: 2px solid var(--fl-ink);
  border-radius: 8px;
  background: var(--fl-white);
  box-shadow: var(--fl-shadow-md);
}

.fl-agentic__col--today .fl-agentic__stage {
  width: 192px;
}

.fl-agentic__col--tomorrow .fl-agentic__stage {
  width: 327px;
  border-color: var(--fl-green);
  box-shadow: 3px 3px 0 0 var(--fl-green);
}

/* Dashed arrow between consecutive stages. The exported vector runs left to
   right, so it is rotated a quarter turn to point down the column, and
   centred in the gap: `top: 100%` is the padding-box edge, +2px reaches the
   border edge and +12.448px is half the gap. */
.fl-agentic__stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + 14.448px);
  left: 50%;
  width: 24.063px;
  height: 7.364px;
  background: url("/redesign/assets/agentic-flow-arrow-dark.svg") 0 0 / 100% 100%
    no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

.fl-agentic__col--tomorrow .fl-agentic__stage:not(:last-child)::after {
  background-image: url("/redesign/assets/agentic-flow-arrow-green.svg");
}

.fl-agentic__stage-title {
  display: block;
  color: var(--fl-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.fl-agentic__col--tomorrow .fl-agentic__stage-title {
  color: var(--fl-green);
}

/* The notes are single-line by design; wrapping one would push it past the
   fixed 84px card and break the two columns out of step. */
.fl-agentic__stage-note {
  display: block;
  color: var(--fl-text-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

/* Curved dashed arrow from the Today column into Tomorrow. The vector is
   84.21x242 and Figma bleeds it 1px past the left of its 83x241 slot. */
.fl-agentic__bridge {
  flex: none;
  width: 83px;
  height: 241px;
  background: url("/redesign/assets/agentic-flow-bridge.svg") -1px 0 / 84.21px
    242px no-repeat;
}

.fl-agentic__caption {
  margin: 0;
  color: var(--fl-text-muted);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.fl-agentic__caption strong {
  color: var(--fl-green);
  font-weight: 500;
}

/* Panel build — both columns fill in together, top to bottom: the pills, then
   each pair of cards, with the dashed connector appearing in the gap it sits
   in. Once both stacks are complete the bridge draws itself across from Today
   to Tomorrow, and the caption rises in last.

   Cards land 260ms apart and each connector fires 160ms into that gap, so a
   connector is always on screen before the card it points at. */
.fl-agentic__panel--armed .fl-agentic__pill,
.fl-agentic__panel--armed .fl-agentic__stage,
.fl-agentic__panel--armed .fl-agentic__stage::after,
.fl-agentic__panel--armed .fl-agentic__bridge,
.fl-agentic__panel--armed .fl-agentic__caption {
  opacity: 0;
}

.fl-agentic__panel--play .fl-agentic__pill,
.fl-agentic__panel--play .fl-agentic__stage,
.fl-agentic__panel--play .fl-agentic__caption {
  animation: fl-agentic-rise 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fl-agentic__panel--play .fl-agentic__stage::after {
  animation: fl-agentic-arrow-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(1) {
  animation-delay: 160ms;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(1)::after {
  animation-delay: 320ms;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(2) {
  animation-delay: 420ms;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(2)::after {
  animation-delay: 580ms;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(3) {
  animation-delay: 680ms;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(3)::after {
  animation-delay: 840ms;
}

.fl-agentic__panel--play .fl-agentic__stage:nth-child(4) {
  animation-delay: 940ms;
}

/* Starts once the last pair of cards has landed (940 + 320). */
.fl-agentic__panel--play .fl-agentic__bridge {
  animation: fl-agentic-bridge-draw 600ms cubic-bezier(0.33, 0, 0.2, 1) both;
  animation-delay: 1300ms;
}

.fl-agentic__panel--play .fl-agentic__caption {
  animation-delay: 1840ms;
}

@keyframes fl-agentic-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keeps the connector's own placement (centred in the gap, turned a quarter
   turn to point down the column) and only grows it into view. */
@keyframes fl-agentic-arrow-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.55);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg) scale(1);
  }
}

/* The bridge is a background vector, so it cannot be stroke-drawn. Wiping the
   clip from left to right reveals the dashes along the curve instead, which
   reads as the arrow travelling from Today into Tomorrow. */
@keyframes fl-agentic-bridge-draw {
  from {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-agentic__panel--armed .fl-agentic__pill,
  .fl-agentic__panel--armed .fl-agentic__stage,
  .fl-agentic__panel--armed .fl-agentic__stage::after,
  .fl-agentic__panel--armed .fl-agentic__bridge,
  .fl-agentic__panel--armed .fl-agentic__caption,
  .fl-agentic__panel--play .fl-agentic__pill,
  .fl-agentic__panel--play .fl-agentic__stage,
  .fl-agentic__panel--play .fl-agentic__stage::after,
  .fl-agentic__panel--play .fl-agentic__bridge,
  .fl-agentic__panel--play .fl-agentic__caption {
    opacity: 1;
    clip-path: none;
    animation: none;
  }
}

/* The copy and the panel only fit side by side at the full 1180px content
   width, and the panel's cards are fixed-width so the pair cannot shrink.
   Below that, stack them in one centred 652px column — the panel's own width. */
@media (max-width: 1219px) {
  .fl-agentic {
    grid-template-columns: minmax(0, 652px);
    max-width: 652px;
    gap: 48px;
    margin: 0 auto;
    padding: 0;
  }

  .fl-agentic__copy {
    position: static;
    align-items: center;
    text-align: center;
  }

  .fl-agentic__body {
    margin-left: auto;
    margin-right: auto;
  }

  .fl-agentic__cta {
    align-self: center;
  }

  .fl-agentic__title {
    font-size: clamp(40px, 6.5vw, 60px);
    line-height: 1.02;
  }
}

@media (max-width: 700px) {
  /* Green plate is the section itself on mobile so it grows with the
     Today/Tomorrow expand animation instead of a fixed ::before pad. */
  .fl-agentic.fl-section-sep {
    padding: 28px 20px 32px;
    border-radius: var(--fl-sep-radius, 17px);
    background: var(--fl-sep-fill, #dee8e2);
  }

  .fl-agentic.fl-section-sep::before {
    display: none;
  }

  .fl-agentic__flow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .fl-agentic__bridge {
    display: block;
    flex: none;
    width: 24px;
    height: 28px;
    margin: 4px auto;
    background: url("/redesign/assets/agentic-flow-arrow-green.svg") center / 24px 7px
      no-repeat;
    transform: rotate(90deg);
  }

  .fl-agentic__col {
    width: 100%;
    gap: 16px;
  }

  .fl-agentic__pill {
    width: 100%;
    padding: 12px 24px;
    text-align: center;
    cursor: pointer;
  }

  .fl-agentic__clip {
    max-height: 0;
    overflow: hidden;
    transition: max-height 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .fl-agentic__col.is-open .fl-agentic__clip {
    max-height: 720px;
  }

  .fl-agentic__stack {
    width: 100%;
  }

  .fl-agentic__col--today .fl-agentic__stage,
  .fl-agentic__col--tomorrow .fl-agentic__stage {
    width: 100%;
    height: auto;
    min-height: 84px;
  }

  .fl-agentic__stage-note {
    white-space: normal;
  }

  .fl-agentic__col:not(.is-playing) .fl-agentic__stage,
  .fl-agentic__col:not(.is-playing) .fl-agentic__stage::after {
    opacity: 0;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage {
    animation: fl-agentic-rise 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage::after {
    animation: fl-agentic-arrow-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(1) {
    animation-delay: 80ms;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(1)::after {
    animation-delay: 200ms;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(2) {
    animation-delay: 280ms;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(2)::after {
    animation-delay: 400ms;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(3) {
    animation-delay: 480ms;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(3)::after {
    animation-delay: 600ms;
  }

  .fl-agentic__col.is-playing .fl-agentic__stage:nth-child(4) {
    animation-delay: 680ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-agentic__clip,
  .fl-agentic__col.is-open .fl-agentic__clip {
    max-height: none;
    overflow: visible;
    transition: none;
  }

  .fl-agentic__col:not(.is-playing) .fl-agentic__stage,
  .fl-agentic__col:not(.is-playing) .fl-agentic__stage::after {
    opacity: 1;
    animation: none;
  }
}