/* Small vector stories: the diagrams stay readable without animation or JS. */
.connection-hero-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:60px;align-items:center}
.api-hero .connection-hero-layout h1{font-size:clamp(42px,5vw,72px);margin-top:0}
.api-hero .connection-hero-layout>.connection-hero-copy>.intro{color:#d6dfd6;max-width:580px}
.connection-story{--cs-ink:#345547;--cs-muted:#607267;--cs-line:#cdd8ca;--cs-accent:#bd7b50;background:#f7f9f3;color:var(--cs-ink);border:1px solid #d8e1d2;border-radius:22px;box-shadow:0 24px 60px #0a201c20;padding:22px 26px 18px;min-width:0;width:100%;max-width:610px;margin-inline:auto;font-size:15px;line-height:1.4}
.connection-story [hidden]{display:none!important}
.cs-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:var(--cs-muted)}
.cs-top>span:first-child{display:flex;align-items:center;gap:9px}.cs-top>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-icon{display:block;width:38px;height:38px;flex:none;overflow:visible}.cs-top .cs-icon{width:22px;height:22px}
.cs-stage{height:256px;position:relative;margin-block:18px 14px}
.cs-scene{height:100%;display:flex;flex-direction:column;justify-content:center;gap:20px}
.cs-captions{display:grid;min-height:110px;border-top:1px solid var(--cs-line);padding-top:18px}
.cs-captions>div{grid-area:1/1}
.connection-story .cs-captions>[hidden]{display:block!important;visibility:hidden}
.connection-story .cs-captions h2{font-size:clamp(21px,2vw,27px);line-height:1.17;letter-spacing:-.025em;margin:0 0 9px;color:#263d32;text-wrap:pretty}
.connection-story .cs-captions p{font-size:14px;line-height:1.55;margin:0;color:var(--cs-muted);max-width:100%}
.cs-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}
.cs-steps button{appearance:none;border:0;padding:8px 0;background:none;color:var(--cs-muted);font:inherit;font-size:11px;text-align:left;cursor:pointer;min-height:44px;overflow-wrap:anywhere}
.cs-steps button[aria-pressed=true]{color:#294d39;font-weight:650}.cs-steps button:focus-visible{outline:2px solid #ad683c;outline-offset:4px;border-radius:3px}
.cs-step-track{display:block;position:relative;background:#dce3d8;height:3px;margin-bottom:10px;overflow:hidden;border-radius:5px}.cs-step-track i{display:block;height:100%;background:#ad764f;transform:scaleX(0);transform-origin:left}
.cs-steps button[aria-pressed=true] .cs-step-track{background:#b7c9b2}
.connection-story .cs-example{font-size:10px;line-height:1.5;color:#677669;margin:12px 0 0}
.cs-data-flow,.cs-ai-link,.cs-assignment{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.cs-sources{display:grid;gap:12px;min-width:0;flex:1.5}.cs-source{display:flex;align-items:center;gap:12px;padding:13px 12px;border:1px solid var(--cs-line);border-radius:12px;background:#fff;font-size:13px;min-width:0}.cs-source .cs-icon{width:30px;height:30px}
.cs-hub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:20px 12px;background:#e5ecde;border:1px solid #b8c9ae;border-radius:18px;min-width:116px;min-height:116px}.cs-hub img{width:35px;height:40px;object-fit:contain}.cs-hub strong{font-size:13px;font-weight:600}
.cs-arrow{flex:0 1 54px;min-width:28px;color:#a57751;display:block}.cs-arrow svg{display:block;width:100%;height:28px}.cs-packet{opacity:0}
.cs-data-ready{display:flex;align-items:center;justify-content:center;gap:24px}.cs-checks{display:grid;gap:18px}.cs-check{display:flex;align-items:center;gap:8px;font-size:14px}.cs-check .cs-icon{width:24px;height:24px;color:#517957}
.cs-plan{border:1px solid #bfcfba;border-radius:16px;background:#fff;overflow:hidden;padding:16px 18px}.cs-plan-heading{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #e2e8df;font-size:15px}.cs-plan-heading .cs-icon{width:26px;height:26px}.cs-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#78966b;box-shadow:0 0 0 4px #e9f0e3}
.cs-plan-row{display:grid;grid-template-columns:22px minmax(60px,.7fr) minmax(80px,1fr);gap:9px;align-items:center;margin-top:14px;font-size:13px}.cs-plan-row .cs-icon{width:22px;height:22px}.cs-track{height:25px;background:repeating-linear-gradient(90deg,#f3f5ef 0,#f3f5ef 24%,#dee6d8 24%,#dee6d8 25%);border-radius:4px;padding:4px}.cs-bar{display:block;width:65%;height:17px;border:1px solid #91aa85;border-radius:4px;background:#d0ddc7;transform-origin:left}.cs-bar-1{width:72%;margin-left:auto;background:#f0d4b7;border-color:#c79871}.cs-bar-2{width:50%}
.cs-bottom-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#52744e}.cs-bottom-note .cs-icon{width:22px;height:22px}
.cs-updates{display:flex;justify-content:center;gap:22px}.cs-phone{width:155px;min-width:0;background:#fff;border:3px solid #426354;border-radius:24px;padding:12px 11px 14px;position:relative;display:flex;flex-direction:column}.cs-speaker{height:3px;width:31px;border-radius:5px;background:#426354;display:block;margin:-5px auto 10px}.cs-phone>strong{font-size:20px;line-height:1.2}.cs-phone>small{font-size:10px;color:var(--cs-muted);margin-top:4px}.cs-project{border-top:1px solid var(--cs-line);padding-top:9px;margin-top:10px;display:grid;gap:4px;font-size:12px}.cs-project .cs-icon{width:32px;height:32px}.cs-notification{display:flex;align-items:center;gap:4px;background:#e8efdf;border:1px solid #c5d4bb;border-radius:8px;padding:7px 5px;margin-top:13px;font-size:10px}.cs-notification .cs-icon{width:20px;height:20px}
.cs-question{display:flex;align-items:flex-start;gap:13px;border:1px solid #d9cab7;border-radius:16px 16px 16px 4px;background:#fff9f1;padding:18px}.cs-question .cs-icon{color:#b8794c;width:31px;height:31px}.connection-story .cs-question p{font-size:20px;line-height:1.3;color:#345547;margin:0;max-width:330px}
.cs-ai-link{margin-top:12px;gap:10px}.cs-ai-tool,.cs-permission{display:grid;justify-items:center;gap:8px;text-align:center;font-size:11px;flex:1}.cs-ai-tool .cs-icon{color:#b8794c}.cs-permission .cs-icon{width:32px;height:32px}.cs-ai-link .cs-hub{min-width:100px;min-height:102px;padding:12px 8px;gap:8px}.cs-ai-link .cs-arrow{flex-basis:30px}
.cs-candidate{display:flex;align-items:center;gap:14px}.cs-avatar{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:#e5ecde;border:1px solid #bdcdb3}.cs-candidate>div{display:grid;gap:3px}.cs-candidate small{color:#69805d;font-size:12px}.cs-candidate strong{font-size:29px;letter-spacing:-.03em}.cs-match-check{margin-left:auto;width:35px;height:35px;padding:4px;border-radius:50%;background:#e5ecde}
.cs-match-reasons{display:grid;gap:9px}.cs-reason{display:flex;align-items:center;gap:12px;padding:10px 13px;background:#fff;border:1px solid var(--cs-line);border-radius:10px;font-size:14px}.cs-reason .cs-icon{width:27px;height:27px}.cs-reason .cs-icon:last-child{margin-left:auto;width:22px;height:22px;color:#65875d}
.cs-assignment{gap:22px}.cs-person,.cs-job{display:grid;justify-items:center;gap:12px;text-align:center;flex:1;font-size:17px}.cs-person>.cs-icon,.cs-job>.cs-icon{width:62px;height:62px}.cs-person>.cs-icon{padding:12px;border-radius:16px;background:#e5ecde}.cs-job>.cs-icon{color:#a2744e}
.cs-approval{position:relative;align-self:center;border:1px solid #cd9e76;border-radius:12px;background:#f4d4b5;color:#5d442f;width:100%;max-width:290px;min-height:52px;margin-top:12px;display:grid;place-items:center;font-weight:600;font-size:15px}.cs-approval>span{display:flex;align-items:center;gap:10px;grid-area:1/1;padding:12px}.cs-approval .cs-icon{width:23px;height:23px}.cs-approval>span:first-child{opacity:0}.cs-cursor{position:absolute;right:26px;bottom:1px;width:20px;height:25px;color:#345547;opacity:0}
.connection-mini{height:135px;margin:4px 0 22px;display:grid;place-items:center;color:#739381}.connection-mini svg{height:100%;width:100%;max-width:260px}.connection-mini .concept-paper{fill:#fff}.connection-mini .concept-highlight{fill:#e5ecdf;stroke:#7c9c80}.connection-mini .concept-detail{stroke:#b9cbb9}.connection-mini .concept-accent{fill:#f6dfc8;stroke:#cb9165}
.api-channel-grid .connection-mini{color:#bdcfb8;margin-top:24px}.api-channel-grid .connection-mini .concept-paper{fill:#304539}.api-channel-grid .connection-mini .concept-highlight{fill:#52694c;stroke:#a8bca0}.api-channel-grid .connection-mini .concept-accent{fill:#a67d53;stroke:#e8bb8d}
@media(prefers-reduced-motion:no-preference){
 .connection-story[data-enhanced=true] .cs-reveal{animation:cs-arrive 1.4s both;animation-play-state:paused}.connection-story[data-playing=true] .cs-reveal{animation-play-state:running}
 .cs-source:nth-child(2),.cs-check:nth-child(2),.cs-reason:nth-child(2){animation-delay:.6s}.cs-source:nth-child(3),.cs-check:nth-child(3),.cs-reason:nth-child(3){animation-delay:1.2s}
 .cs-data-flow>.cs-hub{animation-delay:2.6s}.cs-data-ready .cs-checks .cs-check{animation-delay:1s}.cs-data-ready .cs-checks .cs-check:nth-child(2){animation-delay:1.8s}.cs-data-ready .cs-checks .cs-check:nth-child(3){animation-delay:2.6s}
 .connection-story[data-enhanced=true] .cs-bar{animation-name:cs-grow;animation-delay:1s}.connection-story[data-enhanced=true] .cs-bar-1{animation-delay:1.8s}.connection-story[data-enhanced=true] .cs-bar-2{animation-delay:2.5s}
 .connection-story .cs-phone:nth-child(2){animation-delay:.5s}.connection-story .cs-notification{animation-delay:2.4s}.connection-story .cs-phone:nth-child(2) .cs-notification{animation-delay:3.1s}.connection-story .cs-bottom-note{animation-delay:3.6s}
 .connection-story[data-enhanced=true] .cs-packet{animation:cs-send 3s 1s both paused}.connection-story[data-playing=true] .cs-packet{animation-play-state:running}
 .connection-story .cs-approval{animation:none}.connection-story[data-enhanced=true] .cs-approval>span:first-child{animation:cs-before-approve 9s both paused}.connection-story[data-enhanced=true] .cs-approval>span:nth-child(2){animation:cs-after-approve 9s both paused}.connection-story[data-enhanced=true] .cs-cursor{animation:cs-confirm 4.5s both paused}.connection-story[data-playing=true] .cs-approval>*{animation-play-state:running}
 @keyframes cs-arrive{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes cs-grow{from{opacity:.25;transform:scaleX(.15)}to{opacity:1;transform:scaleX(1)}}
 @keyframes cs-send{0%{opacity:0;transform:translateX(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(40px)}}
 @keyframes cs-before-approve{0%,42%{opacity:1}49%,100%{opacity:0}}
 @keyframes cs-after-approve{0%,46%{opacity:0}54%,100%{opacity:1}}
 @keyframes cs-confirm{0%,30%{opacity:0;transform:translate(16px,20px)}70%{opacity:1;transform:translate(0,0)}85%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1)}}
}
@media(max-width:1050px){.connection-hero-layout{gap:30px;grid-template-columns:1fr 1.1fr}.connection-story{padding-inline:20px}.cs-data-ready{gap:14px}.cs-captions{min-height:130px}}
@media(max-width:800px){.connection-hero-layout{grid-template-columns:minmax(0,1fr);gap:38px}.connection-story{max-width:560px}.api-hero .connection-hero-layout h1{font-size:clamp(39px,10vw,60px)}.cs-captions{min-height:110px}}
@media(max-width:480px){.connection-story{padding:17px 16px 14px;border-radius:18px}.cs-top{font-size:10px;gap:8px}.cs-top>span:first-child{gap:7px}.cs-top .cs-icon{width:19px;height:19px}.cs-stage{height:236px;margin-block:14px}.cs-captions{min-height:121px;padding-top:15px}.connection-story .cs-captions h2{font-size:21px}.connection-story .cs-captions p{font-size:13px}.cs-steps{gap:8px;margin-top:8px}.cs-steps button{font-size:10px}.connection-story .cs-example{font-size:9px;margin-top:8px}.cs-source{font-size:11px;gap:7px;padding:12px 8px}.cs-source .cs-icon{width:25px;height:25px}.cs-hub{min-width:95px;min-height:100px;padding:14px 8px}.cs-hub strong{font-size:11px}.cs-arrow{min-width:20px;flex-basis:30px}.cs-data-flow{gap:6px}.cs-check{font-size:12px;gap:5px}.cs-check .cs-icon{width:21px;height:21px}.cs-data-ready{gap:12px}.cs-plan{padding:14px 12px}.cs-plan-row{font-size:11px}.cs-bottom-note{font-size:11px;gap:6px}.cs-updates{gap:14px}.cs-phone{width:137px;padding-inline:9px}.cs-phone>strong{font-size:18px}.cs-notification{font-size:9px;gap:3px;padding-inline:4px}.cs-notification .cs-icon{width:18px;height:18px}.cs-question{padding:15px;gap:10px}.connection-story .cs-question p{font-size:18px}.cs-ai-link{gap:5px}.cs-ai-tool,.cs-permission{font-size:10px}.cs-ai-link .cs-hub{min-width:87px;min-height:92px}.cs-hub img{width:30px;height:34px}.cs-reason{font-size:12px;padding:9px;gap:10px}.cs-person,.cs-job{font-size:15px}.cs-assignment{gap:12px}.connection-mini{height:120px}}