/* ══════════════════════════════════════════════════════════════════
   LEGAL + ACCESSIBILITY PAGES
   Sept 1, 2026. terms/privacy/accessibility (EN + HE) were the last
   surfaces still painting the retired dark system, and the EN three did
   not load /style.css at all: each carried a full inline copy of the old
   palette (#0b0b14 canvas, #fd9fa0 coral eyebrow, #d96a6b body links,
   #2c2c54 ink). Six inline copies became this one file.

   Two accessibility facts drove the colour choices, measured not guessed:
   the old body link #d96a6b is 3.94:1 on white, under the 4.5:1 floor
   these very pages promise, and the muted #888 "last updated" line is
   3.54:1. Both are now brand tokens at 7.72:1 and 6.7:1.

   Loaded AFTER /style.css so its typography wins on equal specificity,
   the same arrangement blog.css uses.
   ══════════════════════════════════════════════════════════════════ */

.legal-hero {
  background: var(--base);
  border-block-end: 1px solid var(--rule);
  padding: calc(72px + 3.2rem) 1.5rem 2.6rem;
}
.legal-hero-inner {
  max-inline-size: 760px;
  margin-inline: auto;
}
/* One mono row closed with a hairline, the same header shape blog posts
   and coffee editions use, so a reader arriving from either recognises it. */
.legal-hero .eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 1.2rem;
}
[dir="rtl"] .legal-hero .eyebrow { letter-spacing: 0; text-transform: none; font-size: .74rem; }
.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .9rem;
}
.legal-hero > .legal-hero-inner > p {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0;
}
[dir="rtl"] .legal-hero > .legal-hero-inner > p { letter-spacing: 0; text-transform: none; font-size: .78rem; }

.legal-body {
  max-inline-size: 760px;
  margin-inline: auto;
  padding: 3.4rem 1.5rem 6rem;
  color: var(--ink);
}
.legal-body p,
.legal-body li {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--sec);
  margin-block-end: .9rem;
}
.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-block: 3rem 1rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
.legal-body h2:first-of-type { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.legal-body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-block: 1.8rem .6rem;
}
.legal-body ul, .legal-body ol {
  list-style: disc;                 /* the global reset zeroes it */
  padding-inline-start: 1.5rem;
  margin-block-end: .9rem;
}
.legal-body ol { list-style: decimal; }
.legal-body li { margin-block-end: .35rem; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a {
  color: var(--accent);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  transition: color .2s, border-color .2s;
}
.legal-body a:hover { color: var(--accent-2); border-block-end-color: var(--accent-2); }
.legal-body table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 1.6rem;
  font-size: .94rem;
}
.legal-body th, .legal-body td {
  text-align: start;
  padding: .6rem .75rem;
  border-block-end: 1px solid var(--rule);
  vertical-align: top;
  color: var(--sec);
}
.legal-body thead th { color: var(--ink); font-weight: 600; }
.legal-updated {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--pencil);
  margin-block-start: 3.4rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
[dir="rtl"] .legal-updated { letter-spacing: 0; font-size: .78rem; }

@media (max-width: 600px) {
  .legal-hero { padding-block: calc(72px + 2.2rem) 2rem; }
  .legal-body { padding-block: 2.6rem 4rem; }
  .legal-body h2 { font-size: 1.12rem; margin-block: 2.2rem .8rem; padding-block-start: 1.2rem; }
}