:root{
  --ink:#16181d; --muted:#5c6270; --line:#dfe3ea; --bg:#f3f5f8;
  --card:#ffffff; --brand:#1b3a8f; --brand-ink:#ffffff;
  --ok:#126c3a; --warn:#8a5a00; --bad:#9a2525;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:900px;margin:0 auto;padding:24px 16px 72px}
.bar{background:#fff;border-bottom:1px solid var(--line)}
.bar .wrap{padding:14px 16px;display:flex;gap:12px;align-items:baseline;justify-content:space-between}
.bar strong{font-size:15px}
/* Two logos at one optical height. The BizIQ mark is the taller of the two
   relative to its width, so it is sized down rather than matched on height,
   which would make it loom over the Bluefrog wordmark. */
.lockup{display:flex;align-items:center;gap:14px;min-width:0}
.lockup img{display:block;width:auto;height:26px}
.lockup img:last-child{height:30px}
.lockup .amp{color:var(--line);font-size:19px;line-height:1}
@media (max-width:520px){
  .lockup{gap:9px}
  .lockup img{height:20px}
  .lockup img:last-child{height:23px}
  .bar span{display:none}
}

ul.plain{list-style:none;margin:0 0 16px;padding:0}
ul.plain li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;
  gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
ul.plain li:last-child{border-bottom:0}
.tag{font-size:12px;font-weight:600;border-radius:999px;padding:3px 11px;
  background:#eef1f6;color:var(--muted)}
.tag.ok{background:rgba(18,108,58,.10);color:var(--ok)}
.bar span{color:var(--muted);font-size:13px}
h1{font-size:23px;line-height:1.25;margin:0 0 6px}
h2{font-size:17px;margin:28px 0 10px}
p{margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:0 0 18px}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}

.btn{
  display:inline-block;border:0;border-radius:7px;padding:13px 24px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  background:var(--brand);color:var(--brand-ink);
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:#eef1f6;color:var(--ink)}
.btn.lnk{background:none;color:var(--brand);padding:6px 0;text-decoration:underline}

.notice{border-radius:8px;padding:13px 16px;margin:0 0 18px;font-size:14px;border:1px solid}
.notice.err{background:#fdf2f2;border-color:#f3cfcf;color:var(--bad)}
.notice.warn{background:#fff8ea;border-color:#f0ddb4;color:var(--warn)}
.notice.ok{background:#eefaf2;border-color:#bfe6cf;color:var(--ok)}
.notice ul{margin:6px 0 0 18px;padding:0}

/* ---- document ---- */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 18px}
.page{position:relative;margin:0 auto 14px;max-width:100%;background:#fff;box-shadow:0 1px 4px rgba(20,24,40,.12)}
.page:last-child{margin-bottom:0}
.page img{display:block;width:100%;height:auto}
.fld{
  position:absolute;border:2px dashed var(--brand);border-radius:5px;
  background:rgba(27,58,143,.07);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--brand);text-align:center;padding:2px;
}
.fld:hover{background:rgba(27,58,143,.14)}
.fld.done{border-style:solid;border-color:var(--ok);background:rgba(18,108,58,.06);cursor:pointer}
.fld .ink{width:100%;height:100%;display:block}
.fld .val{font-weight:500;color:var(--ink);font-size:12px;overflow:hidden}
.fld.other{border-color:#c6ccd8;background:rgba(0,0,0,.02);color:#8b93a3;cursor:default;border-style:dotted}

/* ---- signature pad ---- */
.modal{position:fixed;inset:0;background:rgba(14,17,25,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.modal[hidden]{display:none}
.pad{background:#fff;border-radius:12px;padding:20px;width:100%;max-width:560px}
.pad h3{margin:0 0 4px;font-size:17px}
.padbox{border:1px solid var(--line);border-radius:8px;background:#fcfcfd;position:relative;margin:14px 0 8px;touch-action:none}
.padbox canvas{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.padbox .base{position:absolute;left:14px;right:14px;bottom:38px;border-bottom:1px solid #cbd2de}
.padrow{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:6px;margin:0 0 4px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
/* :not(.fld) matters. `input[type=text]` has higher specificity (0,1,1) than
   a single class (0,1,0), so this width:100% was overriding the per-field
   position rules and stretching the counterparty's Title and Customer legal
   entity boxes across the whole page from a 54% offset. Scope the generic
   form styling so it can never reach a positioned field again. */
input[type=text]:not(.fld){
  width:100%;border:1px solid var(--line);border-radius:7px;padding:12px;font:inherit;background:#fff;
}
input[type=text]:not(.fld):focus{outline:2px solid var(--brand);outline-offset:1px}
.typed{font-family:"Snell Roundhand","Apple Chancery","Segoe Script","Brush Script MT",cursive;font-size:38px;text-align:center;padding:18px 10px;color:#0a1b4a}
label.chk{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;cursor:pointer}
label.chk input{margin-top:3px;width:18px;height:18px;flex:none}
.field-label{font-size:13px;font-weight:600;margin:0 0 6px}

.actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(243,245,248,0),var(--bg) 42%);padding:22px 0 0;margin-top:8px}
table.kv{border-collapse:collapse;width:100%;font-size:14px}
table.kv td{padding:8px 12px 8px 0;vertical-align:top;border-bottom:1px solid var(--line)}
table.kv td:first-child{color:var(--muted);width:150px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.pill.ok{background:#e3f6ea;color:var(--ok)}
.pill.wait{background:#fdf1dc;color:var(--warn)}
@media (max-width:640px){
  h1{font-size:20px}
  .card,.doc{padding:16px}
  .typed{font-size:30px}
}

/* Initials need no signature baseline. Toggled by a class rather than a JS
   style assignment, which the page's CSP blocks. */
.padbox.noline .base{display:none}

/* A text field typed directly on the document. Sized to its box, so it sits
   on the contract's own ruled line like the signature does. */
.fld.fldtext{
  background:rgba(27,58,143,.06);border:2px dashed var(--brand);
  font:inherit;color:var(--ink);padding:0 4px;line-height:1;
  border-radius:5px;
}
.fld.fldtext::placeholder{color:var(--brand);opacity:.75;font-size:12px;font-weight:600}
.fld.fldtext:focus{outline:2px solid var(--brand);outline-offset:1px;background:#fff}
.fld.fldtext.done{border-style:solid;border-color:var(--ok);background:rgba(18,108,58,.06)}

/* Spacing utilities. These exist because the page's CSP has no
   'unsafe-inline' for styles: a style="" attribute is dropped outright, which
   is how every signature field once collapsed into the corner of its page.
   Nothing in a view may carry an inline style. */
.mt0{margin-top:0}
.mt18{margin-top:18px}
.mt20{margin-top:20px}
.mb4{margin:0 0 4px}
.mb10{margin:0 0 10px}
.mb12{margin:0 0 12px}
.mb14{margin:0 0 14px}
.hint{margin:7px 0 18px}
.note{margin:12px 0 0}
.tight{margin:8px 0 0}
.flat{padding-top:0}
.row-gap{gap:14px}
.w200{width:200px}

/* Signing toolbar. With dozens of fields spread over eleven pages, the signer
   needs the count and the apply-all action to stay reachable while scrolling. */
.toolbar{position:sticky;top:0;z-index:20;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(16,20,40,.07)}
.toolbar .padrow{margin:0}
#applyall{padding:9px 16px;font-size:14px}

/* A margin mark sits in a 25pt-wide box, so its label has to go. The box is
   still a clear target; what it is for is said in the toolbar and the pad. */
.fld.tiny{font-size:0;border-width:1.5px}
.fld.tiny.done{font-size:0}

.toolbtns{display:flex;gap:8px;flex-wrap:wrap}
.mb0{margin-bottom:0}
kbd{font:inherit;font-size:12px;background:#eef1f6;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px}

/* Keyboard focus must be obvious: a 25pt box is easy to lose track of, and
   the signer may be tabbing rather than clicking. */
.fld:focus-visible{outline:3px solid #ff8a00;outline-offset:2px;z-index:5}
.fld:focus{outline:3px solid #ff8a00;outline-offset:2px;z-index:5}

/* Brief pulse on the box "Next" just moved to, so it is obvious where the
   page jumped to on a document eleven pages long. */
.fld.seeking{animation:seek 1.4s ease-out 1;z-index:6}
@keyframes seek{
  0%,100%{box-shadow:0 0 0 0 rgba(255,138,0,0)}
  15%    {box-shadow:0 0 0 7px rgba(255,138,0,.55)}
  70%    {box-shadow:0 0 0 3px rgba(255,138,0,.25)}
}
@media (prefers-reduced-motion: reduce){
  .fld.seeking{animation:none;outline:3px solid #ff8a00;outline-offset:2px}
}

/* The link a signer must forward by hand: selectable, wrapping, obvious. */
.linkbox{background:#f6f8fb;border:1px solid var(--line);border-radius:7px;
  padding:11px 13px;user-select:all;line-height:1.5}

/* The other party's completed mark, shown read-only. Quietly present: it is
   evidence the agreement is part-signed, not something to click. */
.fld.signedby{border:1px solid rgba(18,108,58,.35);background:rgba(18,108,58,.04);
  cursor:default;color:var(--ink)}
.fld.signedby .val{font-size:12px;color:var(--ink)}

/* An author `display` rule beats the user agent's [hidden]{display:none},
   so .btn{display:inline-block} was keeping hidden buttons on screen. */
[hidden]{display:none !important}