/* Document Intelligence: a readable, content-driven processing diagram. */
.document-flow { margin: 27px 0 0; color: var(--ink); }
.document-flow h3, .document-flow h4 { margin: 0 0 4px; font-size: 12px; line-height: 1.5; font-weight: 520; letter-spacing: -.08px; }
.document-flow p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.document-flow__source, .document-flow__records { padding: 14px 18px; border: 1px solid var(--line); border-radius: 4px; text-align: center; }
.document-flow__source h3 { font-size: 14px; }
.document-flow__arrow { display: flex; align-items: center; justify-content: center; color: #aaa; height: 25px; }
.document-flow__arrow--down svg { transform: rotate(90deg); }
.document-flow__preparation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 4px; }
.document-flow__preparation li { min-width: 0; position: relative; padding: 13px 16px 14px 39px; }
.document-flow__preparation li + li { border-left: 1px solid var(--line); }
.document-flow__step { position: absolute; top: 16px; left: 14px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 9px; line-height: 1.5; color: var(--muted); }
.document-flow__tag { display: inline-block; margin-top: 7px; font-size: 10px; line-height: 1.5; color: var(--muted); padding: 1px 6px; background: #f6f6f4; border-radius: 2px; }
.document-flow__confidence { border: 1px solid var(--line); border-radius: 4px; padding: 13px 16px 15px; }
.document-flow__confidence > h3, .document-flow__confidence-note { text-align: center; }
.document-flow .document-flow__confidence-note { margin-bottom: 2px; }
.document-flow__branches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); margin-top: 12px; border-top: 1px solid var(--line); }
.document-flow__branch { padding: 12px 14px 0 0; }
.document-flow__branch + .document-flow__branch { padding: 12px 0 0 16px; border-left: 1px solid var(--line); }
.document-flow__review { margin-top: 11px; padding-left: 11px; border-left: 1px dashed #c5c5c5; }
.document-flow__review h4 { color: #555; }
.document-flow__records { background: #fafaf9; }
.document-flow__outputs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; list-style: none; padding: 0; margin: 0; }
.document-flow__outputs li { font-size: 11px; line-height: 1.7; color: #555; }
.document-flow__sync { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.document-flow__sync svg { margin-top: 3px; color: var(--muted); }
.document-flow .document-flow__sync p { font-size: 10px; }
.document-flow figcaption { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.7; }
@media (max-width: 480px) {
  .document-flow__preparation { grid-template-columns: minmax(0, 1fr); }
  .document-flow__preparation li + li { border-left: 0; border-top: 1px solid var(--line); }
  .document-flow__branches { grid-template-columns: minmax(0, 1fr); }
  .document-flow__branch { padding: 12px 0; }
  .document-flow__branch + .document-flow__branch { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .document-flow__outputs { gap: 6px 17px; }
  .document-flow__sync { justify-content: flex-start; }
}