/* ============================================================
   Docxedo demo deed — document content + comment balloons only.
   Every selector prefixed dx- so it cannot collide with chrome.
   ============================================================ */

.dx-sheet{
  width:520px;
  min-height:735px;
  background:#fff;
  box-shadow:0 1px 9px rgba(0,0,0,.22);
  margin:0 auto 1.5rem;
  padding:3rem 3.3rem;
  box-sizing:border-box;
  position:relative;
  color:#000;
  font-family:"Segoe UI",Calibri,"Helvetica Neue",Arial,sans-serif;
  font-size:11px;
  line-height:1.36;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* page-number top-right (Word-style header numbering) */
.dx-pageno{
  position:absolute;
  top:1.1rem;
  right:1.4rem;
  font-size:11px;
}

/* ============================================================
   BEFORE — unstyled draft
   ============================================================ */
/* Geometry lifted from Sample_Precedent_demo_v7.docx. The body sections use a
   1cm left margin against a 3cm right one, text is 12pt (vs 11pt styled), and
   every indent is an ad-hoc direct value (284/539/709/720/1418/2160/2268 twips)
   instead of a style. That near-but-not-quite repetition is what reads as wrong. */
.docface--before .dx-sheet{
  font-size:12px;
  padding:1.55rem 4.64rem 1.55rem 1.55rem;
}
/* the cover section kept wider, symmetric margins */
.docface--before .dx-sheet--bcover{ padding:3.87rem 4.64rem; }
.docface--before .dx-pageno{ top:1.55rem; right:4.64rem; }

.dx-b-cover{ padding-top:4rem; text-align:center; }
.dx-b-coverparty{ margin:0 0 .9rem; font-style:italic; font-weight:700; letter-spacing:.2px; }
.dx-b-coverrole{ margin:0 0 1.5rem; font-weight:700; }
.dx-b-covertitle{ margin:2rem 0 0; font-weight:700; }

.dx-b-lead{ margin:0 0 1rem; }
.dx-b-h{ margin:1.1rem 0 .6rem; font-weight:700; }
.dx-b-schtitle{ margin-bottom:.4rem; }

/* base only — each paragraph below carries its own ad-hoc indent.
   text-indent is reset on the number because it is inherited by inline-block
   children and would otherwise be applied a second time inside the number. */
.dx-b-num{ margin:0 0 .4rem; }
.dx-b-num .dx-b-no{ display:inline-block; text-indent:0; }

/* party items 1-3: number at 539tw, text tabbed out to 1440tw, and wrapped
   lines drop back to 539tw so they never line up under their own first line */
.dx-b-item{ padding-left:1.47rem; }
.dx-b-item .dx-b-no{ min-width:2.46rem; }

/* 3a/3b were tabbed all the way to 2160tw, label and text run together */
.dx-b-sub{ padding-left:5.90rem; }
.dx-b-sub .dx-b-no{ display:inline; min-width:0; }

/* background A/C/C: a real hanging indent at 709tw */
.dx-b-alpha{ padding-left:1.93rem; text-indent:-1.93rem; }
.dx-b-alpha .dx-b-no{ min-width:1.93rem; }

/* background B/E: no hanging indent at all, so wrapped lines snap to the
   margin and sit left of the letter they belong to */
.dx-b-alpha2{ padding-left:0; }
.dx-b-alpha2 .dx-b-no{ min-width:1.96rem; }

/* clause heading 2 sits on the margin ... */
.dx-b-clh-a{ padding-left:0; }
.dx-b-clh-a .dx-b-no{ min-width:1.94rem; }
/* ... while 3 onwards are pushed in 709tw, so the headings disagree */
.dx-b-clh-b{ padding-left:1.94rem; }
.dx-b-clh-b .dx-b-no{ min-width:1.99rem; }

/* sub-clauses: number at 1418tw, first line at 2160tw, wrapped back to 1418tw */
.dx-b-i1{ padding-left:3.87rem; }
.dx-b-i1 .dx-b-no{ min-width:2.03rem; }

/* (a)/(b) all sit at 2268tw with the label inline */
.dx-b-i2{ padding-left:6.20rem; }
.dx-b-i2 .dx-b-no{ display:inline; min-width:0; }

.dx-b-def{ margin:0 0 .55rem; padding-left:1.96rem; }
/* BACKGROUND: got a 425tw hanging against a 709tw indent, landing at 284tw */
.dx-b-h--bg{ padding-left:.78rem; }
.dx-b-note{ margin:.4rem 0 .7rem; }

/* the before schedule is a landscape section too, but with even 1440tw margins */
.docface--before .dx-sheet--land{ padding:3.93rem; }

/* the deliberately-wrong stray font on one clause */
.dx-b-stray{ font-family:Georgia,"Times New Roman",serif; }

/* before schedule table */
.dx-b-table{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
  margin-top:.3rem;
}
.dx-b-table th{
  background:#000;
  color:#fff;
  text-align:left;
  font-weight:700;
  padding:4px 6px;
  border:1px solid #000;
}
.dx-b-table td{
  border:1px solid #000;
  padding:4px 6px;
  vertical-align:top;
}
.dx-b-table tbody tr:nth-child(even){ background:#d9d9d9; }
.dx-b-table tbody tr:nth-child(odd){ background:#f2f2f2; }

/* before execution block */
.dx-b-sig{ margin:0 0 .35rem; }
.dx-b-sigtop{ margin-top:2.4rem; }
.dx-b-siggrid{ display:flex; gap:2.4rem; margin:1.8rem 0 2.2rem; }
.dx-b-sigcol{ flex:1; }
.dx-b-sigline{ border-bottom:1px solid #000; height:1.6rem; }
.dx-b-sigline--thick{ border-bottom:2px solid #000; }
.dx-b-siglbl{ margin:.25rem 0 0; }

.dx-b-charlie{ display:flex; align-items:flex-start; margin-top:2.4rem; }
.dx-b-charlie-l{ flex:0 0 56%; }
.dx-b-charlie-l p{ margin:0 0 .15rem; }
.dx-b-charlie-br{ display:flex; flex-direction:column; gap:.55rem; padding:0 1rem; }
.dx-b-charlie-r{ flex:1; display:flex; flex-direction:column; gap:1.5rem; padding-top:.2rem; }
.dx-b-witsep{ margin-top:2.6rem; }

/* ============================================================
   AFTER — styled output
   ============================================================ */
.docface--after .dx-sheet{
  font-family:Calibri,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:11px;
}

/* cover */
.dx-a-cover{ padding-top:3.5rem; }
/* real doc: TitleAgreement = Arial 22pt, right-aligned, 1.5pt rule under */
.dx-a-title{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:1.15;
  text-align:right;
  margin:0 0 .55rem;
  letter-spacing:.1px;
}
.dx-a-titlerule{ border-bottom:1.5px solid #000; margin:0 0 2.5rem; }
.dx-a-coverparties{ text-align:right; }
/* real doc: PartyTitle = Arial 12pt bold caps, right-aligned */
.dx-a-cparty{
  margin:0 0 1.05rem; font-weight:700; letter-spacing:.3px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:12px;
}
/* the flagged party is highlighted around the words only, not the whole line */
.dx-a-cparty--flag{ position:relative; }

.dx-a-logo{ position:absolute; left:3.3rem; right:3.3rem; bottom:13%; text-align:center; margin:0; }
.dx-a-logo img{ width:52px; height:auto; display:inline-block; }
.dx-a-logoword{
  margin:.4rem 0 0; font-weight:700; letter-spacing:.55em;
  color:#7a7a2f; font-size:13px; padding-left:.55em;
}
.dx-a-logotag{
  margin:.1rem 0 0; letter-spacing:.42em; color:#9a9a55;
  font-size:8.5px; padding-left:.42em;
}

/* footer with bowtie + page x of 7 */
.dx-a-foot{
  position:absolute;
  bottom:1rem;
  left:3.3rem;
  right:3.3rem;
  text-align:center;
  font-size:10px;
}
.dx-a-pageno{ color:#000; }

/* headings & body */
.dx-a-h2{
  margin:.75rem 0 .35rem;
  font-weight:700;
  font-size:11px;
}
/* numbered headings carry a rule across the full text width (real doc: MultiLevel1
   pBdr bottom, 0.5pt). Unnumbered headings (DATE/PARTIES/BACKGROUND) have none. */
.dx-a-h2num{
  padding-left:2.1rem; text-indent:-2.1rem;
  border-bottom:1px solid #000; padding-bottom:.16rem;
}
.dx-a-h2 .dx-a-cn{ display:inline-block; min-width:2.1rem; font-weight:700; text-indent:0; }
.dx-a-field{ background:#d9d9f5; }
/* DATE line: the field tabs out to the right margin */
.dx-a-dateline{ display:flex; justify-content:space-between; align-items:baseline; }

.dx-a-party{ margin:0 0 .6rem; }
/* real doc: Parties2 — the trailing party notes sit one indent in */
.dx-a-party--ind{ padding-left:2.1rem; }
/* real doc: Notes style = italic red */
.dx-a-note{ margin:.5rem 0 .6rem; font-style:italic; color:#FF0000; }
.dx-a-optn{ color:#FF0000; font-style:italic; }

.dx-a-ol{ margin:.2rem 0 .6rem; padding-left:1.9rem; }
.dx-a-ol-alpha{ list-style:upper-alpha; }
.dx-a-ol li{ margin:0 0 .4rem; padding-left:.35rem; }

.dx-a-body{ margin:0 0 .4rem; text-align:justify; }
.dx-a-cl{ padding-left:2.1rem; text-indent:-2.1rem; }
.dx-a-cl2{ padding-left:4.2rem; text-indent:-2.1rem; }
.dx-a-body .dx-a-cn{ display:inline-block; min-width:2.1rem; text-indent:0; }

/* Schedule runs as a landscape A4 section in the real deed. Built at true
   landscape geometry (735x520 = the portrait sheet rotated) and scaled to sit
   inside the same column, so the comment balloons stay on screen. */
.dx-landwrap{ height:400px; margin:0 auto 1.5rem; display:flex; justify-content:center; }
.dx-sheet--land{
  width:735px; min-height:520px;
  margin:0 !important;
  flex:0 0 auto;
  transform:scale(.77);
  transform-origin:top center;
}

/* after schedule table */
.dx-a-table{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
  margin-top:.4rem;
}
.dx-a-table th{
  background:#404040;
  color:#fff;
  text-align:left;
  font-weight:700;
  padding:5px 6px;
  border:1px solid #808080;
  vertical-align:bottom;
}
.dx-a-table td{
  border:1px solid #808080;
  padding:5px 6px;
  vertical-align:top;
}
.dx-a-table tbody tr:nth-child(even){ background:#e9e9f0; }

/* after execution */
.dx-a-exec{ display:flex; align-items:flex-start; margin-top:1.8rem; }
.dx-a-exec-gap{ margin-top:3rem; }
.dx-a-exec-l{ flex:0 0 52%; }
.dx-a-exline{ margin:0 0 .12rem; position:relative; padding-right:1.1rem; }
.dx-a-exline .dx-a-paren{ position:absolute; right:0; }
.dx-a-exec-r{ flex:1; padding-top:1.9rem; padding-left:.6rem; }
.dx-a-exline-r{ border-bottom:1px solid #000; height:1.5rem; }
.dx-a-exline-r2{ margin-top:1.3rem; }
.dx-a-exlbl{ margin:.1rem 0 0; }

.dx-a-witcol{ margin-top:1.6rem; max-width:62%; }
.dx-a-witline{ border-bottom:1px solid #000; height:1.45rem; }
.dx-a-witlbl{ margin:.1rem 0 .9rem; }

/* tracked-change highlight on flagged execution text */
.dx-a-hl{ background:#d9d9f5; }

/* ============================================================
   Comment balloons (AFTER only) — lavender, in right margin
   ============================================================ */
.dx-a-rel{ position:relative; }

/* modern Word comment card */
.dx-cmt{
  position:absolute;
  top:-2px;
  right:-184px;
  width:170px;
  background:#fff;
  border:1px solid #e4e4e4;
  border-radius:8px;
  padding:9px 10px 8px;
  font-size:9px;
  line-height:1.42;
  color:#333;
  box-shadow:0 2px 9px rgba(0,0,0,.12);
  z-index:3;
  text-align:left;
  text-indent:0;
  font-family:"Segoe UI",Calibri,Arial,sans-serif;
}
.dx-cmt__head{ display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.dx-cmt__avatar{ width:15px; height:15px; border-radius:50%; background:#c4c4c4; flex:0 0 auto; }
.dx-cmt__author{ font-weight:700; color:#222; font-size:9.5px; }
.dx-cmt__menu{ margin-left:auto; color:#aaa; font-size:11px; letter-spacing:1px; }
.dx-cmt__sw{
  display:inline-block;
  width:9px; height:9px;
  background:#ffd83d;
  vertical-align:-1px;
  margin-right:3px;
}
.dx-cmt__txt{ }
.dx-cmt__reply{
  display:block;
  margin-top:7px;
  border:1px solid #e2e2e2;
  border-radius:6px;
  padding:4px 8px;
  color:#9b9b9b;
  font-size:8.5px;
}