.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.apex-flow{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}
.apex-flow-head{
  display:grid;
  gap: 12px;
}
.apex-flow-kicker{
  margin: 0;
  color: var(--muted2);
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.apex-flow-zones{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
  align-items:center;
}
.apex-flow-zone{
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 22px;
  color: var(--muted2);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.apex-flow-zone::before{
  content:"";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity: .92;
}
.apex-flow-zone--request{ grid-column: 1 / span 2; }
.apex-flow-zone--boundary{ grid-column: 3 / span 2; }
.apex-flow-zone--evidence{ grid-column: 5 / span 2; }

.apex-flow-track{
  position: relative;
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
  list-style:none;
  margin: 0;
  padding: 30px 0 0;
}
.apex-flow-track::before{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  top: 14px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,.92), rgba(67,211,255,.9));
  box-shadow: 0 0 14px rgba(124,92,255,.18);
}
.apex-flow-step{
  position:relative;
  min-height: 160px;
  padding: 18px 16px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(124,92,255,.08), rgba(67,211,255,.04) 58%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.apex-flow-step::before{
  content:"";
  position:absolute;
  top: -18px;
  left: 50%;
  width: 2px;
  height: 18px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.22);
}
.apex-flow-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top: calc(50% - 7px);
  right: -8px;
  width: 14px;
  height: 14px;
  border-top: 2px solid rgba(255,255,255,.24);
  border-right: 2px solid rgba(255,255,255,.24);
  transform: rotate(45deg);
  pointer-events:none;
}
.apex-flow-step--boundary{
  border-color: rgba(124,92,255,.26);
  background:
    linear-gradient(180deg, rgba(124,92,255,.18), rgba(124,92,255,.08)),
    linear-gradient(135deg, rgba(124,92,255,.14), rgba(67,211,255,.06) 58%, transparent);
  box-shadow: 0 18px 42px rgba(56,36,112,.22);
}
.apex-flow-step--decision{
  border-color: rgba(67,211,255,.18);
}
.apex-flow-step--review{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)),
    linear-gradient(135deg, rgba(67,211,255,.10), rgba(255,255,255,.04) 58%, transparent);
}
.apex-flow-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--muted2);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.apex-flow-title{
  margin: 14px 0 8px;
  color: var(--text);
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}
.apex-flow-copy{
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.56;
  max-width: 20ch;
  text-wrap: pretty;
}
.apex-flow-branch{
  position: relative;
  grid-column: 4 / span 3;
  justify-self: start;
  max-width: 420px;
  padding: 18px 18px 17px 22px;
  border-radius: 24px;
  border: 1px solid rgba(239,111,159,.26);
  background:
    linear-gradient(180deg, rgba(239,111,159,.10), rgba(124,92,255,.06)),
    linear-gradient(135deg, rgba(239,111,159,.08), rgba(124,92,255,.05) 64%, transparent);
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
}
.apex-flow-branch::before{
  content:"";
  position:absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ef6f9f, #7c5cff);
}
.apex-flow-branch-kicker{
  display:block;
  margin: 0 0 8px;
  color: rgba(239,111,159,.92);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.apex-flow-branch strong{
  display:block;
  color: var(--text);
  font-size: 1.08rem;
  letter-spacing: -.02em;
}
.apex-flow-branch p{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.56;
  font-size: .92rem;
}
.apex-flow-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  list-style:none;
  padding: 0;
  margin: 0;
}
.apex-flow-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: .88rem;
  letter-spacing: -.01em;
}
.apex-flow-chip::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}

@media (max-width: 1120px){
  .apex-flow-zones{ display:none; }
  .apex-flow-track{
    grid-template-columns: repeat(3, minmax(0,1fr));
    padding-top: 0;
  }
  .apex-flow-track::before,
  .apex-flow-step::before,
  .apex-flow-step::after{ display:none; }
  .apex-flow-step{ min-height: 148px; }
  .apex-flow-branch{ grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 720px){
  .apex-flow{ gap: 16px; }
  .apex-flow-kicker{ font-size: .7rem; }
  .apex-flow-track{ grid-template-columns: 1fr; gap: 10px; }
  .apex-flow-step{
    min-height: auto;
    padding: 16px 16px 15px 60px;
    border-radius: 20px;
  }
  .apex-flow-num{
    position:absolute;
    left: 16px;
    top: 16px;
    min-width: 32px;
    padding: 5px 7px;
  }
  .apex-flow-title{ margin-top: 0; font-size: 1.02rem; }
  .apex-flow-copy{ max-width: none; font-size: .9rem; }
  .apex-flow-branch{ padding: 16px 16px 15px 20px; border-radius: 20px; }
  .apex-flow-branch strong{ font-size: 1rem; }
  .apex-flow-chips{ gap: 8px; }
  .apex-flow-chip{ font-size: .84rem; padding: 8px 10px; }
}

:root[data-theme="light"] .apex-flow-step{
  border-color: rgba(12,16,32,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)),
    linear-gradient(135deg, rgba(124,92,255,.07), rgba(67,211,255,.04) 58%, transparent);
  box-shadow: 0 12px 28px rgba(12,16,32,.08);
}
:root[data-theme="light"] .apex-flow-step--boundary{
  border-color: rgba(124,92,255,.18);
  background:
    linear-gradient(180deg, rgba(124,92,255,.10), rgba(255,255,255,.90)),
    linear-gradient(135deg, rgba(124,92,255,.10), rgba(67,211,255,.04) 58%, transparent);
}
:root[data-theme="light"] .apex-flow-step--review{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
    linear-gradient(135deg, rgba(67,211,255,.06), rgba(255,255,255,.02) 58%, transparent);
}
:root[data-theme="light"] .apex-flow-num,
:root[data-theme="light"] .apex-flow-chip{
  background: rgba(12,16,32,.04);
  border-color: rgba(12,16,32,.08);
}
:root[data-theme="light"] .apex-flow-track::before{
  box-shadow: 0 0 10px rgba(124,92,255,.08);
}
:root[data-theme="light"] .apex-flow-step::before,
:root[data-theme="light"] .apex-flow-step::after{
  border-color: rgba(12,16,32,.12);
  background: rgba(12,16,32,.14);
}
:root[data-theme="light"] .apex-flow-zone,
:root[data-theme="light"] .apex-flow-kicker,
:root[data-theme="light"] .apex-flow-num{ color: var(--muted2); }
:root[data-theme="light"] .apex-flow-branch{
  border-color: rgba(239,111,159,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84)),
    linear-gradient(135deg, rgba(239,111,159,.06), rgba(124,92,255,.04) 64%, transparent);
  box-shadow: 0 12px 26px rgba(12,16,32,.08);
}