/* Solutions / AI · Engineering. Page accent: the green end of the palette (#c3d9a0).
   Graphics: hero halftone `spiral`, boundary `band`, and an example agent registration
   card (scripts/v47/pages/solutions--ai-engineering.py) where the seal used to be. */

/* --- Context: lead paragraph at a readable measure, card beside it ---------------- */
#af-mock .story-context-section{padding-bottom:64px}
#af-mock .story-context{
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:clamp(36px,5vw,68px);align-items:start;
}
#af-mock .story-context>p{
  font:26px/1.5 Georgia,serif;letter-spacing:-.4px;max-width:31ch;color:#2f352c;margin:0;
}

/* --- The registration card -------------------------------------------------------- */
#af-mock .ae-manifest{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .ae-manifest>figcaption{
  display:flex;flex-direction:column;gap:7px;padding:18px 22px;
  border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#eef5df,#fbfcf6);
}
#af-mock .ae-manifest>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#6b7756;
}
#af-mock .ae-manifest>figcaption b{font:500 21px 'DM Sans',sans-serif;letter-spacing:-.2px}
#af-mock .ae-manifest-meta{margin:0;padding:12px 22px;border-bottom:1px solid #edefe7}
#af-mock .ae-manifest-meta>div{
  display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;padding:5px 0;align-items:baseline;
}
#af-mock .ae-manifest-meta dt{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#8d9482;
}
#af-mock .ae-manifest-meta dd{margin:0;font-size:13.5px;line-height:1.5;color:#3a4038}
#af-mock .ae-manifest-tools{list-style:none;margin:0;padding:6px 22px 12px}
#af-mock .ae-manifest-tools li{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid #f0f1ea;
}
#af-mock .ae-manifest-tools li:last-child{border-bottom:0}
#af-mock .ae-manifest-tools img{display:block;width:18px;height:18px;object-fit:contain}
#af-mock .ae-manifest-tools span{font-size:14px;color:#20241f}
#af-mock .ae-manifest-tools em{
  font:10px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.03em;
  color:#6f7a62;text-align:right;
}
#af-mock .ae-manifest-tools .is-off img{filter:grayscale(1);opacity:.5}
#af-mock .ae-manifest-tools .is-off span{color:#9aa096}
#af-mock .ae-manifest-tools .is-off em{color:#b2795a}
#af-mock .ae-manifest-foot{
  margin:0;padding:14px 22px 18px;border-top:1px solid #edefe7;background:#fbfcf6;
  font-size:12.5px;line-height:1.75;color:#5a6072;
}

/* --- What changes: a two-column spec list with hanging numerals -------------------- */
#af-mock .story-capabilities{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
#af-mock .story-capabilities article{
  padding:24px 0 28px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:0 16px;
}
#af-mock .story-capabilities article>span{
  grid-column:1;grid-row:1/span 3;padding-top:5px;
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#96ab6f;
}
#af-mock .story-capabilities h3{
  grid-column:2;font:20px/1.4 Georgia,serif;letter-spacing:-.3px;margin:0 0 10px;
}
#af-mock .story-capabilities p{grid-column:2;margin:0;font-size:14px;line-height:1.8;max-width:62ch;color:#5a6072}
#af-mock .story-capabilities .cap-thread{grid-column:2;margin-top:14px}

/* --- Long-form measure elsewhere on the page -------------------------------------- */
#af-mock .story-workflows p,#af-mock .faq p{max-width:62ch}

@media(max-width:1000px){
  #af-mock .story-context{grid-template-columns:1fr;gap:34px}
  #af-mock .story-context>p{max-width:42ch;font-size:24px}
  #af-mock .story-capabilities{grid-template-columns:1fr}
}
@media(max-width:700px){
  #af-mock .ae-manifest-tools li{grid-template-columns:18px minmax(0,1fr);row-gap:2px}
  #af-mock .ae-manifest-tools em{grid-column:2;text-align:left}
}

/* --- 02 / In practice: the session transcript of one agent run --------------------- */
#af-mock .ae-practice{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr);
  gap:clamp(30px,4vw,58px);align-items:start;
}
#af-mock .ae-session{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .ae-session>figcaption{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#eef5df,#fbfcf6);
}
#af-mock .ae-session-id{font:11px 'IBM Plex Mono',monospace;color:#4d5747}
#af-mock .ae-session-id i{font-style:normal;color:#a8b09b;padding:0 8px}
#af-mock .ae-session>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#7f8a6c;
}
#af-mock .ae-prompt{
  margin:0;padding:16px 22px 14px;font:13px/1.6 'IBM Plex Mono',monospace;color:#20241f;
}
#af-mock .ae-prompt b{color:#9aa88a;font-weight:400;padding-right:9px}
#af-mock .ae-prompt span{color:#5a6072}
#af-mock .ae-log{list-style:none;margin:0;padding:0 22px 4px}
#af-mock .ae-log li{
  display:grid;grid-template-columns:70px 18px minmax(0,1fr) auto;align-items:center;
  column-gap:13px;row-gap:3px;padding:12px 0;border-top:1px solid #f0f1ea;
}
#af-mock .ae-time{font:11px 'IBM Plex Mono',monospace;color:#a0a796}
#af-mock .ae-mark img{display:block;width:18px;height:18px;object-fit:contain}
#af-mock .ae-call{
  font:12.5px 'IBM Plex Mono',monospace;color:#1d211c;overflow-wrap:anywhere;
}
#af-mock .ae-verdict{
  justify-self:end;padding:4px 11px;border-radius:30px;white-space:nowrap;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.11em;text-transform:uppercase;
}
#af-mock .ae-note{grid-column:3/5;font-size:12.5px;line-height:1.6;color:#6c7365}
#af-mock .ae-log .is-allowed .ae-verdict{background:#f1f6e5;border:1px solid #cfdcb4;color:#56693a}
#af-mock .ae-log .is-blocked .ae-verdict{background:#fbf1e8;border:1px solid #e7cbb2;color:#a05f33}
#af-mock .ae-log .is-blocked .ae-call{color:#8a4420;text-decoration:line-through;text-decoration-color:#e0b298}
#af-mock .ae-log .is-blocked img{filter:grayscale(1);opacity:.45}
#af-mock .ae-log .is-held .ae-verdict{background:#fbf6e0;border:1px solid #e2d290;color:#786213}
#af-mock .ae-log .is-held .ae-call{color:#6e5a12}
#af-mock .ae-cursor{
  margin:0;padding:12px 22px 16px;border-top:1px solid #f0f1ea;background:#fbfcf6;
  font:13px 'IBM Plex Mono',monospace;color:#9aa88a;
}
#af-mock .ae-cursor i{
  display:inline-block;width:8px;height:15px;vertical-align:-3px;background:#9aa88a;
  animation:ae-blink 1.15s steps(1,end) infinite;
}
@keyframes ae-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#af-mock .ae-cursor i{animation:none}}
#af-mock .ae-readout{padding-top:6px}
#af-mock .ae-readout h3{margin:0 0 14px;font:23px/1.35 Georgia,serif;letter-spacing:-.4px}
#af-mock .ae-readout h3 em{font-style:italic;color:#7f9152}
#af-mock .ae-readout>p{margin:0 0 20px;font-size:14px;line-height:1.8;color:#5a6072;max-width:42ch}
#af-mock .ae-readout dl{margin:0;border-top:1px solid var(--line,#e2e5e9)}
#af-mock .ae-readout dl>div{padding:13px 0;border-bottom:1px solid #f0f1ea}
#af-mock .ae-readout dt{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#8d9482;margin-bottom:5px;
}
#af-mock .ae-readout dd{margin:0;font-size:13px;line-height:1.7;color:#4a5048}
#af-mock .ae-readout dd em{font-style:italic;color:#20241f}

@media(max-width:1000px){
  #af-mock .ae-practice{grid-template-columns:1fr;gap:32px}
  #af-mock .ae-readout>p{max-width:none}
}
@media(max-width:860px){
  #af-mock .ae-log li{grid-template-columns:66px 18px minmax(0,1fr);row-gap:6px}
  #af-mock .ae-verdict{grid-column:3;justify-self:start}
  #af-mock .ae-note{grid-column:3}
}