:root{
  --be-charcoal:#23272a;
  --be-deep:#16221f;
  --be-terracotta:#54ab9b;
  --be-soft:#f4f7f6;
  --be-taupe:#8ea9a2;
  --be-line:rgba(7,26,44,.16);
  --be-muted:#66726f;
  --page-w:210mm;
  --page-h:296.5mm;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Avenir Next",Arial,sans-serif;color:var(--be-deep);background:#edf1ef}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app{display:grid;grid-template-columns:400px minmax(0,1fr);min-height:100vh}
.builder{position:sticky;top:0;height:100vh;overflow:auto;background:#fff;border-right:1px solid var(--be-line);padding:20px;z-index:10}
.top-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.btn{border:0;border-radius:999px;padding:10px 14px;font-weight:750;font-size:12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1.2}
.btn.back{background:var(--be-soft);color:var(--be-charcoal);border:1px solid var(--be-line)}
.btn.primary{background:var(--be-terracotta);color:#fff}
.btn.secondary{background:var(--be-charcoal);color:#fff}
.top-actions .btn{flex:1;min-width:120px}
.builder h1{font-family:Georgia,serif;font-weight:500;color:var(--be-charcoal);font-size:27px;line-height:1.08;margin:0}
.sub{font-size:13px;line-height:1.5;color:var(--be-muted);margin:7px 0 18px}
.panel-section{border-top:1px solid var(--be-line);padding-top:15px;margin-top:15px}
.panel-section h2{font-size:12px;text-transform:uppercase;letter-spacing:1.15px;color:var(--be-charcoal);margin:0 0 10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.field.full{grid-column:1/-1}
label.field-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.75px;font-weight:800;color:var(--be-muted);margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],textarea,select{width:100%;border:1px solid #ccd6d2;border-radius:9px;padding:9px 10px;background:#fff;color:var(--be-deep);font-size:13px;line-height:1.4}
textarea{resize:vertical;min-height:74px}
textarea.tall{min-height:160px}
.choice{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border:1px solid var(--be-line);border-radius:11px;margin-bottom:8px;background:#fff;font-size:12px;line-height:1.35}
.choice input{margin-top:2px;flex:0 0 auto}
.choice strong{display:block;color:var(--be-charcoal);font-size:12px}
.choice small{display:block;color:var(--be-muted);margin-top:2px;line-height:1.35}
.inline-checks{display:flex;gap:10px;flex-wrap:wrap}
.inline-checks .choice{margin:0;flex:1;min-width:115px}
.preview-wrap{min-width:0;padding:22px;overflow:auto}
.preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;max-width:210mm;margin:0 auto 10px;color:var(--be-muted);font-size:12px;font-weight:700}
.preview{display:flex;flex-direction:column;gap:18px;align-items:center;min-width:210mm}
.a4-page{width:var(--page-w);height:var(--page-h);position:relative;background:#fff;box-shadow:0 12px 38px rgba(0,0,0,.16);overflow:hidden;flex:0 0 auto}
.letterhead{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none}
.page-body{position:absolute;z-index:1;left:21mm;right:21mm;top:41mm;bottom:43mm;overflow:hidden}
.continuation-page .page-body{top:18mm;bottom:18mm}
.unit{break-inside:avoid;page-break-inside:avoid}
.doc{font-family:Arial,Helvetica,sans-serif;color:#111}
.doc .date{text-align:right;font-size:9.2pt;margin-bottom:3mm}
.doc h1{font-size:16pt;line-height:1.22;margin:0 0 5mm;font-weight:650;color:#23272a}
.doc h2{font-size:11.2pt;line-height:1.28;margin:4.5mm 0 2mm;font-weight:700;color:#23272a}
.doc h3{font-size:10pt;line-height:1.28;margin:3.4mm 0 1.5mm;font-weight:700;color:#23272a}
.doc h4{font-size:9.3pt;line-height:1.25;margin:2.5mm 0 1mm;font-weight:700}
.doc p{font-size:9pt;line-height:1.38;margin:0 0 2.6mm}
.doc ul,.doc ol{margin:1mm 0 2.6mm 5.5mm;padding:0}
.doc li{font-size:8.9pt;line-height:1.34;margin:0 0 1.1mm;padding-left:1mm}
.doc .small{font-size:8.1pt;line-height:1.32}
.doc .muted{color:#6d6660}
.section-bar{font-size:9.2pt;letter-spacing:.8px;background:#eef4f2;padding:1.5mm 2.5mm;border-top:1px solid #bccbc6;border-bottom:1px solid #bccbc6;margin:3mm 0 1.5mm;font-weight:700;text-transform:uppercase}
.line-value{display:inline-block;min-height:4.5mm;border-bottom:1px solid #8b8580;min-width:35mm;vertical-align:bottom;padding:0 .8mm;white-space:pre-wrap}
.form-grid-row{display:grid;border-bottom:1px solid #c7c1bc;min-height:9mm;align-items:stretch}
.form-grid-row.cols-1{grid-template-columns:1fr}
.form-grid-row.cols-2{grid-template-columns:1fr 1fr}
.form-grid-row.cols-3{grid-template-columns:1fr 1fr 1fr}
.form-grid-row.cols-4{grid-template-columns:repeat(4,1fr)}
.form-cell{padding:2.3mm 2.5mm;border-right:1px solid #c7c1bc;font-size:8.8pt;line-height:1.25;min-width:0}
.form-cell:last-child{border-right:0}
.form-cell strong{font-weight:700}
.form-answer{display:block;margin-top:1.4mm;min-height:4.5mm;white-space:pre-wrap;font-weight:500}
.form-answer.multiline{min-height:11mm}
.check-box{display:inline-flex;width:3.5mm;height:3.5mm;border:1px solid #333;align-items:center;justify-content:center;font-size:8pt;line-height:1;margin-right:1.3mm;vertical-align:-.4mm}
.check-box.checked:after{content:'✓';font-weight:900}
.reference-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #c7c1bc;border-left:1px solid #c7c1bc}
.reference-card{border-right:1px solid #c7c1bc;border-bottom:1px solid #c7c1bc;padding:3mm}
.reference-card h3{margin:0 0 2mm}
.reference-line{font-size:8.7pt;border-bottom:1px solid #c7c1bc;padding:1.5mm 0;min-height:7mm}
.answer-block{border-bottom:1px solid #c7c1bc;min-height:12mm;padding:2mm 0;font-size:8.8pt;white-space:pre-wrap}
.kpi-table{width:100%;border-collapse:collapse;margin:1.5mm 0 3mm;table-layout:fixed}
.kpi-table th,.kpi-table td{border:1px solid #bdb7b2;padding:1.8mm;font-size:7.6pt;line-height:1.25;vertical-align:top;overflow-wrap:anywhere}
.kpi-table th{background:#eef4f2;text-align:left;font-weight:700}
.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12mm;margin-top:5mm}
.signature-block{font-size:8.8pt}
.signature-line{border-bottom:1px solid #333;min-height:7mm;margin:1.7mm 0 3mm;white-space:pre-wrap}
.notice{padding:3mm;border:1px solid #cbbfb7;background:#faf8f6;font-size:8.6pt;line-height:1.4;margin:2mm 0}
@media(max-width:1100px){.app{grid-template-columns:1fr}.builder{position:static;height:auto;border-right:0;border-bottom:1px solid var(--be-line)}.preview-wrap{padding:18px 12px}}
@media(max-width:650px){.builder{padding:15px}.grid,.grid.three{grid-template-columns:1fr}.top-actions{flex-direction:column}.preview-heading{align-items:flex-start;flex-direction:column}.inline-checks{flex-direction:column}.inline-checks .choice{width:100%}}
@media print{
  @page{size:A4;margin:0}
  html,body{width:210mm;background:#fff!important;margin:0!important;padding:0!important}
  .builder,.preview-heading{display:none!important}
  .app{display:block!important}
  .preview-wrap{padding:0!important;margin:0!important;overflow:visible!important}
  .preview{display:block!important;margin:0!important;padding:0!important;min-width:0!important}
  .a4-page{width:210mm!important;height:296.5mm!important;box-shadow:none!important;margin:0!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important;break-after:auto!important;page-break-after:auto!important}
  .a4-page + .a4-page{break-before:page!important;page-break-before:always!important}
  .letterhead{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Final document alignment + sticky builder + print stabilisation */
.doc p.auto-numbered{
  display:grid;grid-template-columns:10mm minmax(0,1fr);column-gap:2.4mm;align-items:start;
  margin:0 0 2.6mm!important;text-indent:0!important
}
.doc p.auto-numbered .auto-numbered-prefix{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc p.auto-numbered.auto-level-2{margin-left:8mm!important;grid-template-columns:12mm minmax(0,1fr)}
.doc p.auto-numbered.auto-level-3{margin-left:16mm!important;grid-template-columns:14mm minmax(0,1fr)}
.doc p.auto-numbered.auto-level-4{margin-left:24mm!important;grid-template-columns:16mm minmax(0,1fr)}
.doc p.auto-numbered.auto-alpha-lower{margin-left:10mm!important;grid-template-columns:7mm minmax(0,1fr)}
.doc p.auto-numbered.auto-alpha-upper{grid-template-columns:7mm minmax(0,1fr)}
.doc ul,.doc ol{margin:1.5mm 0 3mm 10mm!important;padding-left:5mm!important}
.doc ul ul,.doc ol ol,.doc ul ol,.doc ol ul{margin-left:6mm!important}
.doc li{padding-left:1.8mm!important;line-height:1.38!important}

@media (min-width:901px) and (max-width:1100px){
  .app{grid-template-columns:360px minmax(0,1fr)!important}
  .builder{position:sticky!important;top:0!important;height:100vh!important;max-height:100vh!important;overflow-y:auto!important;border-right:1px solid var(--be-line)!important;border-bottom:0!important}
  .preview-wrap{padding:18px 12px!important}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr!important}
  .builder{position:static!important;height:auto!important;max-height:none!important;border-right:0!important;border-bottom:1px solid var(--be-line)!important}
}
@media print{
  .a4-page{height:296mm!important;min-height:296mm!important;max-height:296mm!important;page-break-before:auto!important;break-before:auto!important;page-break-after:always!important;break-after:page!important}
  .a4-page:last-child{page-break-after:auto!important;break-after:auto!important}
  .a4-page + .a4-page{page-break-before:auto!important;break-before:auto!important}
}


/* 2026-08-12 review-3: fixed desktop editor + true document hierarchy */
@media screen and (min-width:1101px){
  .app{display:block!important;min-height:100vh!important;padding-left:400px!important}
  .builder{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:400px!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important;z-index:100!important;border-bottom:0!important}
  .preview-wrap{min-height:100vh!important;margin-left:0!important}
}
@media screen and (min-width:901px) and (max-width:1100px){
  .app{display:block!important;min-height:100vh!important;padding-left:360px!important}
  .builder{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:360px!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain!important;z-index:100!important;border-right:1px solid var(--be-line)!important;border-bottom:0!important}
  .preview-wrap{min-height:100vh!important;margin-left:0!important;padding:18px 12px!important}
}
@media screen and (max-width:900px){
  .app{display:block!important;padding-left:0!important}
  .builder{position:static!important;width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important}
}

/* Headings remain on the document margin. Their body copy sits one tab in; lower levels sit progressively farther in. */
.doc .unit.section-has-heading > p,
.doc .unit.section-has-heading > ul,
.doc .unit.section-has-heading > ol,
.doc .unit.section-has-heading > table,
.doc .unit.section-has-heading > .notice,
.doc .unit.section-has-heading > .reference-grid,
.doc .unit.section-has-heading > .signature-grid,
.doc .unit.section-has-heading > .answer-block{
  margin-left:6mm!important;
  max-width:calc(100% - 6mm)!important;
}
.doc .unit.section-following-content{padding-left:6mm!important}
.doc .unit.section-following-content > .section-bar{margin-left:-6mm!important}
.doc p.auto-numbered{grid-template-columns:8mm minmax(0,1fr)!important;column-gap:2.4mm!important}
.doc p.auto-numbered .auto-numbered-prefix{text-align:left!important}
.doc p.auto-numbered .auto-numbered-text{min-width:0!important}
.doc p.auto-numbered.auto-level-1{margin-left:0!important;grid-template-columns:8mm minmax(0,1fr)!important}
.doc p.auto-numbered.auto-level-2{margin-left:7mm!important;grid-template-columns:11mm minmax(0,1fr)!important}
.doc p.auto-numbered.auto-level-3{margin-left:14mm!important;grid-template-columns:14mm minmax(0,1fr)!important}
.doc p.auto-numbered.auto-level-4{margin-left:21mm!important;grid-template-columns:17mm minmax(0,1fr)!important}
.doc p.auto-numbered.auto-alpha-upper{margin-left:0!important;grid-template-columns:7mm minmax(0,1fr)!important}
.doc p.auto-numbered.auto-alpha-lower{margin-left:8mm!important;grid-template-columns:7mm minmax(0,1fr)!important}
.doc ul,.doc ol{padding-left:5mm!important}