/* Curioso — shared styles for legal pages (privacy, terms, legal notice).
   Uses design-system tokens with safe fallbacks; no JS/React runtime needed. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-950, #0a0a14);
  color: var(--text-100, #f5f4fb);
  font-family: var(--font-body, 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }
a { color: var(--gold-300, #ffdf8a); }

header.site { border-bottom: 1px solid rgba(139,107,240,0.18); padding: 20px 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { height: 34px; display: block; filter: drop-shadow(0 0 12px rgba(245,198,91,0.3)); }
.home { font-family: var(--font-body, sans-serif); font-weight: 700; font-size: 14px; text-decoration: none; color: var(--text-400, #a7a3c4); }
.home:hover { color: var(--gold-300, #ffdf8a); }

main { padding: 42px 0 84px; }
h1 { font-family: var(--font-display, 'Baloo 2', sans-serif); font-weight: 800; font-size: clamp(30px, 5vw, 44px); color: #ffffff; margin: 0 0 6px; letter-spacing: -0.01em; }
.updated { color: var(--text-400, #a7a3c4); font-size: 14px; margin: 0; }
.note { background: rgba(139,107,240,0.12); border: 1px solid rgba(139,107,240,0.3); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; color: var(--text-400, #a7a3c4); margin: 20px 0 32px; }
h2 { font-family: var(--font-display, 'Baloo 2', sans-serif); font-weight: 700; font-size: 22px; color: var(--gold-300, #ffdf8a); margin: 38px 0 10px; }
h3 { font-size: 17px; color: #fff; margin: 22px 0 6px; }
p, li { color: #d8d5e8; font-size: 16px; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
strong { color: #fff; }
mark.ph { background: rgba(245,198,91,0.18); color: var(--gold-300, #ffdf8a); border-radius: 4px; padding: 0 5px; font-style: normal; font-weight: 700; }

footer.site { border-top: 1px solid rgba(139,107,240,0.18); padding: 28px 0; text-align: center; color: var(--text-400, #a7a3c4); font-size: 13px; }
footer.site a { color: var(--text-400, #a7a3c4); text-decoration: none; margin: 0 6px; }
footer.site a:hover { color: var(--gold-300, #ffdf8a); }