/* ------------------------------------------------------------------ *
 * legal.css — shared styling for the static Privacy Policy and Terms
 * pages. Mirrors the app's design tokens (src/style.css) so the legal
 * pages read as part of the same product: brand palette, Plus Jakarta
 * Sans, light/dark theme, flat surfaces.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/static/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/static/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/static/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/static/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root, html.dark {
  --c-bg: 25 26 28;
  --c-surface: 32 34 37;
  --c-fg: 255 255 255;
  --c-muted: 185 187 189;
  --c-subtle: 128 131 134;
  --c-line: 255 255 255;
  --c-primary: 154 212 224;
  --c-fill: 154 212 224;
  --c-fill-fg: 25 26 28;
  --c-accent: 69 157 172;
  --nav-h: 4.5rem;
  color-scheme: dark;
}
html.light {
  --c-bg: 255 255 255;
  --c-surface: 238 238 238;
  --c-fg: 25 26 28;
  --c-muted: 92 95 98;
  --c-subtle: 138 141 144;
  --c-line: 25 26 28;
  --c-primary: 69 157 172;
  --c-fill: 154 212 224;
  --c-fill-fg: 25 26 28;
  --c-accent: 69 157 172;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-fg));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
::selection { background: rgb(var(--c-fill) / .4); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--c-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line) / .2); border-radius: 999px; }
*:focus-visible { outline: 2px solid rgb(var(--c-primary)); outline-offset: 3px; border-radius: 6px; }

html.dark .only-light, html.light .only-dark { display: none; }

/* ---------------------------------------------------------- nav ---- */
.nav {
  position: fixed; inset-inline: 0; top: .75rem; z-index: 50;
  padding: 0 .75rem;
}
.nav-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border: 1px solid rgb(var(--c-line) / .1); border-radius: 999px;
  background: rgb(var(--c-bg) / .92);
  padding: .5rem .5rem .5rem 1.25rem;
  backdrop-filter: blur(10px);
}
.nav-inner img { height: 1.65rem; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: .5rem; }
.btn-back {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px; padding: .5rem 1rem;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  color: rgb(var(--c-fill-fg)); background: rgb(var(--c-fill));
  transition: background-color .2s ease, color .2s ease;
}
.btn-back:hover { background: rgb(var(--c-accent)); color: #fff; }
.btn-icon {
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: rgb(var(--c-fg));
  transition: background-color .2s ease, color .2s ease;
}
.btn-icon:hover { background: rgb(var(--c-surface)); color: rgb(var(--c-primary)); }
.btn-icon svg { height: 1.05rem; width: 1.05rem; }

/* --------------------------------------------------------- shell ---- */
.wrap { max-width: 72rem; margin: 0 auto; padding: calc(var(--nav-h) + 3.5rem) 1.25rem 6rem; }
@media (min-width: 640px) { .wrap { padding-left: 2rem; padding-right: 2rem; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgb(var(--c-line) / .1); border-radius: 999px;
  background: rgb(var(--c-surface)); padding: .25rem .75rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--c-primary));
}
.eyebrow .dot { height: .375rem; width: .375rem; border-radius: 999px; background: rgb(var(--c-fill)); }

.page-title {
  margin-top: 1.5rem;
  font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 700;
  letter-spacing: -.04em; line-height: .98;
}
.updated {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid rgb(var(--c-line) / .1);
  font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(var(--c-subtle));
}

.cols { margin-top: 3.5rem; display: grid; gap: 3rem; }
@media (min-width: 1024px) { .cols { grid-template-columns: 16rem 1fr; gap: 4rem; } }

/* ----------------------------------------------------------- toc ---- */
.toc { display: none; }
@media (min-width: 1024px) {
  .toc { display: block; position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; max-height: calc(100vh - var(--nav-h) - 4rem); overflow-y: auto; }
}
.toc-title {
  font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(var(--c-subtle)); padding-bottom: .75rem; border-bottom: 1px solid rgb(var(--c-line) / .1);
}
.toc a {
  display: block; padding: .5rem 0 .5rem .875rem;
  border-inline-start: 2px solid rgb(var(--c-line) / .1);
  font-size: .8125rem; line-height: 1.4; text-decoration: none;
  color: rgb(var(--c-muted)); transition: color .2s ease, border-color .2s ease;
}
.toc a:first-of-type { margin-top: .75rem; }
.toc a:hover { color: rgb(var(--c-fg)); border-color: rgb(var(--c-line) / .3); }
.toc a.active { color: rgb(var(--c-primary)); border-color: rgb(var(--c-fill)); font-weight: 600; }

/* ------------------------------------------------------- content ---- */
.content { min-width: 0; max-width: 46rem; }
.content > *:first-child { margin-top: 0; }

.content h2 {
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid rgb(var(--c-line) / .1);
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15;
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}
.content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.content h3 {
  margin-top: 2.25rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em;
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}
.content h4 { margin-top: 1.75rem; font-size: 1rem; font-weight: 600; }
.content p, .content li { color: rgb(var(--c-muted)); font-size: 1rem; line-height: 1.75; }
.content p { margin-top: 1rem; }
.content ul, .content ol { margin-top: 1rem; padding-inline-start: 1.25rem; }
.content li { margin-top: .5rem; }
.content li::marker { color: rgb(var(--c-primary)); }
.content strong { color: rgb(var(--c-fg)); font-weight: 600; }
.content em { color: rgb(var(--c-fg)); }
.content a { color: rgb(var(--c-primary)); text-decoration: underline; text-underline-offset: 3px; }
.content a:hover { color: rgb(var(--c-accent)); }
.content hr { margin: 2.5rem 0; border: 0; border-top: 1px solid rgb(var(--c-line) / .1); }
.content blockquote {
  margin-top: 1.25rem; padding: .25rem 0 .25rem 1.25rem;
  border-inline-start: 2px solid rgb(var(--c-fill));
  color: rgb(var(--c-fg));
}
.content code {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .08);
  border-radius: .375rem; padding: .1rem .35rem; font-size: .875em;
}
.content pre { margin-top: 1rem; overflow-x: auto; background: rgb(var(--c-surface)); border-radius: 1rem; padding: 1rem; }
.content pre code { background: none; border: 0; padding: 0; }
.content table { margin-top: 1.5rem; width: 100%; border-collapse: collapse; font-size: .9375rem; }
.content th, .content td { text-align: start; padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--c-line) / .1); }
.content th { font-weight: 700; color: rgb(var(--c-fg)); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.content td { color: rgb(var(--c-muted)); }

/* -------------------------------------------------------- states ---- */
.loading { display: flex; flex-direction: column; align-items: center; padding: 5rem 0; text-align: center; }
.spinner {
  height: 2.5rem; width: 2.5rem; border-radius: 999px;
  border: 2px solid rgb(var(--c-line) / .15); border-top-color: rgb(var(--c-fill));
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { margin-top: 1.25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-subtle)); }
.error { padding: 4rem 0; text-align: center; }
.error strong { display: block; font-size: 1.125rem; margin-bottom: .5rem; }
.error span { color: rgb(var(--c-muted)); }

/* -------------------------------------------------------- footer ---- */
.foot {
  border-top: 1px solid rgb(var(--c-line) / .1);
  padding: 2.5rem 1.25rem;
}
.foot-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .75rem; color: rgb(var(--c-subtle));
}
.foot a { color: rgb(var(--c-subtle)); text-decoration: none; }
.foot a:hover { color: rgb(var(--c-primary)); }
.foot-links { display: flex; gap: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}