/* Consulting (scripts/v47/pages/solutions--consulting.py). Straw-yellow accent, the
   engagement roster with a wall between clients, capabilities as a hanging-indent list. */
#af-mock .af-scope{--cns-accent:#c9b64e;--cns-line:#e6e3d0}

/* Context: paragraph and roster side by side. */
#af-mock .story-context{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:5vw;align-items:start}
#af-mock .story-context>p{font-size:clamp(22px,2vw,27px);max-width:19em}

/* The engagement roster: two client blocks either side of a wall. */
#af-mock .cns-roster{border:1px solid var(--line,#e2e5e9);background:#fff;border-radius:2px}
#af-mock .cns-roster header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 20px;border-bottom:1px solid var(--cns-line)}
#af-mock .cns-roster header .eyebrow{margin:0;font-size:9.5px}
#af-mock .cns-roster header>span+span{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#9a9480}
#af-mock .cns-client{padding:16px 20px 18px}
#af-mock .cns-client h3{display:flex;align-items:baseline;gap:10px;margin:0 0 10px!important;font:500 16px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .cns-client h3 i{font:9.5px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.12em;color:#a09a86;border:1px solid var(--cns-line);border-radius:30px;padding:3px 8px}
#af-mock .cns-client ul{list-style:none;margin:0;padding:0}
#af-mock .cns-client li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0 8px 20px;position:relative;font-size:13px;line-height:1.55;color:#5a6072}
#af-mock .cns-client li:before{content:'\2713';position:absolute;left:0;top:7px;font:11px 'IBM Plex Mono',monospace;color:#7d9a4a}
#af-mock .cns-client li[data-verdict=no]{color:#8b8f97}
#af-mock .cns-client li[data-verdict=no]:before{content:'\2715';color:#c08a55}
#af-mock .cns-client li[data-verdict=no] .cns-what{text-decoration:line-through;text-decoration-color:#d4bfa9}
#af-mock .cns-tool{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#8b9080}
#af-mock .cns-tool img{display:block;width:14px;height:14px;object-fit:contain}
#af-mock .cns-wall{position:relative;height:1px;margin:0 20px;background:repeating-linear-gradient(90deg,#c8c2a6 0 6px,transparent 6px 12px)}
#af-mock .cns-wall span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:0 12px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#a8a289;white-space:nowrap}
#af-mock .cns-roster footer{padding:12px 20px;border-top:1px solid var(--cns-line);font:10.5px/1.6 'IBM Plex Mono',monospace;color:#9a9c93;background:#fcfbf5}

/* What changes: three columns, the numeral hanging beside a shorter measure. */
#af-mock .story-capabilities{gap:0 48px}
#af-mock .story-capabilities article{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:22px 0 28px}
#af-mock .story-capabilities article>span{grid-row:1/4;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--cns-accent);border-radius:50%;font:11px 'IBM Plex Mono',monospace;color:#8c7f2c}
#af-mock .story-capabilities h3{grid-column:2;margin:0 0 10px;font-size:20px;line-height:1.32}
#af-mock .story-capabilities p{grid-column:2;margin:0;font-size:13.5px;max-width:44ch}
#af-mock .story-capabilities .cap-thread{grid-column:2;height:14px;margin-top:12px}
#af-mock .story-capabilities article:hover .cap-thread i{background:var(--cns-accent)}

/* Workflows and closing at the straw end of the palette. */
#af-mock .story-workflows summary>span{color:#b0a04a}
#af-mock .story-closing{background:linear-gradient(115deg,#f0eed3,#f6efd2 50%,#eef0dd)}

@media(max-width:700px){#af-mock .story-context{grid-template-columns:1fr}#af-mock .cns-client li{flex-direction:column;gap:4px}}

/* "In practice": the trace one request leaves — asked, resolved, called, refused, held
   (scripts/v47/pages/solutions--consulting.py). */
#af-mock .cns-trace{border:1px solid var(--line,#e2e5e9);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .cns-trace-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:17px 26px;border-bottom:1px solid var(--line,#e2e5e9);
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a927c;
}
#af-mock .cns-trace-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#464f38}

#af-mock .cns-lines{list-style:none;margin:0;padding:0}
#af-mock .cns-lines li{
  display:grid;grid-template-columns:92px 116px minmax(0,1fr) auto;column-gap:20px;align-items:start;
  padding:14px 26px;border-bottom:1px solid #f0f1ec;
}
#af-mock .cns-lines li:last-child{border-bottom:0}
#af-mock .cns-lines time{font:10.5px/1.9 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#a8ad9c}
#af-mock .cns-stage{
  position:relative;padding-left:20px;font:10px/1.9 'IBM Plex Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:#8a927c;
}
#af-mock .cns-stage:before{
  content:'';position:absolute;left:4px;top:7px;width:6px;height:6px;border-radius:50%;
  background:#fff;border:1px solid #c2c8b6;
}
#af-mock .cns-stage:after{content:'';position:absolute;left:6.5px;top:19px;bottom:-22px;border-left:1px solid #e6e8df}
#af-mock .cns-lines li:last-child .cns-stage:after{display:none}
#af-mock .cns-what b{font:500 15px/1.6 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .cns-what i{display:block;margin-top:6px;font:normal 12.5px/1.65 'DM Sans',sans-serif;color:#69707c;max-width:76ch}
#af-mock .cns-trace .cns-tool{
  margin-left:12px;padding:3px 9px;border:1px solid var(--line,#e2e5e9);border-radius:30px;
  background:#fff;vertical-align:2px;font-size:9.5px;
}
#af-mock .cns-lines li > em{
  justify-self:end;font:normal 9.5px 'IBM Plex Mono',monospace;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;border-radius:30px;white-space:nowrap;
}
#af-mock .cns-lines li[data-verdict=allowed]{background:#fafcf5}
#af-mock .cns-lines li[data-verdict=allowed] > em{background:#e6f0d4;color:#3f5d1e;border:1px solid #b9cf94}
#af-mock .cns-lines li[data-verdict=allowed] .cns-stage:before{background:#b9cf94;border-color:#8ba75c}
#af-mock .cns-lines li[data-verdict=blocked]{background:#fdf9f6}
#af-mock .cns-lines li[data-verdict=blocked] > em{background:#f8e3d6;color:#8a4420;border:1px solid #e3b59a}
#af-mock .cns-lines li[data-verdict=blocked] .cns-stage:before{background:#eebb95;border-color:#d0855a}
#af-mock .cns-lines li[data-verdict=blocked] .cns-what b{color:#7a6b60;text-decoration:line-through;text-decoration-color:#e0c4ad}
#af-mock .cns-lines li[data-verdict=held]{background:#fdfbf1}
#af-mock .cns-lines li[data-verdict=held] > em{background:#f6efcf;color:#6e5a12;border:1px solid #e2d290}
#af-mock .cns-lines li[data-verdict=held] .cns-stage:before{background:#e6e29a;border-color:#c8c266}
#af-mock .cns-sign{
  display:flex;align-items:flex-end;gap:12px;margin-top:12px;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#9a9378;
}
#af-mock .cns-sign u{display:block;flex:1;max-width:210px;border-bottom:1px solid #c9bd92;text-decoration:none}
#af-mock .cns-trace-foot{
  margin:0;padding:14px 26px;border-top:1px solid var(--line,#e2e5e9);background:#fbfbf8;
  font:10.5px/1.6 'IBM Plex Mono',monospace;color:#9a9c93;
}

@media(max-width:860px){
  #af-mock .cns-lines li{grid-template-columns:82px minmax(0,1fr);row-gap:8px;padding:14px 18px}
  #af-mock .cns-stage{padding-left:0}
  #af-mock .cns-stage:before,#af-mock .cns-stage:after{display:none}
  #af-mock .cns-what{grid-column:1/-1}
  #af-mock .cns-lines li > em{grid-column:1/-1;justify-self:start}
  #af-mock .cns-trace .cns-tool{margin-left:0;margin-top:8px}
}