/* ==========================================================================
   Policy pages: About, Privacy, Terms, Contact.
   --------------------------------------------------------------------------
   Optimised for being read, by a human reviewer and by a crawler. One column,
   generous line height, a measure that stops around 76 characters. No cards,
   no columns, nothing that turns a policy into a marketing page.
   Built entirely on the existing tokens, so a rebrand carries through.
   ========================================================================== */

.legal { min-height: var(--app-min-h); display: flex; flex-direction: column; background: var(--paper); }

.legal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.legal__home { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.legal__nav { display: flex; gap: 18px; flex-wrap: wrap; }
.legal__nav a { font-size: 0.8125rem; color: var(--text-2); text-decoration: none; }
.legal__nav a:hover { color: var(--text); text-decoration: underline; }
.legal__nav a[aria-current='page'] { color: var(--pine-deep); font-weight: 600; }

/* 76ch is the measure. Long enough not to feel cramped, short enough that a
   reviewer skimming for the Limited Use paragraph can actually find it. */
.legal__body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 76ch;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 32px) 72px;
}
.legal__body h1 { font-size: clamp(1.5rem, 3.6vw, 2rem); letter-spacing: -0.03em; margin-bottom: 10px; }
.legal__body h2 {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal__body p { font-size: 0.9375rem; line-height: 1.75; color: var(--text-2); margin-bottom: 14px; }
.legal__body p b, .legal__body li b { color: var(--text); font-weight: 600; }
.legal__body a { color: var(--pine-deep); }
.legal__body code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--paper-3);
  overflow-wrap: anywhere;
}

.legal__lede { font-size: 1.0625rem !important; color: var(--text-2); margin-bottom: 8px !important; }
.legal__stamp { font-size: 0.75rem !important; color: var(--text-3); margin-bottom: 28px !important; }

/* Pulled out visually because these are the paragraphs a reviewer looks for. */
.legal__note {
  padding: 14px 16px;
  border: 1px solid var(--pine-line);
  border-radius: var(--r-md);
  background: var(--pine-soft);
  font-size: 0.875rem !important;
  line-height: 1.65;
  margin: 20px 0 !important;
}

.legal__list { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.legal__list li { font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); margin-bottom: 8px; }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.legal__table th,
.legal__table td { text-align: left; padding: 10px 13px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.legal__table tr:first-child th { border-top: none; background: var(--paper-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.legal__table th { width: 34%; color: var(--text); font-weight: 600; }
.legal__table td { color: var(--text-2); }

.legal__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 24px clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 0.8125rem;
  flex-wrap: wrap;
}
.legal__foot > div { display: grid; gap: 3px; }
.legal__foot b { font-weight: 600; }
.legal__foot span, .legal__foot a { color: var(--text-3); }
.legal__foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.legal__foot nav a { color: var(--text-2); text-decoration: none; }
.legal__foot nav a:hover { text-decoration: underline; }

/* Homepage policy footer. Small on purpose: it must be present and clickable,
   not compete with the audit form above it. */
.sitefoot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 28px clamp(20px, 5vw, 48px);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  flex-wrap: wrap;
}
.sitefoot__brand { display: grid; gap: 4px; max-width: 52ch; }
.sitefoot__brand b { font-weight: 600; }
.sitefoot__brand span { color: var(--text-3); line-height: 1.55; }
.sitefoot__nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sitefoot__nav a { color: var(--text-2); text-decoration: none; }
.sitefoot__nav a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 640px) {
  .legal__table th, .legal__table td { display: block; width: auto; }
  .legal__table td { border-top: none; padding-top: 0; }
  .legal__foot, .sitefoot { flex-direction: column; }
}

@media print {
  .legal__top, .legal__foot { display: none; }
  .legal__body { max-width: none; padding: 0; }
}