/* The two process maps: how a return is declared, and how a document is handed over and
   collected. Plain HTML and CSS rather than a picture, so they reflow: a row on a laptop,
   a vertical track on a phone, and every step is real text a screen reader can read.
   Shared by the landing page and the in-app guide. */

.pmap { margin: 0; }
.pmap__lane { border: 1px solid var(--navy-10); border-radius: var(--radius-card); background: var(--white); padding: 18px 20px 22px; position: relative; }
.pmap__lane + .pmap__down + .pmap__lane { margin-top: 0; }
.pmap__lane--hr { background: var(--grey-soft); border-color: var(--grey-warm); }
.pmap__who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.pmap__who b { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.pmap__who span { font-size: 0.875rem; color: var(--navy-70); }

.pmap__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.pmap__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pmap__step { position: relative; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 8px; padding-right: 18px; }
.pmap__icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: var(--grey);
  display: grid; place-items: center; border-bottom: 3px solid var(--gold);
}
.pmap__lane--hr .pmap__icon { background: var(--white); color: var(--navy); border: 1px solid var(--navy-20); border-bottom: 3px solid var(--gold); }
.pmap__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pmap__step h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.3; margin: 2px 0 0; }
.pmap__step p { margin: 0; font-size: 0.875rem; color: var(--navy-70); line-height: 1.45; }
.pmap__step::before {
  counter-increment: step; content: counter(step); position: absolute; top: -7px; left: -7px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy);
  font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--white);
}
.pmap__lane--hr .pmap__step::before { border-color: var(--grey-soft); }
/* The arrow between steps. */
.pmap__step:not(:last-child)::after {
  content: ""; position: absolute; top: 25px; right: -4px; width: 22px; height: 2px; background: var(--navy-20);
}
.pmap__step:not(:last-child) .pmap__icon::after {
  content: ""; position: absolute; top: 20px; right: -9px; width: 8px; height: 8px;
  border-top: 2px solid var(--navy-20); border-right: 2px solid var(--navy-20); transform: rotate(45deg);
}
.pmap__step .pmap__icon { position: relative; }

.pmap__down { display: flex; justify-content: center; align-items: center; height: 38px; color: var(--navy-70); font-size: 0.8125rem; gap: 10px; }
.pmap__down::before, .pmap__down::after { content: ""; width: 2px; height: 14px; background: var(--navy-20); }
.pmap__down span { padding: 3px 12px; border: 1px solid var(--navy-20); border-radius: 999px; background: var(--white); }

@media (max-width: 860px) {
  .pmap__steps, .pmap__steps--3 { grid-template-columns: 1fr; gap: 0; }
  .pmap__step { grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 0; padding: 0 0 20px; align-items: start; }
  .pmap__step .pmap__icon { grid-row: 1 / span 2; }
  .pmap__step:not(:last-child)::after { top: 56px; left: 25px; right: auto; width: 2px; height: calc(100% - 52px); }
  .pmap__step:not(:last-child) .pmap__icon::after { display: none; }
  .pmap__step:last-child { padding-bottom: 0; }
}