/* Shared shell for the document pages (privacy, terms, support, music).
   Same tokens as the landing so a policy never feels like another website. */
@font-face {
  font-family: 'Manrope'; src: url('/fonts/manrope-var.woff2') format('woff2-variations');
  font-weight: 400 800; font-display: swap;
}
@font-face {
  font-family: 'Inter'; src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 600; font-display: swap;
}

:root {
  --bg: 240 42% 4%;
  --ink: 220 30% 96%;
  --ink-dim: 230 15% 68%;
  --ink-faint: 232 12% 48%;
  --primary: 220 100% 62%;
  --primary-glow: 220 100% 72%;
  --secondary: 270 90% 65%;
  --accent: 190 100% 60%;
  --border: 240 30% 18%;
  --glass: linear-gradient(160deg, hsl(240 35% 12% / 0.62), hsl(240 45% 5% / 0.5));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: hsl(var(--bg));
  color: hsl(var(--ink));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16.5px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 560px at 8% -12%, hsl(270 90% 25% / 0.22), transparent 60%),
    radial-gradient(900px 460px at 108% 6%, hsl(220 100% 40% / 0.15), transparent 60%);
}
::selection { background: hsl(var(--primary) / 0.35); }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 26px; }

header.doc {
  position: sticky; top: 0; z-index: 20;
  background: hsl(var(--bg) / 0.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
}
header.doc .inner {
  max-width: 780px; margin: 0 auto; padding: 15px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }
.brand-orb {
  width: 26px; height: 26px; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 50% 50%, hsl(256 95% 80%) 0%, hsl(256 85% 64%) 55%, hsl(248 70% 46%) 100%);
  box-shadow: 0 0 0 0.8px hsl(246 50% 30% / 0.8), 0 0 14px hsl(266 55% 62% / 0.5);
}
.brand-orb::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: hsl(var(--bg)); }
header.doc nav { display: flex; gap: 20px; font-size: 0.88rem; color: hsl(var(--ink-dim)); }
header.doc nav a { text-decoration: none; transition: color 0.2s var(--ease); }
header.doc nav a:hover, header.doc nav a[aria-current] { color: hsl(var(--ink)); }
@media (max-width: 620px) { header.doc nav { display: none; } }

main { padding: 46px 0 90px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 11px; border-radius: 999px;
  border: 1px solid hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.07);
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: hsl(var(--primary-glow));
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: hsl(var(--primary-glow)); box-shadow: 0 0 10px hsl(var(--primary) / 0.8);
}

h1 {
  font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.08; margin: 18px 0 10px; text-wrap: balance;
}
h2 {
  font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.28rem; margin: 46px 0 12px; scroll-margin-top: 90px;
}
h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.03rem; margin: 26px 0 8px; }
p, li { color: hsl(var(--ink-dim)); }
p { margin: 12px 0; }
ul, ol { margin: 12px 0 12px 22px; }
li { margin: 6px 0; }
strong { color: hsl(var(--ink)); font-weight: 600; }
a { color: hsl(var(--primary-glow)); text-underline-offset: 3px; }
.date { color: hsl(var(--ink-faint)); font-size: 0.88rem; }

.lede { font-size: 1.06rem; color: hsl(var(--ink-dim)); margin-top: 16px; }

/* The plain-language box that opens every document. */
.summary {
  margin: 30px 0 8px; padding: 22px 24px; border-radius: 20px;
  background: var(--glass); border: 1px solid hsl(var(--border));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.summary h2 { margin: 0 0 8px; font-size: 1.05rem; }
.summary p { margin: 8px 0 0; }
.summary ul { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.93rem; }
th, td { border: 1px solid hsl(var(--border)); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: hsl(240 40% 10% / 0.6); color: hsl(var(--ink)); font-weight: 600; }
td { color: hsl(var(--ink-dim)); }
.scroller { overflow-x: auto; }

/* Anything still to be filled in by a human. */
.todo {
  background: hsl(38 95% 62% / 0.14); border-bottom: 1px dashed hsl(38 95% 62% / 0.6);
  color: hsl(38 90% 78%); padding: 0 4px; border-radius: 3px; font-style: normal;
}

hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 44px 0; }

footer.doc {
  border-top: 1px solid hsl(var(--border)); padding: 30px 0 70px;
  display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between;
  color: hsl(var(--ink-faint)); font-size: 0.87rem;
}
footer.doc nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer.doc a { color: hsl(var(--ink-dim)); text-decoration: none; }
footer.doc a:hover { color: hsl(var(--ink)); }