/* The agreement as it reads on screen (agreement-doc.js renderHtml): the client's page and the office preview. */
.ag-doc { color: #1e293b; font-size: 15px; line-height: 1.65; }
.ag-doc .ag-title { font-size: 20px; font-weight: 700; color: #1e1b4b; letter-spacing: -.01em; margin: 0 0 16px; }
.ag-doc .ag-h1 { font-size: 17px; font-weight: 700; color: #1e1b4b; margin: 32px 0 10px; padding-top: 20px; border-top: 1px solid rgb(15 23 42 / .07); }
.ag-doc .ag-h2 { font-size: 15.5px; font-weight: 700; color: #0f172a; margin: 20px 0 8px; }
.ag-doc .ag-h3 { font-size: 15px; font-weight: 600; color: #0f172a; margin: 18px 0 6px; }
.ag-doc .ag-p { margin: 0 0 10px; }
.ag-doc .ag-ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.ag-doc .ag-ul li { margin: 2px 0; }
.ag-doc .ag-fields { margin: 4px 0 14px; display: grid; gap: 6px; }
.ag-doc .ag-fields > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 12px; align-items: center; }
.ag-doc .ag-fields dt { font-weight: 600; color: #334155; }
.ag-doc .ag-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ag-doc .ag-blank { display: inline-block; width: 100%; max-width: 16rem; border-bottom: 1px solid #cbd5e1; height: 1.2em; }
.ag-doc .ag-input { width: 100%; border-radius: 10px; background: #fff7ed; padding: 9px 12px; font-size: 15px; color: #0f172a;
  box-shadow: inset 0 0 0 1px rgb(234 88 12 / .35); outline: none; }
.ag-doc .ag-input:focus { background: #fff; box-shadow: inset 0 0 0 2px #7c3aed; }
.ag-doc .ag-input.ag-missing, .ag-doc .ag-choice.ag-missing { box-shadow: inset 0 0 0 2px #dc2626; background: #fef2f2; }
.ag-doc .ag-choice { display: inline-flex; gap: 10px; align-items: flex-start; cursor: pointer; border-radius: 10px; padding: 6px 8px; margin-left: -8px; }
.ag-doc .ag-choice input { width: 18px; height: 18px; margin-top: 4px; accent-color: #6d28d9; flex-shrink: 0; }
.ag-doc .ag-box { display: inline-flex; width: 16px; height: 16px; border: 1.5px solid #334155; border-radius: 3px; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; vertical-align: -2px; margin-right: 6px; color: #0f172a; }
.ag-doc .ag-box.on { background: #ede9fe; border-color: #6d28d9; color: #5b21b6; }
.ag-doc .ag-scroll { overflow-x: auto; margin: 6px 0 14px; }
.ag-doc .ag-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.ag-doc .ag-table th, .ag-doc .ag-table td { border: 1px solid #e2e8f0; padding: 7px 9px; text-align: left; vertical-align: top; }
.ag-doc .ag-table th { background: #f8fafc; font-weight: 600; }
.ag-doc .ag-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-doc .ag-table .mid { text-align: center; }
.ag-doc .ag-signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 12px; }
.ag-doc .ag-sign p { margin: 4px 0; font-size: 14px; }
.ag-doc .ag-sign-h { font-weight: 700; color: #1e1b4b; }
.ag-doc .ag-sig { display: block; width: 100%; max-width: 320px; height: 100px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
@media (max-width: 640px) { .ag-doc .ag-fields > div { grid-template-columns: 1fr; gap: 2px; } .ag-doc { font-size: 15px; } }