/* A vertical sequence of horizontal steps, connected by downward arrows. */
.wf-video-flow {
  padding: clamp(64px, 7vw, 104px) clamp(20px, 4vw, 64px);
  background: #fff;
  color: #2c1e46;
  scroll-margin-top: 90px;
}
.wf-video-flow__inner { max-width: 960px; margin-inline: auto; }
.wf-video-flow__heading { margin-bottom: 36px; text-align: center; }
.wf-video-flow__eyebrow { margin: 0 0 12px; font: 600 12px/1.5 var(--en); letter-spacing: .18em; color: #9162a8; }
.wf-video-flow__heading h2 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.5; }
.wf-video-flow__intro { margin: 16px 0 0; font-size: 14px; line-height: 1.9; color: #6c6372; }
.wf-video-flow__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; list-style: none; margin: 0; padding: 0; }
.wf-video-flow__card { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); min-width: 0; background: #f4eff8; border-radius: 12px; }
.wf-video-flow__card:not(:last-child)::after { content: ''; position: absolute; left: 50%; bottom: -25px; width: 12px; height: 12px; border-right: 3px solid #9162a8; border-bottom: 3px solid #9162a8; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.wf-video-flow__icon { display: grid; place-items: center; align-self: stretch; margin: 0; padding: 14px; background: #9162a8; color: #fff; border-radius: 12px 0 0 12px; }
.wf-video-flow__icon svg { display: block; width: 56px; height: 56px; stroke-width: 2.8; }
.wf-video-flow__content { align-self: center; min-width: 0; padding: 19px 26px; }
.wf-video-flow__card h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.6; font-weight: 600; }
.wf-video-flow__card p { margin: 0; font-size: 14px; line-height: 1.85; color: #62596b; }
.wf-video-flow__card--delivery { background: #fff; border: 2px solid #9162a8; }
.wf-video-flow__card--delivery .wf-video-flow__icon { background: transparent; color: #9162a8; }
@media (max-width: 600px) {
  .wf-video-flow { padding-block: 56px; scroll-margin-top: 80px; }
  .wf-video-flow__heading { margin-bottom: 28px; }
  .wf-video-flow__intro { font-size: 13px; }
  .wf-video-flow__steps { gap: 32px; }
  .wf-video-flow__card { grid-template-columns: 56px minmax(0, 1fr); border-radius: 10px; }
  .wf-video-flow__card:not(:last-child)::after { bottom: -21px; width: 10px; height: 10px; }
  .wf-video-flow__icon { padding: 10px; border-radius: 10px 0 0 10px; }
  .wf-video-flow__icon svg { width: 36px; height: 36px; stroke-width: 3.2; }
  .wf-video-flow__content { padding: 16px; }
  .wf-video-flow__card h3 { font-size: 17px; line-height: 1.65; }
  .wf-video-flow__card p { font-size: 13px; }
}

/* HP / LP shares the video service's flow layout. */
:is(.wf-web-flow, .wf-solution-flow) .wf-video-flow__icon svg { width: 48px; height: 48px; }
.wf-web-flow__timing { margin-top: 32px; padding: 20px 24px; background: #f5f3f7; border-radius: 10px; font-size: 13px; line-height: 1.9; color: #62596b; }
.wf-web-flow__timing p { margin: 0; }
.wf-web-flow__timing p + p { margin-top: 8px; }
.wf-web-flow__timing b { color: #2c1e46; font-weight: 600; }
@media (max-width: 600px) {
  :is(.wf-web-flow, .wf-solution-flow) .wf-video-flow__icon svg { width: 32px; height: 32px; }
  .wf-web-flow__timing { padding: 18px; }
  .wf-web-flow__timing b { display: block; }
}