/* Annotations sit in the existing empty icon band; card geometry stays unchanged. */
.has-hand-note:focus-visible{outline:2px solid var(--accent,#45c796);outline-offset:-3px}
.hand-note{position:absolute;top:14px;left:104px;right:18px;color:#f4f1e9;font-family:'Caveat','Segoe Print',cursive;font-weight:500;font-size:20px;line-height:1.04;letter-spacing:0;text-transform:none;opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .2s ease,transform .25s ease;z-index:2}
.hand-note svg{display:block;width:64px;height:30px;margin:0 0 2px 8px;overflow:visible}
.hand-note path{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .38s ease}
.hand-note-copy{display:block;max-width:26ch;transform:rotate(-3deg);transform-origin:left center}
.hand-note--2 svg{margin-left:35px;transform:rotate(-6deg)}
.hand-note--2 .hand-note-copy{transform:rotate(2deg)}
.hand-note--3 svg{margin-left:auto;margin-right:26px;transform:rotate(8deg)}
.hand-note--3 .hand-note-copy{transform:rotate(-1deg)}
.hand-note--4 svg{transform:rotate(-4deg);margin-left:18px;width:76px}
.hand-note--4 .hand-note-copy{transform:rotate(3deg)}
.hand-note--5 svg{margin-left:42px;transform:rotate(3deg);width:70px}
.hand-note--5 .hand-note-copy{transform:rotate(-4deg)}
.note-active>.hand-note{opacity:1;transform:translateY(0)}
.note-active>.hand-note path{stroke-dashoffset:0}
@media(hover:none),(pointer:coarse){
  .has-hand-note>.hand-note{opacity:1;transform:none}
  .has-hand-note>.hand-note path{stroke-dashoffset:0}
}
@media(max-width:600px){
  .hand-note{left:94px;right:12px;font-size:18px;top:10px}
  .has-hand-note>.hand-note{opacity:1;transform:none}
  .has-hand-note>.hand-note path{stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){.hand-note,.hand-note path{transition:none}}

/* Four hand-drawn connectors lead to the next step; the final slot is empty. */
.proc-list--arrows .proc-step{grid-template-columns:30px minmax(0,1fr)}
.proc-list--arrows .proc-connector{display:block;min-width:0}
.proc-list--arrows .proc-hand-arrow{position:absolute;left:0;top:3.6rem;width:30px;height:calc(100% - 1.2rem);overflow:visible;pointer-events:none;z-index:1;color:#f4f1e9}
.proc-list--arrows .proc-hand-arrow path{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}