/* Product / service bands and the bleeding frame.

   Shared by /software/ and /services/, which shipped these rules identically
   in their own style blocks. The handoff asks for them to graduate rather than
   be maintained in two places.

   .bl-r / .bl-l bleed to the viewport edge using --vw, published by pylon.js on
   resize. 100vw would include the scrollbar and cause horizontal overflow. */
.bl{position:relative;display:flex;border:1px solid var(--rule-2);background:#0c0c0f;container-type:inline-size;overflow:hidden;box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
.bl .ar{display:flex;flex:1;min-width:0}
.bl .mk{position:relative;inset:auto;flex:1;min-width:0}
.bl-r{border-right:0;margin-right:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
.bl-l{border-left:0;margin-left:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
@media(max-width:1024px){
.bl-r,.bl-l{border-left:0;border-right:0;margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1)}
}


.bnd{padding:clamp(4.5rem,8vw,7.5rem) 0;border-bottom:1px solid var(--rule)}
.bnd .g{align-items:center}
.bnd-c{grid-column:1/5}
.bnd-v{grid-column:5/13}
.bnd.rev .bnd-c{grid-column:9/13}
.bnd.rev .bnd-v{grid-column:1/9;grid-row:1}
@media(max-width:1024px){
.bnd-c,.bnd-v,.bnd.rev .bnd-c,.bnd.rev .bnd-v{grid-column:1/-1}
.bnd.rev .bnd-v{grid-row:auto}
.bnd-v{margin-top:2.5rem}
}
.sw-nm{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}