/* "Payment Providers" audience page (audience-navigation page, not a product page). Loads after api.css (shared .cx code blocks, .ap-* status pills, .ap-copy) which loads after entity.css (eik/eic pills, ei-keep, eq-*, er-*, fp-sample, ei-cta-viz) and platform.css (fu-*, fp-faq, fp-tabs JS, fu-kpis/fu-rows). Prefixes: pay- hero/nav/route, pf- five-state status pill (normal/warning/exception/review/unavailable), py- challenges/benefits, pyw- review workspace, flow- normal/exception paths, own- response ownership, pin- operational insights. */

.sh-notice { display:flex; gap:12px; align-items:flex-start; margin:26px 0 0!important; padding:14px 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#b7cccd!important; font-size:.875rem!important; line-height:1.55!important; max-width:560px; }
.sh-notice svg { flex:none; width:22px; height:22px; margin-top:1px; fill:none; stroke:#18c79b; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* five-state status vocabulary used across the whole page */
.pf { display:inline-block; font-style:normal; font-size:.75rem; font-weight:700; padding:3px 11px; border-radius:999px; white-space:nowrap; line-height:1.4; border:1px solid transparent; }
.pf--normal { background:#d9f4ea; color:#075c47; border-color:#a9e2cd; }
.pf--warning { background:#fbefcf; color:#7a5300; border-color:#ecd28f; }
.pf--exception { background:#fde0e0; color:#8f1d1d; border-color:#f3b4b4; }
.pf--review { background:#e2e9ff; color:#2c3e88; border-color:#bccbf5; }
.pf--unavailable { background:#e4ebee; color:#41565f; border-color:#c5d2d8; }

/* ---------- hero ---------- */
.pay-mesh { position:absolute; inset:0; pointer-events:none; opacity:.9; }
.pay-mesh svg { display:block; width:100%; height:100%; } .pay-mesh path { stroke:rgba(24,199,155,.2); } .pay-mesh path.d { stroke-dasharray:4 12; }
.pay-nodes circle { fill:#18c79b; filter:drop-shadow(0 0 6px rgba(24,199,155,.8)); animation:ei-blink 3.6s ease-in-out infinite; } .pay-nodes circle:nth-child(even) { animation-delay:1.4s; }
.fu--pay { font-size:.875rem; }
.pay-body { padding:14px; display:grid; gap:12px; }
.pay-route { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; padding:12px 14px; background:#0a1c28; border:1px solid #1b3d4e; border-radius:8px; }
.pay-node { min-width:0; } .pay-node:last-child { text-align:right; } .pay-node small { display:block; color:#86a9ae; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; } .pay-node b { color:#eaf4f2; font-size:.875rem; }
.pay-route-svg { width:120px; height:24px; display:block; }
.pay-fields { margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.pay-fields > div { padding:9px 11px; background:#0a1c28; border:1px solid #1b3d4e; border-radius:6px; min-width:0; }
.pay-fields dt { color:#86a9ae; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; } .pay-fields dd { margin:0; color:#eaf4f2; font-size:.8125rem; overflow-wrap:anywhere; }
.pay-status-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pay-status-row > div { padding:10px 11px; background:#10303f; border:1px solid #1f4557; border-radius:6px; display:grid; gap:6px; } .pay-status-row small { color:#8fb0b5; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; }
.pay-box { background:#0a1c28; border:1px solid #1b3d4e; border-radius:6px; padding:10px 12px; }
.pay-box-h { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:#86a9ae; font-weight:650; } .pay-box-h span:last-child { text-transform:none; letter-spacing:0; font-weight:500; }
.pay-meta { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .pay-meta > div { padding:9px 11px; background:#10303f; border:1px solid #1f4557; border-radius:6px; } .pay-meta dt { color:#86a9ae; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; } .pay-meta dd { margin:0; color:#eaf4f2; font-size:.8125rem; }
.pay-av { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#12363f; color:#7ee8c8; font:700 .5rem ui-monospace,Consolas,monospace; margin-right:6px; vertical-align:middle; }

/* ---------- sticky section nav ---------- */
.pay-jumps { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e1ebe7; }
.pay-jumps-in { max-width:1180px; margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:4px 6px; }
.pay-jumps a { display:inline-block; padding:15px 14px; font-size:.9375rem; font-weight:650; color:var(--mute); text-decoration:none; border-bottom:3px solid transparent; }
.pay-jumps a:hover { color:var(--ink); } .pay-jumps a.is-on { color:var(--em); border-bottom-color:var(--em); }
.pay-jumps a:focus-visible { outline:2px solid var(--em); outline-offset:-2px; }

/* ---------- 3. challenges ---------- */
.py-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.py-c { margin:0; background:#fff; border:1px solid #d3e6de; border-radius:10px; padding:22px; display:grid; gap:12px; align-content:start; }
.py-c h3 { margin:0; font-size:1.1875rem; } .py-c > p { margin:0; font-size:.9375rem; line-height:1.55; color:var(--mute); }
.py-sc { list-style:none; margin:0; padding:12px 0 0; border-top:1px dashed #d3e6de; display:grid; gap:8px; }
.py-sc li { margin:0; display:flex; gap:8px; align-items:flex-start; font-size:.875rem; color:var(--ink); line-height:1.4; }
.py-sc svg { flex:none; width:16px; height:16px; margin-top:2px; fill:none; stroke:var(--em); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.py-note { display:flex; gap:12px; margin:22px 0 0!important; padding:14px 18px; background:var(--mint-l); border:1px solid #d3e6de; border-radius:8px; color:var(--mute)!important; font-size:.9375rem!important; line-height:1.5!important; }
.py-note svg { flex:none; width:22px; height:22px; fill:none; stroke:var(--em); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fp-content .py-note { margin-top:22px; }

/* ---------- 4. payment review workspace ---------- */
.pyw-win { max-width:100%; }
.pyw-top { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:16px 20px; background:#0a1c28; border-bottom:1px solid #1d4254; }
.pyw-top h3 { margin:0; color:#fff; font-size:1.0625rem; } .pyw-top small { display:block; color:#7ee8c8; font-size:.75rem; }
.pyw-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.pyw-main { padding:22px; display:grid; gap:14px; }
.pyw-kv { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pyw-kv > div { padding:10px 12px; background:#0a1c28; border:1px solid #1b3d4e; border-radius:6px; } .pyw-kv dt { color:#86a9ae; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; } .pyw-kv dd { margin:0; color:#eaf4f2; font-size:.9375rem; overflow-wrap:anywhere; }
.pyw-blk { padding:14px 16px; background:#0a1c28; border:1px solid #1b3d4e; border-radius:6px; } .pyw-blk small { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; color:#86a9ae; font-weight:650; margin-bottom:10px; } .pyw-blk p { margin:0!important; color:#dcebe8!important; font-size:.9375rem!important; line-height:1.55!important; }
.pyw-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .pyw-list li { margin:0; display:flex; justify-content:space-between; gap:12px; font-size:.875rem; color:#dcebe8; padding-bottom:8px; border-bottom:1px solid #16394a; } .pyw-list li:last-child { border:0; padding-bottom:0; } .pyw-list span { color:#8fb0b5; }
.pyw-side { padding:22px; background:#0b2130; border-left:1px solid #1d4254; display:grid; gap:14px; align-content:start; }
.pyw-states { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:1024px) { .pyw-grid { grid-template-columns:1fr; } .pyw-side { border-left:0; border-top:1px solid #1d4254; } .pyw-kv { grid-template-columns:1fr; } }

/* ---------- 5. normal and exception paths ---------- */
.flow-wrap { display:grid; gap:26px; }
.flow-normal { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative; }
.flow-normal::before { content:''; position:absolute; left:7%; right:7%; top:34px; border-top:2px solid #bfe0d3; z-index:0; }
.flow-n { margin:0; position:relative; z-index:1; padding:0 10px; display:grid; justify-items:center; gap:8px; text-align:center; }
.flow-ic { display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--em); color:var(--em); box-shadow:0 0 0 6px #fff; }
.flow-ic svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.flow-n h3 { margin:2px 0 0; font-size:1rem; line-height:1.3; } .flow-n p { margin:0; font-size:.8125rem; line-height:1.4; color:var(--mute); }
.flow-n--last .flow-ic { border-color:#4c6fa5; color:#2c3e88; }
.flow-except { border:1px solid #d3e6de; border-radius:10px; padding:22px; background:var(--mint-l); }
.flow-except-h { display:flex; align-items:center; gap:10px; margin-bottom:16px; } .flow-except-h svg { width:22px; height:22px; fill:none; stroke:#e0a92e; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .flow-except-h b { font-size:1.0625rem; }
.flow-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.flow-x { margin:0; padding:14px 16px; background:#fff; border:1px solid #d3e6de; border-left-width:4px; border-radius:6px; display:grid; gap:8px; align-content:start; }
.flow-x h4 { margin:0; font-size:.9375rem; } .flow-x p { margin:0; font-size:.8125rem; color:var(--mute); line-height:1.4; }
.flow-x--normal { border-left-color:#0a7d62; } .flow-x--warning { border-left-color:#e0a92e; } .flow-x--exception { border-left-color:#e5484d; } .flow-x--review { border-left-color:#4c6fa5; } .flow-x--unavailable { border-left-color:#8fa3ab; }
.flow-rule { display:flex; gap:14px; margin:22px 0 0!important; padding:16px 20px; background:#062832; color:#dcebe8!important; border-radius:8px; font-size:1.0625rem!important; line-height:1.55!important; }
.flow-rule svg { flex:none; width:24px; height:24px; fill:none; stroke:#18c79b; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .flow-rule b { color:#fff; }
.fp-content .flow-rule { margin-top:22px; }

/* ---------- 6. capability flow (reuses .er / .er-flow generic components) ---------- */

/* ---------- 7. API integration concept (reuses .cx / .ck / .cs / .cn / .cc / .cp / .ap-* / .ap-copy from api.css) ---------- */
.api2-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.api2-col h3 { margin:0 0 10px; color:#fff; font-size:1.125rem; } .api2-col small { display:block; margin:10px 0 6px; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:#86a9ae; font-weight:650; }
.api2-meta { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .api2-meta li { margin:0; display:flex; justify-content:space-between; gap:10px; font-size:.8125rem; color:#dcebe8; padding-bottom:8px; border-bottom:1px solid #16394a; } .api2-meta li:last-child { border:0; } .api2-meta span { color:#8fb0b5; }
.api2-unavail { grid-column:1 / -1; margin-top:6px; }
@media (max-width:1024px) { .api2-cols { grid-template-columns:1fr; } }

/* ---------- 8. response ownership ---------- */
.own { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; align-items:stretch; }
.own-p { margin:8px; padding:18px; background:#fff; border:1px solid #d3e6de; border-top:4px solid var(--em); border-radius:10px; display:grid; gap:8px; align-content:start; position:relative; }
.own-p:not(:last-child)::after { content:''; position:absolute; top:34px; right:-16px; width:16px; border-top:2px dashed #9fd0c1; z-index:1; }
.own-p h3 { margin:2px 0 0; font-size:1.0625rem; } .own-p time { color:var(--mute); font-size:.75rem; }
.own-p p { margin:0!important; font-size:.8125rem!important; line-height:1.45!important; color:var(--mute)!important; }
.own-fx { list-style:none; margin:6px 0 0; padding:8px 0 0; border-top:1px dashed #d3e6de; display:grid; gap:4px; font-size:.75rem; color:var(--ink); }
.own-fx li { margin:0; } .own-fx b { color:var(--em); }
.own-note { display:flex; gap:12px; margin:20px 0 0!important; padding:14px 18px; background:var(--mint-l); border:1px solid #d3e6de; border-radius:8px; color:var(--mute)!important; font-size:.9375rem!important; line-height:1.5!important; }
.own-note svg { flex:none; width:22px; height:22px; fill:none; stroke:var(--em); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fp-content .own-note { margin-top:20px; }

/* ---------- 9. operational insights (reuses .fu-kpis/.fu-rows/.fu-chip/.fu-dot from platform.css) ---------- */
.pin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.pin-full { grid-column:1 / -1; }
.pin-bars { list-style:none; margin:0; padding:0; display:grid; gap:10px; } .pin-bars li { margin:0; display:grid; grid-template-columns:minmax(0,1.3fr) 2fr 46px; gap:10px; align-items:center; font-size:.8125rem; color:#dcebe8; }
.pin-bars div { height:8px; border-radius:4px; background:#16394a; overflow:hidden; } .pin-bars i { display:block; height:100%; border-radius:4px; background:#18c79b; }
.pin-bars b { text-align:right; color:#b7cccd; font-size:.75rem; }
.pin-tl { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .pin-tl li { margin:0; display:flex; justify-content:space-between; gap:10px; font-size:.8125rem; color:#dcebe8; padding-bottom:8px; border-bottom:1px solid #16394a; } .pin-tl li:last-child { border:0; padding-bottom:0; } .pin-tl span { color:#8fb0b5; }

/* ---------- 10. benefits ---------- */
.py-q { margin-top:4px; padding:10px 12px; background:var(--mint-l); border-left:3px solid var(--em); border-radius:4px; font-size:.8125rem; color:var(--ink); line-height:1.4; }
.py-q b { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:var(--em); margin-bottom:2px; }

@media (max-width:1180px) {
	.py-grid { grid-template-columns:1fr; }
	.flow-normal { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; } .flow-normal::before { display:none; }
	.flow-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.own { grid-template-columns:1fr; } .own-p::after { display:none; }
	.pin-grid { grid-template-columns:1fr; }
	.eq { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
	.pay-fields, .pay-status-row { grid-template-columns:1fr 1fr; }
	.pay-jumps-in { padding:0 16px; overflow-x:auto; flex-wrap:nowrap; } .pay-jumps a { white-space:nowrap; }
	.flow-list { grid-template-columns:1fr; }
	.eq { grid-template-columns:1fr; }
	.pyw-kv { grid-template-columns:1fr; }
}