/*
  Upspace 3.0, for the standalone legal pages (/terms, /privacy — also legal.getupspace.com).
  Loaded after each page's own <style>, so it restyles without touching a word of the text:
  black ground, Upspace's still glow rising from the foot, the Upspace header and footer, glass cards.
  Shaun, Oct 2026.
*/
:root {
  --ground: #000000;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.06);
  --ink: #F6F6F6;
  --muted: #A9A8AD;
  --rule: rgba(255, 255, 255, 0.1);
  --accent: #F20950;
  --violet: #9747FF;
}

body { background: #000; }

/* Upspace's glow: still, at the foot of the page, shining up — as on /supra. */
body::before {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 70vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 85% at 50% 100%, rgba(242, 9, 80, 0.42) 0%, rgba(214, 16, 120, 0.24) 30%, rgba(137, 9, 242, 0.14) 55%, rgba(137, 9, 242, 0) 78%);
}
/* …and a softer one behind the title. */
body::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(900px, 120vw); height: 520px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(151, 71, 255, 0.22), rgba(242, 9, 80, 0.08) 55%, transparent 80%);
}

/* The header: Upspace, and the pages that go together. */
.up-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.up-header .in { max-width: 1120px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.up-header img { height: 28px; width: auto; display: block; }
.up-header nav { display: flex; align-items: center; gap: 6px; }
.up-header nav a {
  font-family: Nunito, sans-serif; font-weight: 700; font-size: 14px;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
}
.up-header nav a:hover { color: #fff; }
.up-header nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.1); }
.up-header nav a.cta { color: #fff; background: rgba(242, 9, 80, 0.24); border: 1.5px solid var(--accent); margin-left: 6px; }
@media (max-width: 620px) { .up-header nav a:not(.cta):not([aria-current="page"]) { display: none; } }

.wrap { padding-top: 56px; }

/* The eyebrow over the title: a pill. */
.brand {
  display: inline-block;
  font-family: Nunito, sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: 0.18em;
  color: #C9A4FF;
  background: rgba(151, 71, 255, 0.14);
  border: 1px solid rgba(151, 71, 255, 0.35);
  padding: 5px 12px; border-radius: 999px;
}
h1 { font-weight: 800; font-size: clamp(36px, 6.5vw, 56px); margin-top: 18px; }
h2 { font-weight: 700; }

/* The short version: glass, with Upspace's gradient on its edge. */
.summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 0;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.summary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--violet)); }

/* Contents, as pills. */
nav.toc { border: 0; padding: 0; }
nav.toc ol { columns: initial; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
nav.toc li { margin: 0; }
nav.toc a {
  display: inline-block; text-decoration: none; color: rgba(255, 255, 255, 0.78);
  background: var(--surface); border: 1px solid var(--rule);
  padding: 6px 13px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
}
nav.toc a:hover, nav.toc a:focus-visible { color: #fff; border-color: rgba(242, 9, 80, 0.6); text-decoration: none; }

.callout { background: var(--surface-2); border-radius: 18px; }
table { background: var(--surface); border-radius: 16px; overflow: hidden; }
th { background: rgba(255, 255, 255, 0.03); }
h2 { scroll-margin-top: 90px; }

/* The footer: as every Upspace page closes. */
footer { text-align: center; border-top: 1px solid var(--rule); }
footer .mark { display: block; margin: 0 auto 14px; height: 24px; width: auto; opacity: 0.8; }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 14px; }
footer .links a { color: rgba(255, 255, 255, 0.6); font-weight: 700; text-decoration: none; font-size: 14px; }
footer .links a:hover { color: #fff; }