/* Preview-only: a vendor-neutral technology ecosystem for desktop and tablet. */
.bc-technology-graphic { display:none; }
.bc-technology-graphic > svg { display:block; width:100%; height:auto; overflow:visible; }
.bc-technology-graphic svg { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.bc-technology-graphic .bc-tech-connections { stroke:var(--bc-visual-line); stroke-width:1.6; }
.bc-technology-graphic .bc-tech-joints { fill:var(--bc-visual-accent); stroke:none; }
.bc-technology-graphic .bc-tech-halo { fill:none; stroke:var(--bc-visual-line); stroke-width:1; stroke-dasharray:2 7; }
.bc-technology-graphic .bc-tech-core { fill:var(--bc-visual-core); stroke:var(--bc-visual-accent); stroke-width:1.6; }
.bc-technology-graphic .bc-tech-architecture { stroke:var(--bc-visual-accent); stroke-width:2; }
.bc-technology-graphic .bc-tech-plane { fill:var(--bc-visual-module); }
.bc-technology-graphic .bc-tech-core-guide { stroke:var(--bc-visual-line); stroke-width:1.4; }
.bc-technology-graphic .bc-tech-area-icon { stroke:var(--bc-visual-accent); stroke-width:1.8; }
.bc-technology-graphic .bc-tech-facet { fill:var(--bc-visual-panel); }
.bc-technology-graphic .bc-tech-detail { stroke:var(--bc-visual-line); stroke-width:1.4; }
.bc-technology-graphic .bc-tech-delivery-route { stroke-width:2.4; }
.bc-technology-graphic .bc-tech-route-point { fill:var(--bc-visual-panel); }
.bc-technology-graphic text { font-family:var(--ui-font); text-anchor:middle; fill:var(--bc-visual-ink); }
.bc-technology-graphic .bc-tech-core-label { font-size:18px; font-weight:600; }
.bc-technology-graphic .bc-tech-area-label { font-size:17px; font-weight:500; }

@media(min-width:701px) {
  #root .tooling > .section-head.bc-technology-heading {
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,1fr);
    gap:20px clamp(32px,4vw,64px); align-items:center;
  }
  #root .tooling > .section-head.bc-technology-heading > .kicker {
    grid-column:1/-1; grid-row:1; margin:0;
  }
  #root .tooling > .section-head.bc-technology-heading > div {
    grid-column:1; grid-row:2; min-width:0; width:auto; max-width:none;
  }
  #root .tooling > .section-head.bc-technology-heading h2 {
    font-size:clamp(38px,3.8vw,54px); line-height:1.08; max-width:19ch;
  }
  #root .tooling > .section-head.bc-technology-heading h2 + p { max-width:45ch; }
  #root .tooling .bc-technology-graphic {
    display:block; grid-column:2; grid-row:2; justify-self:end; align-self:center;
    width:100%; max-width:560px; min-width:0; margin:0; padding:0; border:0;
    background:none; box-shadow:none;
  }
  #root .tooling .bc-technology-graphic > figcaption {
    margin:0 0 12px; padding:0 0 13px; border-bottom:1px solid var(--bc-visual-line);
    color:var(--bc-visual-muted); font:500 11px/1.45 var(--ui-font);
    letter-spacing:.09em; text-transform:uppercase;
  }
}
@media(min-width:701px) and (max-width:1050px) {
  #root .tooling > .section-head.bc-technology-heading { grid-template-columns:minmax(0,1fr); gap:24px; }
  #root .tooling > .section-head.bc-technology-heading > .kicker { grid-column:1; }
  #root .tooling > .section-head.bc-technology-heading > div { grid-column:1; grid-row:2; }
  #root .tooling > .section-head.bc-technology-heading h2 { max-width:23ch; }
  #root .tooling > .section-head.bc-technology-heading h2 + p { max-width:65ch; }
  #root .tooling .bc-technology-graphic { grid-column:1; grid-row:3; justify-self:center; margin-top:6px; }
}
@media(max-width:700px) {
  .bc-technology-graphic, #root .tooling .bc-technology-graphic { display:none!important; }
}
@media(prefers-reduced-motion:reduce) {
  .bc-technology-graphic, .bc-technology-graphic * { animation:none!important; transition:none!important; }
}