:root{--integration-surface:var(--glass);--integration-ink:var(--foreground);--integration-hover:var(--glass-strong);--integration-shadow:var(--shadow-glow)}.integrations-band{background:var(--secondary);border-block:1px solid var(--border)}.integrations-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:center;gap:64px;display:grid}.integrations-copy h2{letter-spacing:0;margin:0;line-height:1.3;font-size:36px!important}.integrations-copy p{color:var(--muted-foreground);margin-block:24px;font-size:16px;line-height:1.8}.integration-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;display:grid}.integration-grid .integration-tile{isolation:isolate;border:1px solid var(--border);background:var(--background);min-width:0;height:174px;color:var(--integration-ink);white-space:normal;text-align:center;box-shadow:inset 0 1px 0 color-mix(in oklab,var(--foreground) 12%,transparent),0 6px 0 var(--integration-surface),0 7px 0 var(--border);border-radius:8px;flex-direction:column;justify-content:center;gap:4px;padding:8px 6px 22px;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s;display:flex;position:relative}.integration-tile:after{content:"";background:var(--border);pointer-events:none;bottom:10px;width:28px;height:2px;transition:width .2s,background .2s,inset-inline-start .2s;position:absolute;inset-inline-start:calc(50% - 14px)}.integration-grid .integration-tile:hover,.integration-grid .integration-tile:focus-visible{background:var(--integration-hover);border-color:var(--primary);box-shadow:inset 0 1px 0 color-mix(in oklab,var(--primary) 40%,transparent),0 8px 0 var(--integration-surface),0 9px 0 var(--primary);color:var(--integration-ink);transform:translateY(-3px)}.integration-tile:hover:after,.integration-tile:focus-visible:after{background:var(--primary);width:44px;inset-inline-start:calc(50% - 22px)}.integration-tile img{object-fit:contain;width:104px;max-width:100%;height:112px;transition:transform .2s}.integration-tile:hover img{transform:scale(1.06)}.integration-tile span{font-size:13px;font-weight:600;line-height:1.4}.integration-tile .integration-link-arrow{color:var(--primary);opacity:0;transition:opacity .2s;position:absolute;bottom:7px;right:9px}.integration-tile:hover .integration-link-arrow,.integration-tile:focus-visible .integration-link-arrow{opacity:1}.integration-detail{max-width:980px}.integration-detail-head{border-bottom:1px solid var(--border);padding-block:0 32px}.integration-detail-head img{object-fit:contain;background:0 0;border-radius:8px;width:120px;height:128px}.integration-detail-head h1{color:var(--foreground);letter-spacing:0;margin-top:16px;font-size:42px;line-height:1.25}.integration-detail-head p{color:var(--muted-foreground);max-width:700px;margin-top:20px;font-size:19px;line-height:1.7}.integration-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-block:40px;display:grid}.integration-benefits h2{letter-spacing:0;overflow-wrap:anywhere;margin:12px 0;line-height:1.4;font-size:21px!important}.integration-benefits svg{color:var(--primary)}.integration-benefits p,.integration-story p{color:var(--muted-foreground);font-size:16px;line-height:1.8}.integration-story{border-block:1px solid var(--border);padding-block:32px}.integration-story h2{letter-spacing:0;margin:0 0 16px;line-height:1.4;font-size:27px!important}.integration-note{color:var(--muted-foreground);align-items:flex-start;gap:12px;margin-block:28px;font-size:14px;line-height:1.7;display:flex}.integration-note svg{color:var(--primary);flex-shrink:0;margin-top:3px}.integration-example{border-bottom:1px solid var(--border);padding-block:40px}.integration-example h2{letter-spacing:0;margin:0;line-height:1.4;font-size:27px!important}.integration-example-disclaimer{color:var(--muted-foreground);margin-top:12px;font-size:13px;line-height:1.7}.integration-flow{grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:center;gap:18px;margin-block:32px 40px;display:grid}.integration-flow-step{border-top:1px solid var(--primary);align-self:stretch;min-width:0;padding-top:20px}.integration-flow-step>svg{width:32px;height:44px;color:var(--primary)}.integration-flow-step>img{object-fit:contain;width:44px;height:44px}.integration-flow-step strong{margin-block:12px;font-size:16px;line-height:1.5;display:block}.integration-flow-step p{color:var(--muted-foreground);font-size:14px;line-height:1.8}.integration-flow-arrow{width:24px;color:var(--primary)}.integration-example-result{grid-template-columns:1fr 1fr;align-items:center;gap:40px;display:grid}.integration-official-figure{min-width:0;margin:0}.integration-official-figure>a{justify-content:center;display:flex}.integration-official-figure img{object-fit:contain;border-radius:6px;width:auto;max-width:100%;height:480px;display:block}.integration-official-figure figcaption{color:var(--muted-foreground);margin-top:20px;font-size:12px;line-height:1.7}.integration-official-figure figcaption strong{color:var(--foreground);font-size:14px}.integration-official-figure figcaption p{margin-top:6px}.integration-output{background:var(--glass);border:1px solid var(--border);border-radius:8px;min-width:0;overflow:hidden}.integration-output header{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:22px;display:flex}.integration-output header>svg{color:var(--primary);flex-shrink:0}.integration-output header span{color:var(--muted-foreground);font-size:12px}.integration-output h3{margin-top:4px;font-size:17px;line-height:1.5}.integration-output dl{padding:6px 22px}.integration-output dl>div{border-bottom:1px solid var(--border);padding-block:16px}.integration-output dl>div:last-child{border:0}.integration-output dt{color:var(--muted-foreground);margin-bottom:6px;font-size:12px}.integration-output dd{overflow-wrap:anywhere;font-size:15px;line-height:1.7}.integration-gain>p{margin-top:18px;font-size:17px;line-height:1.8}.integration-before-after{gap:12px;margin-top:24px;display:grid}.integration-before-after span{color:var(--muted-foreground);font-size:12px}.integration-before-after p{margin-top:4px;font-size:14px;line-height:1.7}.integration-before-after>svg,.integration-before-after>div:last-child span{color:var(--primary)}.integration-other{margin-top:60px}.integration-other h2{letter-spacing:0;margin-bottom:24px;line-height:1.4;font-size:27px!important}.integrations-directory{padding-block:56px 72px}.integrations-directory-heading{text-align:center;margin-bottom:40px}.integrations-directory-heading h1{letter-spacing:0;color:var(--foreground);overflow-wrap:anywhere;margin:0;line-height:1.15;font-size:56px!important}.integrations-directory-heading p{max-width:680px;color:var(--muted-foreground);margin:20px auto 0;font-size:17px;line-height:1.8}.integrations-directory .integration-grid{gap:24px;width:100%;max-width:960px;margin-inline:auto}.integrations-directory .integration-tile{gap:10px;height:196px}.integrations-directory .integration-tile span{font-size:16px}[dir=rtl] .integrations-directory .integration-link-arrow{left:9px;right:auto;transform:rotate(180deg)}@media (width<=600px){.integrations-directory{padding-block:36px 48px}.integrations-directory-heading{margin-bottom:28px}.integrations-directory-heading h1{font-size:32px!important}.integrations-directory-heading p{margin-top:16px;font-size:15px}.integrations-directory .integration-grid{gap:16px}.integrations-directory .integration-tile{height:180px}.integrations-directory .integration-tile span{font-size:14px}}@media (width<=1000px){.integrations-inner{grid-template-columns:1fr;gap:32px}.integration-grid{width:100%;max-width:760px}}@media (width<=600px){.integrations-copy h2{font-size:28px!important}.integration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.integration-tile span{font-size:14px}.integration-detail-head h1{overflow-wrap:anywhere;font-size:32px}.integration-benefits{grid-template-columns:1fr;gap:28px}}@media (prefers-reduced-motion:reduce){.integration-tile,.integration-tile img{transition:none}.integration-tile:hover,.integration-tile:focus-visible,.integration-tile:hover img{transform:none}}@media (width<=700px){.integration-flow{grid-template-columns:1fr;gap:20px}.integration-flow-arrow{justify-self:center;transform:rotate(90deg)}.integration-example-result{grid-template-columns:1fr;gap:32px}}@media (width>=701px){[dir=rtl] .integration-flow-arrow{transform:rotate(180deg)}}