/* Aftal Group: the document pages (privacy, terms, data deletion, 404).
   They read as text, so they do not use the home page's one-screen sections. Tokens come from system.css. */
.doc { padding: calc(var(--nav) + var(--s-8)) 0 var(--s-9); }
.doc__head { max-width: 760px; display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.doc__head h1 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; }
.doc__meta { color: var(--muted); font-size: var(--t-small); }
.doc__toc { max-width: 760px; margin-bottom: var(--s-7); padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.doc__toc ol { margin: var(--s-3) 0 0; padding-left: 1.6em; list-style: decimal; columns: 2; column-gap: var(--s-7); font-size: var(--t-small); line-height: 1.9; }
.doc__body { max-width: 760px; }
.doc__body h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: var(--s-8) 0 var(--s-4); scroll-margin-top: calc(var(--nav) + var(--s-5)); }
.doc__body h3 { font: 500 18px/1.4 var(--font-text); letter-spacing: 0; margin: var(--s-6) 0 var(--s-3); }
.doc__body p, .doc__body li, .doc__body address { font-size: 16px; line-height: 1.7; color: var(--ink); font-style: normal; }
.doc__body p { margin: 0 0 var(--s-4); }
.doc__body ul { margin: 0 0 var(--s-5); padding-left: 1.3em; list-style: disc; display: grid; gap: 6px; }
.doc__body a, .doc__toc a, .doc-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.doc__body a:hover, .doc__toc a:hover, .doc-foot a:hover { color: var(--accent); }
.doc__card { margin: var(--s-4) 0 var(--s-5); padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.doc__card p:last-child, .doc__card address { margin: 0; }
.doc-foot { border-top: 1px solid var(--line); padding: var(--s-7) 0 var(--s-8); font-size: var(--t-small); color: var(--muted); }
.doc-foot .wrap { display: grid; gap: var(--s-4); }
.doc-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.nav__logo img { width: 50px; height: 40px; }
@media (max-width: 639px) { .doc__toc ol { columns: 1; } .doc { padding-bottom: var(--s-8); } }