/* tos.css (full, updated) */

/* ---------- Layout & Background ---------- */
.legal {
  position: relative;
}

.legal::before,
.legal::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.18;
  z-index: 0;
}

.legal::before {
  width: 720px;
  height: 720px;
  right: -260px;
  top: 40px;
  background: radial-gradient(closest-side, rgba(36,97,230,0.42), rgba(36,97,230,0));
}

.legal::after {
  width: 680px;
  height: 680px;
  left: -260px;
  bottom: 40px;
  background: radial-gradient(closest-side, rgba(167,139,250,0.38), rgba(167,139,250,0));
}

/* Container visuals only (no padding offset hacks) */
#tos .container {
  position: relative;
  z-index: 1;
  padding-top: 0; /* ensure no extra top gap that would double-compensate */
}

/* Remove any previous global anchor pseudo-element to avoid double offsets */
#tos::before {
  content: none;
}

#tos .container::before {
  content:"";
  position:absolute;
  inset:-8%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 12px);
  opacity: .06;
  z-index: -1;
}

#tos .container::after {
  content:"";
  position:absolute;
  left:50%;
  top:-40px;
  width:min(1120px, 96vw);
  height:calc(100% + 80px);
  transform:translateX(-50%);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,0.03), rgba(255,255,255,0) 70%);
  pointer-events:none;
  z-index:-1;
}

/* ---------- Header ---------- */

#tos .doc-header {
  padding: 0px 0 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  position: relative;
  display:block;
  background: linear-gradient(180deg, rgba(16,18,24,0.02), rgba(16,18,24,0.04));
  border: 1px solid transparent;
  transition: box-shadow .18s ease, border-color .18s ease;
}

#tos .doc-header::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 8px;
  width: 96px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(36,97,230,0.10), rgba(167,139,250,0.06));
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
  opacity: 0.9;
}

#tos .doc-header h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 3em;
  font-weight: lighter;
  line-height: 1.04;
  letter-spacing: 0.2px;
  color: #E9F2FF;
  text-wrap: pretty;
}

#tos .doc-header .lead {
  position: relative;
  z-index: 1;
  max-width: 78ch;
  margin: 0.25rem 0 0;
  font-size: 16.5px;
  color: #C7D2EA;
}

/* ---------- Meta Chips ---------- */
#tos .doc-meta {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
  z-index: 1;
}
#tos .doc-meta .chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:#CFE0FF;
  font-weight:800;
  letter-spacing:0.2px;
  font-size:15px;
  box-shadow: inset 0 -2px 8px rgba(0,0,0,0.18);
}
#tos .doc-meta .chip i {
  font-size:15px;
  transform: translateY(0);
  color: #DDEEFF;
}
#tos .doc-meta .chip.alt {
  color:#E5E9FF;
  border-color:rgba(36,97,230,0.35);
  background:rgba(36,97,230,0.10);
  font-weight:700;
}

/* ---------- Layout ---------- */
#tos .doc-layout {
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items:start;
  margin-top: 18px;
}

/* Sticky TOC matches header height so it sits directly below it */
#tos .doc-toc {
  position: sticky;
  top: 64px; /* desktop header height */
  align-self:start;
  padding: 4px 0;
  color:#C8D3EA;
  z-index: 1;
}

/* ---------- TOC ---------- */
#tos .doc-toc .toc-title {
  font-weight:800;
  letter-spacing:0.3px;
  margin-bottom:8px;
  color:#D8E5FF;
}
#tos .doc-toc ol {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0px;
}
#tos .doc-toc a {
  font-size: 14px;
  display:block;
  padding:6px 8px;
  border-radius:10px;
  color:#B9C6E3;
  border:1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
#tos .doc-toc a:hover {
  color:#fff;
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.10);
}
#tos .doc-toc a:focus, #tos .doc-toc a:active {
  outline: none;
  border-color: rgba(36,97,230,0.55);
  background: rgba(36,97,230,0.06);
}

/* ---------- Doc ---------- */
#tos .doc {
  max-width: 900px;
  z-index: 1;
  counter-reset: section;
}

#tos .doc section {
  padding: 10px 0 6px;
}

#tos .doc h1,
#tos .doc h2,
#tos .doc h3,
#tos .doc section[id] {
  scroll-margin-top: 80px;
}
@media (max-width: 700px) {
  #tos .doc h1,
  #tos .doc h2,
  #tos .doc h3,
  #tos .doc section[id] {
    scroll-margin-top: 50px;
  }
}

#tos .doc h2 {
  counter-increment: section;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: 0.2px;
  margin: 22px 0 8px;
  line-height: 1.2;
  position: relative;
}

#tos .doc h2::before {
  content: counter(section) ". ";
  color: var(--blue, #2497e6);
  opacity: 0.98;
  font-weight: 800;
  margin-right: 6px;
}

#tos .doc h3 {
  font-size: clamp(17px, 2.2vw, 20px);
  margin: 16px 0 6px;
  color:#E4ECFF;
}

#tos .doc p,
#tos .doc li {
  color:#C7D2EA;
}
#tos .doc p {
  margin: 0 0 12px;
  text-wrap: pretty;
}
#tos .doc ul {
  margin: 8px 0 12px 0;
  padding-left: 18px;
}
#tos .doc a {
  color:#D9E6FF;
  text-decoration: none;
}
#tos .doc a:hover {
  color:#FFFFFF;
}

#tos .doc .note {
  position: relative;
  padding-left: 14px;
  color:#D6E2FF;
}
#tos .doc .note::before {
  content:"";
  position:absolute;
  left:0;
  top:0.25em;
  bottom:0.25em;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--blue, #2497e6), var(--accent-2));
  opacity:0.7;
}

#tos .doc section:target h2 {
  text-shadow: 0 0 24px rgba(36,97,230,0.30);
}

#tos .doc section + section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 18px;
}

/* ---------- Outro / Actions ---------- */
#tos .doc-outro .doc-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- Icons ---------- */
#tos .doc i.fa-solid,
#tos .doc i.fa-regular,
#tos .doc i.fa-brands {
  display:inline-block;
  width:1.1em;
  text-align:center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #tos .doc-layout {
    grid-template-columns: 1fr;
  }
  #tos .doc-toc {
    position: static; /* TOC goes above content on smaller screens */
    order: -1;
    margin-bottom: 8px;
    padding-bottom: 8px;
    top: auto;
  }
}

/* On small screens your header is 60px; use matching offsets */
@media (max-width: 700px) {
  #tos .doc h1,
  #tos .doc h2,
  #tos .doc h3,
  #tos .doc section[id] {
    scroll-margin-top: 60px; /* mobile header height */
  }

  #tos .doc h2 {
    margin: 16px 0 6px;
    font-size: 20px;
  }
  #tos .doc p {
    margin-bottom: 10px;
  }
  #tos .doc-toc ol {
    gap:0px;
  }
  #tos .doc .note {
    padding-left: 12px;
  }
  #tos .doc-outro .doc-actions .btn {
    width:100%;
    justify-content:center;
  }
}

/* ---------- Print ---------- */
@media print {
  .header, .footer, .cta, .doc-toc, .side-drawer, .backdrop { display:none !important; }
  #tos { background:none; }
  #tos .container::before, #tos .container::after, .legal::before, .legal::after { display:none; }
  #tos .doc a { border-bottom: none; }
}