.page-how-it-works .how-hero {
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}

.page-how-it-works .loop-experience {
  min-height:690px;
  padding:70px 0;
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(640px,1.28fr);
  gap:82px;
  align-items:center;
  background:transparent
}

.page-how-it-works .loop-copy {
  padding: 0 0 30px 48px;
  border-bottom: 1px solid var(--border);
}

.page-how-it-works .loop-copy p {
  color:var(--muted);
  font-size:1.08rem;
  max-width:520px
}

.learning-loop {
  position:relative;
  width:min(760px,100%);
  aspect-ratio:760/560;
  margin-inline:auto
}

.loop-path {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}

.loop-segment {
  fill:none;
  stroke:rgba(255,85,85,.16);
  stroke-width:4;
  stroke-linecap:round;
  marker-end:url(#arrow)
}

.loop-path marker path {
  fill:#ff5555
}

.segment-1,.segment-2,.segment-3,.segment-4 {
  stroke-dasharray:420;
  stroke-dashoffset:420;
  animation:traceStep 8s linear infinite
}

.segment-2 {
  animation-delay:2s
}

.segment-3 {
  animation-delay:4s
}

.segment-4 {
  animation-delay:6s
}

.loop-core {
  position:absolute;
  left:50%;
  top:50%;
  width:205px;
  height:205px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:50%;
  border:1px solid rgba(255,85,85,.4);
  background:radial-gradient(circle,rgba(168,50,50,.22),#111 70%);
  box-shadow:0 0 65px rgba(168,50,50,.18)
}

.loop-core small {
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:8px
}

.loop-core strong {
  font-size: 1.28rem;
}

.cycle-node {
  position:absolute;
  width:190px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(17,17,18,.96);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition:border-color .25s,box-shadow .25s,transform .25s
}

.cycle-node b {
  color:var(--accent);
  font-size:.8rem
}

.cycle-node h3 {
  margin:5px 0;
  font-size:1.18rem
}

.cycle-node p {
  margin:0;
  color:var(--muted);
  font-size:.83rem;
  line-height:1.5
}

.cycle-node.observe {
  left:50%;
  top:-12px;
  transform:translateX(-50%);
  animation:nodeOne 8s infinite
}

.cycle-node.diagnose {
  right:-14px;
  top:50%;
  transform:translateY(-50%);
  animation:nodeTwo 8s infinite
}

.cycle-node.improve {
  left:50%;
  bottom:-24px;
  transform:translateX(-50%);
  animation:nodeThree 8s infinite
}

.cycle-node.measure {
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  animation:nodeFour 8s infinite
}

@keyframes traceStep {
  0%,4% {
    stroke-dashoffset:420;
    stroke:rgba(255,85,85,.14)
  }

  20%,24% {
    stroke-dashoffset:0;
    stroke:#ff5555
  }

  25%,100% {
    stroke-dashoffset:0;
    stroke:rgba(255,85,85,.16)
  }

}

@keyframes nodeOne {
  0%,20% {
    border-color:#ff5555;
    box-shadow:0 0 34px rgba(255,85,85,.25)
  }

  25%,100% {
    border-color:var(--border);
    box-shadow:0 16px 40px rgba(0,0,0,.35)
  }

}

@keyframes nodeTwo {
  0%,24%,50%,100% {
    border-color:var(--border)
  }

  25%,45% {
    border-color:#ff5555;
    box-shadow:0 0 34px rgba(255,85,85,.25)
  }

}

@keyframes nodeThree {
  0%,49%,75%,100% {
    border-color:var(--border)
  }

  50%,70% {
    border-color:#ff5555;
    box-shadow:0 0 34px rgba(255,85,85,.25)
  }

}

@keyframes nodeFour {
  0%,74%,100% {
    border-color:var(--border)
  }

  75%,95% {
    border-color:#ff5555;
    box-shadow:0 0 34px rgba(255,85,85,.25)
  }

}

.page-how-it-works .process-rows {
  border-top:1px solid var(--border)
}

.page-how-it-works .process-rows article {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:30px;
  padding:34px 0;
  border-bottom:1px solid var(--border)
}

.page-how-it-works .process-rows article>span {
  font-size:1.1rem;
  color:var(--accent);
  font-weight:800
}

.page-how-it-works .process-rows p {
  color:var(--muted);
  max-width:760px
}

@media(max-width:1100px) {
  .page-how-it-works .loop-experience {
    grid-template-columns:1fr;
    gap:48px
  }

  .page-how-it-works .loop-copy {
    padding: 0 0 30px;
    max-width: 720px;
  }

  .learning-loop {
    max-width:720px
  }

}

@media(max-width:700px) {
  .page-how-it-works .loop-experience {
    min-height:auto;
    padding:54px 0
  }

  .learning-loop {
    display:grid;
    gap:12px;
    aspect-ratio:auto
  }

  .loop-path,.loop-core {
    display:none
  }

  .cycle-node {
    position:static!important;
    width:100%;
    transform:none!important;
    animation:none!important
  }

  .page-how-it-works .process-rows article {
    grid-template-columns:1fr;
    gap:10px
  }

}

/* Mobile alignment */
@media (max-width: 760px) {
  .page-how-it-works .loop-copy {
    max-width: none;
    padding: 0 0 26px;
    text-align: center;
  }

  .page-how-it-works .loop-copy p {
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 700px) {
  .cycle-node {
    opacity: 0.58;
    border-color: var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  .cycle-node.observe {
    animation: mobileLoopObserve 8s ease-in-out infinite !important;
  }

  .cycle-node.diagnose {
    animation: mobileLoopDiagnose 8s ease-in-out infinite !important;
  }

  .cycle-node.improve {
    animation: mobileLoopImprove 8s ease-in-out infinite !important;
  }

  .cycle-node.measure {
    animation: mobileLoopMeasure 8s ease-in-out infinite !important;
  }
}

@keyframes mobileLoopObserve {
  0%, 22%, 100% {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(255, 85, 85, 0.24);
  }

  27%, 95% {
    opacity: 0.58;
    border-color: var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }
}

@keyframes mobileLoopDiagnose {
  0%, 22%, 48%, 100% {
    opacity: 0.58;
    border-color: var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  27%, 45% {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(255, 85, 85, 0.24);
  }
}

@keyframes mobileLoopImprove {
  0%, 47%, 73%, 100% {
    opacity: 0.58;
    border-color: var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  52%, 70% {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(255, 85, 85, 0.24);
  }
}

@keyframes mobileLoopMeasure {
  0%, 72%, 98%, 100% {
    opacity: 0.58;
    border-color: var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  77%, 95% {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(255, 85, 85, 0.24);
  }
}