/* The one-document pages, layered on /guides/guides.css.
 *
 * guides.css already carries the palette, the header, the footer, .btn, .cta
 * and .related, and it mirrors src/ui/foundations/tokens.css rather than
 * importing it (these pages must render with no JS and no build step). This
 * file adds only what a document page has that a guide does not: the price
 * line, the per-state signing blocks, the card grid on the index, and the
 * email box.
 *
 * The specificity gotcha documented in guides.css applies here too:
 * `.site-header nav a` (0,1,2) outranks `.btn` (0,1,0), which is why the
 * header CTA needs `nav a.btn`. Do not add a plain `.btn` override here
 * expecting it to win.
 */

.doc-price {
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
}
.doc-credit {
  margin: 0 0 2rem;
  color: var(--ink-faint);
  font-size: 0.9375rem;
}

.doc-meta { color: var(--ink-faint); font-size: 0.9375rem; }
.doc-cite { color: var(--ink-faint); font-size: 0.875rem; margin-top: -0.5rem; }

/* Said where the code genuinely has no state-specific rule promoted into the
 * Signing Center. It is a visible admission on purpose: guessing a witness
 * count would be the one failure this whole surface exists to avoid. */
.doc-advisory {
  background: var(--brass-pale);
  border-left: 3px solid var(--brass);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: #5c4a2a;
}

main h3[id^='signing-'] {
  border-top: 1px solid var(--hair);
  padding-top: 1.25rem;
  margin-top: 2rem;
}
main h4 { margin: 1.5rem 0 0.375rem; font-size: 1rem; }

/* ---------- index cards ---------- */

.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2.5rem;
}
.doc-card {
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
.doc-card:hover { border-color: var(--evergreen); }
.doc-card h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--evergreen-deep); }
.doc-card p { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); }
.doc-card-price { font-weight: 600; color: var(--ink) !important; margin-bottom: 0 !important; }

/* ---------- the email box ---------- */

.doc-lead {
  background: var(--evergreen-soft);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 2.5rem 0;
}
.doc-lead h2 { margin-top: 0; font-size: 1.1875rem; }
.doc-lead-field { display: block; font-size: 0.9375rem; margin: 1rem 0 0.75rem; }
.doc-lead-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--paper-card);
  font: inherit;
  color: var(--ink);
}
.doc-lead-consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.doc-lead-consent input { margin-top: 0.2rem; }
.doc-lead-status:empty { display: none; }
.doc-lead-status { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--evergreen-deep); }
.doc-lead-status[data-state='error'] { color: #8a2f2f; }