/* service openings (4 Oct 2026): shared diagram tokens. Bronze paths, warm-white type and the shell's surfaces; every
   colour comes from the shell tokens, so the dark, black and light appearances follow without page rules */
.sx{--sx-path:var(--accent);--sx-path-soft:color-mix(in srgb,var(--accent) 42%,transparent);--sx-wire:var(--line-3);--sx-node:var(--surface);--sx-node-2:var(--surface-2)}
:root[data-appearance="light"] .sx{--sx-path:var(--accent-deep);--sx-path-soft:color-mix(in srgb,var(--accent-deep) 45%,transparent)}
.sx-k{margin:0;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.5;color:var(--accent-text)}
.sx-cap{margin-top:14px;font-size:var(--fs-small);line-height:1.6;color:var(--muted);max-width:68ch}
.sx-replay{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--body);font-size:.82rem;font-weight:700;transition:border-color var(--t-state) var(--ease),color var(--t-state) var(--ease)}
.sx-replay:hover{border-color:var(--sx-path);color:var(--ink)}
.sx-replay:focus-visible,.sx a:focus-visible,.sx button:focus-visible{outline:2px solid var(--sx-path);outline-offset:3px}
.sx-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 20px}
.sx-foot .sx-cap{flex:1 1 320px;margin-top:14px}
.sx-foot .sx-replay{margin-top:10px}
/* /services/private-workspaces/ #operating-modes: two modes side by side from 900 px. Each shows its documents, processing
   and outputs inside a dashed processing boundary; the edge under it shows the connection: cut and tested disconnected,
   or one outbound route to an approved provider. Static; the comparison table below stays the full source. */
.sx-bound{margin:clamp(24px,3vw,36px) 0 clamp(20px,2.4vw,28px)}
.sx-bound-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:900px){.sx-bound-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}}
.sx-bound-mode{display:grid;align-content:start;gap:10px}
.sx-bound-box{position:relative;display:grid;gap:10px;padding:12px 14px 16px;border-radius:var(--r);border:1.5px dashed var(--sx-path);background:var(--wash)}
.sx-bound-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.sx-bound-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.sx-bound-flow li{position:relative;display:grid;align-content:start;gap:4px;padding:10px 12px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface)}
.sx-bound-flow li:not(:last-child)::after{content:"";position:absolute;left:100%;top:50%;width:22px;height:1.5px;background:var(--sx-path)}
.sx-bound-flow li:not(:last-child)::before{content:"";position:absolute;left:calc(100% + 14px);top:calc(50% - 3.5px);width:7px;height:7px;border-top:1.5px solid var(--sx-path);border-right:1.5px solid var(--sx-path);transform:rotate(45deg)}
.sx-bound-flow strong{color:var(--ink);font-size:.9rem;line-height:1.3}
.sx-bound-flow span{color:var(--body);font-size:.8rem;line-height:1.45}
.sx-bound-edge{display:grid;justify-items:center;gap:8px;margin-top:-10px}
.sx-bound-link{position:relative;display:block;width:2px;height:34px}
.sx-bound-out .sx-bound-link{background:var(--sx-path)}
.sx-bound-out .sx-bound-link::after{content:"";position:absolute;left:-3.5px;bottom:1px;width:7px;height:7px;border-right:2px solid var(--sx-path);border-bottom:2px solid var(--sx-path);transform:rotate(45deg)}
.sx-bound-cut .sx-bound-link{background:linear-gradient(var(--line-3) 0 11px,transparent 11px 23px,var(--line-3) 23px)}
.sx-bound-cut .sx-bound-link::before,.sx-bound-cut .sx-bound-link::after{content:"";position:absolute;left:-5px;top:16px;width:12px;height:1.5px;background:var(--muted);transform:rotate(45deg)}
.sx-bound-cut .sx-bound-link::after{transform:rotate(-45deg)}
.sx-bound-ext{display:inline-block;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:.82rem;font-weight:700;line-height:1.3}
.sx-bound-out .sx-bound-ext{border-color:var(--sx-path)}
.sx-bound-cut .sx-bound-ext{border-style:dashed;color:var(--body)}
.sx-bound-edge p{margin:0;justify-self:stretch;color:var(--body);font-size:.86rem;line-height:1.55}
.sx-bound-edge p strong{color:var(--ink)}
@media (max-width:599px){
.sx-bound-flow{grid-template-columns:minmax(0,1fr);gap:16px}
.sx-bound-flow li:not(:last-child)::after{left:22px;top:100%;width:1.5px;height:16px}
.sx-bound-flow li:not(:last-child)::before{left:18.5px;top:calc(100% + 8px);transform:rotate(135deg)}
}