.dev-integrations { --connection-green:#007d6c; --connection-ink:#09254d; }
.dev-integrations .plan-stage-hero { background:linear-gradient(130deg,#fff 40%,#edf7f3); padding-bottom:48px; }
.dev-integrations-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.dev-integrations .plan-stage-hero-copy { transform:none; }
.dev-integrations h1 span { display:block; }
.dev-connection-map { border:1px solid #d6e6df; border-radius:24px; background:#fff; padding:28px; box-shadow:0 20px 60px #043f3b0c; }
.dev-connection-heading { display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.13em; font-weight:600; color:#536b67; margin-bottom:24px; }
.dev-connection-dot { width:8px; height:8px; border-radius:50%; background:#008575; }
.dev-connection-core { padding:24px; border-radius:14px; background:#053e3b; text-align:center; color:#fff; }
.dev-connection-core img { width:150px; height:40px; object-fit:contain; margin:auto; }
.dev-connection-core p { margin:12px 0 0; font-size:13px; color:#d5ebe4; }
.dev-connection-branches { width:52%; height:26px; margin:0 auto; border-left:1px solid #b0cec3; border-right:1px solid #b0cec3; position:relative; }
.dev-connection-branches::before { content:""; position:absolute; top:12px; left:0; right:0; border-top:1px solid #b0cec3; }
.dev-connection-nodes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dev-connection-nodes a { display:grid; justify-items:center; gap:6px; padding:16px 8px; border:1px solid #dce9e3; border-radius:12px; text-align:center; color:var(--connection-ink); background:#f7faf8; text-decoration:none; }
.dev-connection-nodes a:hover { background:#edf7f2; border-color:var(--connection-green); }
.dev-connection-nodes strong { font-size:16px; }
.dev-connection-nodes a>span:last-child { font-size:11px; color:#526c65; }
.dev-connection-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#e8f4ee; color:var(--connection-green); }
.dev-connection-icon svg { width:24px; height:24px; }
.dev-connection-note { margin:20px 0 0; font-size:12px; line-height:1.6; color:#526c65; text-align:center; }
.dev-integration-section { margin:60px 0; }
.dev-integration-heading { max-width:800px; margin:0 auto 32px; text-align:center; }
.dev-integration-heading h2 { font-size:38px; line-height:1.18; letter-spacing:-.035em; color:var(--connection-ink); margin:0 0 16px; }
.dev-integration-heading>p:last-child { font-size:17px; line-height:1.7; color:#4b6265; }
.dev-integration-build-grid,.dev-integration-app-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dev-integration-card,.dev-integration-app { border:1px solid #dce9e3; border-radius:18px; padding:32px; min-width:0; }
.dev-integration-card { background:#f5faf7; display:flex; flex-direction:column; align-items:flex-start; }
.dev-integration-card .plan-stage-eyebrow { margin:24px 0 8px; }
.dev-integration-card h3,.dev-integration-app h3 { font-size:26px; color:var(--connection-ink); line-height:1.25; margin:0 0 16px; }
.dev-integration-card p,.dev-integration-app p { font-size:16px; line-height:1.7; color:#405e5d; }
.dev-integration-card ul { padding-left:20px; margin:20px 0 24px; font-size:15px; line-height:1.7; list-style:disc; }
.dev-integration-card li { margin-bottom:8px; }
.dev-integration-card li::marker { color:var(--connection-green); }
.dev-integration-card>a { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; border-top:1px solid #c8dcd3; padding-top:20px; margin-top:auto; font-size:15px; font-weight:600; color:var(--connection-green); }
.dev-accounting-logos,.dev-email-logos { height:132px; display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:24px; }
.dev-accounting-logos { flex-wrap:wrap; align-content:center; }
.dev-accounting-logos img:first-child { width:128px; height:44px; object-fit:contain; }
.dev-accounting-logos img:nth-child(2) { width:56px; height:56px; object-fit:contain; }
.dev-accounting-logos span { color:#405e5d; font-weight:600; font-size:18px; }
.dev-email-logos>div { position:relative; width:240px; height:124px; overflow:hidden; }
.dev-email-logos img { position:absolute; max-width:none; width:386.58px; height:289.94px; left:-74.1px; top:-83.76px; }
.dev-integration-app .dev-integration-detail { border-top:1px solid #dce9e3; padding-top:16px; margin:24px 0 0; font-size:13px; font-weight:600; color:var(--connection-green); }
.dev-integration-availability { text-align:center; color:#4b6265; font-size:14px; margin:24px 0 0; }
.dev-integrations a:focus-visible { outline:3px solid #008575; outline-offset:4px; }
.dev-integrations [id] { scroll-margin-top:110px; }
@media(max-width:900px) {
 .collabit-dev-premium .dev-integrations .plan-stage-hero .plan-stage-hero-copy { display:block; }
 .collabit-dev-premium .dev-integrations .plan-stage-hero .plan-stage-hero-copy>.plan-stage-eyebrow { margin:0 0 20px !important; }
 .collabit-dev-premium .dev-integrations .plan-stage-hero .plan-stage-hero-copy>.plan-stage-lead { margin:24px 0 !important; }
 .collabit-dev-premium .dev-integrations .plan-stage-hero .plan-stage-hero-copy>.plan-stage-actions { margin-top:24px !important; }
 .dev-integrations-hero-grid { grid-template-columns:1fr; gap:32px; }
 .dev-connection-map { max-width:600px; width:100%; margin:auto; }
 .dev-integration-build-grid,.dev-integration-app-grid { grid-template-columns:1fr; }
 .dev-integrations .plan-stage-hero { padding-bottom:24px; }
 .dev-integration-heading h2 { font-size:32px; }
}
@media(max-width:500px) {
 .dev-connection-map { padding:20px; border-radius:18px; }
 .dev-connection-heading { font-size:10px; }
 .dev-connection-nodes strong { font-size:15px; }
 .dev-connection-nodes a>span:last-child { font-size:11px; }
 .dev-integration-card,.dev-integration-app { padding:24px; }
 .dev-integration-heading h2 { font-size:29px; }
 .dev-integration-heading br { display:none; }
 .dev-integration-section { margin:40px 0; }
 .dev-accounting-logos { gap:18px; }
}