/* 0.10.48: native product storytelling inspired by the production homepage flows. */
.kpx-reference-detail-page .kpx-visual-explainer{padding:55px 0 62px;background:linear-gradient(115deg,#f5faff,#edf5ff);border-block:1px solid #e0eaf6;overflow:hidden}
.kpx-reference-detail-page .kpx-visual-layout{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);gap:48px;align-items:center;width:min(1132px,calc(100% - 48px));margin-inline:auto}
.kpx-reference-detail-page .kpx-visual-copy{text-align:start}
.kpx-reference-detail-page .kpx-visual-copy h2{font-size:clamp(1.8rem,2.7vw,2.85rem);line-height:1.12;letter-spacing:-.034em;color:#101d34;margin:18px 0}
.kpx-reference-detail-page .kpx-visual-copy p{color:#536b89;line-height:1.72;font-size:1.03rem;max-width:450px}
.kpx-reference-detail-page .kpx-visual-kicker{color:#2468e7;letter-spacing:.08em;font-weight:800;font-size:.75rem;text-transform:uppercase}
.kpx-reference-detail-page .kpx-visual-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:25px;color:#59708b;font-size:.75rem}
.kpx-reference-detail-page .kpx-visual-legend span{display:flex;align-items:center;gap:7px}
.kpx-reference-detail-page .kpx-live-dot{width:8px;height:8px;border-radius:50%;background:#25be85;box-shadow:0 0 0 4px #25be8524}
.kpx-reference-detail-page .kpx-visual-board{background:#0b1c33;color:#fff;border:1px solid #1a3861;border-radius:16px;padding:20px 19px;box-shadow:12px 13px 0 #c9ddf7;position:relative;min-width:0}
.kpx-reference-detail-page .kpx-visual-board:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:24px 24px;pointer-events:none;border-radius:inherit}
.kpx-reference-detail-page .kpx-visual-board-top,.kpx-reference-detail-page .kpx-visual-board-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#84a5cf;font:700 10px/1.4 ui-monospace,monospace;letter-spacing:.06em}
.kpx-reference-detail-page .kpx-visual-board-top{padding-bottom:15px;border-bottom:1px solid #244365}
.kpx-reference-detail-page .kpx-visual-board-bottom{padding-top:15px;border-top:1px solid #244365;flex-wrap:wrap}
.kpx-reference-detail-page .kpx-visual-board-bottom b{color:#5ecaf8;margin-inline-end:4px}
.kpx-reference-detail-page .kpx-visual-flow{position:relative;display:flex;align-items:stretch;justify-content:center;padding:38px 0;gap:0}
.kpx-reference-detail-page .kpx-visual-node{position:relative;z-index:2;min-width:0;width:30%;min-height:164px;display:flex;align-items:center;flex-direction:column;text-align:center;justify-content:center;padding:15px 9px;background:#102b4a;border:1px solid #365679;border-radius:11px}
.kpx-reference-detail-page .kpx-visual-node.is-core{border-color:#52b6ff;background:linear-gradient(170deg,#1b4a90,#13325d);box-shadow:0 0 32px #216be829}
.kpx-reference-detail-page .kpx-visual-num{position:absolute;inset-inline-start:11px;top:9px;color:#6d9bc5;font:700 10px ui-monospace,monospace}
.kpx-reference-detail-page .kpx-visual-symbol{width:34px;height:34px;display:grid;place-items:center;margin-bottom:13px;border-radius:10px;color:#73dafa;background:#1b436c;font-size:22px}
.kpx-reference-detail-page .kpx-visual-node strong{font-size:.88rem;color:#f8fbff;overflow-wrap:anywhere;line-height:1.25}
.kpx-reference-detail-page .kpx-visual-node small{font-size:.64rem;color:#9ab4d3;margin-top:8px;line-height:1.35}
.kpx-reference-detail-page .kpx-visual-connector{position:relative;align-self:center;height:2px;flex:1;min-width:10px;background:linear-gradient(90deg,#284d77,#67cbff,#284d77)}
.kpx-reference-detail-page .kpx-visual-packet{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#b8f5ff;box-shadow:0 0 8px #61ccff;animation:kpx-visual-travel 2.65s ease-in-out infinite}
.kpx-reference-detail-page .kpx-visual-connector:nth-of-type(4) .kpx-visual-packet{animation-delay:1.2s}
@keyframes kpx-visual-travel{0%{left:0;opacity:0}20%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@media(max-width:980px){.kpx-reference-detail-page .kpx-visual-layout{grid-template-columns:1fr;gap:28px}.kpx-reference-detail-page .kpx-visual-copy p{max-width:720px}}
@media(max-width:640px){.kpx-reference-detail-page .kpx-visual-explainer{padding:35px 0 45px}.kpx-reference-detail-page .kpx-visual-layout{width:calc(100% - 34px)}.kpx-reference-detail-page .kpx-visual-copy h2{font-size:clamp(1.6rem,7vw,2rem)}.kpx-reference-detail-page .kpx-visual-board{padding:14px 11px;box-shadow:6px 7px 0 #c9ddf7}.kpx-reference-detail-page .kpx-visual-node{width:31%;min-height:147px;padding:13px 5px}.kpx-reference-detail-page .kpx-visual-node strong{font-size:.72rem}.kpx-reference-detail-page .kpx-visual-node small{font-size:.57rem}.kpx-reference-detail-page .kpx-visual-symbol{width:29px;height:29px;font-size:18px}.kpx-reference-detail-page .kpx-visual-flow{padding:25px 0}.kpx-reference-detail-page .kpx-visual-board-bottom{font-size:9px}}
@media(prefers-reduced-motion:reduce){.kpx-reference-detail-page .kpx-visual-packet{animation:none;left:50%}.kpx-reference-detail-page .kpx-visual-node{transition:none!important}}