/* ============================================================
   KivoClas landing — legal pages (privacy, terms, community,
   delete-account, faq) in the redesign's look. Loaded after site.css.

   🔴 The legal text is not touched: each page's <main> and
   js/i18n-legal.js (which injects EN/ES/RU as HTML) are byte-identical
   to the pre-redesign versions. Both still carry the old Tailwind
   utility class names, so this file gives exactly those names the new
   styling instead of loading the Tailwind CDN. The class names are
   legacy; their values here are the design's, not Tailwind's.
   ============================================================ */

body.legal { background: var(--k-bg); color: var(--k-text); }

/* ---------- header: slim indigo band, brand + language ---------- */
.legal-band { background: radial-gradient(120% 140% at 90% 0%, var(--section-glow), transparent 60%), var(--section); color: var(--n-100); }
.legal-band .nav { min-height: 60px; }
.lang-switch { display: flex; gap: 4px; }
.lang-btn {
  font: inherit; font-size: 15px; font-weight: 500; min-height: 40px; min-width: 44px; padding: 0 10px;
  border-radius: var(--radius-md); border: 1px solid transparent; background: none; color: var(--n-300); cursor: pointer;
}
.lang-btn:hover { color: var(--n-100); }
.lang-btn.active { color: var(--n-100); border-color: var(--section-ghost); background: color-mix(in srgb, var(--n-100) 10%, transparent); }

/* ---------- the article column ---------- */
main.max-w-2xl { max-width: 44rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-6 { padding-left: var(--gutter); padding-right: var(--gutter); }
.pt-16 { padding-top: clamp(32px, 6vw, 56px); }
.pb-8 { padding-bottom: clamp(40px, 7vw, 72px); }
.scroll-mt-16 { scroll-margin-top: 16px; }

/* headings */
main h1.text-2xl { font-size: clamp(30px, 5.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
main h2.text-lg { font-size: clamp(21px, 3vw, 25px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; text-wrap: balance; }
main h3.text-base { font-size: 19px; line-height: 1.3; font-weight: 500; }
.font-bold, .font-semibold { font-weight: 500; }

/* body copy: the old 14px/slate-300 on navy becomes 17px readable ink on light */
.text-sm { font-size: 17px; }
.text-xs { font-size: 15px; }
.leading-relaxed { line-height: 1.65; }
.text-slate-300 { color: var(--n-800); }
.text-slate-400, .text-slate-500 { color: var(--k-muted); }
main strong { font-weight: 600; color: var(--k-text); }
main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  padding: 1px 6px; border-radius: 6px; background: var(--k-alt);
}

/* spacing utilities used by the legal markup */
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 12px; }
.mb-8 { margin-bottom: 36px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }
.mt-6 { margin-top: 28px; }
.mt-8 { margin-top: 44px; }
.mt-10 { margin-top: 52px; }
.p-4 { padding: 20px; }

/* links inside legal text (also injected by i18n-legal.js) */
.text-primary-500 { color: var(--k-accent); }
.hover\:text-primary-400:hover { color: var(--a-800); }
.underline { text-decoration: underline; text-underline-offset: 3px; }

/* lists */
.legal-list { list-style-type: disc; padding-left: 1.4rem; margin: 0; }
.step-list { list-style-type: decimal; padding-left: 1.4rem; margin: 0; }
.legal-list li, .step-list li { margin-bottom: 8px; padding-left: 4px; }
.legal-list li::marker, .step-list li::marker { color: var(--k-accent); }

/* the one boxed note (delete-account) */
.bg-dark-card { background: var(--k-surface); }
.border { border-width: 1px; border-style: solid; }
.border-dark-border { border-color: var(--k-line); }
.rounded-lg { border-radius: var(--radius-lg); }

/* FAQ items: same fading rule as the rest of the site */
.faq-item { padding: 18px 0; background: linear-gradient(to right, transparent, var(--k-line) 48px, var(--k-line) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; }
.faq-item:last-child { background: none; }
.faq-q { font-weight: 500; font-size: 19px; line-height: 1.35; color: var(--k-text); margin-bottom: 8px; }
.faq-a { font-size: 17px; line-height: 1.65; color: var(--n-800); }

/* footer on legal pages: same block as the site, links translated by i18n-legal.js */
.footer { border-top: 1px solid var(--k-line); }