/* Solutions hub page (audience-navigation hub, not a product page). Loads after entity.css (shared eik pills, fp-sample, ei-cta-viz) and platform.css. Prefixes: sh- hero, as- audience selector, qx- questions, sm- matrix, hw- shared workflow, pc-/pm- platform connection, tr2- trust. */

/* ---------- hero ---------- */
.sh-mesh { position:absolute; inset:0; pointer-events:none; opacity:.9; }
.sh-mesh svg { display:block; width:100%; height:100%; } .sh-mesh path { stroke:rgba(24,199,155,.22); } .sh-mesh path.d { stroke-dasharray:4 12; }
.sh-nodes circle { fill:#18c79b; filter:drop-shadow(0 0 6px rgba(24,199,155,.8)); animation:ei-blink 3.4s ease-in-out infinite; } .sh-nodes circle:nth-child(even) { animation-delay:1.3s; }
.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; }
.fu--sol .fu-bar { justify-content:center; }
.sh-body { padding:20px; }
.sh-svg { display:block; width:100%; height:auto; }
.sh-e path { stroke:#24485a; stroke-width:1.4; }
.sh-hub .halo { fill:rgba(24,199,155,.09); stroke:rgba(24,199,155,.4); stroke-width:1.3; stroke-dasharray:3 4; }
.sh-hub .c { fill:#0f6f59; stroke:#18c79b; stroke-width:2.6; }
.sh-hub text { fill:#fff; font-size:13px; font-weight:700; }
.sh-n .c { fill:#12363f; stroke:#3aa387; stroke-width:2; transition:stroke .2s; }
.sh-n .ic { color:#7ee8c8; } .sh-n .ic path, .sh-n .ic rect, .sh-n .ic circle { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sh-n text.l { fill:#dcebe8; font-size:11.5px; font-weight:600; }

/* ---------- 1. audience selector ---------- */
.as-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.as-c { margin:0; background:#fff; border:1px solid #d3e6de; border-top:4px solid var(--acc); border-radius:10px; padding:22px 24px; display:grid; gap:12px; align-content:start; transition:transform .22s,box-shadow .22s,border-color .22s; }
.as-c:hover { transform:translateY(-3px); box-shadow:0 28px 46px -32px rgba(6,40,50,.4); }
.as-h { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.as-ic { display:grid; place-items:center; width:46px; height:46px; border-radius:9px; background:color-mix(in srgb, var(--acc) 12%, #fff); color:var(--acc); flex:none; }
.as-ic svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.as-cue-svg { width:72px; height:32px; color:var(--acc); opacity:.55; }
.as-c h3 { margin:0; font-size:1.375rem; letter-spacing:-.01em; } .as-c h3 a { color:var(--ink); text-decoration:none; } .as-c h3 a:hover { color:var(--acc); }
.as-c > p { margin:0; font-size:.9375rem; line-height:1.55; color:var(--mute); }
.as-q { padding:12px 14px; background:color-mix(in srgb, var(--acc) 7%, var(--mint-l)); border-left:3px solid var(--acc); border-radius:6px; }
.as-q small { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--acc); margin-bottom:4px; }
.as-q p { margin:0; font-size:1rem; font-style:italic; color:var(--ink); line-height:1.4; }
.as-blk small { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; font-weight:650; color:var(--mute); margin-bottom:7px; }
.as-wf, .as-pr { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.as-wf li { padding:4px 11px; background:var(--mint-l); border:1px solid #d3e6de; border-radius:999px; font-size:.8125rem; color:var(--ink); }
.as-pr li a { display:inline-block; padding:4px 11px; background:#fff; border:1px solid var(--acc); border-radius:999px; font-size:.8125rem; color:var(--acc); text-decoration:none; font-weight:600; } .as-pr li a:hover { background:var(--acc); color:#fff; }
.as-go { justify-self:start; margin-top:2px; font-weight:700; color:var(--acc); text-decoration:none; font-size:.9375rem; } .as-go:hover { text-decoration:underline; }

/* ---------- 2. questions ---------- */
.qx-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.qx { background:#fff; border:1px solid #cfe0d8; border-radius:10px; overflow:hidden; }
.qx summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:18px 20px; font-size:1.0625rem; font-weight:650; color:var(--ink); position:relative; padding-right:44px; }
.qx summary::-webkit-details-marker { display:none; }
.qx summary::after { content:'+'; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:1.375rem; color:var(--em); line-height:1; }
.qx[open] summary::after { content:'\2212'; }
.qx summary:focus-visible { outline:2px solid var(--em); outline-offset:-2px; }
.qx-i { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:#fff; color:var(--em); flex:none; }
.qx-i svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.qx-b { padding:0 20px 20px; display:grid; gap:14px; }
.qx-b small { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; font-weight:650; color:var(--mute); margin-bottom:8px; }
.qx-chips { display:flex; flex-wrap:wrap; gap:8px; }
.qx-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; background:#0a2a36; color:#eaf4f2; border-radius:999px; text-decoration:none; font-size:.8125rem; font-weight:600; }
.qx-chip svg { width:15px; height:15px; fill:none; stroke:#7ee8c8; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qx-chip:hover { background:var(--em); }
.qx-chip--a { background:#fff; color:var(--ink); border:1px solid #bfe0d3; }
.qx-chip--a:hover { background:var(--mint-l); }
.qx-note { display:flex; gap:12px; margin:20px 0 0!important; padding:14px 18px; background:#fff; border:1px solid #cfe0d8; border-radius:8px; color:var(--mute)!important; font-size:.9375rem!important; line-height:1.5!important; }
.qx-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 .qx-note { margin-top:20px; }

/* ---------- 3. matrix ---------- */
.sm-key { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:12px 26px; } .sm-key li { margin:0; display:flex; align-items:center; gap:9px; font-size:.9375rem; color:var(--mute); }
.sm-d { display:inline-block; width:16px; height:16px; border-radius:50%; }
.sm-d--prim { background:#0a7d62; } .sm-d--supp { background:linear-gradient(90deg,#e0a92e 50%,#fff 50%); border:2px solid #e0a92e; } .sm-d--avail { border:2px solid #c4d3ce; background:#fff; }
.sm-scroll { overflow-x:auto; background:#fff; border:1px solid #d3e6de; border-radius:10px; box-shadow:0 24px 46px -38px rgba(6,40,50,.4); }
.sm-tab { width:100%; border-collapse:collapse; min-width:1080px; }
.sm-tab thead th { padding:14px 8px; font-size:.6875rem; text-transform:uppercase; letter-spacing:.03em; color:var(--mute); background:#f6faf8; border-bottom:1px solid #d3e6de; text-align:center; word-break:keep-all; overflow-wrap:normal; hyphens:none; line-height:1.35; }
.sm-first { text-align:left!important; min-width:200px; }
.sm-pic { display:block; margin:0 auto 6px; width:22px; height:22px; color:var(--em); } .sm-pic svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sm-tab tbody th { text-align:left; padding:13px 16px; border-bottom:1px solid #e8f0ed; font-weight:600; white-space:nowrap; }
.sm-tab tbody th a { color:var(--ink); text-decoration:none; } .sm-tab tbody th a:hover { color:var(--acc); text-decoration:underline; }
.sm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--acc); margin-right:9px; }
.sm-tab tbody td { text-align:center; padding:13px 10px; border-bottom:1px solid #e8f0ed; } .sm-tab tbody tr:last-child td, .sm-tab tbody tr:last-child th { border-bottom:0; } .sm-tab tbody tr:hover { background:#f6faf8; }

/* ---------- 4. shared workflow ---------- */
.hw { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:14px; position:relative; }
.hw::before { content:''; position:absolute; left:6%; right:6%; top:24px; border-top:2px dashed #2f6b74; z-index:0; }
.hw-s { margin:0; position:relative; z-index:1; display:grid; gap:8px; align-content:start; }
.hw-n { display:grid; place-items:center; width:24px; height:24px; margin:0 auto; border-radius:50%; background:var(--em); color:#fff; font:700 .75rem ui-monospace,Consolas,monospace; }
.hw-i { display:grid; place-items:center; width:44px; height:44px; margin:0 auto; border-radius:10px; background:#0f2b3b; border:1px solid #24485a; color:#18c79b; }
.hw-i svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hw-s h3 { margin:2px 0 0; text-align:center; font-size:1rem; color:#fff; line-height:1.25; } .hw-s > p { margin:0; text-align:center; font-size:.8125rem; color:#8fb0b5; line-height:1.4; min-height:34px; }
.fu--tiny { font-size:.75rem; } .fu--tiny .fu-bar { padding:7px 10px; } .fu--tiny .fu-body { padding:10px; min-height:52px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.hw-mini-line { color:#dcebe8; font-size:.75rem; line-height:1.35; } .hw-mini-line b { color:#7ee8c8; }
.hw-mini-kpi { display:flex; justify-content:space-between; font-size:.6875rem; color:#8fb0b5; } .hw-mini-kpi b { color:#fff; font-size:.9375rem; }
.hw-mini-bar { height:5px; border-radius:3px; background:#16394a; overflow:hidden; } .hw-mini-bar i { display:block; height:100%; background:#18c79b; }
.hw-mini-graph { display:block; width:100%; height:auto; color:#7ee8c8; } .hw-mini-graph path, .hw-mini-graph circle { stroke:currentColor; }
.hw-mini-note { display:flex; gap:8px; align-items:flex-start; font-size:.6875rem; color:#dcebe8; line-height:1.35; }
.hw-av { display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:50%; background:#12363f; color:#7ee8c8; font-size:.5rem; font-weight:700; }
.hw-pill { display:inline-block; margin:0 auto; padding:4px 10px; background:#3a2f16; color:#f2c777; border-radius:999px; font-size:.6875rem; font-weight:700; }
.hw-cite { color:#7ee8c8; font-family:ui-monospace,Consolas,monospace; font-size:.6875rem; }

/* ---------- 5. platform connection ---------- */
.pc-split { grid-template-columns:5fr 7fr; align-items:center; }
.pc-list { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; } .pc-list li { margin:0; padding-left:24px; position:relative; font-size:1rem; line-height:1.5; color:var(--ink); }
.pc-list li::before { content:''; position:absolute; left:0; top:8px; width:9px; height:9px; background:var(--em); }
.pc-btns { margin-top:26px; }
.pm { position:relative; padding:34px 10px 10px; }
.pm-hub { display:grid; place-items:center; gap:2px; width:118px; height:118px; margin:0 auto 18px; border-radius:50%; background:#0a2a36; color:#fff; text-align:center; font-weight:700; font-size:.875rem; text-decoration:none; box-shadow:0 0 0 8px #eff8f4,0 24px 40px -26px rgba(6,40,50,.5); }
.pm-hub-i { color:#18c79b; margin-bottom:2px; } .pm-hub-i svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pm-bus { height:2px; background:#bfe0d3; margin:0 auto 22px; width:84%; position:relative; }
.pm-bus::before { content:''; position:absolute; left:50%; top:-18px; width:2px; height:18px; background:#bfe0d3; }
.pm-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pm-list--r { margin-top:12px; }
.pm-list li { margin:0; position:relative; padding-top:16px; }
.pm-list li::before { content:''; position:absolute; left:50%; top:0; width:2px; height:16px; background:#bfe0d3; }
.pm-list a { display:grid; justify-items:center; gap:8px; text-decoration:none; color:var(--ink); padding:14px 8px; background:#fff; border:1px solid #d3e6de; border-radius:9px; transition:transform .18s,border-color .18s; }
.pm-list a:hover { transform:translateY(-2px); border-color:var(--em); }
.pm-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--mint); color:var(--em); }
.pm-ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pm-l { font-size:.75rem; font-weight:650; line-height:1.25; text-align:center; }

/* ---------- 6. trust ---------- */
.tr2 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tr2 li { margin:0; display:flex; gap:14px; align-items:flex-start; padding:20px; background:#fff; border:1px solid #d3e6de; border-radius:10px; }
.tr2-i { display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:var(--mint); color:var(--em); flex:none; }
.tr2-i svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tr2 h3 { margin:0 0 4px; font-size:1.0625rem; } .tr2 p { margin:0; font-size:.9rem; line-height:1.5; color:var(--mute); }

@media (max-width:1180px) {
	.as-grid { grid-template-columns:1fr; }
	.qx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.hw { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:26px; } .hw::before { display:none; }
	.pc-split, .tr2 { grid-template-columns:1fr; }
	.tr2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
	.qx-grid { grid-template-columns:1fr; } .hw { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.pm-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.tr2 { grid-template-columns:1fr; }
	.sh-body { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { .sh-nodes circle { animation:none; } .as-c { transition:none; } .as-c:hover { transform:none; } .pm-list a { transition:none; } .pm-list a:hover { transform:none; } }
