/* The public pages: /about, /help, /privacy, /childrens-privacy, /terms, /eula. Plain HTML, no build (/help is written by backend/help-src/build.py). */
:root { --bg: #f7f2ea; --ink: #201e1d; --ink60: rgba(32, 30, 29, .65); --card: #fffdf9; --line: rgba(32, 30, 29, .12); --accent: #8b1a14; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1918; --ink: #f2ede5; --ink60: rgba(242, 237, 229, .68); --card: #242120; --line: rgba(242, 237, 229, .14); --accent: #e0776c; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
header, main, footer { max-width: 720px; margin: 0 auto; padding: 0 16px; }
header { display: flex; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 8px; flex-wrap: wrap; }
header .brand { display: inline-flex; align-items: center; gap: 10px; font: 700 24px Georgia, serif; color: var(--ink); text-decoration: none; margin-right: auto; }
header .brand img { border-radius: 8px; }
header nav { display: flex; gap: 16px; flex-wrap: wrap; }
header nav a { color: var(--ink60); text-decoration: none; font-weight: 600; font-size: 15px; }
header nav a[aria-current="page"] { color: var(--ink); }
header nav a.signin { color: var(--bg); background: var(--ink); padding: 6px 14px; border-radius: 999px; margin-top: -6px; }
h1 { font: 700 38px/1.15 Georgia, serif; margin: 28px 0 8px; }
h2 { font: 700 23px/1.25 Georgia, serif; margin: 36px 0 8px; }
h3 { font-size: 17px; margin: 22px 0 4px; }
p.lead { font-size: 20px; color: var(--ink60); margin-top: 0; }
p.notice { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 16px; }
p.updated { color: var(--ink60); font-size: 14px; margin-top: 0; }
a { color: var(--accent); }
ul { padding-left: 22px; }
li { margin: 6px 0; }
.cta { display: inline-block; margin: 12px 12px 0 0; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 700; }
.cta.quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.card h3 { margin-top: 0; font-family: Georgia, serif; font-size: 19px; }
.card p { margin: 0; color: var(--ink60); font-size: 15px; }
footer { margin-top: 56px; padding-top: 20px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--ink60); font-size: 14px; }
footer a { color: var(--ink60); }

/* /help: the help center (built from backend/help-src). */
.help main { max-width: 720px; }
.crumb { color: var(--ink60); font-size: 14px; margin: 24px 0 0; }
.crumb a { color: var(--ink60); }
.crumb + h1 { margin-top: 6px; }
.toc { list-style: none; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; columns: 2; column-gap: 24px; font-size: 15px; }
.toc li { margin: 4px 0; break-inside: avoid; }
ol.steps { padding-left: 0; list-style: none; counter-reset: step; }
ol.steps li { counter-increment: step; position: relative; padding-left: 38px; margin: 12px 0; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 14px/26px -apple-system, "Segoe UI", sans-serif; text-align: center; }
.shots { display: flex; gap: 16px; overflow-x: auto; padding: 8px 2px 12px; margin: 8px 0 4px; scroll-snap-type: x mandatory; }
.shots figure { margin: 0; flex: 0 0 220px; scroll-snap-align: start; }
.shots figure.wide { flex-basis: min(100%, 560px); }
.shots img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.shots figure.wide img { border-radius: 12px; }
.shots figcaption { font-size: 14px; color: var(--ink60); margin-top: 8px; line-height: 1.4; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.pager a { text-decoration: none; }
p.ask { color: var(--ink60); font-size: 15px; }
input.search { width: 100%; font: inherit; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); margin: 12px 0 4px; }
ul.questions { columns: 2; column-gap: 24px; padding-left: 18px; }
ul.questions li { break-inside: avoid; margin: 0 0 10px; }
.topics { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
a.card.topic { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); padding: 12px; }
a.card.topic img { width: 64px; height: 100px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); flex: none; }
a.card.topic img.wide { height: 64px; width: 100px; }
a.card.topic h3 { margin: 0 0 2px; }
a.card.topic:hover { border-color: var(--ink60); }
@media (max-width: 560px) { .toc, ul.questions { columns: 1; } .topics { grid-template-columns: 1fr; } h1 { font-size: 32px; } }
[hidden] { display: none !important; }