/* Legal pages as long-form reading, Arc-style (piece 24, 2026-10-29).
 *
 * /terms, /privacy, /disclaimer and /cookie-policy: one 68ch column, 16px
 * body at 1.6, ragged right (no justification), headings in sentence-case
 * styling at weight 500 (the text itself is the legal text and stays as
 * written, including the conspicuous capitals the law asks for), meta in
 * secondary ink. Articles carry .arc-prose; .legal-doc and .cookie-policy
 * keep their own hooks for the landing's paper sheet (out of scope, D7).
 *
 * Loaded through base.html's g-public slot. Tokens: arc_tokens.css only.
 */

html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose {
  box-sizing: border-box;
  max-width: calc(68ch + 2 * var(--arc-space-6));
  margin: var(--arc-space-8) auto 96px;
  padding: 0 var(--arc-space-6);
  color: var(--arc-foreground);
  font-size: var(--arc-text-lg);
  line-height: 1.6;
  letter-spacing: var(--arc-tracking);
  text-wrap: pretty;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose > :is(header, section) { margin: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose h1 {
  margin: 0 0 var(--arc-space-2);
  color: var(--arc-foreground);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: var(--arc-weight-strong);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-transform: none;
  text-wrap: balance;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose :is(.legal-meta, h1 + .dim) {
  margin: 0 0 var(--arc-space-2);
  color: var(--arc-text-secondary);
  font-family: inherit;
  font-size: var(--arc-text-sm);
  line-height: 1.5;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-head,
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose h1 + .dim {
  max-width: none;
  margin-bottom: var(--arc-space-8);
  padding-bottom: var(--arc-space-6);
  border-bottom: 1px solid var(--arc-border);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-head .legal-meta:last-child { margin-bottom: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-notice { color: var(--arc-text-muted); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-section { margin: 0 0 var(--arc-space-8); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose h2 {
  margin: 40px 0 var(--arc-space-3);
  color: var(--arc-foreground);
  font-size: var(--arc-text-title);
  font-weight: var(--arc-weight-strong);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-transform: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-section > h2:first-child { margin-top: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose :is(h3, h4) {
  margin: var(--arc-space-6) 0 var(--arc-space-2);
  color: var(--arc-foreground);
  font-size: var(--arc-text-lg);
  font-weight: var(--arc-weight-strong);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose :is(p, li) {
  max-width: 68ch;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-lg);
  line-height: 1.6;
  text-align: left;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose p { margin: 0 0 var(--arc-space-4); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose :is(strong, b) {
  color: var(--arc-foreground);
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose :is(ul, ol) {
  margin: 0 0 var(--arc-space-4);
  padding-left: 1.4em;
  border: 0;
  list-style: revert;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose li {
  margin: 0 0 var(--arc-space-2);
  padding: 0 0 0 2px;
  border: 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose li::marker { color: var(--arc-text-muted); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose a {
  color: var(--arc-foreground);
  text-decoration: underline;
  text-decoration-color: var(--arc-border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose a:hover { text-decoration-color: currentColor; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose code {
  padding: 1px 6px;
  border-radius: var(--arc-radius-chip);
  background: var(--arc-surface-muted);
  color: var(--arc-foreground);
  font-size: 0.875em;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-allcaps,
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-preamble p {
  font-size: var(--arc-text-md);
  letter-spacing: 0;
  text-align: left;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .legal-ack p {
  padding: var(--arc-space-4) 0;
  border-top: 1px solid var(--arc-border);
  border-bottom: 1px solid var(--arc-border);
  color: var(--arc-foreground);
  font-weight: var(--arc-weight-strong);
  text-align: left;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose .cookie-prefs-link {
  color: var(--arc-foreground);
  font-size: inherit;
}
@media (max-width: 560px) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose {
    margin-top: var(--arc-space-6);
    padding: 0 var(--arc-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) article.arc-prose a { transition: none; }
}