/* ==========================================================================
   The terms page: the long-document rules it shares with privacy.

   This was a <style> block inside terms.html — 2 KB of page-local rules, and
   of commentary about them, in the markup of every response. It is the same CSS
   in the same order; what changed is that a reader who opens the page source
   sees the page rather than a stylesheet, and a browser that has been here
   before does not fetch these rules again.
   ========================================================================== */

/* Fourteen numbered sections, each opened by a rule carrying its number. The
     margin lives here rather than inline on each of the fourteen so that the
     phone can have the rhythm core.css gives a .section — 26px, not the desk's
     38 — which over fourteen sections is a fifth of a screen. */
  .lg-sechead { margin: 38px 0 12px; }

  @media (max-width: 620px) {
    .lg-sechead { margin-top: 26px; }

    .card > .tbl.lg-fold { display: block; overflow-x: visible; white-space: normal; }
    .lg-fold thead { display: none; }
    .lg-fold tbody, .lg-fold tr, .lg-fold td { display: block; }
    .lg-fold tbody tr { padding: 11px 14px; border-bottom: 1px solid var(--line); }
    .lg-fold tbody tr:last-child { border-bottom: 0; }
    .lg-fold tbody td { border: 0; padding: 0; vertical-align: baseline; }
    /* a cell with no label is the row's own name */
    .lg-fold tbody td:not([data-l]) {
      font-size: 14.5px; font-weight: 550; letter-spacing: -.012em; color: var(--ink);
    }
    /* The label sits at the left of the value's own line instead of holding a
       118px column of its own: a third of a 358px screen was being spent on the
       word "Amount", and what it left over was too narrow for the values, which
       then wrapped. This is the shape the folded tables on for-investors.html and
       status.html already use, so a reader meets one idea of a folded row
       rather than three. */
    .lg-fold tbody td[data-l] {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 8px 14px; margin-top: 3px; line-height: 1.45;
    }
    .lg-fold tbody td[data-l]::before {
      content: attr(data-l); flex: none;
      font: 500 12px/1.45 var(--mono); color: var(--ink-3);
    }
    .lg-fold tbody td[data-l] > * { min-width: 0; }
    .lg-fold tbody td.r, .lg-fold tbody td[data-l] { text-align: right; }
    .lg-fold tbody td:not([data-l]) { text-align: left; }
  }