/* falcon.com home page: the workflow diagram (graphic E) and the step patterns strip. Classes
   only; the base style is the final frame, and motion runs only when the visitor allows it. */

.split {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
  }
}
.points {
  margin: 0;
  padding: 0;
  list-style: none;
}
.points li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.9875rem;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-line);
}
.graphic .g-av-xs {
  font-size: 9px;
}
.e-hl {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.e-hl.e-keep,
.e-hl.s7 {
  opacity: 1;
}
.e-branch {
  fill: var(--surface);
  stroke: var(--warm-300);
  stroke-dasharray: 4 3;
}
.e-lane {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.graphic .e-lane-t,
.graphic .e-sig {
  font-size: 11px;
  font-weight: 600;
}
.graphic .e-sig {
  fill: var(--red-900);
}
.e-spark {
  fill: var(--red-700);
}
.e-approve {
  fill: var(--fill);
}
.graphic .e-approve-t {
  fill: var(--on-primary);
  font-size: 10.5px;
  font-weight: 600;
}
.e-decline {
  fill: var(--surface);
  stroke: var(--line-strong);
}
.graphic .e-decline-t {
  fill: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
}
.e-tick circle {
  fill: var(--fill);
}
.e-tick path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.e-ring {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
}
.graphic .e-turn {
  fill: var(--red-900);
  font-size: 10.5px;
  font-weight: 600;
}
.e-next rect {
  fill: var(--next-bg);
  stroke: var(--next-line);
}
.graphic .e-next text {
  fill: var(--next-text);
  font-size: 9px;
  font-weight: 600;
}
.e-dot {
  fill: var(--accent-line);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .graphic-wf .e-hl,
  .e-tick,
  .e-ring,
  .e-dot {
    animation: 20s ease-in-out infinite both;
  }
  .e-hl.s1 {
    animation-name: e-s1;
  }
  .e-hl.s2 {
    animation-name: e-s2;
  }
  .e-hl.s3 {
    animation-name: e-s3;
  }
  .e-hl.s4 {
    animation-name: e-s4;
  }
  .e-hl.s5 {
    animation-name: e-s5;
  }
  .e-hl.s6 {
    animation-name: e-s6;
  }
  .e-hl.s7 {
    animation-name: e-s7;
  }
  .e-dot.d1 {
    animation-name: e-d1;
  }
  .e-dot.d2 {
    animation-name: e-d2;
  }
  .e-dot.d3 {
    animation-name: e-d3;
  }
  .e-dot.d4 {
    animation-name: e-d4;
  }
  .e-dot.d5 {
    animation-name: e-d5;
  }
  .e-dot.d6 {
    animation-name: e-d6;
  }
  .e-dot.d7 {
    animation-name: e-d7;
  }
  .e-dot.d8 {
    animation-name: e-d8;
  }
  .e-hl.lane {
    animation-name: e-lane;
  }
  .e-hl.sc1 {
    animation-name: e-sc1;
  }
  .e-hl.sc2 {
    animation-name: e-sc2;
  }
  .e-hl.sc3 {
    animation-name: e-sc3;
  }
  .e-hl.ap {
    animation-name: e-ap;
  }
  .e-tick {
    animation-name: e-tick;
  }
  .e-ring {
    animation-name: e-ring;
  }
}

@keyframes e-d1 {
  0%,
  6% {
    opacity: 0;
    transform: translate(0, 0);
  }
  6.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 1;
  }
  8%,
  100% {
    opacity: 0;
    transform: translate(0px, 20px);
  }
}
@keyframes e-d2 {
  0%,
  16% {
    opacity: 0;
    transform: translate(0, 0);
  }
  16.5% {
    opacity: 1;
  }
  17.5% {
    opacity: 1;
  }
  18%,
  100% {
    opacity: 0;
    transform: translate(0px, var(--ey, 20px));
  }
}
@keyframes e-d3 {
  0%,
  26% {
    opacity: 0;
    transform: translate(0, 0);
  }
  26.5% {
    opacity: 1;
  }
  27% {
    transform: translate(0px, 10px);
  }
  29% {
    transform: translate(var(--e3x, 63px), 10px);
  }
  29.5% {
    opacity: 1;
  }
  30%,
  100% {
    opacity: 0;
    transform: translate(var(--e3x, 63px), 20px);
  }
}
@keyframes e-d4 {
  0%,
  30% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30.5% {
    opacity: 1;
  }
  31.5% {
    opacity: 1;
  }
  32%,
  100% {
    opacity: 0;
    transform: translate(0px, 20px);
  }
}
@keyframes e-d5 {
  0%,
  48% {
    opacity: 0;
    transform: translate(0, 0);
  }
  48.5% {
    opacity: 1;
  }
  49.5% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    transform: translate(0px, var(--ey, 20px));
  }
}
@keyframes e-d6 {
  0%,
  66% {
    opacity: 0;
    transform: translate(0, 0);
  }
  66.5% {
    opacity: 1;
  }
  67.5% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
    transform: translate(0px, 20px);
  }
}
@keyframes e-d7 {
  0%,
  76% {
    opacity: 0;
    transform: translate(0, 0);
  }
  76.5% {
    opacity: 1;
  }
  77.5% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0;
    transform: translate(0px, 20px);
  }
}
@keyframes e-d8 {
  0%,
  34% {
    opacity: 0;
    transform: translate(0, 0);
  }
  34.5% {
    opacity: 1;
  }
  35.5% {
    opacity: 1;
  }
  36%,
  100% {
    opacity: 0;
    transform: translate(var(--d8x, 20px), 0px);
  }
}
@keyframes e-s1 {
  0%,
  0% {
    opacity: 0;
  }
  1%,
  6% {
    opacity: 1;
  }
  7%,
  100% {
    opacity: 0;
  }
}
@keyframes e-s2 {
  0%,
  7% {
    opacity: 0;
  }
  8%,
  16% {
    opacity: 1;
  }
  17%,
  100% {
    opacity: 0;
  }
}
@keyframes e-s3 {
  0%,
  17% {
    opacity: 0;
  }
  18%,
  26% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
  }
}
@keyframes e-s4 {
  0%,
  31% {
    opacity: 0;
  }
  32%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}
@keyframes e-s5 {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  66% {
    opacity: 1;
  }
  67%,
  100% {
    opacity: 0;
  }
}
@keyframes e-s6 {
  0%,
  67% {
    opacity: 0;
  }
  68%,
  76% {
    opacity: 1;
  }
  77%,
  100% {
    opacity: 0;
  }
}
@keyframes e-s7 {
  0%,
  77% {
    opacity: 0;
  }
  78%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes e-lane {
  0%,
  27% {
    opacity: 0;
  }
  28%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes e-sc1 {
  0%,
  35% {
    opacity: 0;
  }
  36%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes e-sc2 {
  0%,
  40% {
    opacity: 0;
  }
  41%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes e-sc3 {
  0%,
  45% {
    opacity: 0;
  }
  46%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes e-ap {
  0%,
  57% {
    opacity: 0;
  }
  58%,
  62% {
    opacity: 1;
  }
  63%,
  100% {
    opacity: 0;
  }
}
@keyframes e-tick {
  0%,
  60% {
    opacity: 0;
  }
  61%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes e-ring {
  0%,
  69% {
    opacity: 0;
  }
  70%,
  94% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}