/* Integrations: hex card polish + converter banner containment */
#integrations>.oxc-cbc{width:auto;max-width:1280px;margin:0 auto clamp(28px,3vw,44px);box-sizing:border-box}
#integrations .oce-integr-cats{row-gap:clamp(52px,5vw,64px);margin-top:clamp(44px,4vw,60px);column-gap:clamp(18px,2vw,26px)}
#integrations .oce-integr-card{min-height:0;gap:10px;padding:18px 22px 20px;border-radius:18px;
 border-color:color-mix(in oklab,var(--ink-0) 8%,transparent);
 box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 30px -22px rgba(15,23,42,.28)}
#integrations .oce-integr-card .oxi-head{padding-left:92px;min-height:70px;display:flex;align-items:center}
#integrations .oce-integr-card .oce-integr-body{margin-bottom:2px}
#integrations .oce-integr-title{font-size:16.5px;line-height:1.25}
.hx2-hex{width:104px;height:104px;top:-24px;left:-20px;
 filter:drop-shadow(0 1px 1.5px rgba(15,23,42,.28)) drop-shadow(0 10px 14px rgba(15,23,42,.18))}
.hx2-hex img{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
.hx2-hex::after{content:"";position:absolute;inset:2px;pointer-events:none;
 clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
 background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,0) 38%,rgba(8,16,32,.0) 62%,rgba(8,16,32,.16))}
[data-theme="dark"] #integrations .oce-integr-card{border-color:rgba(255,255,255,.09);
 box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 16px 32px -22px rgba(0,0,0,.7)}
[data-theme="dark"] .hx2-hex{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6)) drop-shadow(0 12px 16px rgba(0,0,0,.45))}
[data-theme="dark"] .hx2-hex::after{background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,0) 38%,rgba(0,0,0,.2))}
@media (max-width:640px){
 #integrations .oce-integr-cats{row-gap:46px;margin-top:40px;padding-inline:8px}
 #integrations .oce-integr-card{padding:16px 18px 18px}
 .hx2-hex{width:88px;height:88px;top:-22px;left:-14px}
 #integrations .oce-integr-card .oxi-head{padding-left:70px;min-height:58px}
}

/* DDC head: no rule and dot between the heading and the note. */
#ddc #voices{border-top:0;padding-top:0;margin-top:clamp(20px,2.4vw,32px)}
#ddc #voices::before{display:none}

/* Tools and ownership read as one line: your tools -> the open core -> the stack you own. */
@media (min-width:1181px){
  #integrations{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);column-gap:44px;row-gap:0;align-items:stretch}
  #integrations>*{grid-column:1/-1;min-width:0}
  #integrations>.oxc-row,#integrations .oxc-hub,#integrations>.oxc-cb,#integrations>.oxc-cb>.cb-head{display:contents}
  #integrations .oxc-hub>.section-head{grid-column:1;grid-row:1;margin:0 0 22px;display:block;align-self:end}
  #integrations .cb-head-main{grid-column:2;grid-row:1;margin:0 0 22px;align-self:end}
  #integrations .oxc-row>.oxc-col>.cb-stage.hx2-stage{grid-column:1;grid-row:2/4;margin:0;height:100%}
  #integrations>.oxc-cb>.cb-stage{grid-column:2;grid-row:2;margin:0}
  #integrations .cb-head-side{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 0;padding:0;max-width:none}
  #integrations .cb-points{display:flex;flex-direction:column;gap:5px;margin:0;flex:1 1 260px;min-width:0}
  #integrations .cb-points li{font-size:13px;gap:8px}
  #integrations .cb-pt-ico{width:24px;height:24px}
  #integrations .cb-cta{flex:none;margin:0}
  #integrations .section-head .section-title,#integrations .cb-title.section-title{font-size:clamp(30px,2.75vw,40px);line-height:1.08;margin:0}
  #integrations>.oxc-cbc{margin-top:clamp(28px,3vw,44px)}
  #integrations .hx2{height:100%;box-sizing:border-box;grid-template-columns:minmax(0,1fr) 176px;grid-template-rows:repeat(6,minmax(0,1fr));column-gap:62px;row-gap:8px;padding:18px 20px}
  #integrations .hx2-node:nth-child(n){grid-area:auto;grid-column:1;padding:7px 12px;gap:10px}
  #integrations .hx2-core{grid-area:1/2/7/3;align-self:center;padding:22px 12px 18px}
  #integrations .hx2-core svg{width:46px;height:46px}
  #integrations .hx2-core b{font-size:14.5px}
  #integrations .hx2-sub{font-size:12px}
  #integrations .hx2-ico{width:32px;height:32px;border-radius:9px}
  #integrations .hx2-ico svg{width:19px;height:19px}
  #integrations .hx2-t{font-size:13px;overflow-wrap:break-word;hyphens:auto}
  #integrations .hx2-f{font-size:10.5px}
  #integrations>.oxc-link{position:absolute;left:0;top:0;grid-column:auto;grid-row:auto;z-index:3;pointer-events:none;overflow:visible}
  #integrations .cb-title.section-title{font-family:"Inter Tight",Inter,sans-serif;font-weight:500;letter-spacing:-.035em}
  #integrations .cb-title.section-title em{font-family:Fraunces,serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
  #integrations .oxc-hub>.section-head,#integrations .cb-head-main{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;text-align:start}
  #integrations .section-head .section-eyebrow,#integrations .cb-head-main .section-eyebrow{justify-content:flex-start;align-self:flex-start;margin:0}
  #integrations .cb-title.section-title em{display:block}
  #integrations .section-head .section-title,#integrations .cb-head-main .cb-title{align-self:flex-start;max-width:none;width:100%}
  #integrations>.oxc-cb>.cb-stage .cb-slab-sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  #integrations .section-eyebrow{margin:0}
  #integrations>.oxc-cbc,#integrations>.oce-integr-marq,#integrations>.oce-integr-cats,#integrations>.oxi-tm,#integrations>.oce-integr-foot{width:100%;max-width:none;justify-self:stretch;margin-inline:0;box-sizing:border-box}
}

/* Phone hub: tiles in a row share a height, so the grid stays even. */
@media (max-width:700px){
  #integrations .hx2{align-items:stretch}
  #integrations .hx2-node{align-self:stretch}
}

/* Compact tools row */
@media (min-width:1181px){
  #integrations{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);column-gap:36px}
  #integrations .oxc-hub>.section-head,#integrations .cb-head-main{margin:0 0 16px;gap:8px}
  #integrations .section-head .section-title,#integrations .cb-title.section-title{font-size:clamp(26px,2.3vw,33px)}
  #integrations .hx2{grid-template-columns:minmax(0,1fr) 148px;column-gap:44px;row-gap:6px;padding:12px 14px}
  #integrations .hx2-node:nth-child(n){padding:5px 10px;gap:9px}
  #integrations .hx2-ico{width:28px;height:28px;border-radius:8px}
  #integrations .hx2-ico svg{width:16px;height:16px}
  #integrations .hx2-core{padding:16px 10px 14px}
  #integrations .hx2-core svg{width:36px;height:36px}
  #integrations .hx2-core b{font-size:13px}
  #integrations .hx2-sub{font-size:11.5px;line-height:1.3}
  #integrations>.oxc-cb>.cb-stage{padding:14px 12px 12px;min-height:0}
  #integrations .cb-boundary{margin:0;padding:18px 10px 10px}
  #integrations .cb-tower{gap:6px;margin:0}
  #integrations .cb-head-side{margin:8px 0 0;gap:8px 12px;flex-wrap:nowrap}
  #integrations .cb-points{flex-direction:row;gap:10px;flex:1 1 0}
  #integrations .cb-points li{flex:1 1 0;min-width:0;font-size:12px;line-height:1.25;align-items:center}
  #integrations .cb-pt-ico{width:22px;height:22px;flex:none}
  #integrations .cb-cta{padding:9px 14px;font-size:13px;white-space:nowrap}
  #integrations>.oxc-cbc{margin-top:18px}
}

/* Same width as the other sections; straight wires into a tall core */
#integrations{max-width:calc(1280px + 144px);margin-inline:auto}
@media (min-width:1181px){
  #integrations .hx2{grid-template-columns:minmax(0,1fr) 150px;column-gap:64px}
  #integrations .hx2-core{align-self:stretch;justify-content:center;grid-row:1/-1}
}
.hx2-core::after{animation:none;opacity:0}
.hx2 .hx2-wire,.oxc-link .hx2-wire{stroke:color-mix(in oklab,var(--accent) 28%,var(--line-1));transition:stroke .25s ease}
.hx2 .hx2-wire.is-act,.oxc-link .hx2-wire.is-act{stroke:var(--accent);stroke-width:2}
.hx2-end{fill:var(--bg-0);stroke:color-mix(in oklab,var(--accent) 45%,var(--line-1));stroke-width:1.5}
.hx2-pk{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 4px color-mix(in oklab,var(--accent) 70%,transparent))}
.hx2-node{transition:border-color .25s ease,box-shadow .25s ease,opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.hx2-node.is-act{border-color:color-mix(in oklab,var(--accent) 65%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 14%,transparent)}
.hx2-node .hx2-f{transition:color .25s ease}
.hx2-node.is-act .hx2-f{color:var(--accent)}
.hx2-core{transition:box-shadow .3s ease}
.hx2-core.is-hit{box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 22%,transparent),0 18px 40px -18px color-mix(in oklab,var(--accent) 70%,transparent)}
#integrations .cb-layer{transition:box-shadow .3s ease,border-color .3s ease}
#integrations .cb-layer.is-hit{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 16%,transparent);border-color:color-mix(in oklab,var(--accent) 60%,transparent)}

/* Tools row sits on the shared 1280 container */
@media (min-width:1424px){#integrations{padding-inline:72px}}
/* end Tools row sits on the shared 1280 container */
/* batch21 */
#integrations .hx2-node:nth-child(n){padding:0 12px 0 0;gap:12px;overflow:hidden}
#integrations .hx2-pic,#integrations .hx2-ico.hx2-pic{width:78px;height:auto;min-height:46px;align-self:stretch;flex:none;padding:0;border:0;border-radius:0;background:var(--bg-2);overflow:hidden;box-shadow:none}
#integrations .hx2-pic img{display:block;width:100%;height:100%;object-fit:cover}
#integrations .hx2-txt{padding-block:6px;min-width:0}
#integrations .hx2-fmts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%;margin-top:12px}
#integrations .hx2-fmts i{font:600 10.5px/1 'JetBrains Mono',ui-monospace,monospace;font-style:normal;letter-spacing:.02em;text-align:center;padding:6px 0;border-radius:6px;color:#fff;background:rgba(255,255,255,.14)}
@media (min-width:1100px){#integrations .hx2{grid-template-columns:minmax(0,1fr) 150px;column-gap:46px}#integrations .hx2-core{padding:16px 10px;gap:8px}}
@media (max-width:1099px){#integrations .hx2-node:nth-child(n){flex-direction:column;align-items:stretch;gap:0;padding:0}#integrations .hx2-pic,#integrations .hx2-ico.hx2-pic{width:100%;height:84px;min-height:0;align-self:auto}#integrations .hx2-txt{padding:10px 12px 12px}}
/* batch24 */
#integrations .hx2-core{text-align:center}
#integrations .hx2-fmts{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#integrations .hx2-fmts i{display:flex;align-items:center;justify-content:center;min-width:0;padding:0;min-height:26px}
@media (min-width:1100px){#integrations .hx2-core{justify-content:flex-start;align-self:stretch;padding:18px 10px 12px;gap:12px}
#integrations .hx2-fmts{flex:1 1 auto;margin-top:2px;grid-auto-rows:1fr}}
@media (max-width:1099px){#integrations .hx2-core{flex-wrap:wrap;justify-content:center}
#integrations .hx2-fmts{flex:1 1 100%;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}}