/* /privacy and /terms. Loads AFTER site.css, which carries the real tokens,
nav, footer and buttons lifted from the landing page. Everything here is only
the reading-page layer on top. */
/* nav, footer, tokens, fonts and the page background all come from site.css,
which is the homepage's stylesheet verbatim. Nothing here may redefine them —
that divergence is exactly what made these pages look like another site. */
/* ⚠️ Reserve the scrollbar gutter so short pages line up with long ones. Without
it a page that does not scroll gets a ~15px wider viewport and everything
centred - the header included - sits a few pixels off from /privacy. The
homepage needs no rule: it always scrolls, so the space is always taken. */
html { scrollbar-gutter: stable; }
footer { margin-top: 100px; }
/* ⚠️⚠️ `width: 100%` IS LOAD-BEARING AND FIXES EVERY .doc PAGE ON MOBILE.
page.css makes a column flex container, so .doc is a flex ITEM — and
`margin: 0 auto` is an auto margin on the CROSS axis, which per spec CANCELS
`align-items: stretch`. The item is then sized by fit-content capped at
max-width, so it stays 780px wide on a 390px phone and the h1, the body copy
and the nav all run off the right edge. Measured with the real numbers:
viewport 749px, article 960px.
This is the SAME bug already recorded for /team's `.wrap`, and it was hitting
all 27 pages that use .doc — every guide, /terms, /privacy, /security,
/refunds, /contact, the blog index and the comparisons. A control render of
an untouched guide overflowed identically, which is what proved it was not
the page being worked on.
⚠️ max-width still caps it on desktop; width:100% only governs the narrow
case. Do not "simplify" this back to `max-width + margin: 0 auto`. */
.doc { max-width: 780px; width: 100%; margin: 0 auto; padding: 72px 28px 40px; }
.eyebrow {
font-family: "Geist Mono", ui-monospace, Consolas, monospace;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--eyebrow); margin: 0 0 14px;
}
.doc h1 {
font-size: clamp(34px, 5vw, 46px); font-weight: 600; letter-spacing: -0.035em;
line-height: 1.08; margin: 0 0 10px;
}
.updated { color: var(--text-dim); font-size: 14px; margin: 0 0 40px; }
/* The summary card, same surface treatment as the landing page's panels. */
.lede {
background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px 24px; margin-bottom: 8px;
box-shadow: 0 0 40px -20px var(--gold-soft);
}
.lede p { margin: 0; color: var(--text-soft); font-size: 16px; }
.lede strong { color: var(--gold); }
.doc h2 {
font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
margin: 52px 0 12px; padding-top: 26px; border-top: 1px solid var(--line);
}
.doc p, .doc li { color: var(--text-soft); font-size: 15.5px; }
/* ⚠️ site.css line 36 is `* { box-sizing: border-box; margin: 0; padding: 0 }`
and NOTHING ever restores a margin for body copy, so consecutive paragraphs
in a reading page had no gap whatsoever and ran together as a single block.
It hid for months because it only shows where follows
: /terms has 3
such pairs, /security has 8 and made it obvious. This lives here, not in
site.css — that file is regenerated verbatim from the homepage by
tools/sync-site-css.py and anything added to it is wiped on the next sync.
Applies to /terms, /privacy, /refunds, /security, /vs/* and every guide. */
.doc p + p { margin-top: 14px; }
.doc p + ul, .doc ul + p { margin-top: 14px; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc a { color: var(--gold); }
.doc a:hover { text-decoration: underline; }
.doc code {
font-family: "Geist Mono", ui-monospace, Consolas, monospace;
font-size: 13.5px; color: var(--gold);
background: var(--gold-faint); border: 1px solid var(--gold-soft);
border-radius: 5px; padding: 1px 6px;
}
@media (max-width: 720px) {
.doc { padding-top: 48px; }
.nav-links { display: none; }
}
/* ─── Comparison table (/vs/*) ────────────────────────────────────────────
Tokens and type come from site.css like everything else; this is only the
table layer. ⚠️ Wrapped in its own overflow-x container so a narrow phone
scrolls the TABLE and never the page body. */
.doc .cmp { width: 100%; border-collapse: collapse; margin: 26px 0 10px;
font-size: 14.5px; display: block; overflow-x: auto; white-space: nowrap; }
.doc .cmp thead th { text-align: left; font-weight: 600; font-size: 12px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
padding: 0 18px 10px 0; border-bottom: 1px solid var(--hairline, #2b2825); }
.doc .cmp td { padding: 11px 18px 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
vertical-align: top; }
.doc .cmp tbody tr td:first-child { color: var(--text-dim); }
.doc .cmp tbody tr td:last-child { color: var(--text); }
@media (min-width: 700px) {
.doc .cmp { display: table; white-space: normal; }
}
/* ─── Blog index list ─────────────────────────────────────────────────────── */
.doc .posts { list-style: none; padding: 0; margin: 30px 0 0; }
.doc .posts li { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.doc .posts li a { display: block; font-size: 18px; font-weight: 600;
letter-spacing: -0.015em; color: var(--text); text-decoration: none; }
.doc .posts li a:hover { color: var(--gold); }
.doc .posts li span { display: block; margin-top: 6px; font-size: 14.5px;
line-height: 1.6; color: var(--text-dim); }