/* Solutions / Finance (scripts/v47/pages/solutions--finance.py).
   Page accent: ledger amber. Holds the spend-authority ledger plus the readability
   tightening the design owner asked for (shorter measure, calmer capability grid). */

/* --- Page character: warm ledger paper instead of the shared green tint. ------------ */
#af-mock .story-context-section{background:#fbf6ea}
#af-mock .story-context-section .section-head .eyebrow,
#af-mock .practice-section .section-head .eyebrow{color:#9a7530}
#af-mock .story-capabilities article>span{color:#b08a3c}
#af-mock .story-workflows summary>span{color:#b08a3c}

/* --- Readability: a shorter measure for every long paragraph. ----------------------- */
#af-mock .story-context>p{font-size:27px;line-height:1.5;max-width:19em}
#af-mock .story-capabilities p,
#af-mock .story-workflows p,
#af-mock .faq p{max-width:62ch}
#af-mock .story-capabilities h3{font-size:22px;line-height:1.3}
/* Seven capabilities read better as two columns with the number in its own gutter. */
#af-mock .story-capabilities{grid-template-columns:1fr 1fr;gap:0 64px}
#af-mock .story-capabilities article{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:26px 0 22px}
#af-mock .story-capabilities article>span{grid-column:1;grid-row:1/4;padding-top:6px}
#af-mock .story-capabilities article>h3{grid-column:2;margin:0 0 10px}
#af-mock .story-capabilities article>p{grid-column:2;margin:0}
#af-mock .story-capabilities .cap-thread{grid-column:2;margin-top:12px}
@media(max-width:860px){#af-mock .story-capabilities{grid-template-columns:1fr;gap:0}}

/* --- The ledger: five illustrative request lines beside the context paragraph. ------- */
#af-mock .story-context{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6vw;align-items:start}
#af-mock .fin-ledger{margin:0;border:1px solid #e4d9be;border-radius:8px;background:#fff;
  box-shadow:0 18px 44px #b4943f14;overflow:hidden}
#af-mock .fin-ledger figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid #ece3cd;background:#fdfaf1;font-size:9px!important}
#af-mock .fin-ledger figcaption .eyebrow{margin:0;color:#9a7530}
#af-mock .fl-systems{display:flex;align-items:center;gap:9px}
#af-mock .fl-systems img{display:block;width:18px;height:18px;object-fit:contain}
#af-mock .fin-ledger ol{list-style:none;margin:0;padding:0}
#af-mock .fin-ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px;
  align-items:baseline;padding:13px 18px;border-bottom:1px solid #f0ebdc;position:relative}
#af-mock .fin-ledger li:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#c9d9a7}
#af-mock .fin-ledger li[data-route=hold]:before{background:#e6c877}
#af-mock .fin-ledger li[data-route=stop]:before{background:#e2a679}
#af-mock .fin-ledger li b{grid-column:1;font:500 14px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .fin-ledger .fl-amount{grid-column:2;grid-row:1;font:12px 'IBM Plex Mono',monospace;color:#3f4536;
  text-align:right;white-space:nowrap}
#af-mock .fin-ledger .fl-what{grid-column:1;grid-row:2;font:11.5px/1.6 'IBM Plex Mono',monospace;color:#8c8a78}
#af-mock .fin-ledger em{grid-column:2;grid-row:2;justify-self:end;font-style:normal;white-space:nowrap;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5e7040}
#af-mock .fin-ledger li[data-route=hold] em{color:#96742a}
#af-mock .fin-ledger li[data-route=stop] em{color:#a85f2e}
#af-mock .fl-note{margin:0;padding:14px 18px 16px;background:#fdfaf1;border-top:1px solid #ece3cd;
  font-size:12px!important;line-height:1.7;color:#7d7a68;max-width:none}
@media(max-width:860px){
  #af-mock .story-context{grid-template-columns:1fr;gap:34px}
  #af-mock .story-context>p{max-width:none}
}
@media(max-width:520px){
  #af-mock .fin-ledger li{grid-template-columns:1fr}
  #af-mock .fin-ledger .fl-amount,#af-mock .fin-ledger em{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
}

/* --- 02 / In practice: the close, read as a calendar ------------------------------- */
#af-mock .fc-close-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);margin-bottom:28px;
}
#af-mock .fc-close-head .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#7d6a45;
}
#af-mock .fc-close-sub{font:12px 'IBM Plex Mono',monospace;color:#6c7365}
#af-mock .fc-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:#e2e5e9;border:1px solid var(--line,#e2e5e9);border-radius:8px;overflow:hidden;
  box-shadow:0 18px 44px #5a60720f;
}
#af-mock .fc-day{background:#fff;display:flex;flex-direction:column}
#af-mock .fc-day-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline;
  padding:14px 16px 13px;border-bottom:1px solid #f0f1ea;background:#fcfbf5;
}
#af-mock .fc-day-head>span{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c09a55;
}
#af-mock .fc-day-head b{font:400 16px Georgia,serif;letter-spacing:-.2px;color:#0a0a0a}
#af-mock .fc-day-head i{
  grid-column:2;font:9px 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:#a0a796;
}
#af-mock .fc-day ul{list-style:none;margin:0;padding:10px 16px 16px;display:grid;gap:10px;align-content:start}
#af-mock .fc-day li{
  display:grid;grid-template-columns:15px minmax(0,1fr);gap:5px 10px;align-items:start;
  padding:11px 12px;border:1px solid #e6e8e0;border-radius:6px;background:#fbfcf8;
}
#af-mock .fc-day img{display:block;width:15px;height:15px;object-fit:contain;margin-top:2px}
#af-mock .fc-day b{font:400 13px/1.5 'DM Sans',sans-serif;color:#20241f}
#af-mock .fc-day em{
  grid-column:2;font:9.5px/1.5 'IBM Plex Mono',monospace;font-style:normal;
  letter-spacing:.07em;text-transform:uppercase;color:#56693a;
}
#af-mock .fc-day .is-blocked{
  border-color:#e7cbb2;background:repeating-linear-gradient(135deg,#fdf8f3 0 7px,#faeee4 7px 14px);
}
#af-mock .fc-day .is-blocked b{color:#8a6a55}
#af-mock .fc-day .is-blocked em{color:#a05f33}
#af-mock .fc-day .is-blocked img{filter:grayscale(1);opacity:.5}
#af-mock .fc-day .is-held{border-color:#e2d290;background:#fdfaed}
#af-mock .fc-day .is-held em{color:#786213}
#af-mock .fc-close-foot{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line,#e2e5e9);
  font-size:13.5px;line-height:1.85;color:#5a6072;max-width:78ch;
}

@media(max-width:1000px){
  #af-mock .fc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  #af-mock .fc-grid{grid-template-columns:1fr}
}