/* BNT Electronics - software sections. 2B.S release 2: moved verbatim from the page sheets (origin noted per rule). Loaded by inc/sheets.php on the pages that contain these sections. */
/* infrastructure-and-systems */ .cloud-art{background:#fff;border:1px solid rgba(20,40,80,.10);border-radius:var(--radius-card-lg);padding:var(--space-6);box-shadow:var(--elevation-card);overflow:hidden}
/* infrastructure-and-systems */ .cloud-art img{width:100%;height:auto;display:block}
/* infrastructure-and-systems */ .anim main .cloud-art::after{border-radius:var(--radius-card)}
/* medical */ /* SYSTEMS INSTALLED - equal-area logo normalisation: every mark occupies the same visual area, so no wordmark dominates. Plates stay white in both themes so the artwork is never inverted or falsely coloured. */ .inst-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
/* medical */ .inst-plate{min-height:104px;padding:var(--space-5) var(--space-4);background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg,14px);box-shadow:var(--elevation-card);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
/* medical */ .inst-plate{position:relative;}
/* medical */ .inst-plate:hover{transform:translateY(-3px);box-shadow:var(--elevation-raised)}
/* medical */ /* the same scan sweep the editorial images use, so the wall belongs to the page */ .inst-plate::after{content:"";position:absolute;top:0;bottom:0;left:-38%;width:34%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(45,138,139,.14),transparent);transform:translateX(0);transition:transform .85s var(--ease-out)}
/* medical */ .inst-plate:hover::after{transform:translateX(420%)}
/* medical */ .inst-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--room-medical,#2d8a8b);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-out)}
/* medical */ .inst-plate:hover::before{transform:scaleX(1)}
/* medical */ @media(prefers-reduced-motion:reduce){.inst-plate::after,.inst-plate::before{display:none}}
/* medical */ .inst-plate img{display:block;filter:grayscale(1);opacity:.66;transition:filter .35s var(--ease-out),opacity .35s var(--ease-out)}
/* medical */ .inst-plate:hover img{filter:none;opacity:1}
/* medical */ @media(max-width:900px){.inst-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* medical */ html [data-theme="dark"] .inst-plate{border-color:rgba(255,255,255,.14)}
/* software */ /* PRODUCT SURFACES — designed UI panels standing in for product screenshots */ .ui{position:relative;width:100%;height:100%;border-radius:var(--radius-card);display:flex;flex-direction:column;overflow:hidden;text-align:left;font-family:var(--font-text);text-transform:none;letter-spacing:normal;font-size:12px;line-height:1.35;--gl:var(--border-subtle);--ink:var(--text-strong);--mut:var(--text-muted);--sub:var(--text-muted);--ln:var(--border-subtle);--acc:var(--room-software,#1868e6);background:var(--surface-card);border:1px solid var(--border-subtle)}
/* software */ .ui__bar{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--ln);background:var(--surface-sunken);flex:none}
/* software */ .ui__dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--border-default);flex:none}
/* software */ .ui__ttl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* software */ .ui__tag{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);flex:none}
/* software */ .ui__body{flex:1;padding:13px;display:flex;flex-direction:column;gap:7px;min-height:0}
/* software */ .ui__row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--ln);border-radius:var(--radius-button);background:var(--surface-card);flex:none}
/* software */ .ui__sq{width:16px;height:20px;border-radius:3px;border:1px solid var(--ln);background:var(--surface-sunken);flex:none}
/* software */ .ui__t{font-family:var(--font-text);font-size:12px;font-weight:600;text-transform:none;letter-spacing:normal;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* software */ .ui__m{font-family:var(--font-mono);font-size:10.5px;text-transform:none;letter-spacing:normal;color:var(--mut);white-space:nowrap}
/* software */ .ui__pill{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:var(--radius-full);background:rgba(24,104,230,.10);color:var(--acc);flex:none}
/* software */ .ui__pill--ok{background:var(--success-surface);color:var(--success)}
/* software */ .ui__prog{margin-top:auto;flex:none;display:flex;flex-direction:column;gap:6px}
/* software */ .ui__track{height:5px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
/* software */ .ui__fill{height:100%;border-radius:var(--radius-full);background:var(--acc)}
/* software */ .ui__map{flex:1;min-height:0;border-radius:9px;border:1px solid var(--ln);position:relative;background-image:linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);background-size:24px 24px;background-color:var(--surface-sunken);overflow:hidden}
/* software */ .ui__node{position:absolute;width:9px;height:9px;border-radius:var(--radius-full);background:var(--acc);box-shadow:0 0 0 4px rgba(24,104,230,.14)}
/* software */ .ui__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* software */ .ui__geo{position:absolute;left:9px;bottom:8px;z-index:2;font-family:var(--font-mono);font-size:9px;color:var(--mut);background:rgba(255,255,255,.86);padding:3px 6px;border-radius:5px}
/* software */ .ui__bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:5px;padding-top:6px;border-bottom:1px solid var(--ln)}
/* software */ .ui__b{flex:1;border-radius:3px 3px 0 0;background:var(--border-default)}
/* software */ .ui__b--hi{background:var(--acc)}
/* software */ .ui__b--flag{background:var(--warning)}
/* software */ /* the summary row carries a sentence next to a fixed-width stamp: the sentence must be allowed to shrink and wrap, or it forces the stamp past the panel's clipped edge */ .ui__tot{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;padding-top:8px;border-top:1px solid var(--ln);flex:none}
/* software */ .ui__tot > .ui__m{min-width:0;white-space:normal}
/* software */ .ui__tot b{font-family:var(--font-display);font-size:16px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
/* software */ .ui__step{display:flex;gap:10px;align-items:flex-start;flex:none}
/* software */ .ui__stepdot{width:9px;height:9px;border-radius:var(--radius-full);border:2px solid var(--acc);background:#fff;margin-top:3px;flex:none;position:relative}
/* software */ .ui__step + .ui__step .ui__stepdot::before{content:"";position:absolute;left:50%;top:-13px;width:1px;height:11px;background:var(--ln);transform:translateX(var(--mq-end, -50%))}
/* software */ .ui__step--done .ui__stepdot{background:var(--acc)}
/* software */ .ui__plates{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:9px}
/* software */ .ui__plate{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--ln);border-radius:9px;background:var(--surface-card)}
/* software */ .ui__plate--mid{border-color:var(--acc);box-shadow:0 0 0 3px rgba(24,104,230,.08)}
/* software */ .ui__wire{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
/* software */ .ui__frame{border:1px solid var(--ln);border-radius:var(--radius-button);background:var(--surface-sunken);display:flex;flex-direction:column;gap:5px;padding:8px}
/* software */ .ui__lineA{height:6px;border-radius:2px;background:var(--border-default)}
/* software */ .ui__lineB{height:4px;border-radius:2px;background:var(--border-subtle)}
/* software */ .ui--sm .ui__body{padding:8px 10px;gap:4px}
/* software */ .ui--sm .ui__row{padding:4px 8px;gap:7px}
/* software */ .ui--sm .ui__t{font-size:11px}
/* software */ .ui--sm .ui__bar{padding:7px 11px}
/* software */ /* the hero surfaces size to their content - a fixed percentage height clips the moment a row grows a line, and these panels carry the page's headline figure */ .hero-ui > .ui{height:auto}
/* software */ /* Same constraint as the story panels: at small width the title, meta and pill cannot share a line, and the title is the content - so stack meta under title rather than letting the title absorb the whole deficit and ellipsise. */ .ui--sm .ui__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sq t pill" "sq m pill";column-gap:7px;row-gap:1px;align-items:center}
/* software */ .ui--sm .ui__row .ui__sq{grid-area:sq}
/* software */ .ui--sm .ui__row .ui__t{grid-area:t;white-space:normal;overflow:visible;text-overflow:clip}
/* software */ .ui--sm .ui__row .ui__m{grid-area:m;white-space:normal;margin-left:0}
/* software */ .ui--sm .ui__row .ui__pill{grid-area:pill;margin-left:0}
/* software */ .ui .ui__node{position:absolute;display:block;width:9px;height:9px;border-radius:var(--radius-full);background:var(--acc);box-shadow:0 0 0 4px rgba(24,104,230,.14)}
/* software */ .ui .ui__geo{position:absolute;display:block;left:9px;bottom:8px;z-index:2;font-family:var(--font-mono);font-size:10px;color:var(--mut);background:var(--surface-card);border:1px solid var(--border-subtle);padding:3px 6px;border-radius:5px;white-space:nowrap}
/* software */ .ui .ui__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* software */ .story-visual--panel .ui{border-radius:0;border:none}
/* software */ .story-visual--panel .ui__body{padding:var(--space-6);gap:var(--space-3);justify-content:center}
/* software */ .story-visual--panel .ui__bar{padding:14px var(--space-6)}
/* software */ .story-visual--panel .ui__ttl{font-size:12px}
/* software */ .story-visual--panel .ui__tag{font-size:11px}
/* software */ .story-visual--panel .ui__t{font-size:15px}
/* software */ .story-visual--panel .ui__m{font-size:12px}
/* software */ .story-visual--panel .ui__row{padding:13px 15px;gap:13px}
/* software */ .story-visual--panel .ui__sq{width:20px;height:25px}
/* software */ .story-visual--panel .ui__pill{font-size:10px;padding:4px 9px}
/* software */ .story-visual--panel .ui__wire{gap:var(--space-3);min-height:104px}
/* software */ /* these blocks carry flex:1 for the card layout; inside the story frame that makes them eat the free space and centre alone, so the trailing summary pushes the mass upward. Sizing them to content lets the body centre the whole stack as one group. */ .story-visual--panel .ui__plates,.story-visual--panel .ui__wire,.story-visual--panel .ui__bars,.story-visual--panel .ui__map{flex:none}
/* software */ .story-visual--panel .ui__plate{padding:14px 16px}
/* software */ .story-visual--panel .ui__body > .ui__tot{padding-top:var(--space-4);align-items:flex-start}
/* software */ /* At story width a row cannot fit title, meta and pill on one line, and the title is the content - so stack meta under title on a grid instead of letting the title absorb the deficit. */ .story-visual--panel .ui__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"sq t pill" "sq m pill";column-gap:13px;row-gap:3px;align-items:center}
/* software */ .story-visual--panel .ui__row .ui__sq{grid-area:sq}
/* software */ .story-visual--panel .ui__row .ui__t{grid-area:t;white-space:normal;overflow:visible;text-overflow:clip}
/* software */ .story-visual--panel .ui__row .ui__m{grid-area:m;white-space:normal;margin-left:0}
/* software */ .story-visual--panel .ui__row .ui__pill{grid-area:pill;margin-left:0}
/* software */ .story-visual--panel .ui__tot .ui__m,.story-visual--panel .ui__prog .ui__m{white-space:normal}
/* software */ .story-visual--panel .ui{height:100%}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__bar{padding:10px var(--space-5)}}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__body{padding:var(--space-4) var(--space-5);gap:var(--space-2)}}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__row{padding:5px 12px;row-gap:0}}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__t{font-size:13px}}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__m{font-size:11px}}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__sq{width:16px;height:20px}}
/* software */ @media(max-height:820px) and (min-width:901px){/* reclaim the dead space instead of dropping copy: the caption strip only needs to clear a 21px badge, and the plates were still carrying card padding */ .story-visual--panel .ui__plate{padding:8px 12px}}
/* software */ @media(max-height:820px) and (min-width:901px){.story-visual--panel .ui__wire{min-height:88px}}
/* software */ html.bnt-js .anim main .ui__b{transform-origin:bottom;transition:transform .9s var(--ease-out)}
/* software */ html.bnt-js .anim main .split > *:not(.is-visible) .ui__b{transform:scaleY(.08)}
/* software */ html.bnt-js .anim main .ui__b:nth-child(2){transition-delay:40ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(3){transition-delay:80ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(4){transition-delay:120ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(5){transition-delay:160ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(6){transition-delay:200ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(7){transition-delay:240ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(8){transition-delay:280ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(9){transition-delay:320ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(10){transition-delay:360ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(11){transition-delay:400ms}
/* software */ html.bnt-js .anim main .ui__b:nth-child(12){transition-delay:440ms}
/* software */ html.bnt-js .anim main .ui__fill{transform-origin:left;transition:transform 1.1s var(--ease-out)}
/* software */ html.bnt-js .anim main .split > *:not(.is-visible) .ui__fill{transform:scaleX(.03)}
/* software */ .anim main .ui__row{transition:transform .32s var(--ease-out),border-color .32s var(--ease-out)}
/* software */ .anim main .ui:hover .ui__row:nth-child(1){transform:translateX(3px)}
/* software */ .anim main .ui:hover .ui__row:nth-child(2){transform:translateX(5px)}
/* software */ .anim main .ui:hover .ui__row:nth-child(3){transform:translateX(7px)}
/* software */ .anim main .ui:hover .ui__row{border-color:var(--border-default)}