/* Solutions / Security. Page accent: the peach end of the palette (#f0b98c).
   Graphics: hero halftone `inward`, boundary `spiral`, and a least-privilege diagram
   (scripts/v47/pages/solutions--security.py) in place of the seal. "What changes" is set
   in two columns split by a hairline, each control opening with a large serif numeral. */

/* --- Context: lead paragraph beside the narrowing diagram -------------------------- */
#af-mock .story-context-section{padding-bottom:64px}
#af-mock .story-context{
  grid-template-columns:minmax(0,1fr) minmax(340px,1fr);
  gap:clamp(36px,5vw,72px);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 narrowing-scope diagram --------------------------------------------------- */
#af-mock .sec-scope{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .sec-scope>figcaption{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:15px 22px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#fbeade,#fdfbf7);
}
#af-mock .sec-scope>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#8a5f42;
}
#af-mock .sec-scope-tool{
  display:inline-flex;align-items:center;gap:7px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#6a7164;
}
#af-mock .sec-scope-tool img{display:block;width:16px;height:16px;object-fit:contain}
#af-mock .sec-scope ol{list-style:none;margin:0;padding:22px 22px 8px;counter-reset:scope}
#af-mock .sec-scope li{margin-bottom:26px}
#af-mock .sec-scope li b{display:block;font:500 14px 'DM Sans',sans-serif;color:#20241f}
#af-mock .sec-scope li i{
  display:block;margin:3px 0 9px;font:11px 'IBM Plex Mono',monospace;font-style:normal;
  color:#78806f;
}
#af-mock .sec-scope li{position:relative}
#af-mock .sec-scope-bar{display:block;height:13px;border-radius:2px;border:1px solid #ead2bd}
#af-mock .sec-scope li:not(:last-child) .sec-scope-bar:after{
  content:'';position:absolute;left:0;right:0;bottom:-12px;height:1px;
  background:repeating-linear-gradient(90deg,#e6e2da,#e6e2da 4px,transparent 4px,transparent 8px);
}
#af-mock .sec-scope .is-wide .sec-scope-bar{width:100%;background:#fbeee2}
#af-mock .sec-scope .is-mid .sec-scope-bar{width:52%;background:#f2c69f;border-color:#e0ab7f}
#af-mock .sec-scope .is-narrow .sec-scope-bar{
  width:19%;background:#cf7b36;border-color:#b96a28;
}
#af-mock .sec-scope .is-narrow b{color:#0a0a0a}
#af-mock .sec-scope-foot{
  margin:0;padding:15px 22px 18px;border-top:1px solid #f0ece7;background:#fdfaf6;
  font-size:12.5px;line-height:1.75;color:#5a6072;
}

/* --- What changes: two columns split by a hairline, serif numerals ------------------ */
#af-mock .story-capabilities{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,70px);
}
#af-mock .story-capabilities article{
  border-top:0;border-bottom:1px solid var(--line,#e2e5e9);
  padding:26px 0 28px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px;
}
#af-mock .story-capabilities article:nth-child(odd){
  padding-right:clamp(16px,2.5vw,34px);border-right:1px solid var(--line,#e2e5e9);
}
#af-mock .story-capabilities article:nth-child(even){padding-left:clamp(16px,2.5vw,34px)}
#af-mock .story-capabilities article>span{
  grid-column:1;grid-row:1/span 3;font:32px/1 Georgia,serif;color:#e7b18a;letter-spacing:-1px;
}
#af-mock .story-capabilities h3{
  grid-column:2;margin:0 0 9px;font:500 17px/1.45 'DM Sans',sans-serif;letter-spacing:-.1px;
}
#af-mock .story-capabilities p{
  grid-column:2;margin:0;font-size:14px;line-height:1.8;color:#5a6072;max-width:62ch;
}
#af-mock .story-capabilities .cap-thread{display:none}

/* --- 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}
  #af-mock .story-capabilities article:nth-child(odd){border-right:0;padding-right:0}
  #af-mock .story-capabilities article:nth-child(even){padding-left:0}
}

/* --- 02 / In practice: one incident along a time axis ------------------------------ */
#af-mock .sec-night-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 .sec-night-head .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#6f7a62;
}
#af-mock .sec-night-sub{font:12px 'IBM Plex Mono',monospace;color:#6c7365}
#af-mock .sec-track{
  list-style:none;margin:36px 0 0;padding:0;position:relative;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(16px,2vw,30px);
}
#af-mock .sec-track::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#dfe3d8;
}
#af-mock .sec-track>li{position:relative;height:338px}
#af-mock .sec-card{
  position:absolute;left:0;right:0;border:1px solid var(--line,#e2e5e9);border-radius:8px;
  background:#fff;padding:13px 15px 14px;box-shadow:0 10px 26px #5a60720a;
}
#af-mock .sec-track>li:nth-child(odd) .sec-card{bottom:calc(50% + 38px)}
#af-mock .sec-track>li:nth-child(even) .sec-card{top:calc(50% + 38px)}
#af-mock .sec-when{
  display:block;font:11px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#9aa191;
}
#af-mock .sec-card p{
  margin:9px 0 10px;font-size:13px;line-height:1.55;color:#20241f;
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
}
#af-mock .sec-card img{display:block;width:16px;height:16px;object-fit:contain;margin-top:2px}
#af-mock .sec-card em{
  display:block;font:9.5px/1.55 'IBM Plex Mono',monospace;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:#56693a;
}
#af-mock .sec-stem{position:absolute;left:22px;width:1px;height:38px;background:#cfd5c6}
#af-mock .sec-track>li:nth-child(odd) .sec-stem{bottom:50%}
#af-mock .sec-track>li:nth-child(even) .sec-stem{top:50%}
#af-mock .sec-dot{
  position:absolute;left:17px;top:calc(50% - 5px);width:11px;height:11px;border-radius:50%;
  background:#7f9152;border:1px solid #6d7f44;box-shadow:0 0 0 4px #fff;
}
#af-mock .sec-track .is-blocked .sec-card{
  border-color:#e7cbb2;
  background:repeating-linear-gradient(135deg,#fdf8f3 0 7px,#faeee4 7px 14px);
}
#af-mock .sec-track .is-blocked .sec-card em{color:#a05f33}
#af-mock .sec-track .is-blocked .sec-card p{color:#7a5238}
#af-mock .sec-track .is-blocked img{filter:grayscale(1);opacity:.5}
#af-mock .sec-track .is-blocked .sec-stem{background:repeating-linear-gradient(#d9b79b 0 3px,transparent 3px 7px)}
#af-mock .sec-track .is-blocked .sec-dot{background:#fff;border:2px solid #d79a6c}
#af-mock .sec-track .is-held .sec-card{border-color:#e8dcae;background:#fdfaed}
#af-mock .sec-track .is-held .sec-card em{color:#786213}
#af-mock .sec-track .is-held .sec-stem{background:repeating-linear-gradient(#ddcd8e 0 3px,transparent 3px 7px)}
#af-mock .sec-track .is-held .sec-dot{background:#f0dd9a;border-color:#cbb463}
#af-mock .sec-night-foot{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line,#e2e5e9);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(24px,4vw,60px);align-items:start;
}
#af-mock .sec-night-foot h3{margin:0;font:24px/1.3 Georgia,serif;letter-spacing:-.4px;max-width:18ch}
#af-mock .sec-night-foot p{margin:0;font-size:14px;line-height:1.85;color:#5a6072;max-width:66ch}

@media(max-width:1100px){
  #af-mock .sec-track{grid-template-columns:1fr;column-gap:0}
  #af-mock .sec-track::before{left:22px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  #af-mock .sec-track>li{height:auto;padding:0 0 20px 48px}
  #af-mock .sec-track>li:nth-child(odd) .sec-card,
  #af-mock .sec-track>li:nth-child(even) .sec-card{position:static}
  #af-mock .sec-stem{display:none}
  #af-mock .sec-dot{top:17px;left:17px}
  #af-mock .sec-night-foot{grid-template-columns:1fr;gap:16px}
}