/* Solutions / IT. Page accent: the amber end of the palette (#f0ce86).
   Graphics: hero halftone `rings`, boundary `tide`, and an example fleet register
   (scripts/v47/pages/solutions--it.py) in place of the seal. "What changes" is set as a
   runbook: one line per control, number / control / what it means, side by side. */

/* --- Context: lead paragraph over the register ------------------------------------ */
#af-mock .story-context-section{padding-bottom:64px}
#af-mock .story-context{grid-template-columns:minmax(0,1fr);gap:38px;align-items:start}
#af-mock .story-context>p{
  font:27px/1.5 Georgia,serif;letter-spacing:-.4px;max-width:34ch;color:#2f352c;margin:0;
}

/* --- The fleet register ------------------------------------------------------------ */
#af-mock .it-fleet{
  margin:0;max-width:1080px;border:1px solid var(--line,#e2e5e9);border-radius:10px;
  background:#fff;overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .it-fleet>figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#fbf1dd,#fcfbf4);
}
#af-mock .it-fleet>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#7d6a45;
}
#af-mock .it-fleet>figcaption>span+span{font:10px 'IBM Plex Mono',monospace;color:#9aa091}
#af-mock .it-fleet-scroll{overflow-x:auto}
#af-mock .it-fleet table{width:100%;border-collapse:collapse;min-width:520px}
/* site.css sets `.af-scope th{font:11px mono; white-space:nowrap}` — restate both here. */
#af-mock .it-fleet thead th{
  text-align:left;padding:12px 22px;border-bottom:1px solid #edefe7;white-space:normal;
  font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#8d9482;
}
#af-mock .it-fleet tbody th,#af-mock .it-fleet tbody td{
  padding:13px 22px;border-bottom:1px solid #f2f3ec;vertical-align:middle;
  font:400 13.5px/1.5 'DM Sans',sans-serif;color:#4a5048;text-align:left;white-space:normal;
}
#af-mock .it-fleet tbody tr:last-child th,#af-mock .it-fleet tbody tr:last-child td{border-bottom:0}
#af-mock .it-fleet tbody th{font:400 13.5px 'IBM Plex Mono',monospace;color:#20241f;white-space:nowrap}
#af-mock .it-fleet-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#af-mock .it-fleet-marks{display:inline-flex;align-items:center;gap:5px}
#af-mock .it-fleet-marks img{display:block;width:17px;height:17px;object-fit:contain}
#af-mock .it-fleet-names{font-size:12.5px;color:#6a7164}
#af-mock .it-fleet-state span{
  display:inline-block;padding:4px 11px;border-radius:30px;border:1px solid #cfdcb4;
  background:#f1f6e5;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#56693a;
}
#af-mock .it-fleet .is-off th,#af-mock .it-fleet .is-off td{color:#9aa096}
#af-mock .it-fleet .is-off img{filter:grayscale(1);opacity:.45}
#af-mock .it-fleet .is-off .it-fleet-state span{
  border-color:#e7cbb2;background:#fbf1e8;color:#a36f47;
}
#af-mock .it-fleet-foot{
  margin:0;padding:15px 22px 18px;border-top:1px solid #edefe7;background:#fcfaf4;
  font-size:12.5px;line-height:1.75;color:#5a6072;
}

/* --- What changes: a runbook, one control per line --------------------------------- */
#af-mock .story-capabilities{grid-template-columns:minmax(0,1fr);gap:0}
#af-mock .story-capabilities article{
  display:grid;grid-template-columns:44px minmax(0,1.05fr) minmax(0,1.25fr);
  gap:0 clamp(20px,3vw,48px);align-items:baseline;padding:20px 0;
}
#af-mock .story-capabilities article>span{
  grid-column:1;font:11px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#c09a55;
}
#af-mock .story-capabilities h3{
  grid-column:2;margin:0;font:19px/1.45 Georgia,serif;letter-spacing:-.3px;
}
#af-mock .story-capabilities p{
  grid-column:3;margin:0;font-size:14px;line-height:1.8;color:#5a6072;max-width:62ch;
}
#af-mock .story-capabilities .cap-thread{display:none}
#af-mock .story-capabilities article:hover{background:#fcfaf4}

/* --- 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>p{max-width:42ch;font-size:24px}
  #af-mock .story-capabilities article{grid-template-columns:36px minmax(0,1fr);row-gap:8px}
  #af-mock .story-capabilities p{grid-column:2}
}
@media(max-width:700px){
  #af-mock .it-fleet-names{display:none}
}

/* --- 02 / In practice: the checkpoint chart one call passes through ---------------- */
#af-mock .it-flow-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line,#e2e5e9);
}
#af-mock .it-flow-head .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#7d6a45;
}
#af-mock .it-flow-sub{font:12px 'IBM Plex Mono',monospace;color:#6c7365}
#af-mock .it-gates{
  list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(24px,2.6vw,36px);
  align-items:stretch;
}
#af-mock .it-gates>li{position:relative;display:flex;flex-direction:column}
#af-mock .it-gate{
  border:1px solid var(--line,#e2e5e9);border-radius:8px;background:#fff;
  padding:14px 15px 16px;min-height:142px;box-shadow:0 10px 26px #5a60720a;
}
#af-mock .it-gate-n,#af-mock .it-end .it-gate-n{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#c09a55;
}
#af-mock .it-gate b{display:block;margin:9px 0 8px;font:17px/1.3 Georgia,serif;letter-spacing:-.2px;color:#0a0a0a}
#af-mock .it-gate p{margin:0;font-size:12.5px;line-height:1.65;color:#6c7365}
#af-mock .it-next{
  position:absolute;left:calc(-1 * clamp(24px,2.6vw,36px) + 4px);top:68px;
  width:calc(clamp(24px,2.6vw,36px) - 9px);height:1px;background:#d6dbcd;
}
#af-mock .it-next::after{
  content:'';position:absolute;right:-6px;top:-4px;
  border-left:7px solid #b9c1ad;border-top:4px solid transparent;border-bottom:4px solid transparent;
}
#af-mock .it-down{
  position:relative;display:block;width:1px;height:38px;margin:0 0 0 22px;
  background:repeating-linear-gradient(#cfd5c6 0 4px,transparent 4px 8px);
}
#af-mock .it-down::after{
  content:'';position:absolute;bottom:-1px;left:-4px;
  border-top:7px solid #b9c1ad;border-left:4px solid transparent;border-right:4px solid transparent;
}
#af-mock .it-down em{
  position:absolute;left:11px;top:9px;font:9px 'IBM Plex Mono',monospace;font-style:normal;
  letter-spacing:.13em;text-transform:uppercase;color:#a0a796;
}
#af-mock .it-exit{border:1px solid #ecd5c2;border-radius:8px;background:#fdf7f2;padding:12px 14px 13px}
#af-mock .it-exit p{
  margin:0 0 9px;font-size:12.5px;line-height:1.6;color:#5f5247;
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
}
#af-mock .it-exit img{display:block;width:16px;height:16px;object-fit:contain;margin-top:2px}
#af-mock .it-exit em{
  display:block;font:9.5px/1.5 'IBM Plex Mono',monospace;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:#a05f33;
}
#af-mock .it-exit.is-held{border-color:#e8dcae;background:#fdfaed}
#af-mock .it-exit.is-held em{color:#786213}
#af-mock .it-final{justify-content:stretch}
#af-mock .it-end{
  flex:1;border:1px solid #2a2d26;border-radius:8px;background:#12140f;color:#eef3e4;
  padding:14px 15px 16px;display:flex;flex-direction:column;
}
#af-mock .it-end .it-gate-n{color:#b6cb8c}
#af-mock .it-end b{display:block;margin:9px 0 10px;font:19px/1.25 Georgia,serif;letter-spacing:-.3px;color:#fff}
#af-mock .it-end p{
  margin:0 0 auto;font-size:12.5px;line-height:1.6;color:#c9cfbe;
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
}
#af-mock .it-end img{display:block;width:16px;height:16px;object-fit:contain;margin-top:2px;filter:brightness(0) invert(1)}
#af-mock .it-end em{
  display:block;margin-top:16px;padding-top:12px;border-top:1px solid #2f3329;
  font:9.5px/1.6 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;color:#b6cb8c;
}
#af-mock .it-flow-foot{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line,#e2e5e9);
  font-size:13px;line-height:1.8;color:#5a6072;max-width:74ch;
}

@media(max-width:1100px){
  #af-mock .it-gates{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  #af-mock .it-next{left:-26px;top:68px;width:18px}
  #af-mock .it-gates>li:nth-child(odd) .it-next{
    position:static;transform:rotate(90deg);width:26px;margin:0 auto 14px;
  }
  #af-mock .it-gate{min-height:0}
}
@media(max-width:700px){
  #af-mock .it-gates{grid-template-columns:1fr;row-gap:26px}
  #af-mock .it-next,#af-mock .it-gates>li:nth-child(odd) .it-next{
    position:static;transform:rotate(90deg);width:26px;margin:0 auto 16px;
  }
}