/* ============================================================
   legal.css — privacy.html and terms.html

   TWO PAGES, ONE STYLESHEET, and that is the whole reason this file
   exists. Both pages had their own <style> block carrying the same
   forty lines, which is two chances to change a measure and one chance
   to remember. They are the same kind of page and they now read from
   the same rules.

   These pages were left out of the redesign and kept a look of their
   own. They now load what every other page loads — fonts.css, base.css
   — plus landing.css, for the nav, the footer, the eyebrow and the
   rule. What is left here is only what a LONG READING PAGE needs and
   the landing page does not.

   THE MEASURE IS THE DESIGN. A privacy policy is read top to bottom by
   someone who would rather not be reading it, so the column is 65ch and
   the leading is 1.75. Everything else follows from that: headings sized
   to interrupt a column of that width rather than a hero, and tables
   that stay legible when the column is narrower than they are.

   SPECIFICITY IS DELIBERATE. landing.css sets `.lp h2` at 0-1-1, which
   would beat a plain `.legal h2`, so the scope is written in: `.lp
   .legal h2` is 0-2-1 and wins wherever the two files load. This is the
   v152 lesson written down — a default that outranks the rule meant to
   override it is a rule that silently never applied.

   NO GRADIENT AND NO ITALIC. One ground, from .warm-bg, and Lora's
   roman only.
   ============================================================ */

/* ---------- the column ----------
   .lp-wrap gives the page gutter; this gives the measure inside it. */
.legal-wrap { max-width: 65ch; margin-inline: auto; padding: 3.5rem 0 4.5rem; }
/* (v247) The reading lines themselves at most ~70 characters (BDA): 65ch of
   Lora held about 85. The tables keep the column's width. */
.legal p, .legal li { max-width: 50ch; }

/* ---------- the document ---------- */
.lp .legal h1 { font-size: clamp(2rem, 4.2vw, 2.6rem); line-height: 1.15; }
.lp .legal h2 {
  font-size: 1.32rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
}
.legal p, .legal li, .legal td, .legal th { color: var(--ink-soft); line-height: 1.75; }
.legal p { margin: 0 0 1.15rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--rust-deep); }
.legal a:hover { color: var(--rust); }

/* The date under the rule. Quiet, and the figure face, because it is a
   figure — same rule the landing page follows for its price. */
.legal-updated {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 0 2.2rem;
}

/* ---------- lists ---------- */
.legal ul { margin: 0 0 1.15rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.6rem; }

/* ---------- tables ----------
   A CARD, because it leaves the ground: one ground means a surface that
   is not the page carries a border to say so. --cream-2 is the field
   surface, eight points above the ground, which is what every other
   raised block in the app sits at.

   The wrapper scrolls, not the table, so a narrow phone slides the
   columns sideways instead of crushing the words in them. */
.legal-table { overflow-x: auto; margin: 0 0 1.6rem; }
.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: var(--cream-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 0.95rem;
}
.legal th, .legal td { text-align: left; padding: 0.7rem 0.9rem; vertical-align: top; }
.legal th {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
}
.legal tbody tr + tr td { border-top: 1px solid var(--line); }

@media (max-width: 560px) {
  .legal-wrap { padding: 2.5rem 0 3.5rem; }
  .lp .legal h2 { margin-top: 2.1rem; }
}