/* Solutions / Compliance · GRC. Page accent: the green end of the palette (#c3d9a0) over
   a ruled, ledger-like surface. Graphics: hero halftone `bloom`, boundary `inward`, and a
   control register (scripts/v47/pages/solutions--compliance.py) in place of the seal.
   "What changes" is set as bordered control cards with a numbered corner chip. */

/* --- 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:40px;align-items:start}
#af-mock .story-context>p{
  font:27px/1.5 Georgia,serif;letter-spacing:-.4px;max-width:33ch;color:#2f352c;margin:0;
}

/* --- The control register ---------------------------------------------------------- */
#af-mock .cmp-register{
  margin:0;max-width:1120px;border:1px solid var(--line,#e2e5e9);border-radius:10px;
  background:#fff;overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .cmp-register>figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:16px 24px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#eef5e2,#fbfcf7);
}
#af-mock .cmp-register>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#5f6f49;
}
#af-mock .cmp-register>figcaption>span+span{font:10px 'IBM Plex Mono',monospace;color:#9aa091}
#af-mock .cmp-register-scroll{overflow-x:auto}
#af-mock .cmp-register table{width:100%;border-collapse:collapse;min-width:720px;table-layout:fixed}
#af-mock .cmp-register thead th{
  text-align:left;padding:11px 24px;border-bottom:1px solid #e7eadf;white-space:normal;
  font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#8d9482;
}
/* site.css sets `.af-scope th{font:11px mono; white-space:nowrap}` — restate both here. */
#af-mock .cmp-register tbody th,#af-mock .cmp-register tbody td{
  padding:14px 24px;border-bottom:1px solid #f2f4ec;vertical-align:top;text-align:left;
  font:400 13.5px/1.55 'DM Sans',sans-serif;color:#4a5048;white-space:normal;
}
#af-mock .cmp-register tbody tr:last-child th,#af-mock .cmp-register tbody tr:last-child td{border-bottom:0}
#af-mock .cmp-register tbody tr:nth-child(even) th,#af-mock .cmp-register tbody tr:nth-child(even) td{background:#fcfdf9}
#af-mock .cmp-register tbody th{color:#20241f}
#af-mock .cmp-register :is(th,td):nth-child(1){width:96px}
#af-mock .cmp-register :is(th,td):nth-child(2){width:38%}
#af-mock .cmp-register :is(th,td):nth-child(3){width:auto}
#af-mock .cmp-register :is(th,td):nth-child(4){width:152px}
#af-mock .cmp-ref{font:400 11px 'IBM Plex Mono',monospace;color:#7f9159;white-space:nowrap}
#af-mock .cmp-evidence{color:#5a6072}
#af-mock .cmp-when{
  font:400 9.5px/1.7 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#8a927c;text-align:right;white-space:nowrap;
}
#af-mock .cmp-register-foot{
  margin:0;padding:15px 24px 18px;border-top:1px solid #eef0e7;background:#fbfcf7;
  font-size:12.5px;line-height:1.75;color:#5a6072;
}

/* --- What changes: bordered control cards with a numbered chip ---------------------- */
#af-mock .story-capabilities{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(18px,2.5vw,26px);
}
#af-mock .story-capabilities article{
  border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  padding:22px 24px 24px;
}
#af-mock .story-capabilities article>span{
  display:inline-block;padding:4px 10px;border-radius:30px;background:#eef5e2;
  border:1px solid #d7e4c1;font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#5f6f49;
}
#af-mock .story-capabilities h3{
  margin:14px 0 9px;font:18px/1.45 Georgia,serif;letter-spacing:-.3px;
}
#af-mock .story-capabilities p{margin:0;font-size:13.5px;line-height:1.8;color:#5a6072;max-width:62ch}
#af-mock .story-capabilities .cap-thread{display:none}
#af-mock .story-capabilities article:hover{border-color:#cbd8b5;background:#fcfdf9}

/* --- 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}
}
@media(max-width:700px){
  #af-mock .story-capabilities{grid-template-columns:1fr}
}

/* --- 02 / In practice: the cover sheet of an evidence pack ------------------------- */
#af-mock .cmp-pack{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .cmp-pack>figcaption{
  display:grid;gap:8px;padding:22px 30px;border-bottom:1px solid var(--line,#e2e5e9);
  background:linear-gradient(100deg,#f6f2e2,#fcfbf5);
}
#af-mock .cmp-pack>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#8a7647;
}
#af-mock .cmp-pack>figcaption b{font:24px/1.25 Georgia,serif;letter-spacing:-.5px;color:#0a0a0a}
#af-mock .cmp-pack-ref{font:11px 'IBM Plex Mono',monospace;color:#8d9482}
#af-mock .cmp-pack-body{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.72fr);
  gap:clamp(24px,3.4vw,52px);padding:8px 30px 22px;
}
#af-mock .cmp-items{list-style:none;margin:0;padding:0}
#af-mock .cmp-items li{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 14px;align-items:start;
  padding:15px 0;border-bottom:1px solid #f2f1e8;
}
#af-mock .cmp-items li:last-child{border-bottom:0}
#af-mock .cmp-tick{
  position:relative;width:16px;height:16px;margin-top:2px;border-radius:3px;
  border:1px solid #bdd096;background:#eef5df;
}
#af-mock .cmp-tick::after{
  content:'';position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #5d7238;border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
#af-mock .cmp-items b{font:400 14px/1.6 'DM Sans',sans-serif;color:#20241f}
#af-mock .cmp-src{
  grid-column:2;display:inline-flex;align-items:center;gap:8px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#9aa191;
}
#af-mock .cmp-src img{display:block;width:15px;height:15px;object-fit:contain}
#af-mock .cmp-items .is-out .cmp-tick{border-color:#e0bda3;background:#fbf1e8}
#af-mock .cmp-items .is-out .cmp-tick::after{
  left:3px;top:6.5px;width:9px;height:0;border-width:0 0 1.5px 0;border-color:#a05f33;transform:none;
}
#af-mock .cmp-items .is-out b{color:#9a8574;text-decoration:line-through;text-decoration-color:#ddc3ad}
#af-mock .cmp-items .is-out .cmp-src{color:#a05f33}
#af-mock .cmp-items .is-out img{filter:grayscale(1);opacity:.5}
#af-mock .cmp-meta{margin:15px 0 0;padding:0 0 0 clamp(0px,1.6vw,24px);border-left:1px solid #f0efe6}
#af-mock .cmp-meta>div{padding:0 0 15px}
#af-mock .cmp-meta dt{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:#9aa191;margin-bottom:5px;
}
#af-mock .cmp-meta dd{margin:0;font-size:13px;line-height:1.65;color:#4a5048}
#af-mock .cmp-sign{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
  padding:22px 30px 26px;border-top:1px solid var(--line,#e2e5e9);background:#fcfbf5;
}
#af-mock .cmp-sign-line .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#8a7647;
}
#af-mock .cmp-sign-line i{
  display:block;height:26px;margin:6px 0 8px;max-width:300px;
  border-bottom:1px dashed #c9cbbc;
}
#af-mock .cmp-sign-name{font:13px Georgia,serif;font-style:italic;color:#6c7365}
#af-mock .cmp-sign p{margin:0;font-size:13px;line-height:1.8;color:#5a6072;max-width:52ch}
#af-mock .cmp-stamp{
  position:absolute;right:34px;top:-16px;display:grid;place-content:center;text-align:center;
  width:96px;height:96px;border-radius:50%;border:2px dashed #dcc07f;background:#fdfaed;
  transform:rotate(-9deg);
  font:11px/1.35 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#8a6f18;
}

@media(max-width:1000px){
  #af-mock .cmp-pack-body{grid-template-columns:1fr;gap:10px;padding:8px 22px 20px}
  #af-mock .cmp-meta{padding-left:0;border-left:0;border-top:1px solid #f0efe6;padding-top:16px}
  #af-mock .cmp-sign{grid-template-columns:1fr;gap:18px;padding:22px 22px 26px}
  #af-mock .cmp-stamp{position:static;justify-self:start;transform:rotate(-4deg)}
  #af-mock .cmp-pack>figcaption{padding:20px 22px}
}