/* =============================================================
   Forward Finance — LSP / DLA disclosure page
   Companion to pages/lsps-and-dlas.html. Link order:
       fonts.css → tokens.css → site.css → legal.css → partners.css

   The page is a regulatory disclosure, so it borrows the legal-page
   reading shell (.hero-doc, .doc-head, .doc) from legal.css and adds
   only what the two disclosure tables need: a wide five-column grid
   whose last column holds a small labelled record rather than a
   single value, and a card fallback for narrow screens.
   ============================================================= */

/* -------------------------------------------------------------
   Document head
   The hero carries the page title, so the body opens with the
   revision date. legal.css zeroes the rule above the first h2 only
   when that h2 is the article's first child - the date line
   displaces it, so the same reset is repeated here.
   ------------------------------------------------------------- */
.doc > .doc-meta:first-child { margin-top: 0; }
.doc > .doc-meta:first-child + h2 {
  margin-top: 26px;
  padding-top: 0;
  border-top: none;
}


/* -------------------------------------------------------------
   Disclosure table
   Wider and denser than .doc-table: five columns, and the last one
   carries a multi-line record. Header ink is the deep gold so the
   column names read as labels, not as body copy.
   ------------------------------------------------------------- */
.lsp-table-wrap {
  margin-top: 24px;
  overflow-x: auto;                 /* the grid scrolls, never the page */
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
}
.lsp-table {
  width: 100%;
  min-width: 940px;                 /* below this the columns collapse to cards */
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.65;
}
.lsp-table th,
.lsp-table td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-1);
  border-right: 1px solid var(--border-1);
  vertical-align: top;
  color: var(--fg-2);
}
.lsp-table th:last-child,
.lsp-table td:last-child { border-right: none; }
.lsp-table tbody tr:last-child td { border-bottom: none; }

.lsp-table thead th {
  background: var(--neutral-50);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  line-height: 1.45;
}

/* Column widths: Sr No. stays tight, the record column takes the slack.
   The RE table has one column fewer than the LSP table, so it hands the
   spare width to the DLA-name column rather than to the record. */
.lsp-table col.c-sr    { width: 82px; }
.lsp-table col.c-name  { width: 17%; }
.lsp-table col.c-mid   { width: 15%; }
.lsp-table col.c-dla   { width: 14%; }

/* the column name is two words and reads as one line at every table width */
.lsp-table thead th:first-child { white-space: nowrap; }

.lsp-table td.sr { font-weight: 600; color: var(--fg-1); }
.lsp-table td.name { font-weight: 600; color: var(--fg-1); }

/* the LSP is known by its brand, but the disclosure must also carry the
   registered legal entity name — set smaller, under the brand */
.lsp-table td.name .legal-name {
  display: inline-block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 13px;
  color: var(--fg-2);
}

/* numbered lists inside a cell ("1. Customer acquisition") — the source
   disclosure numbers them, so they are a real <ol>, not typed-in digits */
.lsp-table ol.cell-list {
  list-style: decimal;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lsp-table ol.cell-list li::marker { color: var(--fg-3); }

.lsp-table a { color: var(--fw-blue); text-decoration: underline; text-underline-offset: 2px; }
.lsp-table a:hover { color: var(--fw-blue-deep); }
.lsp-table { overflow-wrap: break-word; }


/* -------------------------------------------------------------
   The record column — label + value rows, spaced apart so the
   address, contact and link blocks stay scannable.
   ------------------------------------------------------------- */
.rec { display: flex; flex-direction: column; gap: 13px; }
.rec > div { margin: 0; }
.rec b {
  font-weight: 600;
  color: var(--fg-1);
}
.rec address { font-style: normal; }


/* =============================================================
   Responsive — under the table's min-width the rows become cards,
   each cell carrying its column name as a label. Cheaper to read
   than a 940px horizontal scroll on a phone.
   ============================================================= */
@media (max-width: 900px) {
  .lsp-table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
    background: none;
  }
  .lsp-table,
  .lsp-table tbody,
  .lsp-table tr,
  .lsp-table td { display: block; width: auto; }
  .lsp-table { min-width: 0; }
  .lsp-table colgroup,
  .lsp-table thead { display: none; }

  .lsp-table tbody tr {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    padding: 4px 0;
    margin-bottom: 18px;
  }
  .lsp-table tbody tr:last-child { margin-bottom: 0; }

  .lsp-table td {
    border-right: none;
    padding: 14px 16px;
  }
  .lsp-table tbody tr td:last-child { border-bottom: none; }

  /* the column name, repeated per cell */
  .lsp-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 6px;
  }
  /* Sr No. reads as the card's header strip, label and value on one line */
  .lsp-table td.sr {
    display: flex;
    gap: 8px;
    align-items: baseline;
    background: var(--neutral-50);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: 13.5px;
  }
  .lsp-table td.sr::before { margin-bottom: 0; }
}

@media (max-width: 768px) {
  .lsp-table { font-size: 14px; }
  .lsp-table td { padding: 13px 14px; }
}