/* ===========================================================================
   v2 legal pages — Terms of Service and Privacy Policy.

   Long-form prose, so the job here is readability rather than composition:
   a measure that does not run past ~70 characters, generous line height, and
   clear separation between numbered sections.
   =========================================================================== */

.v2 .legal { padding-top: var(--s-6); }

.v2 .legal-content {
  max-width: 720px;
  margin: 0 auto;
}

/* The draft warning. Amber-family rather than either accent: it is neither a
   brand statement (blue) nor something to click (coral) — it is a caution, and
   giving it its own hue stops it competing with the page's real colour grammar. */
.v2 .legal-banner {
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-5);
  border: 1px solid rgba(228, 168, 84, 0.32);
  border-left-width: 3px;
  border-radius: var(--radius-btn);
  background: rgba(228, 168, 84, 0.09);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}
.v2 .legal-banner strong { color: #e4a854; }

.v2 .legal-title {
  text-align: left;
  margin-bottom: var(--s-2);
}

/* Inline links in legal prose.
   The global reset (`.v2 a { color: inherit; text-decoration: none }`) is right
   for nav items and card links, which are identifiable by position — but inside
   a paragraph it leaves a link indistinguishable from the sentence around it.
   These documents cross-reference each other constantly, so those links must be
   findable. Coral is the site's interactive colour and these are genuinely
   interactive, so this stays within the accent grammar; the underline means the
   link does not depend on colour alone to be recognisable. */
.v2 .legal-content p a,
.v2 .legal-content li a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.v2 .legal-content p a:hover,
.v2 .legal-content li a:hover { text-decoration-thickness: 2px; }

/* The "Last updated" line — the first paragraph after the title. */
.v2 .legal-content > p:first-of-type + h1 + p,
.v2 .legal-content > h1 + p {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: var(--s-5);
}

.v2 .legal-content h2 {
  font-size: 19px;
  font-weight: 600;
  margin: var(--s-5) 0 var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  letter-spacing: -0.01em;
}
/* Sub-sections (6.1, 6.2). Deliberately NO top border: that rule separates whole
   numbered sections, and repeating it inside one would break that reading.
   Smaller and less spaced than h2 so the nesting is legible at a glance. */
.v2 .legal-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-2);
  letter-spacing: -0.01em;
}
/* The first section sits directly under the "Last updated" line, where a rule
   would read as a stray divider rather than a separator between sections. */
.v2 .legal-content h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--s-4);
}

.v2 .legal-content p,
.v2 .legal-content li {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: var(--s-2);
  text-wrap: pretty;
}
.v2 .legal-content ul {
  padding-left: 20px;
  margin-bottom: var(--s-3);
}
.v2 .legal-content li { margin-bottom: 10px; }
.v2 .legal-content li::marker { color: var(--accent-voice); }