/* ==========================================================================
   PrankCall.AI — legal pages (Terms of Service, Privacy Policy)
   Document prose on the site design system. Content-screen law holds:
   chrome is quiet and typographic; the H1 marker half-swipe is the one
   inked moment on the page. Tonal fields + the butter wash carry the
   structure — no borders, no cards-with-cards.
   Loaded AFTER site.css (tokens, nav, footer).
   ========================================================================== */

/* ---------- the room ---------- */
.legal { padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 7vw, 100px); }
.doc { max-width: 760px; margin: 0 auto; }

/* ---------- head ---------- */
.legal-head { margin-bottom: clamp(30px, 4vw, 46px); }
.legal-head .slab { margin-bottom: 14px; }
.legal-head h1 { font-size: clamp(30px, 4.2vw, 46px); }
.doc-meta {
  margin-top: 16px; font-size: 13px; font-weight: 700; opacity: .55;
  letter-spacing: .01em;
}

/* ---------- the short version ---------- */
.tldr {
  background: rgba(36, 30, 26, .055); border-radius: 18px;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.4vw, 30px);
  margin-bottom: clamp(34px, 4.5vw, 50px);
}
.tldr-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; opacity: .58; margin-bottom: 14px;
}
.tldr ul { display: grid; gap: 11px; }
.tldr li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; font-weight: 600; line-height: 1.55; opacity: .85;
}
.tldr li svg { flex: none; margin-top: 2px; }
.tldr b { font-weight: 800; }

/* ---------- prose ---------- */
.doc p { font-size: 15px; font-weight: 600; line-height: 1.7; opacity: .8; }
.doc p + p { margin-top: 14px; }
.doc p a, .doc li a, .doc-note a {
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(228, 73, 46, .55);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.doc p a:hover, .doc li a:hover { text-decoration-color: var(--red); }
.doc strong { font-weight: 800; }

.doc h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(18.5px, 2.2vw, 21px); font-weight: 800; line-height: 1.3;
  margin-top: clamp(40px, 5vw, 52px);
}
.doc h2 .sn {
  font-size: .72em; font-weight: 800; opacity: .4;
  font-variant-numeric: tabular-nums; flex: none;
}
.doc h3 {
  font-size: 15.5px; font-weight: 800; margin-top: 24px;
}

.doc ul, .doc ol { margin-top: 14px; padding-left: 26px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc ol.letter { list-style: lower-alpha; }
.doc li {
  font-size: 15px; font-weight: 600; line-height: 1.65; opacity: .8;
  margin-bottom: 8px; padding-left: 4px;
}
.doc li::marker { color: rgba(36, 30, 26, .4); font-weight: 800; }

/* all-caps legal blocks — the caps-slab voice, readable */
.doc .caps {
  text-transform: uppercase; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; line-height: 1.8; opacity: .72;
  margin-top: 14px;
}

/* butter wash — the one place the page raises its voice a little */
.doc-note {
  background: rgba(255, 197, 61, .22); border-radius: 16px;
  padding: 18px 22px; margin-top: 18px;
  font-size: 14.5px; font-weight: 600; line-height: 1.65; opacity: .92;
}
.doc-note b { font-weight: 800; }

/* ---------- contents (Terms) ---------- */
.toc {
  background: rgba(36, 30, 26, .055); border-radius: 18px;
  padding: clamp(20px, 3vw, 26px) clamp(20px, 3.4vw, 30px);
  margin-top: 10px;
}
.toc-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; opacity: .58; margin-bottom: 12px;
}
.toc ol {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: clamp(28px, 4vw, 56px);
}
.toc li { margin: 0; padding: 0; break-inside: avoid; }
.toc a {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  opacity: .8; padding: 4.5px 0; transition: opacity .15s;
}
.toc a:hover { opacity: 1; }
.toc .n {
  flex: none; font-size: 12px; font-weight: 800; opacity: .45;
  font-variant-numeric: tabular-nums; min-width: 1.7em;
}

/* ---------- bottom cross-nav ---------- */
.doc-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(48px, 6vw, 64px);
}
.doc-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(36, 30, 26, .055); border-radius: 999px;
  padding: 10px 17px; font-size: 13.5px; font-weight: 700;
  text-decoration: none; opacity: .85; transition: opacity .15s, transform .15s;
}
.doc-nav a:hover { opacity: 1; transform: translateY(-1px); }
.doc-nav .arr { font-weight: 800; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .toc ol { columns: 1; }
  .doc h2 { gap: 9px; }
}