/* ═══════════════════════════════════════════════════════════════════════════
   ZOLTRAK — the legal pages
   Shared by terms.html and privacy.html. Deliberately plain: these are pages
   somebody reads when they are worried, and a document that is hard to read is
   a document that looks like it is hiding something.
   ═══════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #06050b;
  color: var(--kn-muted, #b6bac9);
  font: 16px/1.72 var(--kn-font, ui-sans-serif), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap { width: min(760px, 92vw); margin: 0 auto; }

/* ── the bar, matching the landing page ──────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(6, 5, 11, .82);
  box-shadow: inset 0 -1px 0 var(--kn-line, rgba(255,255,255,.07));
}
.top .wrap { width: min(1080px, 92vw); display: flex; align-items: center; gap: 14px;
             padding: 13px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand i {
  width: 25px; height: 25px; flex: none; display: block;
  background: linear-gradient(180deg, var(--z-accent-hi, #a86bff) 0%,
              var(--z-accent-soft, #8b30ef) 42%, var(--z-accent-deep, #5b21b6) 76%,
              var(--z-raised, #1b0d33) 100%);
  -webkit-mask: url("assets/zoltrak-glyph.png") center / contain no-repeat;
          mask: url("assets/zoltrak-glyph.png") center / contain no-repeat;
}
.brand b {
  font-size: 18px; font-weight: 800; letter-spacing: .12em;
  background: var(--z-purple, linear-gradient(180deg, #8b30ef, #1b0d33));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.top nav { margin-left: auto; display: flex; gap: 6px; }
.top nav a { font-size: 13.5px; color: var(--kn-faint, #6f748a); text-decoration: none;
             padding: 8px 11px; border-radius: 9px; }
.top nav a:hover { color: var(--kn-text, #e9ecf5); background: rgba(139,48,239,.14); }

/* ── the document ────────────────────────────────────────────────────────── */
.doc { padding: 56px 0 40px; }
.kicker { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
          text-transform: uppercase; color: var(--kn-faint, #6f748a); }
h1 { margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.14;
     font-weight: 800; letter-spacing: -.02em; color: var(--z-num, #c3c7d6); }
.updated { margin: 0 0 34px; font-size: 13.5px; color: var(--kn-faint, #6f748a); }
.updated b { color: var(--kn-red, #f2554a); font-weight: 700; }

h2 { margin: 38px 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.008em;
     color: var(--kn-text, #e9ecf5); }
p { margin: 0 0 14px; }
b { color: var(--z-num, #c3c7d6); font-weight: 700; }
ul { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 7px; }

/* the part that matters most, given its own weight */
.warn {
  margin: 0 0 34px; padding: 20px 22px; border-radius: 13px;
  background: rgba(242,85,74,.06);
  box-shadow: inset 0 0 0 1px rgba(242,85,74,.28);
}
.warn.ok { background: rgba(46,230,168,.05);
           box-shadow: inset 0 0 0 1px rgba(46,230,168,.24); }
.warn h2 { margin: 0 0 10px; font-size: 16px; }
.warn p:last-child { margin-bottom: 0; }

/* A PLACEHOLDER, not a highlighter. The first version was a block of gold with
   black text on it — loud enough that nobody could ship it by accident, and
   ugly enough that it read as a rendering fault rather than as a note to self.
   Same job, done the way the rest of the app marks an unknown: quiet, outlined,
   and plainly not part of the sentence. */
.todo {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; font-style: italic;
  color: var(--kn-faint, #6f748a);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--kn-line, rgba(255,255,255,.12));
}
.todo::before { content: "to do: "; font-style: normal; opacity: .7; }

.foot-note {
  margin: 40px 0 0; padding: 15px 17px; border-radius: 11px; font-size: 13.5px;
  line-height: 1.65; color: var(--kn-faint, #6f748a);
  background: rgba(255,255,255,.028);
  box-shadow: inset 0 0 0 1px var(--kn-line, rgba(255,255,255,.08));
}
.foot-note b { color: var(--z-num, #c3c7d6); }

footer { margin-top: 40px; padding: 26px 0 40px;
         box-shadow: inset 0 1px 0 var(--kn-line, rgba(255,255,255,.07)); }
footer .wrap { width: min(1080px, 92vw); display: flex; flex-wrap: wrap; gap: 14px;
               align-items: center; font-size: 13px; color: var(--kn-faint, #6f748a); }
footer nav { margin-left: auto; display: flex; gap: 16px; }
footer a { color: var(--kn-faint, #6f748a); text-decoration: none; }
footer a:hover { color: var(--kn-text, #e9ecf5); }

a:focus-visible { outline: 2px solid #c9a2ff; outline-offset: 3px; border-radius: 8px; }