/* ---------- Legal page (Terms + Privacy & Data Policy) ---------- */
/* Whole page stays put like the old Terms popup did; only the text inside
   the panel scrolls (.legalDash__scrollArea), not the page itself. */
.legalPage{
  height:100vh;
  height:100dvh;
  margin:0;
  overflow:hidden;
  background: var(--das-color-bg, #0c0614);
  color:#fff;
}

.legalDash{
  position:relative;
  z-index:1; /* sit above the fixed #globalBackground (z-index 0-3) */
  width:min(100%, 820px);
  height:100%;
  margin:0 auto;
  padding:18px 16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.legalDash__topbar{
  flex:0 0 auto;
  margin-bottom:16px;
}

.legalDash__homeLink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 16px;
  border-radius:var(--das-radius-sm, 12px);
  border:1px solid var(--das-panel-border-quiet, rgba(255, 255, 255, 0.08));
  background: var(--das-panel-surface-quiet, rgba(16, 8, 36, 0.6));
  backdrop-filter: blur(12px) saturate(100%);
  -webkit-backdrop-filter: blur(12px) saturate(100%);
  color:rgba(236, 230, 255, 0.88);
  font-family:var(--font-body, "Inter", sans-serif);
  font-size:0.88rem;
  font-weight:500;
  text-decoration:none;
  transition:border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.legalDash__homeLink:hover,
.legalDash__homeLink:focus-visible{
  border-color:color-mix(in srgb, var(--header-neon-accent, #b56cff) 36%, rgba(255, 255, 255, 0.12));
  color:#fff;
  outline:none;
}

.legalDash__homeIcon{
  display:block;
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:0.82;
}

.legalDash__panel{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  border-radius:var(--das-radius-lg, 20px);
  border:1px solid var(--das-panel-border-quiet, rgba(255, 255, 255, 0.08));
  background: linear-gradient(
    165deg,
    rgba(42, 28, 72, 0.42) 0%,
    rgba(18, 12, 38, 0.55) 45%,
    rgba(10, 8, 22, 0.6) 100%
  );
  backdrop-filter: blur(20px) saturate(100%);
  -webkit-backdrop-filter: blur(20px) saturate(100%);
  padding:32px 28px;
  box-sizing:border-box;
  overflow:hidden;
}

.legalDash__title{
  flex:0 0 auto;
  margin:0 0 18px 0;
  font-family:var(--font-heading, "Sora", sans-serif);
  font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight:800;
  letter-spacing:0.01em;
  color:#fff;
  text-shadow:0 0 24px rgba(200, 160, 255, 0.35);
}

.legalDash__jumpNav{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255, 255, 255, 0.08);
}

.legalDash__scrollArea{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:12px;
}

.legalDash__jumpNav a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 16px;
  border-radius:var(--das-radius-sm, 12px);
  border:1px solid var(--das-panel-border-quiet, rgba(255, 255, 255, 0.08));
  background: var(--das-panel-surface-quiet, rgba(16, 8, 36, 0.6));
  color:rgba(236, 230, 255, 0.88);
  font-family:var(--font-body, "Inter", sans-serif);
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;
  transition:border-color 0.18s ease, color 0.18s ease;
}

.legalDash__jumpNav a:hover,
.legalDash__jumpNav a:focus-visible{
  border-color:color-mix(in srgb, var(--header-neon-accent, #b56cff) 36%, rgba(255, 255, 255, 0.12));
  color:#fff;
  outline:none;
}

.legalDash__section{
  margin-bottom:36px;
  scroll-margin-top:24px;
}

.legalDash__section:last-child{
  margin-bottom:0;
}

.legalDash__section h2{
  margin:0 0 16px 0;
  font-family:var(--font-heading, "Sora", sans-serif);
  font-size:1.3rem;
  font-weight:700;
  color:#fff;
}

.legalDash__section .termsContent{
  margin:0;
  padding-right:0;
}

@media (max-width:600px){
  .legalDash__panel{
    padding:24px 18px;
  }
}