/* =============================================================
   Forward Finance — legal document pages
   Companion to pages/privacy-policy.html (and any future terms /
   policy page). Link order:
       fonts.css → tokens.css → site.css → legal.css

   Long-form reading layout: a narrow measure, generous leading, and
   clear heading hierarchy. Shared chrome (nav, footer, announce bar)
   comes from site.css.
   ============================================================= */

/* compact hero — a title band, not a full marketing hero */
.hero-doc .doc-head { position: relative; z-index: 2; padding: 40px 0 56px; }
.doc-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.doc-meta { font-size: 14.5px; color: var(--fg-2); margin-top: 14px; }


/* -------------------------------------------------------------
   Table of contents
   ------------------------------------------------------------- */
.doc-sec { padding: 64px 0 96px; }

/* Full .wrap width, so the ToC and the document below line up with the nav
   and the footer instead of sitting in a narrower column. */
.doc-toc {
  margin: 0 0 48px;
  padding: 24px 28px;
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.doc-toc h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 14px;
}
/* the list is already numbered in the source headings ("1. PREAMBLE"),
   so no extra counter here */
.doc-toc ol { display: flex; flex-direction: column; gap: 8px; }
.doc-toc a {
  font-size: 14.5px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color .18s;
}
.doc-toc a:hover { color: var(--fw-blue); }


/* -------------------------------------------------------------
   Document body
   ------------------------------------------------------------- */
/* Runs the full .wrap width to match the header. That makes for a long line
   at this font size, so the measure is held back a little by a slightly
   larger type size and generous line-height rather than by a max-width. */
.doc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg-2);
}

/* scroll-margin so anchor jumps from the ToC don't tuck the heading
   under the top of the viewport */
/* 96px, not 24px: the header is sticky now, so a smaller offset lands the
   heading underneath the bar when you jump to it from the ToC. */
.doc h2,
.doc h3 { scroll-margin-top: 96px; }

.doc h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg-1);
  margin: 52px 0 6px;
  padding-top: 26px;
  border-top: 1px solid var(--border-1);
}
.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.doc h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 30px 0 4px;
}

.doc p { margin-top: 14px; }

.doc ul {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* the source document leads its definition-style bullets with a bold label
   ("Visitors: anyone who..."). Same treatment as the table label column:
   weight plus the darker heading ink, so the label reads ahead of the gloss. */
.doc strong { font-weight: 600; color: var(--fg-1); }

.doc ul li { position: relative; padding-left: 20px; }
.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ff-gold);
}

/* callout — a bolded warning the source document sets off as a blockquote
   (e.g. the enforcement notice at the head of "Collateral, margin and
   enforcement"). Reads as a stop sign, not as body copy. */
.doc .doc-callout {
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 3px solid var(--ff-gold);
  border-radius: var(--radius-sm);
  background: var(--neutral-50);
  font-weight: 600;
  color: var(--fg-1);
}

.doc a { color: var(--fw-blue); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--fw-blue-deep); }

/* long email addresses / URLs must not push the column wide on mobile */
.doc { overflow-wrap: break-word; }


/* -------------------------------------------------------------
   Tables (grievance officer details, etc.)
   ------------------------------------------------------------- */
.doc-table-wrap {
  margin-top: 20px;
  overflow-x: auto;                 /* never widens the page */
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc-table th,
.doc-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: top;
}
.doc-table thead th {
  background: var(--neutral-50);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.doc-table tbody tr:last-child td { border-bottom: none; }
.doc-table tbody td:first-child { font-weight: 600; color: var(--fg-1); white-space: nowrap; }


/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1024px) {
  .doc-sec { padding: 52px 0 76px; }
  .hero-doc .doc-head { padding: 32px 0 44px; }
}

@media (max-width: 768px) {
  .doc-sec { padding: 40px 0 56px; }
  .hero-doc .doc-head { padding: 24px 0 36px; }
  .doc-meta { font-size: 13.5px; }

  .doc-toc { padding: 20px; margin-bottom: 36px; border-radius: var(--radius-md); }
  .doc-toc a { font-size: 14px; }

  .doc { font-size: 15px; line-height: 1.7; }
  .doc h2 { margin-top: 40px; padding-top: 22px; }
  .doc h3 { margin-top: 26px; }

  .doc-table th,
  .doc-table td { padding: 10px 13px; font-size: 13.5px; }
  /* the label column can wrap here — nowrap would force a scroll */
  .doc-table tbody td:first-child { white-space: normal; }
}

@media (max-width: 480px) {
  .doc { font-size: 14.5px; }
  .doc h2 { margin-top: 34px; }
}