/* A single, connected illustration replaces the separate animated objects. */
.how-section {
  padding-top: 112px;
  padding-bottom: 102px;
}

.how-section .section-heading {
  margin-bottom: 34px;
}

.how-section .intro-heading h2 {
  color: #173b32;
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 1.06;
}

.how-section .intro-heading h2 em {
  color: #54805f;
}

.how-section .intro-heading p {
  max-width: 31ch;
  color: #445f51;
  font-size: 17px;
  font-weight: 550;
  line-height: 1.65;
}

.journey-shell {
  overflow: hidden;
  border: 1px solid #284e42;
  border-radius: 22px;
  background: radial-gradient(circle at 17% 8%, #305448 0, transparent 34%), #173b32;
  box-shadow: 0 24px 60px #173b3218;
  color: #f7f8ed;
}

.journey-meta,
.journey-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 30px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.journey-meta {
  border-bottom: 1px solid #ffffff24;
  color: #dce8d7;
}

.journey-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.journey-meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4e99a;
  box-shadow: 0 0 0 5px #d4e99a20;
}

.journey-meta > span:last-child,
.journey-foot > span:first-child {
  color: #a9c0ae;
}

.journey-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-grid::before,
.journey-grid::after {
  position: absolute;
  top: 195px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  content: '';
  pointer-events: none;
}

.journey-grid::before { background: #a9c4a46b; }
.journey-grid::after {
  background: #d5ea9a;
  transform: scaleX(0);
  transform-origin: left;
}
.journey-grid.is-visible::after { animation: journey-route 1.4s ease-out .12s both; }
@keyframes journey-route { to { transform: scaleX(1); } }

.journey-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 26px 25px 34px;
  border-right: 1px solid #ffffff24;
}
.journey-card:last-child { border-right: 0; }

.journey-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
}
.journey-visual::before {
  position: absolute;
  width: 174px;
  height: 112px;
  border-radius: 50%;
  background: #beddb31c;
  filter: blur(12px);
  content: '';
}

.journey-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 20px auto 28px;
  border: 2px solid #cde5a1;
  border-radius: 50%;
  background: #d5ea9a;
  color: #173b32;
  font: 800 11px Manrope, Arial, sans-serif;
  box-shadow: 0 0 0 6px #173b32;
}

.journey-role {
  display: block;
  margin-bottom: 10px;
  color: #b7d49b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
}
.journey-card h3 {
  min-height: 0;
  margin: 0 0 12px;
  color: #fffef3;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.18;
}
.journey-card p {
  max-width: 25ch;
  color: #cbd9cc;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.journey-foot {
  border-top: 1px solid #ffffff24;
  padding-block: 18px;
}
.journey-foot > span:last-child { color: #edf4dc; }
.journey-foot i { padding-inline: 7px; color: #d5ea9a; font-style: normal; }

.motion-ribbon {
  padding-block: 12px;
  border-top: 1px solid #315b47;
  background: #102f28;
}
.motion-ribbon-track { animation-duration: 42s; }
.motion-ribbon .ribbon-item { gap: 14px; font-size: 24px; letter-spacing: -.035em; }
.motion-ribbon .ribbon-item i { font-size: 18px; }
.motion-ribbon .ribbon-scan { color: #d5ea9a; }
.motion-ribbon .ribbon-upload { color: #b4dbc2; }
.motion-ribbon .ribbon-approve { color: #f0dfad; }
.motion-ribbon .ribbon-print { color: #c6dfd3; }

/* Four small views of the same order, drawn in the same materials and light. */
.journey-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 78px;
  height: 119px;
  padding: 11px 7px 6px;
  border: 4px solid #a9c8ac;
  border-radius: 14px;
  background: #f6f8ee;
  box-shadow: 5px 7px 0 #0d2b25;
  transform: rotate(-4deg);
}
.phone-speaker { position: absolute; top: 4px; width: 18px; height: 3px; border-radius: 2px; background: #254d3e; }
.phone-shop { color: #315843; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.phone-qr { width: 55px; height: 55px; margin-top: 7px; fill: #254d3e; stroke: #254d3e; stroke-width: 1; }
.phone-caption { margin-top: auto; color: #486350; font-size: 5px; font-weight: 800; letter-spacing: .09em; }

.journey-files { position: relative; width: 168px; height: 120px; }
.file-sheet {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 79px;
  height: 103px;
  padding: 14px 10px;
  border: 2px solid #b3ceae;
  border-radius: 7px;
  background: #f6f8ee;
  color: #214b3d;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 3px 5px 0 #0d2b2545;
}
.file-sheet i { display: block; width: 100%; height: 3px; margin-top: 16px; border-radius: 2px; background: #90ab91; box-shadow: 0 9px 0 #c0d0b9, 0 18px 0 #c0d0b9; }
.file-img { left: 81px; top: 12px; transform: rotate(10deg); }
.file-doc { left: 49px; top: 5px; transform: rotate(2deg); }
.file-pdf { left: 22px; top: 12px; transform: rotate(-9deg); }
.journey-setting {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: max-content;
  padding: 5px 9px;
  border: 1px solid #bbd397;
  border-radius: 4px;
  background: #dcebbd;
  color: #245041;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  transform: translateX(-50%);
}

.journey-dashboard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 160px;
  height: 108px;
  overflow: hidden;
  border: 5px solid #a9c8ac;
  border-radius: 10px;
  background: #f6f8ee;
  box-shadow: 5px 7px 0 #0d2b25;
  transform: rotate(2deg);
}
.dash-top { display: flex; align-items: center; gap: 3px; height: 21px; padding-inline: 9px; background: #214b3d; }
.dash-top i { width: 4px; height: 4px; border-radius: 50%; background: #bcd49d; }
.dash-top b { margin-left: auto; color: #edf5d7; font-size: 6px; letter-spacing: .1em; }
.dash-order { display: flex; flex-direction: column; gap: 3px; padding: 12px 11px 5px; }
.dash-order b { color: #254b3d; font-size: 10px; }
.dash-order small { color: #587364; font-size: 8px; }
.dash-approve { align-self: flex-end; margin: auto 10px 8px; padding: 5px 9px; border-radius: 4px; background: #d5ea9a; color: #214b3d; font-size: 8px; font-weight: 800; }

.journey-printer { position: relative; width: 160px; height: 118px; margin-top: 11px; }
.printer-paper-in { position: absolute; top: -7px; left: 52px; width: 59px; height: 53px; border: 2px solid #b8ceb4; background: #f6f8ee; }
.printer-top { position: absolute; top: 27px; left: 8px; width: 144px; height: 24px; border: 3px solid #abc5aa; border-radius: 9px 9px 4px 4px; background: #315c49; }
.printer-body { position: absolute; top: 48px; left: 12px; width: 136px; height: 57px; border: 3px solid #a9c8ac; border-radius: 7px 7px 12px 12px; background: #f6f8ee; box-shadow: 4px 5px 0 #0d2b25; }
.printer-body i { position: absolute; top: 9px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #a3c762; }
.printer-body b { position: absolute; top: 23px; left: 17px; right: 17px; height: 9px; border-radius: 3px; background: #214b3d; }
.printer-paper-out { position: absolute; top: 80px; left: 38px; width: 84px; height: 34px; padding: 14px 12px 0; border: 2px solid #bad0b4; background: #f6f8ee; }
.printer-paper-out i { display: block; height: 2px; margin-bottom: 4px; background: #a4bba4; }
.printer-paper-out i:nth-child(2) { width: 80%; }
.printer-paper-out i:nth-child(3) { width: 60%; }

@media (max-width: 1000px) {
  .how-section { padding-block: 80px; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid::before,
  .journey-grid::after { top: 40px; bottom: 40px; left: 43px; right: auto; width: 2px; height: auto; }
  .journey-grid::after { transform: scaleY(0); transform-origin: top; }
  .journey-grid.is-visible::after { animation-name: journey-route-vertical; }
  @keyframes journey-route-vertical { to { transform: scaleY(1); } }
  .journey-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 180px;
    grid-template-rows: auto auto 1fr;
    column-gap: 22px;
    min-height: 165px;
    padding: 22px 25px;
    border-right: 0;
    border-bottom: 1px solid #ffffff24;
  }
  .journey-card:last-child { border-bottom: 0; }
  .journey-node { grid-column: 1; grid-row: 1 / 4; align-self: start; margin: 0; }
  .journey-role { grid-column: 2; grid-row: 1; margin-top: 4px; }
  .journey-card h3 { grid-column: 2; grid-row: 2; margin-top: 1px; }
  .journey-card p { grid-column: 2; grid-row: 3; max-width: 35ch; }
  .journey-visual { grid-column: 3; grid-row: 1 / 4; height: 120px; }
  .journey-foot { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .how-section { padding-block: 68px; }
  .how-section .intro-heading h2 { font-size: clamp(39px, 10vw, 54px); }
  .how-section .intro-heading p { margin-top: 18px; font-size: 16px; }
  .journey-shell { border-radius: 17px; }
  .journey-meta,
  .journey-foot { padding: 18px 20px; font-size: 9px; }
  .journey-meta > span:last-child { display: none; }
  .journey-grid::before,
  .journey-grid::after { left: 35px; }
  .journey-card {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 17px;
    min-height: 0;
    padding: 22px 17px 25px;
  }
  .journey-visual { grid-column: 2; grid-row: 1; justify-content: flex-start; height: 120px; margin-bottom: 13px; }
  .journey-node { grid-row: 1 / 5; }
  .journey-role { grid-column: 2; grid-row: 2; }
  .journey-card h3 { grid-column: 2; grid-row: 3; font-size: 23px; }
  .journey-card p { grid-column: 2; grid-row: 4; font-size: 15px; }
  .journey-foot > span:first-child { display: none; }
  .journey-foot > span:last-child { font-size: 8px; white-space: nowrap; letter-spacing: .03em; }
  .journey-foot i { padding-inline: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-grid::after { transform: none; animation: none !important; }
}
.reduced-motion .journey-grid::after { transform: none; animation: none !important; }