/* Long-form pages: /privacidade and /termos. They load site.css first
   (header, footer, fonts, base type, .s-eyebrow / .s-h1) and only add what
   running text needs: a readable column, headings and entry cards. Nothing here is inline, so the CSP keeps style-src free of
   'unsafe-inline'. */

.s-docpage {
  padding: 96px 0 120px;
}
/* ~70 characters a line, the same column as /sobre. */
.doc-col {
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .s-docpage {
    padding: 56px 0 80px;
  }
}

.doc {
  overflow-wrap: break-word;
}
.doc-head {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule-soft);
}
.doc-head .s-h1 {
  font-size: clamp(40px, 5.6vw, 64px);
  margin-bottom: var(--sp-4);
}
.doc .updated {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.doc .lead {
  font-family: var(--f-roman);
  font-style: italic;
  font-size: clamp(20px, 2vw, 23px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 var(--sp-7);
}
.doc h2 {
  font-family: var(--f-roman);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.15;
  margin: var(--sp-9) 0 var(--sp-4);
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
}
.doc h2 .n {
  font-family: var(--f-mono);
  font-variant: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--sanguine);
  flex: none;
}
.doc h3 {
  font-family: var(--f-roman);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  margin: var(--sp-6) 0 var(--sp-3);
}
.doc p,
.doc li {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.doc p {
  margin: 0 0 var(--sp-4);
}
/* Every list on the site takes the same sanguine diamond as site.css's
   .s-list (owner M106), not the browser's round bullet. */
.doc ul {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.doc li {
  margin-bottom: var(--sp-2);
}
.doc ul > li {
  position: relative;
  padding-left: 24px;
}
.doc ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--sanguine);
  transform: rotate(45deg);
}

/* One card per data category / processor: stacks at any width, where a
   four-column table would not fit a 320px screen. */
.entries {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.entry,
.facts {
  background: var(--vellum-2);
  box-shadow: var(--sh-float);
  padding: var(--sp-5) var(--sp-6);
}
.entry h3 {
  margin: 0 0 var(--sp-3);
}
.entry dl,
.facts {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}
.facts {
  margin-bottom: var(--sp-6);
}
.entry dt,
.facts dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.entry dd,
.facts dd {
  margin: 0 0 var(--sp-2);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 560px) {
  .entry,
  .facts {
    padding: var(--sp-4) var(--sp-5);
  }
}