/* ============================================================
   UNTANGLED — legal pages (Terms of Service, Privacy Policy)
   Reuses theme.css tokens; adds a readable article layout.
   ============================================================ */

/* theme.css hides the cursor for the custom-cursor JS, which the legal pages
   don't load — restore a normal one so text is easy to read and select. */
@media (pointer: fine) {
  * { cursor: auto !important; }
  a, button { cursor: pointer !important; }
}

.legal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1080px; margin: 0 auto; padding: 20px clamp(18px, 4vw, 28px);
}
.legal-brand { display: flex; align-items: center; gap: 11px; }
.legal-brand .ring { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.legal-brand .core { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: var(--glow-led); }
.legal-brand b { font-family: var(--font-display); font-weight: 900; letter-spacing: .2em; font-size: .9rem; }
.legal-links { display: flex; gap: clamp(14px, 3vw, 22px); }
.legal-links a {
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); transition: color .3s var(--ease);
}
.legal-links a:hover, .legal-links a.on { color: var(--white); }

.legal-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }

.legal-article { max-width: 820px; margin: 0 auto; padding: 34px clamp(18px, 4vw, 32px) 80px; }
.legal-article h1 {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.7rem);
  letter-spacing: .02em; color: #fff; text-shadow: 0 0 26px rgba(255,255,255,.16); line-height: 1.1;
}
.legal-meta { color: var(--dim); font-size: .82rem; margin-top: 12px; letter-spacing: .02em; }
.legal-intro { color: var(--muted); font-size: 1.02rem; line-height: 1.72; margin-top: 20px; }

.legal-article h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em;
  color: var(--white); margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal-article h2 .n { color: var(--dim); margin-right: 9px; font-variant-numeric: tabular-nums; }
.legal-article p { color: var(--muted); line-height: 1.74; margin-top: 12px; font-size: .95rem; text-wrap: pretty; }
.legal-article ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* Hanging indent, NOT flex: a flex <li> would split the bold <b> label into its
   own column and rag the text. This keeps the label inline with its sentence. */
.legal-article li { position: relative; padding-left: 22px; color: var(--muted); line-height: 1.68; font-size: .93rem; }
.legal-article li::before { content: '▸'; position: absolute; left: 2px; top: 0; color: var(--dim); }
.legal-article a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.legal-article b, .legal-article strong { color: var(--white); font-weight: 600; }

.legal-callout {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  color: var(--muted); font-size: .9rem; line-height: 1.66;
}
.legal-callout::before { content: ''; }

.legal-foot {
  border-top: 1px solid var(--line); max-width: 1080px; margin: 0 auto;
  padding: 26px clamp(18px, 4vw, 32px) 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.legal-foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.legal-foot-links a {
  font-family: var(--font-display); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  transition: color .3s var(--ease);
}
.legal-foot-links a:hover { color: var(--white); }
.legal-foot .note { font-size: .76rem; color: var(--dim); }