/* Table row 2: pinned, staggered process notes connected by a winding route. */
.workflow-section {
  padding-block: 110px 20px;
  color: var(--ink, #000);
  overflow: clip;
  isolation: isolate;
}
.workflow-wrap {
  width: min(var(--max, 1130px), calc(100% - 64px));
  margin-inline: auto;
}
.workflow-heading { text-align: center; }
.workflow-eyebrow {
  margin: 0 0 20px;
  font: 400 14px/1.4 var(--font-body, Inter, sans-serif);
  letter-spacing: .01em;
}
.workflow-heading h2 {
  margin: 0;
  font: 700 clamp(34px, 4.2vw, 50px)/1.12 var(--font-display, Poppins, sans-serif);
  letter-spacing: -.025em;
}
.workflow-intro {
  margin: 22px auto 0;
  max-width: 660px;
  color: #555;
  font: 400 18px/1.5 var(--font-body, Inter, sans-serif);
  letter-spacing: -.025em;
}
.workflow-board {
  position: relative;
  width: min(100%, 1000px);
  margin: 48px auto 32px;
}
.workflow-board::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -70px;
  background: repeating-linear-gradient(0deg, transparent 0 35px, rgb(0 0 0 / .045) 35px 36px);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}
.workflow-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.workflow-route-line {
  fill: none;
  stroke: #999;
  stroke-width: 2;
  stroke-dasharray: 8 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: workflow-route-travel 12s linear infinite paused;
}
.workflow-section.workflow-in-view .workflow-route-line { animation-play-state: running; }
.workflow-steps {
  position: relative;
  height: 956px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.workflow-step {
  --workflow-rotation: 6deg;
  --workflow-color: var(--orange, #f39200);
  --workflow-card-ink: #000;
  position: absolute;
  width: 31.2%;
  color: var(--workflow-card-ink);
  z-index: 1;
  transform: rotate(var(--workflow-rotation));
  transform-origin: 50% 20px;
  transition: transform 300ms cubic-bezier(.2, .7, .25, 1);
}
.workflow-step-understand { top: 28px; left: 9%; }
.workflow-step-prioritize {
  --workflow-rotation: -6deg;
  --workflow-color: var(--blue, #466cf3);
  --workflow-card-ink: #fff;
  top: 164px;
  right: 9%;
}
.workflow-step-implement {
  --workflow-rotation: 5deg;
  --workflow-color: var(--berry, #a3195b);
  --workflow-card-ink: #fff;
  top: 442px;
  left: 9%;
}
.workflow-step-evolve {
  --workflow-rotation: -5deg;
  --workflow-color: var(--lemon, #e6e51e);
  top: 590px;
  right: 6%;
}
.workflow-paper {
  padding: 9px;
  border: 1px solid #e5e5e5;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 8px 18px rgb(0 0 0 / .065);
}
.workflow-pin {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  color: var(--workflow-color);
  fill: currentColor;
}
.workflow-step-evolve .workflow-pin { color: #979608; }
.workflow-card {
  min-height: 227px;
  padding: 20px 21px 18px;
  border-radius: 17px;
  background: var(--workflow-color);
  box-shadow: inset 0 3px 4px #ffffff40, inset 0 -5px 8px #00000018;
}
.workflow-number {
  display: block;
  margin-bottom: 14px;
  font: 500 36px/1 var(--font-display, Poppins, sans-serif);
  letter-spacing: -.05em;
}
.workflow-card h3 {
  margin: 0 0 11px;
  color: inherit;
  font: 500 23px/1.15 var(--font-display, Poppins, sans-serif);
  letter-spacing: -.035em;
}
.workflow-card p {
  margin: 0;
  font: 400 16px/1.45 var(--font-body, Inter, sans-serif);
  letter-spacing: -.02em;
}
.workflow-result {
  display: block;
  margin-top: 15px;
  padding-top: 11px;
  border-top: 1px solid currentColor;
  font: 500 12px/1.4 var(--font-body, Inter, sans-serif);
  letter-spacing: -.01em;
}
.workflow-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-inline: 30px;
  padding-top: 28px;
  border-top: 1px solid #ccc;
}
.workflow-footer p {
  margin: 0;
  font: 400 17px/1.5 var(--font-body, Inter, sans-serif);
  letter-spacing: -.025em;
}
.workflow-footer strong { font-weight: 500; }
.workflow-cta { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .workflow-step:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-4px) scale(1.025);
  }
}
@keyframes workflow-route-travel { to { stroke-dashoffset: -128; } }
@media (max-width: 950px) and (min-width: 701px) {
  .workflow-steps { height: 1010px; }
  .workflow-step { width: 38%; }
  .workflow-step-understand { left: 3%; }
  .workflow-step-prioritize { top: 174px; right: 3%; }
  .workflow-step-implement { top: 478px; left: 3%; }
  .workflow-step-evolve { top: 630px; right: 3%; }
  .workflow-card { padding-inline: 18px; }
  .workflow-card h3 { font-size: 21px; }
  .workflow-footer { margin-inline: 0; gap: 20px; }
}
@media (max-width: 700px) {
  .workflow-section { padding-block: 78px 0; }
  .workflow-wrap { width: calc(100% - 40px); }
  .workflow-eyebrow { margin-bottom: 15px; font-size: 12px; }
  .workflow-heading h2 { font-size: clamp(29px, 6vw, 36px); }
  .workflow-intro { max-width: 400px; margin-top: 18px; font-size: 16px; }
  .workflow-intro br { display: none; }
  .workflow-board { max-width: 450px; margin-block: 48px 56px; }
  .workflow-board::before { inset-inline: -20px; }
  .workflow-route-line { stroke: #aaa; }
  .workflow-steps { display: flex; flex-direction: column; gap: 52px; height: auto; padding: 8px 9px; }
  .workflow-step {
    --workflow-rotation: 3deg;
    position: relative;
    inset: auto;
    width: calc(100% - 26px);
    max-width: 340px;
    margin-right: auto;
  }
  .workflow-step:nth-child(even) {
    --workflow-rotation: -3deg;
    margin-left: auto;
    margin-right: 0;
  }
  .workflow-paper { border-radius: 23px; padding: 8px; }
  .workflow-pin { width: 24px; height: 24px; margin-bottom: 7px; }
  .workflow-card { min-height: 0; padding: 18px 21px; border-radius: 16px; }
  .workflow-number { margin-bottom: 11px; font-size: 32px; }
  .workflow-card h3 { font-size: 24px; }
  .workflow-card p { font-size: 16px; line-height: 1.45; }
  .workflow-result { margin-top: 13px; font-size: 12px; }
  .workflow-footer { flex-direction: column; align-items: flex-start; margin-inline: 8px; padding-top: 23px; gap: 22px; }
  .workflow-footer p { font-size: 16px; }
  .workflow-cta { max-width: 100%; }
}
@media (max-width: 380px) {
  .workflow-wrap { width: calc(100% - 32px); }
  .workflow-heading h2 { font-size: 27px; }
  .workflow-steps { padding-inline: 5px; }
  .workflow-step { width: calc(100% - 12px); }
  .workflow-card { padding-inline: 17px; }
  .workflow-card h3 { font-size: 21px; }
  .workflow-cta { --button-left: 20px; --button-right: 62px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-route-line { animation: none; }
  .workflow-step { transition: none; }
  .workflow-step:hover { transform: rotate(var(--workflow-rotation)); }
}