/* How it works (Figma frame 20:1168): five steps with arrows between them,
   then an example check beside what's kept. Figma rounds each line of text
   to whole pixels, so the rows' line heights are written in px to keep
   every row the 77 px the design has. */

/* the steps: shared small cards, 169 px tall, an arrow between each pair */
.hiw-steps { display: flex; align-items: stretch; gap: 8px; }
.hiw-steps .hiw-step { flex: 1 0 0; min-width: 0; min-height: 169px; }
.hiw-steps .step-n { color: var(--orange-ink); font-size: 12px; font-weight: 700; line-height: var(--lh); }
.hiw-steps .hiw-step h3 { line-height: 20px; }
.hiw-steps .hiw-step p { line-height: 20px; }
.hiw-steps .arrow { flex: none; align-self: center; width: 18px; height: 18px; }

/* the example check beside what's kept */
.hiw-details { display: flex; align-items: flex-start; gap: 20px; }
.hiw-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hiw-log { flex: 1 0 0; }
.hiw-kept { flex: none; width: 420px; }

.hiw-log .rows { margin: 0; padding: 0; list-style: none; border: 1px solid #e8e0d5; border-radius: 16px; background: #fff; overflow: hidden; }
.hiw-log .row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.hiw-log .row:not(:last-child) { border-bottom: 1px solid #e8e0d5; }
.hiw-log .row-text { display: flex; flex: 1 0 0; flex-direction: column; gap: 4px; min-width: 0; }
.hiw-log .row-text b { font-size: 14px; font-weight: 600; line-height: 20px; }
.hiw-log .row-text span { color: var(--body); font-size: 13px; line-height: 20px; }
.hiw-log .row-meta { flex: none; color: var(--faint); font-size: 12px; font-weight: 600; line-height: var(--lh); white-space: nowrap; }

.kept { margin: 0; font-size: 14px; line-height: 1.5; }
.kept dt { flex: none; width: 150px; font-weight: 600; }
.kept dd { flex: 1 0 0; min-width: 0; margin: 0; color: var(--body); }
.hiw-note { padding: 14px 16px; border-radius: 14px; background: #fff0e3; color: var(--body); font-size: 13px; line-height: 20px; }

/* narrower: the steps and the two columns stack; the arrows point down */
@media (max-width: 960px) {
  .hiw-steps { flex-direction: column; }
  .hiw-steps .hiw-step { flex: none; min-height: 0; }
  .hiw-steps .arrow { transform: rotate(90deg); }
  .hiw-details { flex-direction: column; align-items: stretch; gap: 24px; }
  .hiw-kept { width: auto; }
  .kept .tbl-row { flex-wrap: nowrap; gap: 16px; }
  .kept dt { width: 140px; }
}
@media (max-width: 640px) {
  .hiw-log .row { padding: 14px 16px; gap: 12px; }
  .kept .tbl-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; }
  .kept dt { width: auto; }
}