.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;max-width:520px;margin:20px auto}
.flow-card{border:1px solid #cdd8c9;border-radius:12px;padding:16px 8px;text-align:center;background:#fffefa}
.flow-card>span{display:block;font-size:12px;color:#56675b}
.flow-card strong{font-size:15px;font-weight:500}
.water-drops{color:#285b4b;letter-spacing:5px;font-size:20px;margin:9px 0}
.flow-total{text-align:center;font-size:14px;color:#285b4b;margin:15px 0}
.comparison{max-width:470px;margin:18px auto}
.comparison>div{margin:18px 0}
.comparison span{display:block;font-size:12px;margin-bottom:7px;color:#56675b}
.price-bar{background:#a45c36;color:white;padding:11px 15px;border-radius:6px;width:100%;font-size:15px}
.price-bar.lower{width:80%;background:#285b4b}
.journey-graph{max-width:540px;margin:12px auto}
.journey-graph svg{display:block;width:100%;height:auto;overflow:visible}
.journey-graph text{fill:#344d40;font-family:Arial,Helvetica,sans-serif;font-size:14px}
.journey-graph .axis-title{font-size:14px;font-weight:600}
.graph-grid{stroke:#cbd4c7;stroke-width:1}
.graph-axis{fill:none;stroke:#506451;stroke-width:2}
.graph-line{fill:none;stroke:#81927b;stroke-width:3;stroke-dasharray:5 4}
.graph-line.selected{stroke:#285b4b;stroke-width:5;stroke-dasharray:none}
.graph-point{fill:#285b4b;stroke:#f1f3eb;stroke-width:2}
.journey-table{font-size:12px;border-collapse:collapse;width:100%;max-width:370px;margin:12px auto 0;text-align:center}
.journey-table caption{font-size:11px;color:#56675b;margin:0 0 8px}
.journey-table td,.journey-table th{padding:6px 12px;border-bottom:1px solid #d5ddce}
@media(max-width:380px){.flow-grid{gap:7px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.rate-cell{padding:15px 18px}.rate-figure{gap:12px}}