/* PrintReal — prose pages (About, Contact, Privacy, Terms + the three guides).
*
* Loaded on top of header.css and landing.css: those already provide the header,
* .container and .site-footer, so this file only has to style a column of text.
* Deliberately small — these pages are read, not operated.
*
* Unlike the three tool pages, this document scrolls normally: landing.css sets
* no height/overflow on , which is exactly why the long-form content lives
* here rather than being wedged under an app shell that is pinned to 100dvh.
*/
.prose-main {
padding: 40px 0 64px;
}
.prose {
/* Body copy sits a step lighter than headings; there is no site-wide token
for it because these are the only pages with long-form text. */
--prose-text: #334155;
/* Per-kind knobs. The two page families share every rule below and differ
only in what these resolve to, so a change to the note card or the list
marker lands on both without being written twice. .prose-guide and
.prose-legal (set by renderProse's caller in build.js) override them. */
--prose-width: 720px;
--prose-gap: 40px; /* space above an
, i.e. between sections */
--prose-accent: var(--muted);
--prose-note-bg: #f8fafc;
--prose-note-edge: var(--border);
max-width: var(--prose-width);
/* Not margin: 0 auto — .container is also the footer's, and under dir="rtl"
logical margins keep the column centered without a direction-specific rule. */
margin-inline: auto;
}
/* The guides are marketing pages: wider measure, more air between sections, and
the brand colour doing the accenting. */
.prose-guide {
--prose-width: 760px;
--prose-gap: 56px;
--prose-accent: var(--primary);
--prose-note-bg: var(--primary-soft);
--prose-note-edge: #bfdbfe;
}
/* The institutional pages are documents: a narrower column, a tighter rhythm,
and no colour beyond the links. Being sober here is the point — a privacy
policy that looks like a landing page reads as marketing. */
.prose-legal {
--prose-width: 680px;
--prose-gap: 36px;
}
/* ── Headings ─────────────────────────────────────────────────────────────── */
.prose h1 {
font-size: 2rem;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0 0 16px;
color: var(--text);
}
.prose h2 {
font-size: 1.25rem;
line-height: 1.3;
letter-spacing: -0.01em;
/* Asymmetric on purpose: a heading belongs to the text under it, so it sits
closer to its own section than to the one it follows. */
margin: var(--prose-gap) 0 12px;
color: var(--text);
}
.prose-guide h2 {
font-size: 1.375rem;
}
/* The section rule is the guides' only structural ornament: it marks where one
topic ends without spending a heading level on it. Drawn on the section
rather than the heading so the first one (which has no section above it) can
be dropped cleanly. */
.prose-guide .prose-section + .prose-section {
border-top: 1px solid var(--border);
padding-top: 4px;
}
/* ── Body copy ────────────────────────────────────────────────────────────── */
.prose p {
margin: 0 0 14px;
line-height: 1.7;
color: var(--prose-text);
}
.prose-lead {
font-size: 1.0625rem;
line-height: 1.65;
margin-bottom: 24px;
}
/* Korean line-breaking. Korean writes with spaces, so it is tempting to assume
the default is fine — it is not. `word-break: normal` still lets a line break
between any two Hangul syllables, which splits words down the middle: measured
on this prose, 14 of 42 lines at 1280px and 45 of 115 at 320px broke mid-word
(사용 / 자 기기, 대형 포스터를 인 / 쇄하는). `keep-all` restricts breaks to the
spaces between 어절, which is what Korean typography expects.
`overflow-wrap` is the safety valve keep-all needs: with breaks confined to
spaces, a single long token (an address, IndexedDB) would otherwise push past
the column instead of wrapping. */
html[lang="ko"] .prose {
word-break: keep-all;
overflow-wrap: break-word;
}
/* Japanese line-breaking (禁則処理). The default `line-break: auto` already keeps
。、」 off the start of a line, but it lets the small kana — っゃゅょ and the
katakana equivalents — open one, which JIS X 4051 prohibits and which a
Japanese reader reads as a typo in the layout. `strict` adds them to the
prohibited set. Measured before adding: 3 such breaks across 259 rendered
prose lines, all of them っ.
Scoped to the locale because `strict` also refuses to break after a hyphen,
which would only make the Latin languages ragged for no benefit. */
html[lang="ja"] .prose {
line-break: strict;
}
/* Devanagari heading leading. Hindi stacks vowel signs above the headline
(मात्रा, and the reph of प्रि) and below the baseline (ु ू ृ), so a line of
Devanagari inks about 1.32em tall against Latin's ~1.0em. The body copy has
room to absorb that — measured on this prose, the tightest gap between two
lines of ink is 6.19px in a
and 6.89px in the lead — but the headings do
not: at line-height 1.2 the
overlapped by 1.81px and at 1.3 the
by
0.31px, which is the i-matra of a second line landing inside the descender of
the first ("इमेज को असली आकार में कैसे / प्रिंट करें" at 390px and 320px).
At 1.5 the tightest gap measures 6px on the
and 3.5px on the
,
which puts both back in the body text's own band.
Scoped to the locale: it is a property of the script, and applying it to the
Latin locales would only loosen headings that are already correct. */
html[lang="hi"] .prose h1,
html[lang="hi"] .prose h2 {
line-height: 1.5;
}
/* Arabic leading inside a table cell. Same class of problem as the Devanagari
rule above, in the one place the body copy's own leading does not reach:
.prose runs at line-height 1.7 but .prose-table at 1.45, so the cell is the
tightest vertical context on the site. Arabic stacks harakat above the letter
(ـً on adverbs, the shadda of مربّع) and drops ـٍ ـِ below it, which inks a
line taller than Latin, and at 1.45 the two collide: measured on the guide
tables, the tightest gap between lines of ink is -3.13px at 390px and -0.73px
at 1280px — a real overlap, not a tangency, with the descenders of one line
landing inside the harakat of the next ("29 ميغابكسل عند 300 / DPI. وعلى
المسافة" in the photo-size table).
1.7 is the first value that clears at both widths (+0.37px at 390, +3.02px at
1280), and it is not an invented number: it is the leading the body copy
already uses, where Arabic prose measures 0.24-4.6px and has never collided.
Costs 12% of table height, in this locale only.
Scoped to ar: he measures 6.25px in the same cells, identical to the Latin
baseline, and needs nothing. */
html[lang="ar"] .prose-table {
line-height: 1.7;
}
/* ── "Last updated" badge ─────────────────────────────────────────────────── */
/* Sits between the
and the lead on the legal pages. A chip rather than a
line of grey text because it is the one piece of metadata a reader actively
looks for on a policy — "is this current?". */
.prose-updated {
margin: 0 0 20px;
}
.prose-updated-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
font-size: 0.75rem;
font-weight: 500;
color: var(--muted);
/* Was white-space: nowrap. At 320px the paragraph is 280px wide, and the
longer date strings are wider than that: Russian's "Последнее обновление:
9 августа 2026 г." renders 294px and Spanish's 286px, so the chip hung 14px
and 6px past the text column into the gutter. Measured across the ten
locales that have the page, letting it wrap changes nothing for the eight
that already fit (en 209px, ja 184, zh 184, ko 189, fr 237, de 259, it 260,
pt-BR 276 — all under 280 and still one line) and keeps the other two
inside the column. max-width stops the flex item from overflowing its
parent before the text gets a chance to wrap. */
max-width: 100%;
}
.prose-updated-icon {
display: inline-flex;
flex: none;
color: var(--faint, #94a3b8);
}
.prose-updated-icon svg {
width: 13px;
height: 13px;
}
/* ── Note callout ─────────────────────────────────────────────────────────── */
/* Was a dim
that read as a footnote and got skipped; these are the lines
that stop a reader wasting a sheet of paper, so they get a box. */
.prose-note {
display: flex;
gap: 12px;
margin: 20px 0;
padding: 14px 16px;
border: 1px solid var(--prose-note-edge);
/* The accent edge is the leading one, so it flips with dir="rtl". */
border-inline-start: 3px solid var(--prose-accent);
border-radius: var(--radius);
background: var(--prose-note-bg);
}
.prose-note-icon {
display: inline-flex;
flex: none;
margin-top: 1px;
color: var(--prose-accent);
}
.prose-note-icon svg {
width: 18px;
height: 18px;
}
/* Beats `.prose p` (0,1,1) — same specificity, but later in the file. */
.prose-note p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--prose-text);
}
/* ── Lists ────────────────────────────────────────────────────────────────── */
.prose ul {
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.prose li {
position: relative;
margin-bottom: 10px;
line-height: 1.7;
color: var(--prose-text);
/* Logical property so the markers sit on the leading edge in ar/he too, if
these pages are ever translated into an RTL language. */
padding-inline-start: 26px;
}
/* The marker is drawn rather than listed so it can carry the accent colour and
stay put on a wrapped line. ::before is inset-inline-start-anchored, which is
what keeps it on the correct side under RTL. */
.prose li::before {
position: absolute;
inset-inline-start: 0;
top: 0;
color: var(--prose-accent);
}
/* Guides: a check, because their lists are things to do or things that are
true. Legal: an en dash, because theirs are clauses, and ticking off the
terms of a warranty disclaimer would be an odd thing to imply.
A checkmark carries no left/right meaning — unlike an arrow, it should not
mirror under dir="rtl" (same principle as the un-mirrored Upscale
comparator: chrome without inherent direction stays put). border-left is
physical on purpose: border-inline-start would flip to border-right under
RTL while transform: rotate() never flips, and that mismatch — one side of
the shape mirrored, the rotation angle not compensated — draws a "›"
chevron instead of "✓" (confirmed on production ar/he). The marker's
*position* on the leading edge is still correctly logical, via
inset-inline-start below and padding-inline-start on .prose li. */
.prose-guide li::before {
content: "";
top: 0.6em;
width: 9px;
height: 5px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
color: var(--prose-accent);
}
.prose-legal li::before {
content: "–";
inset-inline-start: 6px;
}
/* ── Reserved image slots ─────────────────────────────────────────────────── */
/* The ratio and the width live on the , so they apply equally to the
placeholder and to the that eventually replaces it — the page does not
reflow when the real screenshots land. See renderFigure() in build.js. */
.prose-figure {
margin: 28px 0;
}
.prose-figure-hero {
margin: 4px 0 32px;
}
.prose-figure-result {
margin: 32px 0 0;
}
.prose-figure > img,
.prose-figure-ph {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
}
.prose-figure > img {
height: auto;
object-fit: cover;
border: 1px solid var(--border);
}
.prose-figure-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 20px;
border: 2px dashed var(--border);
background:
linear-gradient(135deg, rgba(148, 163, 184, 0.06) 25%, transparent 25%) 0 0 / 16px 16px,
var(--bg);
text-align: center;
}
.prose-figure-icon {
display: inline-flex;
color: var(--faint, #94a3b8);
}
.prose-figure-icon svg {
width: 30px;
height: 30px;
}
/* Same specificity as `.prose p` (0,1,1) and later in the file, so these win
without needing to be nested any deeper. */
.prose-figure-label {
margin: 4px 0 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.prose-figure-desc {
max-width: 46ch;
margin: 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--muted);
}
.prose a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.prose-mail a {
font-weight: 500;
}
/* ── Closing call to action ───────────────────────────────────────────────── */
/* Scoped to `.prose` for the same reason as the button below: the wrapper is a