/* /solutions/financial-services — page-specific styles.
   Accent: the palette's sage green. The context section carries this page's own
   illustration (a book-of-business scope card, scripts/v47/pages/solutions--financial-services.py). */

#af-mock .story-hero + .story-context-section{--pg-accent:#7f9550;--pg-line:#dfe3d5;--pg-wash:#f4f7ec}

/* Context: the serif paragraph keeps a short measure; the card takes the space the
   little circular seal used to leave empty. */
#af-mock .story-context{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:5vw;align-items:center}
#af-mock .story-context > p{font-size:27px;line-height:1.5;max-width:20em}
#af-mock .story-context-section{background:#f4f7ec}

#af-mock .fs-book{
  margin:0;background:#fff;border:1px solid #dfe3d5;border-radius:10px;
  padding:20px 22px 18px;box-shadow:0 18px 40px -34px #5c6b3a;
}
#af-mock .fs-book-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
#af-mock .fs-book-head .eyebrow{margin:0;font:9px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#8a927c}
#af-mock .fs-book-src{display:flex;align-items:center;gap:7px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#98a087}
#af-mock .fs-book-src img{display:block;width:15px;height:15px;object-fit:contain}

#af-mock .fs-book-rows{list-style:none;margin:14px 0 0;padding:0}
#af-mock .fs-book-rows li{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:14px;row-gap:1px;
  align-items:baseline;padding:11px 0;border-top:1px solid #e7eadf;
}
#af-mock .fs-book-rows li b{grid-column:1;font:10px 'IBM Plex Mono',monospace;color:#9aa287;font-weight:400}
#af-mock .fs-book-rows li span{grid-column:2;font:15px 'DM Sans',sans-serif;color:#25281f}
#af-mock .fs-book-rows li i{grid-column:2;grid-row:2;font:normal 9px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#99a08d}
#af-mock .fs-book-rows li em{
  grid-column:3;grid-row:1/3;align-self:center;font:normal 9px 'IBM Plex Mono',monospace;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:30px;white-space:nowrap;
}
#af-mock .fs-book-rows li[data-scope=in] em{background:#e8f0d8;color:#5c6b3a;border:1px solid #d3e0ba}
#af-mock .fs-book-rows li[data-scope=out]{opacity:.62}
#af-mock .fs-book-rows li[data-scope=out] span{text-decoration:line-through;text-decoration-color:#c4c9b8}
#af-mock .fs-book-rows li[data-scope=out] em{background:transparent;color:#8d9382;border:1px dashed #cdd3c0}

#af-mock .fs-book-foot{
  margin:16px 0 0;padding-top:14px;border-top:1px solid #e7eadf;
  font:11px/1.75 'IBM Plex Mono',monospace;color:#7e866f;max-width:46ch;
}

/* "What changes" and the workflow list: a shorter measure and a sage thread. */
#af-mock .story-capabilities h3{font-size:22px;line-height:1.3}
#af-mock .story-capabilities article:hover .cap-thread i{background:#7f9550}
#af-mock .story-workflows p{max-width:52ch}

@media(max-width:900px){
  #af-mock .story-context{grid-template-columns:1fr;gap:34px}
  #af-mock .story-context > p{font-size:24px;max-width:none}
}

/* "In practice": two grants as overlapping fields, and the held client message beneath. */
#af-mock .fs-scope{margin:0;border:1px solid #e2e5e9;border-radius:12px;background:#fff;overflow:hidden}
#af-mock .fs-scope-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:17px 26px;border-bottom:1px solid #e2e5e9;
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#8a927c;
}
#af-mock .fs-scope-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#4c5340}

#af-mock .fs-venn{position:relative;display:grid;grid-template-columns:1fr .92fr 1fr;align-items:center;padding:44px 30px 48px;min-height:430px}
#af-mock .fs-ring{position:absolute;top:26px;bottom:26px;width:64%;border-radius:50%;border:1px solid #cdd6bb}
#af-mock .fs-ring-a{left:1%;background:radial-gradient(120% 120% at 20% 40%,#c3d9a052,#c3d9a01f)}
#af-mock .fs-ring-b{right:1%;border-color:#e6cfae;background:radial-gradient(120% 120% at 80% 40%,#f0ce8652,#f0b98c1f)}

#af-mock .fs-zone{position:relative;z-index:1;text-align:center;padding:0 14px}
#af-mock .fs-zone-a{padding-left:52px}
#af-mock .fs-zone-b{padding-right:52px}
#af-mock .fs-zone b{display:block;font:400 9.5px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#79806c}
#af-mock .fs-zone .fs-line{margin:11px 0 9px;font:500 15px/1.45 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .fs-zone em{display:block;margin-top:10px;font:normal 11.5px/1.7 'DM Sans',sans-serif;color:#6b7280}
#af-mock .fs-tool{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #e2e5e9;border-radius:30px;
  background:#fff;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#7e866f;white-space:nowrap;
}
#af-mock .fs-tool img{display:block;width:14px;height:14px;object-fit:contain}
#af-mock .fs-zone-mid{padding:0 6px}
#af-mock .fs-zone-mid b{color:#4c5340}
#af-mock .fs-zone-mid .fs-line{font-size:18px;line-height:1.35}
#af-mock .fs-zone-mid em{color:#4f5644}
#af-mock .fs-zone-a .fs-line,#af-mock .fs-zone-b .fs-line{color:#575d55;text-decoration:line-through;text-decoration-color:#c4c9b8}

#af-mock .fs-hold{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 26px;border-top:1px solid #e2e5e9;background:#fbf8ea;
}
#af-mock .fs-hold .eyebrow{
  margin:0;font-size:9.5px;letter-spacing:.15em;color:#6e5a12;
  border:1px solid #e2d290;background:#f6efcf;border-radius:30px;padding:6px 11px;
}
#af-mock .fs-hold p{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-size:14px;color:#3f453a}
#af-mock .fs-hold .fs-sign{
  margin-left:auto;display:flex;align-items:flex-end;gap:12px;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#9a9378;
}
#af-mock .fs-hold .fs-sign i{display:block;width:150px;border-bottom:1px solid #c9bd92}

@media(max-width:860px){
  #af-mock .fs-venn{grid-template-columns:1fr;gap:14px;padding:18px;min-height:0}
  #af-mock .fs-ring{display:none}
  #af-mock .fs-zone{text-align:left;padding:16px 18px;border:1px solid #e2e5e9;border-radius:8px;background:#fbfcf8}
  #af-mock .fs-zone-mid{background:#f4f7ec;border-color:#d3e0ba}
  #af-mock .fs-hold .fs-sign{margin-left:0}
}