/* 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/connected-workflows/: the task flow opens the example chapter, directly under the framing cards: brief →
   specialist work → review → delivered files, four stages in a row from 900 px and a list under that. Static. */
.sx-task{margin:0 0 clamp(36px,4.6vw,56px)}
.sx-task-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.4vw,44px);margin:0;padding:0;list-style:none}
.sx-task-steps li{position:relative;display:grid;align-content:start;gap:8px;padding:16px 16px 18px;border-radius:var(--r);border:1px solid var(--line-2);background:linear-gradient(180deg,var(--sx-node-2),var(--sx-node));box-shadow:inset 0 1px 0 var(--edge)}
.sx-task-steps li > p{margin:0}
.sx-task-steps li > p:not(.sx-k){color:var(--ink);font-size:.92rem;line-height:1.5}
.sx-task-steps svg{width:30px;height:30px;fill:none;stroke:var(--sx-path);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sx-task-steps li:not(:last-child)::after{content:"";position:absolute;left:100%;top:31px;width:clamp(28px,3.4vw,44px);height:1.6px;background:var(--sx-path)}
.sx-task-steps li:not(:last-child)::before{content:"";position:absolute;z-index:1;left:calc(100% + clamp(28px,3.4vw,44px) - 8px);top:27.5px;width:7px;height:7px;border-top:1.6px solid var(--sx-path);border-right:1.6px solid var(--sx-path);transform:rotate(45deg)}
@media (max-width:899px){
.sx-task-steps{grid-template-columns:minmax(0,1fr);gap:20px}
.sx-task-steps li{grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:4px}
.sx-task-steps svg{grid-row:1 / span 2}
.sx-task-steps li:not(:last-child)::after{left:31px;top:100%;width:1.6px;height:20px}
.sx-task-steps li:not(:last-child)::before{left:27.5px;top:calc(100% + 11px);transform:rotate(135deg)}
}