/* /terms and /privacy: one stylesheet so the two pages read as one document
   split in half. Owner, 2026-10-19: these pages were a white sheet with blue
   headings and no navbar, so on a dark amber brand they felt like a different
   site. They now sit inside the site's own header, navbar and footer, and every
   color comes from the theme's --cat-* tokens (themes/base.css), which already
   resolve correctly on all 9 themes, light ones included.

   No background art here on purpose: the gallery or glow behind long legal text
   hurts reading, and these are pages people read rather than glance at. */

.legal-page { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; color: var(--cat-text); }

.legal-head { text-align: center; margin: 0 0 32px; }
.legal-head h1 { margin: 0 0 10px; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--cat-text); }
.legal-head .legal-date { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cat-accent) 40%, transparent);
  background: color-mix(in srgb, var(--cat-accent) 12%, transparent); color: var(--cat-text); }
.legal-effective-note { max-width: 560px; margin: 12px auto 0; font-size: 14px; line-height: 1.55; color: var(--cat-dim); }

/* The body text: comfortable line length and spacing for a long read. */
.legal-body { font-size: 16px; line-height: 1.7; color: var(--cat-dim); }
.legal-body h2 { margin: 2.2em 0 .6em; font-size: 1.3rem; line-height: 1.3; font-weight: 700; color: var(--cat-text); }
.legal-body h3 { margin: 1.6em 0 .4em; font-size: 1.05rem; font-weight: 700; color: var(--cat-text); }
.legal-body p { margin: 0 0 1em; }
.legal-body strong { color: var(--cat-text); }
.legal-body ul { margin: 0 0 1em; padding-inline-start: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body a { color: var(--cat-accent); text-decoration: underline; text-underline-offset: 2px; transition: opacity .18s ease; }
.legal-body a:hover { opacity: .8; }

/* The plain-language summary. Deliberately the first thing on the page: a reader
   who stops after this box should still leave with an accurate picture. */
.legal-summary { margin: 0 0 12px; padding: 4px 24px 18px; border-radius: 14px;
  background: var(--cat-surface); border: 1px solid var(--cat-border);
  border-inline-start: 4px solid var(--cat-accent); }
.legal-summary h2 { margin-top: 1.1em; }
.legal-summary li { margin: 10px 0; }

.legal-lang-note { margin-top: 2.5em; padding-top: 1.2em; border-top: 1px solid var(--cat-border); font-size: 14px; color: var(--cat-dim); }

@media (max-width: 560px) {
  .legal-page { padding-top: 32px; }
  .legal-summary { padding: 2px 16px 14px; }
}