:root { --text:#0f172a; --text-2:#475569; --text-3:#64748b; --border:#e2e8f0; --accent:#6366f1; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#0f172a; background:#fff; -webkit-font-smoothing:antialiased; }
.integrations-page { --ig-ink:#0f172a; --ig-muted:#475569; --ig-line:#e2e8f0; --ig-accent:#4f46e5; line-height:1.65; padding-bottom:72px; }
.integrations-page [hidden] { display:none!important; }
.integrations-page h1,.integrations-page h2,.integrations-page h3,.integrations-page p,.integrations-page figure { margin:0; }
.integrations-page h1 { font-size:clamp(39px,4.1vw,54px); font-weight:800; line-height:1.075; letter-spacing:-.05em; text-wrap:balance; }
.integrations-page h2 { font-size:clamp(27px,2.8vw,37px); font-weight:700; line-height:1.2; letter-spacing:-.04em; text-wrap:balance; }
.integrations-page h3 { font-size:20px; font-weight:600; line-height:1.35; letter-spacing:-.025em; }
.integrations-page p { color:var(--ig-muted); }
.integrations-page a { color:inherit; }
.integrations-page input,.integrations-page button { font:inherit; }
.integrations-page a:focus-visible,.integrations-page summary:focus-visible,.integrations-page input:focus-visible,.integrations-page button:focus-visible { outline:3px solid #6366f1; outline-offset:4px; }
.ig-wrap { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
.ig-hero { display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:65px; padding-top:190px; padding-bottom:70px; }
.integrations-page .ig-product { font-size:13px; color:#4f46e5; font-weight:600; margin-bottom:22px; }
.integrations-page .ig-lead { font-size:18px; line-height:1.75; margin-top:25px; max-width:640px; }
.ig-actions { display:flex; flex-wrap:wrap; gap:20px 25px; align-items:center; margin-top:30px; }
.integrations-page .ig-button { display:inline-flex; justify-content:center; align-items:center; gap:14px; border-radius:8px; border:1px solid transparent; padding:12px 20px; min-height:48px; color:#fff; background:#0f172a; text-decoration:none; font-size:14px; font-weight:600; line-height:1.4; }
.integrations-page .ig-button:hover { background:#334155; }
.ig-button svg { flex-shrink:0; }
.ig-text-link { display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:600; text-underline-offset:5px; }
.ig-text-link svg { flex-shrink:0; }
.ig-map { position:relative; padding:28px 22px; background:#f7f8fc; border:1px solid #e0e4ef; border-radius:16px; }
.ig-map-apps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ig-map-apps>div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:91px; background:white; border:1px solid #e0e4ef; border-radius:9px; padding:13px 5px; }
.ig-map-apps img { width:25px; height:25px; object-fit:contain; }
.ig-map-apps span { font-size:11px; color:#475569; }
.ig-map-branches { position:relative; margin:0 16%; height:42px; border:1px solid #c5cbea; border-top:0; border-radius:0 0 12px 12px; }
.ig-map-branches::before { content:''; position:absolute; width:1px; height:100%; background:#c5cbea; top:0; left:50%; }
.ig-map-branches::after { content:''; position:absolute; width:1px; height:20px; background:#c5cbea; top:100%; left:50%; }
.ig-map-core { display:flex; gap:14px; justify-content:center; align-items:center; width:230px; max-width:100%; min-height:87px; margin:20px auto 0; padding:19px; border:1px solid #cdd0e9; background:white; border-radius:11px; box-shadow:0 15px 35px -24px #676e98; }
.ig-map-core img { object-fit:contain; max-width:100%; }
.ig-map-core>span { font-size:15px; border-left:1px solid #dce1ea; padding-left:14px; color:#475569; }
.ig-map-line { height:27px; width:1px; background:#a8a2ed; margin:auto; }
.ig-map-custom { display:flex; justify-content:center; align-items:center; gap:15px; padding:18px; border:1px solid #bcb7ef; background:#eeedff; border-radius:10px; color:#4f46e5; }
.ig-map-custom svg { flex-shrink:0; }
.ig-map-custom strong { display:block; font-size:16px; font-weight:600; color:#30266c; }
.ig-map-custom div span { display:block; font-size:11px; color:#655e87; margin-top:3px; }
.ig-map figcaption { position:absolute; left:0; right:0; bottom:-30px; font-size:11px; text-align:center; color:#64748b; }
.ig-routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid #e2e8f0; margin-top:15px; }
.ig-routes a { padding:27px 26px; text-decoration:none; }
.ig-routes a:first-child { padding-left:0; }
.ig-routes a:last-child { padding-right:0; }
.ig-routes a+a { border-left:1px solid #e2e8f0; }
.ig-routes h2 { display:flex; justify-content:space-between; gap:15px; font-size:19px; line-height:1.35; letter-spacing:-.025em; }
.ig-routes h2 svg { flex-shrink:0; margin-top:2px; }
.ig-routes p { font-size:13px; margin-top:12px; }
.ig-routes a:hover h2 { color:#4f46e5; }
.ig-mcp { margin-top:65px; padding:38px; background:#f3f2fc; border:1px solid #e1def2; border-radius:14px; scroll-margin-top:130px; }
.ig-mcp-heading { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:end; }
.ig-mcp-heading>p { font-size:15px; }
.ig-mcp-heading .ig-product { margin-bottom:16px; }
.ig-mcp-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin:35px 0 30px; padding:0; list-style:none; }
.ig-mcp-steps li>span { display:grid; place-items:center; width:27px; height:27px; border:1px solid #c7c0ed; border-radius:50%; background:white; color:#4f46e5; font-size:11px; font-weight:600; margin-bottom:14px; }
.ig-mcp-steps h3 { font-size:17px; }
.ig-mcp-steps p { font-size:13px; margin-top:9px; }
.ig-technical { border-top:1px solid #d9d5ec; border-bottom:1px solid #d9d5ec; padding:17px 0; margin-bottom:24px; }
.ig-technical summary { cursor:pointer; font-size:13px; font-weight:600; }
.ig-technical ul { padding-left:19px; margin-bottom:0; font-size:13px; color:#475569; }
.ig-technical li { margin-block:9px; }
.ig-directory { padding-top:75px; padding-bottom:50px; scroll-margin-top:80px; }
.ig-section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:28px; }
.ig-section-heading>p { max-width:450px; font-size:14px; }
.ig-search-label { display:block; font-size:12px; font-weight:600; }
.ig-search-label input { display:block; width:100%; border:1px solid #cdd5e2; border-radius:8px; padding:14px 18px; min-height:54px; font-size:15px; margin-top:10px; background:white; color:#0f172a; }
.ig-search-label input::placeholder { color:#64748b; }
.ig-filters { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.ig-filters button { border:1px solid #d9dfeb; background:#fff; color:#475569; min-height:44px; padding:9px 14px; border-radius:7px; font-size:12px; cursor:pointer; }
.ig-filters button[aria-pressed=true] { background:#0f172a; color:#fff; border-color:#0f172a; }
.ig-results { display:flex; justify-content:flex-end; align-items:center; min-height:0; margin:15px 0 18px; font-size:12px; }
.ig-result-announcement { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ig-results button { background:transparent; border:0; font-size:12px; color:#4f46e5; text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:5px; }
.ig-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.ig-card { padding:25px; border:1px solid #e1e5ee; border-radius:12px; min-width:0; scroll-margin-top:130px; }
.ig-card-brand { display:flex; gap:14px; align-items:center; }
.ig-icon { display:grid; place-items:center; flex-shrink:0; width:43px; height:43px; color:#475569; }
.ig-icon img { width:30px; height:30px; object-fit:contain; }
.ig-card h3 { font-size:18px; overflow-wrap:anywhere; }
.ig-card>p { font-size:13px; margin-top:18px; min-height:64px; }
.ig-empty { text-align:center; padding:50px 25px; background:#f8f8fc; border-radius:12px; }
.ig-empty p { font-size:14px; margin:13px auto 22px; }
.integrations-page .ig-reviewed { font-size:11px; color:#64748b; margin-top:25px; }
/* Interactive examples for company-specific workflows. */
.ig-workbench { padding:36px; margin-block:20px 55px; border:1px solid #dfe3ef; border-radius:18px; background:#f5f6fb; scroll-margin-top:125px; }
.ig-workbench-heading { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.ig-workbench-heading>div { max-width:630px; }
.ig-workbench-heading h2 { font-size:38px; }
.ig-workbench-heading p { font-size:15px; margin-top:18px; }
.ig-workbench-heading>a { flex-shrink:0; font-size:13px; }
.ig-example-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; padding:6px; width:max-content; max-width:100%; background:#e9ebf3; border:1px solid #dfe3ec; border-radius:10px; }
.ig-example-tabs button { border:0; border-radius:6px; min-height:43px; padding:10px 18px; font-size:13px; color:#536078; background:transparent; cursor:pointer; }
.ig-example-tabs button[aria-selected=true] { background:white; color:#0f172a; box-shadow:0 2px 6px #17223612; font-weight:600; }
.ig-example-panel { margin-top:28px; }
.ig-example-title { display:flex; gap:25px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.ig-example-title h3 { font-size:21px; }
.ig-example-title p { font-size:11px; max-width:270px; }
.ig-flow { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1.2fr) 36px minmax(0,1fr); gap:10px; align-items:center; }
.integrations-page .ig-flow-label { font-size:11px; color:#64748b; margin-bottom:18px; }
.ig-flow-tools { display:grid; gap:12px; }
.ig-flow-tools>div { display:flex; gap:11px; align-items:center; background:white; border:1px solid #dce1eb; border-radius:8px; padding:16px; }
.ig-flow-tools img { width:27px; height:27px; object-fit:contain; }
.ig-flow-tools span { font-size:13px; font-weight:500; }
.ig-flow-context { margin-top:18px; border:1px dashed #c9cfde; border-radius:8px; padding:15px; }
.ig-flow-context>span { font-size:10px; color:#716b92; }
.ig-flow-context p { font-size:12px; margin-top:6px; }
.ig-flow-connector { display:flex; align-items:center; justify-content:center; color:#aaa4d5; }
.ig-flow-process { background:#182039; border:1px solid #303953; border-radius:13px; padding:25px; color:white; box-shadow:0 18px 38px -24px #27376480; }
.ig-flow-process-brand { display:flex; align-items:center; gap:13px; margin-bottom:25px; }
.ig-flow-process-brand img { object-fit:contain; }
.ig-flow-process-brand>span { font-size:12px; color:#bcc4d7; border-left:1px solid #475069; padding-left:13px; }
.integrations-page .ig-flow-process .ig-flow-label { color:#a9a8ca; margin-bottom:8px; }
.ig-flow-process h4 { font-size:23px; line-height:1.3; letter-spacing:-.025em; margin:0; font-weight:600; }
.ig-flow-process ul { padding:0; margin:22px 0 0; list-style:none; }
.ig-flow-process li { position:relative; padding-left:19px; font-size:12px; line-height:1.65; color:#d2d8e6; margin-block:11px; }
.ig-flow-process li::before { content:'✓'; position:absolute; left:0; color:#b1aaf3; }
.ig-flow-output { padding:23px 18px; border:1px solid #e0e4ed; border-radius:10px; background:#fff; text-align:center; }
.ig-output-file { position:relative; width:75px; height:92px; margin:0 auto 20px; border:1px solid #d5d4e7; border-radius:5px 15px 5px 5px; background:#f2f0fd; padding:12px; transform:rotate(4deg); box-shadow:0 7px 14px -9px #7b7397; }
.ig-output-file>span { display:block; font-size:12px; color:#6b4fb5; font-weight:600; text-align:left; }
.ig-output-file i { display:block; width:100%; height:3px; border-radius:2px; background:#d4cbed; margin-top:7px; }
.ig-output-file i:last-child { width:70%; }
.ig-output-file[data-format=PDF] { background:#fff2ec; border-color:#ecd5c8; }
.ig-output-file[data-format=PDF]>span { color:#b86030; }
.ig-output-file[data-format=PDF] i { background:#edcdbb; }
.ig-output-file[data-format=MP4] { background:#eaf3fe; border-color:#c9dbee; }
.ig-output-file[data-format=MP4]>span { color:#4175a6; }
.ig-output-file[data-format=MP4] i { background:#bcd5ef; }
.ig-flow-output>strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.ig-flow-output>p { font-size:12px; margin-top:10px; }
.ig-output-review { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 9px; border-radius:5px; background:#f0f7f2; color:#347052; font-size:10px; margin-top:18px; }
.ig-workbench-foot { border-top:1px solid #dce1eb; padding-top:23px; margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.ig-workbench-control { display:flex; gap:12px; align-items:center; }
.ig-workbench-control>svg { color:#655eb4; flex-shrink:0; }
.ig-workbench-control strong { font-size:13px; font-weight:600; }
.ig-workbench-control p { font-size:11px; margin-top:3px; }
.ig-workbench-foot>a { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:12px; text-underline-offset:4px; }
.integrations-page .ig-example-note { color:#7b8497; font-size:10px; margin-top:18px; }
.ig-example-panel:focus-visible { outline:3px solid #6366f1; outline-offset:4px; }
.ig-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; padding-block:55px; }
.ig-faq details { border-bottom:1px solid #e2e8f0; padding-block:18px; }
.ig-faq details:first-child { padding-top:0; }
.ig-faq summary { font-weight:500; font-size:15px; cursor:pointer; }
.ig-faq details p { font-size:14px; margin-top:15px; }
.ig-cta { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:45px; background:#0f172a; color:#fff; border-radius:14px; }
.ig-cta h2 { max-width:710px; }
.ig-cta p { max-width:640px; color:#cbd5e1; font-size:15px; margin-top:20px; }
.integrations-page .ig-white { flex-shrink:0; background:#fff; color:#0f172a; }
.integrations-page .ig-white:hover { background:#e0e7ff; }
.ig-skip { position:fixed; top:-100px; left:20px; z-index:1000; padding:12px 18px; background:white; color:#0f172a; }
.ig-skip:focus { top:12px; }
@media(max-width:1050px) {
  .ig-wrap { width:calc(100% - 48px); }
  .ig-hero { gap:30px; }
  .ig-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig-mcp-heading { gap:30px; }
  .ig-mcp-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig-cta { flex-direction:column; align-items:flex-start; }
}
@media(max-width:760px) {
  .ig-wrap { width:calc(100% - 36px); }
  .ig-hero { grid-template-columns:1fr; padding-top:155px; padding-bottom:55px; gap:40px; }
  .integrations-page h1 { font-size:clamp(32px,9.8vw,54px); }
  .integrations-page .ig-lead { font-size:16px; }
  .ig-map { max-width:470px; width:100%; margin-inline:auto!important; padding:22px 15px; }
  .ig-map-apps span { font-size:10px; }
  .ig-map-custom strong { font-size:15px; }
  .ig-actions { gap:20px; }
  .ig-routes { grid-template-columns:1fr; }
  .ig-routes a,.ig-routes a:first-child,.ig-routes a:last-child { padding:23px 0; }
  .ig-routes a+a { border-left:0; border-top:1px solid #e2e8f0; }
  .ig-mcp { margin-top:40px; padding:25px; }
  .ig-mcp-heading { grid-template-columns:1fr; gap:20px; }
  .ig-mcp-steps { gap:24px 20px; }
  .ig-mcp-steps h3 { font-size:15px; }
  .ig-mcp-steps p { font-size:12px; }
  .ig-section-heading { display:block; }
  .ig-section-heading>p { margin-top:16px; }
  .ig-directory { padding-top:45px; }
  .ig-grid { grid-template-columns:1fr; }
  .ig-card>p { min-height:0; }
  .ig-search-label input { font-size:16px; }
  .ig-filters { gap:8px; }
  .ig-filters button { padding-inline:11px; }
  .ig-faq { grid-template-columns:1fr; gap:28px; }
  .ig-faq { padding-block:40px; }
  .ig-cta { padding:28px; gap:25px; }
  .ig-cta .ig-button { width:100%; }
  .integrations-page { padding-bottom:40px; }
}
@media(prefers-reduced-motion:reduce) { .integrations-page * { transition:none!important; scroll-behavior:auto!important; } }

@media(max-width:1050px) {
  .ig-workbench { padding:28px; }
  .ig-workbench-heading { align-items:flex-start; }
  .ig-flow { grid-template-columns:minmax(0,1fr) 20px minmax(0,1.15fr) 20px minmax(0,1fr); gap:7px; }
  .ig-flow-process { padding:20px; }
  .ig-flow-process h4 { font-size:20px; }
}
@media(max-width:760px) {
  .ig-workbench { padding:24px; }
  .ig-workbench-heading { display:block; }
  .ig-workbench-heading h2 { font-size:30px; }
  .ig-workbench-heading>a { margin-top:23px; }
  .ig-example-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:4px; }
  .ig-example-tabs button { padding:10px 5px; font-size:11px; line-height:1.5; }
  .ig-example-title { display:block; }
  .ig-example-title h3 { font-size:20px; }
  .ig-example-title p { margin-top:8px; }
  .ig-flow { grid-template-columns:1fr; gap:13px; }
  .ig-flow-connector svg { transform:rotate(90deg); }
  .ig-flow-process { padding:25px; }
  .ig-flow-output { padding:24px; }
  .ig-workbench-foot { flex-direction:column; align-items:flex-start; gap:20px; }
}