/* "Fintech and Web3 Companies" audience page (audience-navigation page, not an SDK or credential portal). 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, fu-kpis/fu-rows). Prefixes: fte- hero/nav/misc, ch3- challenges, iw- integration workspace, ux- user-experience flow, own2- team ownership, wf2- integration evaluation workflow. Monospace is used for code only. */

.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; }
.fte-review { 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; background:#e2e9ff; color:#2c3e88; border:1px solid #bccbf5; }
/* six-state status pill: success, partial, warning, error, unavailable, review required */
.fp2 { 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; }
.fp2--ok { background:#d9f4ea; color:#075c47; border-color:#a9e2cd; }
.fp2--partial { background:#fbefcf; color:#7a5300; border-color:#ecd28f; }
.fp2--warn { background:#fde2cc; color:#8a3d05; border-color:#f4c19b; }
.fp2--er { background:#fde0e0; color:#8f1d1d; border-color:#f3b4b4; }
.fp2--un { background:#e4ebee; color:#41565f; border-color:#c5d2d8; }
.fp2--rev { background:#e2e9ff; color:#2c3e88; border-color:#bccbf5; }

/* ---------- hero ---------- */
.fte-mesh { position:absolute; inset:0; pointer-events:none; opacity:.9; }
.fte-mesh svg { display:block; width:100%; height:100%; } .fte-mesh path { stroke:rgba(24,199,155,.2); } .fte-mesh path.d { stroke-dasharray:4 12; }
.fte-nodes circle { fill:#18c79b; filter:drop-shadow(0 0 6px rgba(24,199,155,.8)); animation:ei-blink 3.6s ease-in-out infinite; } .fte-nodes circle:nth-child(even) { animation-delay:1.4s; }
.fu--fte { font-size:.8125rem; }
.fte-body { padding:14px; display:grid; gap:10px; }
.fte-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; position:relative; }
.fte-flow::before { content:''; position:absolute; left:4%; right:4%; top:18px; border-top:2px dashed #24485a; z-index:0; }
.fte-flow li { margin:0; position:relative; z-index:1; padding:10px 10px 10px 22px; background:#0a1c28; border:1px solid #1b3d4e; border-radius:6px; }
.fte-flow li::before { content:''; position:absolute; left:8px; top:14px; width:8px; height:8px; border-radius:50%; background:#18c79b; }
.fte-flow--b li::before { background:#8fa3ab; }
.fte-flow b { display:block; color:#eaf4f2; font-size:.75rem; font-weight:650; line-height:1.3; } .fte-flow small { color:#8fb0b5; font-size:.6875rem; }
.fte-code { background:#071a24; border:1px solid #1b3d4e; border-radius:6px; padding:10px 12px; }
.fte-code pre { margin:0; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.75rem; line-height:1.6; color:#dcebe8; white-space:pre-wrap; }
.fte-code .cc { color:#6f8d94; font-style:italic; } .fte-code .ck { color:#7ee8c8; } .fte-code .cs { color:#f2c777; }

/* ---------- sticky section nav ---------- */
.fte-jumps { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e1ebe7; }
.fte-jumps-in { max-width:1180px; margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:4px 6px; }
.fte-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; }
.fte-jumps a:hover { color:var(--ink); } .fte-jumps a.is-on { color:var(--em); border-bottom-color:var(--em); }
.fte-jumps a:focus-visible { outline:2px solid var(--em); outline-offset:-2px; }

/* ---------- 3. challenges ---------- */
.ch3-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ch3-c { margin:0; background:#fff; border:1px solid #d3e6de; border-radius:10px; padding:22px; display:grid; gap:12px; align-content:start; }
.ch3-c h3 { margin:0; font-size:1.1875rem; } .ch3-c > p { margin:0; font-size:.9375rem; line-height:1.55; color:var(--mute); }
.ch3-sc { list-style:none; margin:0; padding:12px 0 0; border-top:1px dashed #d3e6de; display:grid; gap:8px; }
.ch3-sc li { margin:0; display:flex; gap:8px; align-items:flex-start; font-size:.875rem; color:var(--ink); line-height:1.4; }
.ch3-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; }
.ch3-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; }
.ch3-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 .ch3-note { margin-top:22px; }

/* ---------- 4. integration workspace ---------- */
.iw-builder { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 16px; background:#0a1c28; border:1px solid #1b3d4e; border-radius:8px; margin-bottom:18px; }
.iw-m { padding:5px 12px; border-radius:4px; background:#123f3a; color:#7ee8c8; font-size:.8125rem; font-weight:700; letter-spacing:.04em; font-family:ui-monospace,Consolas,monospace; }
.iw-ep { color:#eaf4f2; font-size:.875rem; font-family:ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.iw-auth { margin-left:auto; padding:5px 12px; border-radius:999px; background:#0f2b3b; border:1px dashed #2b6b62; color:#8fb0b5; font-size:.75rem; }
.iw-params { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.iw-params li { margin:0; padding:5px 12px; background:#0f2b3b; border:1px solid #24485a; border-radius:999px; color:#dcebe8; font-size:.8125rem; font-family:ui-monospace,Consolas,monospace; }
.iw-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.iw-col h3 { margin:0 0 10px; color:#fff; font-size:1.125rem; } .iw-col small { display:block; margin:10px 0 6px; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:#86a9ae; font-weight:650; }
.iw-conf { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.875rem; color:#dcebe8; }
@media (max-width:1024px) { .iw-cols { grid-template-columns:1fr; } }

/* ---------- 5. user-experience flow ---------- */
.ux-flow { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; justify-content:center; }
.ux-s { margin:0; flex:1 1 150px; max-width:190px; padding:18px 14px; background:#fff; border:1px solid #d3e6de; border-top:4px solid var(--em); border-radius:10px; display:grid; gap:8px; justify-items:center; text-align:center; }
.ux-ic { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--mint); color:var(--em); }
.ux-ic svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ux-s h3 { margin:0; font-size:.9375rem; line-height:1.3; } .ux-s p { margin:0; font-size:.8125rem; color:var(--mute); line-height:1.4; }
.ux-s--app { background:#0a2a36; border-color:#0a2a36; } .ux-s--app h3 { color:#fff; } .ux-s--app p { color:#b7cccd; } .ux-s--app .ux-ic { background:#123f3a; color:#7ee8c8; }
.ux-arrow { display:flex; align-items:center; color:#9fd0c1; font-size:1.25rem; align-self:center; }
.ux-rule { display:flex; gap:14px; margin:26px 0 0!important; padding:16px 20px; background:#062832; color:#dcebe8!important; border-radius:8px; font-size:1.0625rem!important; line-height:1.55!important; }
.ux-rule svg { flex:none; width:24px; height:24px; fill:none; stroke:#18c79b; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .ux-rule b { color:#fff; }
.fp-content .ux-rule { margin-top:26px; }

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

/* ---------- 7. response and error handling ---------- */
.rh2 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.rh2-c { margin:0; background:#fff; border:1px solid #d3e6de; border-top:4px solid #8fa3ab; border-radius:10px; padding:18px; display:grid; gap:8px; align-content:start; }
.rh2-c--ok { border-top-color:#18c79b; } .rh2-c--wn { border-top-color:#e0a92e; } .rh2-c--warn2 { border-top-color:#f08a3c; } .rh2-c--er { border-top-color:#e5484d; } .rh2-c--un { border-top-color:#8fa3ab; } .rh2-c--rev { border-top-color:#4c7bd9; }
.rh2-c h3 { margin:0; font-size:1rem; line-height:1.3; } .rh2-c p { margin:0; font-size:.8125rem; line-height:1.45; color:var(--mute); }
.rh2-c dl { margin:6px 0 0; display:grid; gap:6px; } .rh2-c dl div { padding:8px 10px; border-radius:6px; } .rh2-c dt { font-size:.625rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:2px; } .rh2-c dd { margin:0; font-size:.8125rem; line-height:1.4; color:var(--ink); }
.rh2-c .do { background:#eaf6f0; } .rh2-c .do dt { color:#075c47; } .rh2-c .dont { background:#fdecec; } .rh2-c .dont dt { color:#8f1d1d; }
.rh2-rule { display:flex; gap:12px; margin:20px 0 0!important; padding:14px 18px; background:#062832; color:#dcebe8!important; border-radius:8px; font-size:.9375rem!important; line-height:1.5!important; }
.rh2-rule svg { flex:none; width:20px; height:20px; fill:none; stroke:#18c79b; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .rh2-rule b { color:#fff; }
.fp-content .rh2-rule { margin-top:20px; }

/* ---------- 8. team ownership (reuses similar structure to a permissions grid) ---------- */
.own2-scroll { overflow-x:auto; background:#fff; border:1px solid #d3e6de; border-radius:8px; }
.own2-tab { width:100%; border-collapse:collapse; min-width:920px; }
.own2-tab thead th { padding:12px 10px; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:#0a2a36; text-align:center; } .own2-tab thead th:first-child { text-align:left; padding-left:18px; }
.own2-tab tbody th { text-align:left; padding:13px 10px 13px 18px; font-weight:600; font-size:.9375rem; color:var(--ink); white-space:nowrap; }
.own2-tab td { text-align:center; padding:10px; border-bottom:1px solid #e8f0ed; font-size:.8125rem; color:var(--mute); } .own2-tab tbody tr { border-bottom:1px solid #e8f0ed; } .own2-tab tbody tr:last-child { border-bottom:0; }
.own2-tab td.on { color:#075c47; font-weight:700; background:#eaf6f0; }
.own2-key { display:flex; gap:10px; margin-top:12px; font-size:.875rem; color:var(--mute); align-items:center; } .own2-key span { display:inline-block; width:14px; height:14px; border-radius:3px; background:#eaf6f0; border:1px solid #a9e2cd; }

/* ---------- 9. integration evaluation workflow ---------- */
.wf2 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.wf2-s { margin:0; background:#fff; border:1px solid #d3e6de; border-top:4px solid var(--em); border-radius:10px; padding:18px; display:grid; gap:8px; align-content:start; position:relative; }
.wf2-n { position:absolute; top:-12px; left:16px; width:26px; height:26px; border-radius:6px; background:var(--em); color:#fff; font:700 .8125rem ui-monospace,Consolas,monospace; display:grid; place-items:center; box-shadow:0 0 0 3px #fff; }
.wf2-s h3 { margin:6px 0 0; font-size:1.0625rem; line-height:1.3; } .wf2-s > p { margin:0; font-size:.875rem; line-height:1.45; color:var(--mute); }
.fu--wf2 { font-size:.6875rem; width:100%; } .fu--wf2 .fu-bar { padding:6px 9px; } .fu--wf2 .fu-body { padding:9px; min-height:44px; display:flex; align-items:center; }
.wf2-mini { color:#dcebe8; font-size:.75rem; line-height:1.3; } .wf2-mini b { color:#7ee8c8; }

/* ---------- 10. benefits ---------- */
.fte-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; }
.fte-q b { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:var(--em); margin-bottom:2px; }

@media (max-width:1180px) {
	.ch3-grid { grid-template-columns:1fr; }
	.rh2, .wf2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.eq { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
	.fte-flow { grid-template-columns:1fr 1fr; } .fte-flow::before { display:none; }
	.fte-jumps-in { padding:0 16px; overflow-x:auto; flex-wrap:nowrap; } .fte-jumps a { white-space:nowrap; }
	.rh2, .wf2 { grid-template-columns:1fr; }
	.eq { grid-template-columns:1fr; }
	.ux-flow { flex-direction:column; align-items:stretch; } .ux-s { max-width:none; }
	.ux-arrow { transform:rotate(90deg); }
	.iw-cols { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .fte-nodes circle { animation:none; } }