/* Order form document styles (screen preview + print/PDF). Everything is scoped to .of */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.of { --ink: #1f2a44; --line: #1f2a44; --band: #f4f4f6; --muted: #4b5568; width: 794px; box-sizing: border-box; padding: 40px 48px 48px; background: #fff; color: var(--ink);
  font: 11px/1.45 Arial, Helvetica, sans-serif; }
.of * { box-sizing: border-box; }
.of-head { margin-bottom: 28px; }
.of-logo { display: block; height: 24px; width: auto; margin: 0 0 18px auto; }
.of-title { margin: 0; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.of-parties { display: grid; grid-template-columns: 1fr max-content; gap: 24px 48px; margin-bottom: 18px; }
.of-strong { font-weight: 700; }
.of-gap { margin-top: 16px; }
.of-meta { margin: 8px 0 20px; color: var(--ink); }
.of-ph { color: #6b7280; font-style: italic; }
.of-totalbar { display: flex; justify-content: space-between; width: 62%; border-bottom: 2px solid var(--line); padding: 4px 0; margin-bottom: 14px; font-size: 12px; }
.of-scroll { overflow-x: auto; }
.of-table { width: 100%; border-collapse: collapse; border: 1.5px solid var(--line); font-size: 10px; }
.of-table th, .of-table td { padding: 6px 7px; text-align: left; vertical-align: top; border-bottom: 1px solid #c9ccd6; }
.of-table thead th { background: var(--band); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1.5px solid var(--line); }
.of-table .r { text-align: right; white-space: nowrap; }
.of-name { font-weight: 500 !important; }
.of-name small { display: block; color: var(--muted); font-weight: 400; font-size: 9px; }
.of-summary th { font-weight: 500; }
.of-band th { background: var(--band); text-transform: uppercase; font-size: 9px; letter-spacing: .3px; border-top: 1.5px solid var(--line); }
.of-empty { text-align: center !important; color: var(--muted); padding: 20px !important; }
.of-grand { display: flex; justify-content: space-between; width: 46%; margin: 14px 0 22px auto; border: 1.5px solid var(--line); background: var(--band); padding: 8px 14px; font-size: 12px; }
.of-box { border: 1.5px solid var(--line); padding: 12px 16px; margin-bottom: 16px; }
.of-box h2 { margin: 0 0 6px; font-size: 11px; font-weight: 700; }
.of-pre { margin: 0; white-space: pre-wrap; min-height: 28px; }
.of-terms { font-size: 9px; line-height: 1.4; }
.of-terms h2 { font-weight: 700; margin-bottom: 8px; font-size: 10px; }
.of-terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.of-terms-col { display: flex; flex-direction: column; gap: 10px; }
.of-term { break-inside: avoid; }
.of-terms h3 { margin: 0 0 2px; font-size: 9px; font-weight: 700; }
.of-terms p { margin: 0; }
.of-terms .of-ver { margin: 12px 0 0; color: var(--muted); }
.of-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; break-inside: avoid; }
.of-sig { border-top: 1.5px solid var(--line); padding-top: 6px; min-height: 64px; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.of-sig-name { font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: 20px; line-height: 1.2; order: 2; }
.of-sig-label { font-size: 9.5px; color: var(--muted); order: 1; }
.of-sig { flex-direction: column; }
.of-sig-name { order: 0; margin-bottom: 4px; }
.of-sig-label { order: 1; }
.of-sig { border-top: 0; border-bottom: 1.5px solid var(--line); padding: 0 0 6px; min-height: 0; }
.of-sig-label { margin-top: 0; }

@page { size: A4; margin: 12mm; }
@media print {
  html, body { background: #fff !important; }
  .of { width: 100%; padding: 0; }
  .of-table tr, .of-box h2, .of-grand, .of-totalbar { break-inside: avoid; }
  .of-terms { break-inside: avoid; }
  .of-scroll { overflow: visible; }
}