/* Estatelio — co-agent agreement document + signing form */

.est-doc { background: var(--bone); }
.est-doc__shell { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }

/* --- Masthead ---------------------------------------------------- */
.est-doc__masthead { background: var(--navy); color: var(--bone); padding: 56px 0 52px; }
.est-doc__logo { height: 30px; width: auto; display: block; margin-bottom: 44px; }
.est-doc__kicker {
  margin: 0 0 14px;
  font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--clay-light); font-weight: 600;
}
.est-doc__title {
  margin: 0 0 18px;
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.005em;
  max-width: 22ch;
}
.est-doc__standfirst {
  margin: 0; max-width: 60ch;
  font-size: 16px; line-height: 1.75; color: var(--on-navy-body); font-weight: 300;
}

/* --- Signed banner ------------------------------------------------ */
.est-doc__banner { background: var(--clay); color: var(--bone); }
.est-doc__banner p { margin: 0; padding: 16px 0; font-size: 14.5px; line-height: 1.6; font-weight: 300; }
.est-doc__banner strong { font-weight: 600; }

/* --- Body --------------------------------------------------------- */
.est-doc__body { padding: 56px 0 72px; }

.est-doc__parties {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  margin-bottom: 34px;
}
.est-doc__party { background: var(--bone); padding: 24px 26px; }
.est-doc__partylabel {
  margin: 0 0 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stone); font-weight: 600;
}
.est-doc__partyname { margin: 0 0 8px; font-family: 'Newsreader', Georgia, serif; font-size: 20px; line-height: 1.25; }
.est-doc__partymeta { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-body); font-weight: 300; }

.est-doc__intro {
  margin: 0 0 40px; font-size: 16px; line-height: 1.8;
  color: var(--ink-about); font-weight: 300; max-width: 62ch;
}

/* --- Clauses ------------------------------------------------------ */
.est-doc__clauses { margin: 0; padding: 0; list-style: none; counter-reset: clause; }
.est-doc__clauses > li {
  counter-increment: clause;
  border-top: 1px solid var(--hairline);
  padding: 26px 0 4px;
  display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; align-items: start;
}
.est-doc__clauses > li::before {
  content: counter(clause, decimal-leading-zero);
  font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.1;
  color: var(--clay);
}
.est-doc__clauses h2 {
  grid-column: 2; margin: 0 0 8px;
  font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.25;
}
.est-doc__clauses p {
  grid-column: 2; margin: 0 0 18px; max-width: 60ch;
  font-size: 15.5px; line-height: 1.8; color: var(--ink-about); font-weight: 300;
}
.est-doc__clauses strong { font-weight: 500; color: var(--navy); }

/* --- Signatures ---------------------------------------------------- */
.est-doc__signatures { margin-top: 44px; border-top: 2px solid var(--navy); padding-top: 28px; }
.est-doc__sighead {
  margin: 0 0 22px;
  font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.2;
}
.est-doc__sigrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.est-doc__sigblock { background: var(--bone); padding: 24px 26px; }
.est-doc__countersign { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 300; }
.est-doc__sigimage {
  display: block; width: 100%; max-width: 300px; height: auto;
  border-bottom: 1px solid var(--navy); margin-bottom: 10px;
}
.est-doc__signedname { margin: 0 0 4px; font-family: 'Newsreader', Georgia, serif; font-size: 20px; }
.est-doc__signedmeta { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-body); font-weight: 300; }

.est-doc__record { margin-top: 30px; background: var(--linen); padding: 20px 24px; }
.est-doc__record p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink-body); font-weight: 300; }
.est-doc__record p:last-child { margin: 0; }

/* --- Signing form --------------------------------------------------- */
.est-doc__form { margin-top: 44px; border-top: 2px solid var(--navy); padding-top: 28px; }
.est-doc__formintro { margin: 0 0 26px; font-size: 15.5px; line-height: 1.8; color: var(--ink-body); font-weight: 300; max-width: 56ch; }
.est-doc__error {
  margin: 0 0 22px; padding: 12px 14px;
  border: 1px solid var(--clay); color: var(--clay);
  font-size: 13.5px; line-height: 1.6; font-weight: 300;
}
.est-doc__fields { display: grid; gap: 18px; max-width: 560px; }
.est-doc__field { display: grid; gap: 7px; }
.est-doc__field label, .est-doc__label {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.est-doc__optional { letter-spacing: 0.06em; text-transform: none; color: var(--stone); font-weight: 300; }
.est-doc__field input[type="text"],
.est-doc__field input[type="email"] {
  border: 0; border-bottom: 1px solid var(--field-line); background: transparent;
  padding: 10px 0; font-family: inherit; font-size: 15px; color: var(--navy); outline: none;
}
.est-doc__field input:focus { border-bottom-color: var(--clay); }
.est-doc__field input[readonly] { color: var(--ink-soft); }

.est-doc__pad { border: 1px solid var(--field-line); background: #fff; }
#est-sigpad { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.est-doc__padhint {
  margin: 0; padding: 8px 12px; border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--stone); font-weight: 300;
}
.est-doc__clear {
  justify-self: start; margin-top: 10px;
  background: transparent; border: 1px solid var(--field-line); color: var(--ink-body);
  padding: 9px 16px; font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.est-doc__clear:hover { border-color: var(--clay); color: var(--clay); }

.est-doc__check { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.est-doc__check input { margin-top: 3px; flex: none; }
.est-doc__check span { font-size: 14.5px; line-height: 1.7; color: var(--ink-about); font-weight: 300; }

.est-doc__submit {
  justify-self: start;
  background: var(--navy); color: var(--bone); border: 0; padding: 16px 30px;
  font-family: inherit; font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; cursor: pointer;
  transition: background .2s ease;
}
.est-doc__submit:hover { background: var(--clay); }
.est-doc__note { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--stone); font-weight: 300; max-width: 52ch; }

/* --- Foot ------------------------------------------------------------ */
.est-doc__foot { background: var(--navy); padding: 26px 0 30px; }
.est-doc__foot img { height: 22px; width: auto; display: block; margin-bottom: 12px; }
.est-doc__foot p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--on-navy-soft); font-weight: 300; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 640px) {
  .est-doc__masthead { padding: 40px 0 36px; }
  .est-doc__logo { margin-bottom: 30px; }
  .est-doc__body { padding: 40px 0 52px; }
  .est-doc__clauses > li { grid-template-columns: 40px 1fr; gap: 0 14px; padding-top: 22px; }
  .est-doc__clauses > li::before { font-size: 20px; }
  .est-doc__clauses h2 { font-size: 20px; }
  #est-sigpad { height: 150px; }
}

/* --- Print: the signed copy should print as a clean document --------- */
@media print {
  .est-doc__masthead, .est-doc__foot { background: #fff !important; color: var(--navy) !important; }
  .est-doc__masthead .est-doc__logo, .est-doc__foot img { filter: invert(1) grayscale(1); }
  .est-doc__kicker { color: var(--clay) !important; }
  .est-doc__standfirst, .est-doc__foot p { color: var(--ink-body) !important; }
  .est-doc__banner, .est-doc__form { display: none !important; }
  .est-doc__clauses > li { break-inside: avoid; }
  .est-doc__signatures { break-inside: avoid; }
}

/* --- PDF download ---------------------------------------------------- */
.est-doc__actions { margin: 28px 0 0; }
.est-doc__download {
  display: inline-block; background: var(--navy); color: var(--bone);
  padding: 14px 26px; font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; transition: background .2s ease;
}
.est-doc__download:hover { background: var(--clay); color: var(--bone); }
@media print { .est-doc__actions { display: none !important; } }