/* Reuses the main LP's process-flow tiles and static universe, scoped to this variant.
   Five stages preserve this page's sprint, QA/security and publication content. */
.process-section {
  position: relative;
  isolation: isolate;
  color: #e6e5ef;
  background-color: #0d101b;
  background-image:
    radial-gradient(circle at 23px 39px, #ddd6f966 0 1px, transparent 1.5px),
    radial-gradient(circle at 129px 101px, #ddd6f942 0 .8px, transparent 1.3px),
    radial-gradient(circle at 72px 165px, #ddd6f955 0 .7px, transparent 1.2px),
    radial-gradient(circle at 196px 68px, #ddd6f933 0 1px, transparent 1.6px),
    radial-gradient(circle at 267px 228px, #ddd6f944 0 .6px, transparent 1.2px),
    radial-gradient(ellipse at 78% 30%, #643aaa20, transparent 70%);
  background-size: 293px 257px, 347px 311px, 419px 367px, 487px 431px, 571px 509px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
}
.process-section > .container { width: min(1280px, calc(100% - 80px)); }
.process-section .flow-header { text-align: left; margin: 0 0 32px; max-width: 940px; }
.process-section .flow-header > .eyebrow { display: block; color: #aaa5bd; font-size: 11px; letter-spacing: .16em; }
.process-section .flow-header h2 { color: #faf9ff; text-transform: none; font-size: clamp(28px, 2.7vw, 38px); font-weight: 600; line-height: 1.22; letter-spacing: -.045em; margin: 14px 0 18px; }
.process-section .flow-header > p { color: #c0bed0; font-size: 16px; line-height: 1.7; max-width: 850px; }
.process-section .process-drawing { position: relative; isolation: isolate; }
.process-section .process-connector { position: absolute; top: 0; left: 0; width: 100%; height: 260px; pointer-events: none; overflow: visible; z-index: -1; }
.process-section .process-connector path { fill: none; stroke: #ffffff18; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.process-section .process-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; margin: 0; }
.process-section .process-roadmap-step { --phase-color: #b297ef; --phase-wash: #f3effc; position: relative; min-width: 0; }
.process-section .process-roadmap-step:nth-child(2) { --phase-color: #a99df2; --phase-wash: #f0eefb; }
.process-section .process-roadmap-step:nth-child(3) { --phase-color: #ce9ff0; --phase-wash: #f7effd; }
.process-section .process-roadmap-step:nth-child(4) { --phase-color: #e9a2d0; --phase-wash: #fbeff6; }
.process-section .process-roadmap-step:nth-child(5) { --phase-color: #b6b3ff; --phase-wash: #f1f0ff; }
.process-section .process-roadmap-step:nth-child(even) { margin-top: 80px; }
.process-section .phase-art { height: 174px; display: flex; align-items: center; justify-content: center; }
.process-section .phase-art svg { display: block; flex: none; width: 240px; max-width: 100%; height: 174px; }
.process-section .phase-number { font: italic 700 23px Montserrat, Arial, sans-serif; fill: var(--phase-color); letter-spacing: -.05em; }
.process-section .phase-copy { max-width: 245px; margin: 0 auto; padding: 0 12px; }
.process-section .phase-copy h3 { font-size: 15px; line-height: 1.5; text-transform: uppercase; letter-spacing: .025em; font-weight: 700; color: var(--phase-color); margin: 0 0 15px; }
.process-section .phase-copy h3::after { content: ""; display: block; width: 32px; height: 2px; background: var(--phase-color); opacity: .65; margin-top: 10px; }
.process-section .phase-copy p { color: #c0bed0; font-size: 14px; line-height: 1.8; margin: 0; }
.process-section .phase-copy .process-output { display: block; color: #eeecf6; font-size: 12px; font-weight: 600; line-height: 1.6; margin-top: 15px; }
.process-section .process-kpis { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 35px; padding: 28px 0; border-block: 1px solid #ffffff21; margin-top: 45px; }
.process-section .process-kpis > div { min-width: 0; }
.process-section .process-kpis .eyebrow { color: #bfa6ff; font-size: 10px; }
.process-section .process-kpis h3 { font-size: 20px; margin: 8px 0 10px; }
.process-section .process-kpis p { font-size: 12px; line-height: 1.8; color: #b8b1ca; max-width: 500px; }
.process-section .process-kpis ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; justify-content: flex-end; }
.process-section .process-kpis li { border: 1px solid #9675d24d; border-radius: 5px; background: #ffffff05; padding: 10px 13px; font-size: 12px; color: #e0d5f3; }
.process-section .process-action { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 28px; }
.process-section .process-action > p { color: #b8b1ca; font-size: 12px; max-width: 420px; line-height: 1.8; }
.process-section .process-action .button { flex-shrink: 0; background: #8950ff; border-color: #8950ff; color: white; box-shadow: 0 6px 24px #783bff28; border-radius: 30px; text-transform: none; }
.process-section .process-action .button:hover { background: #9c6aff; border-color: #9c6aff; }
.process-section + .cases { padding-top: 90px; }
/* Five stages switch to the same icon-left timeline earlier than the four-stage LP. */
@media (max-width: 1000px) {
  .process-section > .container { width: min(760px, calc(100% - 60px)); }
  .process-section .flow-header { margin-bottom: 30px; }
  .process-section .process-connector { display: none; }
  .process-section .process-steps { grid-template-columns: 1fr; gap: 32px; }
  .process-section .process-roadmap-step,
  .process-section .process-roadmap-step:nth-child(even) { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; margin-top: 0; }
  .process-section .phase-art { height: 140px; position: relative; }
  .process-section .phase-art svg { width: 190px; max-width: none; height: 140px; }
  .process-section .phase-copy { max-width: none; padding: 12px 0 0 16px; margin: 0; }
  .process-section .phase-copy h3 { font-size: 16px; line-height: 1.45; margin-bottom: 11px; }
  .process-section .phase-copy h3::after { margin-top: 8px; }
  .process-section .phase-copy p { font-size: 15px; line-height: 1.75; }
  .process-section .phase-copy .process-output { font-size: 13px; margin-top: 10px; }
  .process-section .process-roadmap-step:not(:last-child)::after { content: ""; position: absolute; top: 106px; bottom: -85px; left: 79px; width: 2px; background: #ffffff20; z-index: -1; }
  .process-section .process-kpis { gap: 24px; }
}
@media (max-width: 760px) {
  .process-section > .container { width: calc(100% - 40px); }
  .process-section .flow-header h2 { font-size: 28px; letter-spacing: -.7px; }
  .process-section .flow-header > p { font-size: 14px; }
  .process-section .process-roadmap-step,
  .process-section .process-roadmap-step:nth-child(even) { grid-template-columns: 116px minmax(0, 1fr); }
  .process-section .phase-art svg { width: 160px; height: 130px; margin-left: -6px; }
  .process-section .phase-copy { padding-left: 12px; }
  .process-section .phase-copy h3 { font-size: 15px; }
  .process-section .process-roadmap-step:not(:last-child)::after { left: 57px; }
  .process-section .process-kpis { grid-template-columns: 1fr; gap: 20px; }
  .process-section .process-kpis ul { justify-content: flex-start; }
  .process-section .process-action { flex-direction: column; align-items: flex-start; gap: 20px; }
  .process-section .process-action > p { max-width: 100%; }
  .process-section .process-action .button { width: 100%; font-size: 12px; }
  .process-section + .cases { padding-top: 60px; }
}
@media (max-width: 380px) {
  .process-section > .container { width: calc(100% - 32px); }
  .process-section .process-roadmap-step,
  .process-section .process-roadmap-step:nth-child(even) { grid-template-columns: 86px minmax(0, 1fr); }
  .process-section .phase-art svg { width: 138px; }
  .process-section .phase-copy { padding-left: 10px; }
  .process-section .phase-copy p { font-size: 14px; }
  .process-section .process-roadmap-step:not(:last-child)::after { left: 42px; }
}