/* ============================================================
   QuestLock — Legal pages stylesheet
   Self-contained. Matches the QuestLock brand palette.
   ============================================================ */

:root{
  --bg:        #eceef8;
  --bg-soft:   #f4f5fb;
  --card:      #ffffff;
  --line:      #e6e7f2;
  --ink:       #181a37;
  --ink-2:     #3b3e63;
  --ink-soft:  #6b6e8f;
  --ink-faint: #9a9cb8;
  --violet:      #6d4bf0;
  --violet-deep: #4a2fc0;
  --violet-wash: #efeafe;
  --orange-wash: #fff0dd;
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 32px;
  --shadow-sm: 0 2px 8px rgba(24,26,55,.05), 0 1px 2px rgba(24,26,55,.04);
  --shadow:    0 18px 40px -18px rgba(24,26,55,.22), 0 4px 12px rgba(24,26,55,.05);
  --maxw: 820px;
  --font-display: "Baloo 2", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a{ color:var(--violet-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(236,238,248,.85);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:20px;
  color:var(--ink);
}
.brand .mark{
  width:30px; height:30px; color:var(--violet);
  display:inline-flex;
}
.brand .mark svg{ width:100%; height:100%; }
.nav-back{
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--violet-deep);
  padding:8px 16px; border-radius:999px;
  background:var(--violet-wash);
}
.nav-right{ display:flex; align-items:center; gap:16px; }
.lang-switch{
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--ink-faint);
}
.lang-switch a{ color:var(--violet-deep); }
.lang-switch strong{ color:var(--ink); }

/* ---------- doc body ---------- */
.doc{
  max-width:var(--maxw); margin:0 auto; padding:56px 24px 96px;
}
.doc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:48px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700;
  font-size:12px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--violet-deep);
  background:var(--violet-wash);
  padding:6px 13px; border-radius:999px;
}
h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,5vw,42px); line-height:1.08;
  color:var(--ink); margin:18px 0 10px; letter-spacing:-.01em;
}
.meta{
  color:var(--ink-faint); font-size:14px; margin:0 0 8px;
}
h2{
  font-family:var(--font-display); font-weight:800;
  font-size:23px; color:var(--ink);
  margin:42px 0 14px; line-height:1.2;
}
h3{
  font-family:var(--font-display); font-weight:700;
  font-size:17px; color:var(--ink-2);
  margin:26px 0 10px;
}
p{ margin:0 0 16px; font-size:16px; }
ul,ol{ margin:0 0 16px; padding-left:22px; }
li{ margin:0 0 8px; font-size:16px; }
strong{ color:var(--ink); font-weight:700; }
hr{
  border:none; border-top:1px solid var(--line); margin:40px 0;
}

/* tables */
.tbl-wrap{ overflow-x:auto; margin:0 0 20px; }
table{
  border-collapse:collapse; width:100%; font-size:14.5px;
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
}
th,td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{
  background:var(--bg-soft); font-family:var(--font-display);
  font-weight:700; color:var(--ink); font-size:13px;
  text-transform:uppercase; letter-spacing:.04em;
}
tr:last-child td{ border-bottom:none; }

/* callout */
.note{
  background:var(--orange-wash);
  border:1px solid #ffd9a8;
  border-radius:var(--r-sm);
  padding:16px 18px; margin:0 0 20px;
  font-size:15px; color:#7a4a10;
}
.note strong{ color:#7a4a10; }

/* footer */
.legal-footer{
  max-width:var(--maxw); margin:0 auto; padding:0 24px 64px;
  text-align:center; color:var(--ink-faint); font-size:14px;
}
.legal-footer a{ color:var(--ink-soft); }
.legal-footer .links{ margin-bottom:12px; }
.legal-footer .links a{ margin:0 10px; }

@media (max-width:640px){
  .doc-card{ padding:28px 22px; }
  h1{ font-size:30px; }
}