/* The long-form pages: the privacy notice and the terms.
   Both carried their own copy of these rules inline, twenty lines identical
   in each, which is two places to change a margin and one of them to forget.
   Tokens, type scale and colour still come from styles.css; this is only the
   shape of a document. */

.doc-bar{background:var(--deep-grad);color:#fff}
.doc-bar-in{max-width:760px;margin:0 auto;padding:16px 22px;display:flex;gap:14px;align-items:center}
.doc-bar a{color:#fff;text-decoration:none;font-family:var(--serif);font-size:22px}
.doc-bar span{margin-left:auto;font-size:13.5px;opacity:.75}

.doc{max-width:760px;margin:0 auto;padding:40px 22px 80px}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,40px);margin:0 0 8px}
.doc .updated{color:var(--muted);font-size:13.5px;margin:0 0 26px}
.doc h2{font-family:var(--serif);font-weight:400;font-size:23px;margin:38px 0 10px}
.doc h3{font-size:15.5px;margin:22px 0 6px}

/* A measure, and a gap between paragraphs.

   styles.css resets p to margin:0 for the app's own layouts and neither page
   put it back, so three consecutive paragraphs read as one wall of twelve
   lines. And the column is 760px wide because the tables need it -- prose set
   to the same width runs past ninety characters a line, which is roughly
   where the eye starts losing its place on the way back. The text is held to
   its own measure inside the wider column; tables and boxes still use all of
   it. */
.doc p,.doc li{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:64ch}
.doc p{margin:0 0 14px}
.doc p:last-child{margin-bottom:0}
.doc ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}

.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.07em}
.doc td p,.doc td{max-width:none}

/* Terms sets a plain-English restatement beside each clause. */
.doc .plain{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:20px 0}
.doc .plain h3{margin:0 0 8px;font-size:15.5px}
.doc .plain p{margin:0}

.draft{background:#FBF0DC;border-left:3px solid var(--sun);padding:16px 20px;border-radius:0 10px 10px 0;margin-bottom:30px}
.draft b{color:var(--ink)}
.draft p{max-width:none}
.fill{background:var(--jac-soft);padding:1px 6px;border-radius:4px;font-size:14px;color:var(--jac)}

.doc footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.doc footer a{color:var(--link);text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--link) 38%,transparent)}
.doc footer a:hover{text-decoration-color:currentColor}

@media(max-width:700px){
  .doc{padding:28px 20px 64px}
  .doc h2{margin-top:30px}
  /* A table of four columns cannot be read on a phone by shrinking it. It
     scrolls inside its own box instead, and the page does not. */
  .doc .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc .scroll-x table{min-width:520px}
}