/* Solutions / Legal. Page accent: the peach/ink end of the palette, on a document-like
   surface. Graphics: hero halftone `band`, boundary `rings`, and an example matter panel
   with redacted passage (scripts/v47/pages/solutions--legal.py) in place of the seal.
   "What changes" is set book-style: a serif numeral in the margin, two columns, no rules
   but a hairline down the left of each entry. */

/* --- Context: lead paragraph beside the matter panel ------------------------------- */
#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 matter panel --------------------------------------------------------------- */
#af-mock .lg-matter{
  margin:0;border:1px solid var(--line,#e2e5e9);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 18px 44px #5a60720f;
}
#af-mock .lg-matter>figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:15px 22px;border-bottom:1px solid var(--line,#e2e5e9);background:#f8f8f4;
}
#af-mock .lg-matter>figcaption .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#6d6459;
}
#af-mock .lg-matter>figcaption>span+span{font:10px 'IBM Plex Mono',monospace;color:#9aa091}
#af-mock .lg-doc{padding:24px 26px 20px;background:#fffefb}
#af-mock .lg-doc>p{
  margin:0;font:15.5px/2 Georgia,serif;color:#2f352c;max-width:52ch;
}
#af-mock .lg-line{display:inline}
#af-mock .lg-redact{
  display:inline-block;width:11.5em;height:.82em;vertical-align:-.05em;background:#1b1b1b;
  border-radius:1px;
}
#af-mock .lg-redact-short{width:6.5em}
#af-mock .lg-doc-note{
  margin:16px 0 0;padding-top:14px;border-top:1px solid #efece5;
  font:12.5px/1.75 'DM Sans',sans-serif;color:#5a6072;max-width:62ch;
}
#af-mock .lg-matter-scope{list-style:none;margin:0;padding:6px 22px 16px;border-top:1px solid var(--line,#e2e5e9)}
#af-mock .lg-matter-scope li{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:4px 12px;align-items:center;
  padding:12px 0;border-bottom:1px solid #f2f1ea;
}
#af-mock .lg-matter-scope li:last-child{border-bottom:0}
#af-mock .lg-matter-scope img{grid-column:1;grid-row:1;display:block;width:16px;height:16px;object-fit:contain}
#af-mock .lg-matter-scope b{grid-column:2;grid-row:1;font:500 14px 'DM Sans',sans-serif;color:#20241f}
#af-mock .lg-matter-scope span{
  grid-column:2;grid-row:2;font:11px 'IBM Plex Mono',monospace;letter-spacing:.02em;color:#78806f;
}
#af-mock .lg-matter-scope .is-open b:after{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#8aa35a;margin-left:9px;vertical-align:middle}
#af-mock .lg-matter-scope .is-shut{opacity:.55}
#af-mock .lg-matter-scope .is-shut img{filter:grayscale(1)}
#af-mock .lg-matter-scope .is-shut b{text-decoration:line-through;text-decoration-color:#b9beb2}
#af-mock .lg-matter-scope .is-held span{color:#a3743f}
#af-mock .lg-matter-scope .is-held b:after{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#e0b06d;margin-left:9px;vertical-align:middle}

/* --- What changes: set like a book, numerals in the margin -------------------------- */
#af-mock .story-capabilities{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:4px clamp(32px,5vw,76px);
}
#af-mock .story-capabilities article{
  border-top:0;border-left:1px solid var(--line,#e2e5e9);
  padding:6px 0 26px 22px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;
}
#af-mock .story-capabilities article>span{
  grid-column:1;grid-row:1/span 3;font:30px/1 Georgia,serif;color:#c9cdc0;letter-spacing:-1px;
}
#af-mock .story-capabilities h3{
  grid-column:2;margin:0 0 10px;font:19px/1.5 Georgia,serif;letter-spacing:-.3px;
}
#af-mock .story-capabilities p{
  grid-column:2;margin:0;font-size:14px;line-height:1.85;color:#5a6072;max-width:62ch;
}
#af-mock .story-capabilities .cap-thread{display:none}
#af-mock .story-capabilities article:hover{border-left-color:#e0b08c}

/* --- 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}
}
@media(max-width:700px){
  #af-mock .lg-redact{width:8em}
  #af-mock .lg-redact-short{width:4.5em}
}

/* --- 02 / In practice: the floor plan those boundaries make ----------------------- */
#af-mock .lg-floor-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:30px;
}
#af-mock .lg-floor-head .eyebrow{
  margin:0;padding:0;font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#7a7159;
}
#af-mock .lg-floor-sub{font:12px 'IBM Plex Mono',monospace;color:#6c7365}
#af-mock .lg-plan{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:3px;padding:3px;background:#0a0a0a;border-radius:4px;
  box-shadow:0 18px 44px #5a60720f;
}
#af-mock .lg-room{background:#fff;padding:20px 22px 22px;display:flex;flex-direction:column}
#af-mock .lg-room.is-open{grid-row:1/3}
#af-mock .lg-room.is-door{grid-column:2/4}
#af-mock .lg-room-id{
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:#9aa191;
}
#af-mock .lg-room b{
  display:block;margin:9px 0 12px;font:21px/1.25 Georgia,serif;letter-spacing:-.4px;color:#0a0a0a;
}
#af-mock .lg-room p{margin:0;font-size:13px;line-height:1.75;color:#5a6072;max-width:44ch}
#af-mock .lg-room-can{list-style:none;margin:0 0 auto;padding:0}
#af-mock .lg-room-can li{
  display:grid;grid-template-columns:15px minmax(0,1fr);gap:11px;align-items:start;
  padding:10px 0;border-bottom:1px solid #f2f3ec;font-size:13.5px;line-height:1.55;color:#20241f;
}
#af-mock .lg-room-can img{display:block;width:15px;height:15px;object-fit:contain;margin-top:2px}
#af-mock .lg-here{
  margin-top:18px;padding:11px 14px;border:1px solid #cfdcb4;border-radius:6px;
  background:#f1f6e5;font:11px/1.5 'IBM Plex Mono',monospace;color:#4f6135;
}
#af-mock .lg-here i{font-style:italic;color:#2f3d1c}
#af-mock .lg-room.is-sealed{
  background:repeating-linear-gradient(135deg,#faf8f5 0 8px,#f4efe9 8px 16px);
}
#af-mock .lg-room.is-sealed .lg-room-id,#af-mock .lg-room.is-sealed b{color:#7c6f63}
#af-mock .lg-room.is-sealed p{color:#7b7167}
#af-mock .lg-mark{
  margin-top:16px;align-self:flex-start;padding:5px 12px;border-radius:30px;
  border:1px solid #e0bda3;background:#fbf1e8;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#a05f33;
}
#af-mock .lg-room.is-door{
  background:linear-gradient(100deg,#fdfaed,#fcfbf5);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:clamp(20px,3vw,44px);align-items:center;
}
#af-mock .lg-room.is-door .lg-room-id{grid-column:1;align-self:end}
#af-mock .lg-room.is-door b{grid-column:1;margin-bottom:0}
#af-mock .lg-room.is-door p{grid-column:2;grid-row:1/3;max-width:52ch}
#af-mock .lg-room.is-door .lg-mark{
  grid-column:1;margin-top:14px;border-color:#e2d290;background:#fbf6e0;color:#786213;
}
#af-mock .lg-floor-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:76ch;
}

@media(max-width:1000px){
  #af-mock .lg-plan{grid-template-columns:1fr;grid-template-rows:none}
  #af-mock .lg-room.is-open{grid-row:auto}
  #af-mock .lg-room.is-door{grid-column:auto;grid-template-columns:1fr;row-gap:10px}
  #af-mock .lg-room.is-door .lg-room-id,#af-mock .lg-room.is-door b,
  #af-mock .lg-room.is-door p,#af-mock .lg-room.is-door .lg-mark{grid-column:auto;grid-row:auto}
  #af-mock .lg-room p{max-width:56ch}
}