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

   This was a <style> block inside privacy.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.
   ========================================================================== */

/* Seven sections, each opened by a hairline. The spacing lives here rather
     than inline on each of the seven so that the phone can have the rhythm
     core.css gives a .section: 36px of padding over a 44px margin is 80px of
     nothing between two ideas on a screen 780px tall, which is the desk's
     interval seen at a third of the desk's width. */
  .lg-sec { border-top: 1px solid var(--line); padding-top: 36px; margin-top: 44px; }

  @media (max-width: 620px) {
    .lg-sec { padding-top: 22px; 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
       words "Written when", and what it left over was too narrow for the
       values, which then wrapped. Terms of service folds its two tables the
       same way, as do for-investors.html and status.html, so a reader meets one
       idea of a folded row rather than four. */
    .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; }
  }