/* /use-cases/ai-tool-sprawl · page scoped CSS (prefix pg-ats-, short for the slug). Spacing between shared blocks, plus one page
   figure part that has no shared block yet: the connection trace in fig. 02 (.pg-ats-trace: Mac, AI tool, connection on one rail).
   Promote request: a shared "path" plate (.cy-trace) if other pages need a Mac → tool → connection line. */

/* how it works: the intro head, then the first block on the same ground one title gap below (as /product) */
.pg-ats-how{padding-bottom:var(--pg-title-gap)}
.pg-ats-how__head{margin-bottom:0}
.pg-ats-block--first{padding-top:0}

/* hero answer: the three connections under the numbers */
.pg-ats-list{border-top:1px solid var(--s-line)}

/* split text: points, callout */
.pg-ats-points{margin-top:24px;margin-bottom:24px}
.pg-ats-callout{margin-top:28px;max-width:36em}

/* fig. 02: the trace (Mac, AI tool, connection) on one rail, then the fields */
.pg-ats-trace{position:relative;display:grid;gap:18px;padding-left:28px}
.pg-ats-trace::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--pg-rule)}
.pg-ats-trace__node{position:relative;display:grid;gap:2px}
.pg-ats-trace__node::before{content:"";position:absolute;left:-28px;top:6px;width:11px;height:11px;background:var(--s-raised);box-shadow:inset 0 0 0 1px var(--s-ink-3)}
.pg-ats-trace .pg-ats-trace__node--end::before{background:#3FC3F2;box-shadow:none}
.pg-ats-trace__k{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-ats-trace__v{font-size:calc(17px + var(--pg-mock-bump));font-weight:500;line-height:1.3;color:var(--s-ink)}
.pg-ats-trace__v--mono{font-family:var(--font-mono);font-size:calc(16px + var(--pg-mock-bump));font-weight:400}
.pg-ats-fields{margin-top:28px;border-top:1px solid var(--s-line)}
.pg-ats-mono{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));font-weight:400}
.cy-ground--paper .pg-ats-trace__node:not(.pg-ats-trace__node--end)::before{background:var(--s-bg)}

/* fig. 03: the two phases, squares at the event size; the plate head already rules the top */
.pg-ats-events{border-top:0}
.pg-ats-events .cy-gate__row:first-child{padding-top:0}
.pg-ats-mark{width:10px;height:10px}
.pg-ats-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-ats-legend>span{display:inline-flex;align-items:center;gap:8px}