/* Document workspace and true-proportion preview */
.document-workspace { display: grid; grid-template-columns: minmax(520px, .9fr) minmax(560px, 1.1fr); gap: 18px; min-height: calc(100vh - 148px); align-items: start; }
.document-form-pane { min-width: 0; }
.document-preview-pane { position: sticky; top: 92px; z-index: 1; height: calc(100vh - 108px); min-width: 0; overflow: hidden; background: #272a2f; border: 1px solid #24272b; border-radius: 16px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 52px; padding: 0 13px; color: #c2c5ca; background: #1e2024; border-bottom: 1px solid rgba(255,255,255,.08); }
.preview-toolbar strong { font-size: .7rem; font-weight: 660; }
.preview-toolbar small { color: #797e86; font-size: .62rem; }
.preview-tools { display: flex; align-items: center; gap: 4px; }
.preview-tool { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; color: #b2b6bd; font-size: .65rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.065); border-radius: 7px; }
.preview-tool:hover, .preview-tool.is-active { color: #fff; background: rgba(255,255,255,.1); }
.preview-stage { height: calc(100% - 52px); padding: 28px; overflow: auto; text-align: center; }
.document-scale { display: inline-block; transform-origin: top center; transition: transform .18s ease; }
.document-page { position: relative; display: flex; flex-direction: column; width: 210mm; min-height: 297mm; overflow: hidden; color: #202226; text-align: left; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.25); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.document-page.landscape { width: 297mm; min-height: 210mm; }
.document-page .accent-rule { height: 3.3mm; flex: 0 0 3.3mm; background: #e31c2b; }
.document-header { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; padding: 14mm 17mm 7mm; }
.document-logo .brand-word { color: #17191d; font-size: 22pt; }
.document-logo .brand-mark { transform: scale(.92) skewX(-10deg); }
.document-logo .brand-mark b { background: #17191d; }
.document-meta { display: grid; grid-template-columns: auto auto; gap: 2.2mm 5mm; color: #62666e; font-size: 8pt; text-align: right; }
.document-meta dt { margin: 0; color: #9a9ca1; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.document-meta dd { margin: 0; color: #292c31; font-weight: 650; }
.document-divider { position: relative; z-index: 2; height: .35mm; margin: 0 17mm; background: #e5e5e2; }
.document-body { position: relative; z-index: 2; flex: 1; padding: 12mm 20mm 17mm; font-family: Arial, Helvetica, sans-serif; font-size: 10.2pt; line-height: 1.72; }
.document-title { margin: 0 0 11mm; color: #1d2024; font-size: 18pt; font-weight: 750; letter-spacing: .035em; line-height: 1.15; text-align: center; text-transform: uppercase; }
.document-kicker { display: block; margin-bottom: 2mm; color: #e31c2b; font-size: 7pt; font-weight: 700; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.recipient-block { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin: 0 0 9mm; overflow: hidden; background: #dededb; border: 1px solid #dededb; border-radius: 1.5mm; }
.recipient-block > div { padding: 3.2mm 4mm; background: rgba(255,255,255,.95); }
.recipient-block small, .recipient-block strong { display: block; }
.recipient-block small { margin-bottom: 1.3mm; color: #989ba1; font-size: 6.8pt; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.recipient-block strong { color: #26292e; font-size: 9.2pt; font-weight: 650; }
.document-copy p { margin: 0 0 4.4mm; }
.document-copy .lead-name { font-weight: 700; }
.document-highlight { margin: 7mm 0; padding: 4mm 5mm; background: #f6f5f3; border-left: 1.2mm solid #e31c2b; }
.document-highlight strong { display: block; margin-bottom: 1mm; }
.document-signatures { display: grid; grid-template-columns: repeat(var(--signature-columns, 2), minmax(0,1fr)); gap: 10mm; margin-top: 15mm; }
.signature-block { min-width: 0; }
.signature-art { display: flex; align-items: flex-end; min-height: 14mm; color: #24272b; font-family: "Segoe Script", "Bradley Hand", cursive; font-size: 16pt; }
.signature-line { width: 100%; padding-top: 2.4mm; border-top: .3mm solid #55585d; }
.signature-line strong, .signature-line span { display: block; }
.signature-line strong { font-size: 8.5pt; }
.signature-line span { margin-top: .8mm; color: #777a80; font-size: 7pt; }
.signature-required-label { display: block; margin-top: 1.2mm; color: #b8babd; font-size: 5.7pt; letter-spacing: .08em; text-transform: uppercase; }
.document-footer { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6mm; min-height: 18mm; padding: 4mm 17mm; color: #c7c9cd; background: #17191d; }
.document-footer .brand-word { font-size: 12pt; }
.footer-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2mm 4mm; font-size: 6.3pt; }
.footer-contact span + span::before { content: "•"; margin-right: 4mm; color: #e31c2b; }
.footer-copy { color: #72767d; font-size: 5.8pt; text-align: right; }
.tez-watermark { position: absolute; z-index: 1; top: 41%; left: 50%; width: 92mm; height: 68mm; opacity: .027; transform: translate(-50%,-50%) skewX(-18deg) rotate(-13deg); }
.tez-watermark::before { content: ""; position: absolute; top: 26mm; left: 0; width: 68mm; height: 16mm; background: #17191d; }
.tez-watermark::after { content: ""; position: absolute; top: 0; right: 0; width: 40mm; height: 68mm; background: #17191d; clip-path: polygon(0 0,100% 50%,0 100%,30% 50%); }
.document-qr { display: grid; grid-template-columns: 19mm 1fr; align-items: center; gap: 3mm; width: max-content; margin-top: 7mm; }
.qr-placeholder { position: relative; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,1fr); gap: .4mm; width: 19mm; height: 19mm; padding: 1mm; background: #fff; border: .3mm solid #202328; }
.qr-placeholder i { background: #202328; }
.qr-copy strong, .qr-copy span { display: block; }
.qr-copy strong { font-size: 7pt; }
.qr-copy span { margin-top: 1mm; color: #999ba0; font-size: 5.8pt; }

/* Certificate treatment */
.certificate-page .document-header { padding: 10mm 15mm 5mm; }
.certificate-page .document-divider { margin: 0 15mm; }
.certificate-body { display: grid; place-items: center; flex: 1; padding: 5mm 22mm 12mm; text-align: center; }
.certificate-content { width: min(230mm,100%); }
.certificate-overline { display: block; color: #e31c2b; font-size: 8pt; font-weight: 750; letter-spacing: .32em; text-transform: uppercase; }
.certificate-title { margin: 3mm 0 6mm; font-family: Georgia, serif; font-size: 31pt; font-weight: 500; letter-spacing: -.03em; }
.certificate-presented { color: #8c8f95; font-size: 8pt; text-transform: uppercase; letter-spacing: .13em; }
.certificate-name { margin: 3mm auto 4mm; color: #202328; font-family: Georgia, serif; font-size: 27pt; font-style: italic; border-bottom: .4mm solid #d7d6d3; }
.certificate-copy { max-width: 190mm; margin: auto; color: #555960; font-size: 10pt; line-height: 1.65; }
.certificate-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 8mm auto 6mm; overflow: hidden; background: #dddcd9; border: 1px solid #dddcd9; border-radius: 2mm; }
.certificate-facts > div { padding: 3.2mm 6mm; background: rgba(255,255,255,.95); }
.certificate-facts small, .certificate-facts strong { display: block; }
.certificate-facts small { color: #9a9ca1; font-size: 6pt; letter-spacing: .1em; text-transform: uppercase; }
.certificate-facts strong { margin-top: 1.5mm; font-size: 8.5pt; }
.certificate-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 15mm; margin-top: 7mm; }
.certificate-bottom .document-qr { margin: 0; text-align: left; }
.certificate-bottom .signature-block:last-child { text-align: left; }

/* Signing experience */
.signing-shell { width: min(1180px,100%); margin: auto; }
.signing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.signing-head h1 { margin: 7px 0 5px; font-size: clamp(1.7rem,4vw,2.5rem); font-weight: 760; letter-spacing: -.05em; }
.signing-head p { margin: 0; color: #6f747c; font-size: .76rem; }
.signing-layout { display: grid; grid-template-columns: minmax(450px,1.35fr) minmax(330px,.65fr); gap: 14px; align-items: start; }
.signing-preview { height: min(76vh,820px); overflow: auto; padding: 24px; text-align: center; background: #2a2d32; border-radius: 16px; }
.signing-preview .document-page { transform: scale(.68); transform-origin: top center; margin-bottom: -30%; }
.signing-panel { padding: 22px; background: #fff; border: 1px solid #deddda; border-radius: 16px; box-shadow: 0 15px 45px rgba(25,27,30,.06); }
.signer-card { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding: 12px; background: #f7f6f3; border-radius: 10px; }
.signer-card strong, .signer-card span { display: block; }
.signer-card strong { font-size: .78rem; }
.signer-card span { margin-top: 3px; color: #858991; font-size: .67rem; }
.signature-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: #f0efec; border-radius: 9px; }
.signature-tab { padding: .55rem; color: #777c84; font-size: .68rem; font-weight: 650; background: transparent; border: 0; border-radius: 7px; }
.signature-tab.is-active { color: #25282d; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.06); }
.consent-box { padding: 12px; color: #60656d; font-size: .68rem; line-height: 1.5; background: #fafaf8; border: 1px solid #e9e8e5; border-radius: 9px; }
.decline-panel { margin-top: 13px; padding-top: 13px; border-top: 1px solid #ecebe8; }
.signing-security { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #8a8e95; font-size: .62rem; }

@media (max-width: 1199.98px) {
  .document-workspace { grid-template-columns: minmax(430px,.85fr) minmax(480px,1fr); }
}
@media (max-width: 991.98px) {
  .document-workspace { grid-template-columns: 1fr; }
  .document-preview-pane { position: relative; top: 0; height: 720px; }
  .signing-layout { grid-template-columns: 1fr; }
  .signing-panel { grid-row: 1; }
}
@media (max-width: 600px) {
  .document-preview-pane { height: 570px; }
  .preview-stage { padding: 14px; }
  .signing-head { flex-direction: column; }
  .signing-preview { height: 540px; padding: 12px; }
  .signing-preview .document-page { transform: scale(.48); margin-bottom: -64%; }
}