.flow-figure { padding:48px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:32px; }
.row-list { display:grid; gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--line); }
.row-item { min-width:0; padding:32px 28px; background:var(--surface); }
.row-item h3 { margin-bottom:12px; }
.row-item p { font-size:17px; color:var(--ink-muted); line-height:1.8; }
/* The three criteria are read against the diagram, so they share its panel. */
.how-panel { overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.how-panel .flow-figure { margin:0; border:0; border-radius:0; }
.how-panel .row-list { border:0; border-top:1px solid var(--line); border-radius:0; }
@media(min-width:901px) {
 /* Title and description sit side by side so each sentence keeps to one line. */
 .row-item { display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); column-gap:32px; align-items:center; padding:36px 44px; }
 .row-item h3 { margin:0; }
 .row-item p { font-size:18px; color:var(--ink-soft); }
}
.flow-diagram { display:grid; grid-template-columns:1fr 56px 1.3fr 56px 1fr; align-items:center; }
.flow-node { text-align:center; border:1px solid var(--line-strong); padding:28px 16px; border-radius:18px; background:var(--bg); }
.flow-node .flow-text { display:block; }
.flow-node strong { font-size:22px; letter-spacing:-.025em; }
.flow-node span { font-size:17px; color:var(--ink-muted); margin-top:8px; }
.flow-node.core { background:var(--ink); border-color:var(--ink); padding-block:36px; color:white; }
.flow-node.core strong { font-size:30px; }
.flow-node.core span { color:#dce2ed; }
.flow-node.core .rules { border-top:1px solid #ffffff30; padding-top:16px; margin-top:20px; }
.flow-connector { height:1px; background:var(--ink-faint); position:relative; }
.flow-connector::after { content:''; width:8px; height:8px; border-right:1px solid var(--ink-faint); border-top:1px solid var(--ink-faint); transform:rotate(45deg); position:absolute; right:1px; top:-3.5px; }
.flow-reject { grid-column:3; text-align:center; color:var(--accent); font-size:16px; }
.flow-reject::before { content:''; width:1px; height:32px; display:block; border-left:1px dashed var(--accent); margin:0 auto 12px; }
.flow-figure figcaption { color:var(--ink-muted); text-align:center; font-size:16px; margin-top:28px; }
.metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.metric { display:flex; flex-direction:column; gap:24px; }
.m-label { font-size:17px; color:var(--ink-muted); }
.m-value { font-size:36px; font-weight:600; letter-spacing:-.04em; }
.m-pending:empty { display:none; }
@media(max-width:1000px) { .flow-figure { padding:32px; } .flow-diagram { grid-template-columns:1fr 28px 1.2fr 28px 1fr; } .flow-node strong { font-size:19px; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .flow-figure { padding:28px 20px; border-radius:22px; }
 .row-list,.how-panel { border-radius:22px; }
 .flow-diagram { display:flex; flex-direction:column; }
 .flow-node { width:100%; padding:24px 14px; }
 .flow-node strong { font-size:21px; }
 .flow-node.core { padding:28px 14px; }
 .flow-node.core strong { font-size:28px; }
 .flow-connector { width:1px; height:32px; flex:none; }
 .flow-connector::after { transform:rotate(135deg); right:-3.5px; top:auto; bottom:2px; }
 .flow-reject { margin-top:24px; padding-top:20px; border-top:1px dashed var(--accent-light); width:100%; }
 .flow-reject::before { display:none; }
 .metric { padding:28px 20px; gap:16px; }
 .m-label { font-size:16px; } .m-value { font-size:28px; }
}