/* privacy.css -- the /privacy page only (owner request 2026-08-13: "an explicit footer Privacy
   Policy with a detailed list of what the webpage does/doesn't do").

   Loaded ONLY by privacy.html, not by index.html: the landing page is the performance-sensitive
   one (it also pulls a WASM engine), and none of these rules apply there. site.css supplies the
   shared chrome -- header, brand, status pill, footer, palette tokens -- so this file is just the
   document body.

   Reads as a DOCUMENT, not as marketing: left-aligned, measured line length, no accent panels or
   cards. The rest of the site is a pitch; this page is a statement of fact, and looking like a
   plain document is part of being believable. */

.privacy
{
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 0 72px;
}

.privacy-title
{
    margin: 0 0 18px;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.privacy-lead
{
    margin: 0 0 8px;
    color: var(--site-muted);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.6;
}

.privacy-lead strong
{
    color: var(--site-text);
}

.privacy-heading
{
    margin: 40px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--site-border);
    font-size: clamp(19px, 2.4vw, 24px);
    line-height: 1.25;
}

/* Generous row spacing and a hanging indent: each item is a distinct commitment, and they must not
   blur into a wall of text -- this is the part of the page a reader actually scans. */
.privacy-list
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.privacy-list li
{
    position: relative;
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--site-muted);
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 1.65;
}

/* A CSS marker rather than a list bullet, so the accent applies to the marker alone without
   tinting the text -- and so the hanging indent above stays exact at any font size. */
.privacy-list li::before
{
    content: "";
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--site-accent);
}

.privacy-list li strong
{
    color: var(--site-text);
    font-weight: 600;
}

.privacy-note
{
    margin: 36px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--site-border);
    color: var(--site-muted);
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.6;
}

/* The header's pill is a "back to the demo" link on this page rather than the landing page's
   "Pre-release" status badge -- same component, different job, so it drops the badge's solid
   accent fill and reads as navigation. */
.site-header .status-pill
{
    background: transparent;
    border: 1px solid var(--site-border);
    color: var(--site-muted);
}

.site-header .status-pill:hover
{
    background: transparent;
    border-color: var(--site-accent);
    color: var(--site-accent);
}

@media (max-width: 700px)
{
    .privacy
    {
        padding-bottom: 48px;
    }

    .privacy-heading
    {
        margin-top: 32px;
    }
}