/* /product/ai-agents · page scoped CSS (prefix pg-agents-). Spacing between shared blocks, plus two small page parts listed as
   promote requests in the team report: the per Mac inventory rows in fig. 02 (.pg-agents-inv) and the copyable first question
   (.pg-agents-ask). Nothing here restyles a cy- class except through a pg-agents- parent. */

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

/* fig. 02: one row per Mac, the tools as square tags */
.pg-agents-inv{display:grid}
.pg-agents-inv__row:first-child{padding-top:0}
.pg-agents-inv__row{display:grid;gap:10px;padding:16px 0;border-bottom:1px solid var(--s-line)}
.pg-agents-inv__mac{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:1.35;color:var(--s-ink)}
.pg-agents-inv__n{flex:none;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));font-weight:400;color:var(--s-ink-3)}
.pg-agents-inv__tools{display:flex;flex-wrap:wrap;gap:6px}
.pg-agents-inv__tools .cy-tag{font-size:calc(13px + var(--pg-mock-bump));color:var(--s-ink)}
.pg-agents-inv__tools--none{font-size:calc(14px + var(--pg-mock-bump));line-height:28px;color:var(--s-ink-3)}

/* fig. 03: the empty slot reads quieter, the next step carries the ember rule (a person decides) */
.pg-agents-none{color:var(--s-ink-3)}
.pg-agents-rule{display:inline-block;width:14px;height:3px;margin-right:10px;vertical-align:middle;background:#FF6B2B}

/* fig. 04: the first row starts at the plate head's rule (the shared .cy-plate__head+.cy-gate drops the gate's own top rule) */
.pg-agents-gate .cy-gate__row:first-child{padding-top:0}
/* fig. 04: the phase squares at the size of the gate's hexes */
.pg-agents-mark{width:10px;height:10px}

/* how to read it: the question column a little wider than the three answers */
@media (min-width:768px){
  .pg-agents-scope th:first-child{width:22%}
  .pg-agents-scope td:last-child{width:20%}
}
.pg-agents-scope .cy-link{font-size:16px;line-height:1.45}

/* the first question to paste: text left, the question on a raised field right */
.pg-agents-ask{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);row-gap:24px;align-items:start;margin-top:var(--pg-title-gap);padding-top:40px;border-top:1px solid var(--pg-rule)}
.pg-agents-ask__intro{grid-column:1/span 5}
.pg-agents-ask__t{font-family:var(--font-display);font-size:36px;font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--s-ink)}
.pg-agents-ask__d{margin-top:16px;max-width:34em;font-size:18px;line-height:1.55;color:var(--s-ink-2)}
.pg-agents-ask__d a,.pg-agents-ask__d a:hover{color:#2757C9}
.pg-agents-ask__q{grid-column:7/span 6;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:8px;align-items:end;padding:20px 20px 20px 24px;border-radius:10px;background:var(--s-key,#F5F5F7);box-shadow:inset 0 0 0 1px var(--s-line-2)}
.pg-agents-ask__label{grid-column:1/-1;font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--s-ink-3)}
.pg-agents-ask__question{font-family:var(--font-mono);font-size:15px;line-height:1.55;color:var(--s-ink);text-wrap:pretty}
.pg-agents-ask__copy{align-self:end}
@media (max-width:899px){
  .pg-agents-ask__intro,.pg-agents-ask__q{grid-column:1/-1}
  .pg-agents-ask__t{font-size:28px}
}
@media (max-width:519px){
  .pg-agents-ask__q{grid-template-columns:minmax(0,1fr);padding:16px}
  .pg-agents-ask__copy{justify-self:start}
}