/* Shared styling for the public policy pages: about.html, privacy.html, terms.html.
 *
 * Moved onto the dashboard's token set on 2026-09-04, when the front page was rebuilt
 * from the approved mock-up. Before that these pages ran their own green-on-charcoal
 * palette, which was the only palette left in the service -- clicking "Privacy Policy"
 * out of the new footer changed the colour of the product mid-sentence.
 *
 * Every SELECTOR below is unchanged; only the six token values are. The three HTML
 * files are untouched by this and stay valid against it.
 *
 * DARK ONLY, deliberately. The previous file carried a prefers-color-scheme: light
 * block, so the policy pages were the one part of the service that followed the OS.
 * The front page and both dashboards are hard dark, so that block did not make the
 * service adaptive -- it made three pages out of ~eight disagree with the rest.
 */
:root {
    --bg:      #0f172a;
    --panel:   #1e293b;
    --text:    #e2e8f0;
    --muted:   #94a3b8;
    --accent:  #38bdf8;
    --rule:    #334155;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 2rem 1.25rem 4rem;
    min-height: 100vh;
}
main { max-width: 46rem; margin: 0 auto; }
header { border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; margin-bottom: 2rem; }
h1 { font-size: 1.6rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; margin: 2.25rem 0 .6rem; letter-spacing: -.005em; }
h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; color: var(--text); }
p, li { color: var(--text); }
ul { padding-left: 1.15rem; }
li { margin: .3rem 0; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sub { color: var(--muted); font-size: .9rem; margin: 0; }
.note {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    padding: .9rem 1.1rem;
    border-radius: 6px;
    margin: 1.5rem 0;
}
.note strong { color: var(--accent); }
footer {
    margin-top: 3rem; padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    color: var(--muted); font-size: .875rem;
}
footer a { color: var(--muted); }
code {
    background: var(--panel); border: 1px solid var(--rule);
    padding: .1rem .35rem; border-radius: 4px; font-size: .9em;
}