/* Privacy (Version 2). Built on the shared legal-page system (assets/css/pages/legal.css and
   assets/js/pages/legal.js, used as they are): the sticky bar with the document's name and a
   progress hairline, the sections beside the text on wide screens and in a menu from the bar
   below 1080px, and the current section marked by a 2px accent edge.
   This file adds only what this page has that the app policies do not: the "9 sections" count
   and the 01 to 09 numbering, a rule that draws in above each section, the dotted lists, and
   the closing questions tile. */

/* ── Head ───────────────────────────────────────────────────────── */
.pv-in { animation: pv-rise 1s var(--ease-out) var(--d, 0s) both; }
@keyframes pv-rise { from { opacity: 0; transform: translateY(20px); } }
.pv .lg-lead { max-width: 34ch; }

/* ── Sections ───────────────────────────────────────────────────── */
.pv-toc-h { display: flex; justify-content: space-between; gap: 12px; }
.pv-toc-h span + span { font-weight: 400; }
.pv-toc ol { counter-reset: toc; }
.pv-toc li { counter-increment: toc; }
.pv-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
}
/* "On this page" and the "Legal" eyebrow beside it already share one line (their letters start
   within 1px of each other at 1440), so the contents need no nudge here */
@media (max-width: 1079px) {
    .pv-toc a::before { color: var(--fg-3); }
    .pv-toc a[aria-current="true"]::before { color: var(--accent); }
}

/* ── The text ───────────────────────────────────────────────────── */
@media (min-width: 735px) { .pv-prose { font-size: 18px; line-height: 1.66; } }
.pv-prose h2 {
    position: relative;
    margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 3.4vw, 40px);
    font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -0.02em;
}
.pv-prose > h2:first-child { margin-top: 0; padding-top: 0; }
/* a rule draws in from the left above each section after the first */
.pv-prose h2:not(:first-child)::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: var(--line); transform-origin: 0 50%;
    transition: transform 1.2s var(--ease-out) .1s;
}
.js .pv-prose h2:not(.is-in)::before { transform: scaleX(0); }
.pv-prose h2 + * { margin-top: 0.75em; }
.pv-prose ul { list-style: none; padding-inline-start: 0; }
.pv-prose li { position: relative; padding-inline-start: 24px; }
.pv-prose li::before {
    content: ""; position: absolute; inset-inline-start: 5px; top: 0.74em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3);
}
.pv-prose li + li { margin-top: 0.65em; }

/* ── Questions ──────────────────────────────────────────────────── */
.pv-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
    margin-top: clamp(56px, 7vw, 88px);
    padding: clamp(24px, 3vw, 32px);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}
.pv-cta p { color: var(--fg-2); }
.pv-cta strong { display: block; color: var(--fg); font-size: 19px; letter-spacing: -0.012em; }

@media (prefers-reduced-motion: reduce) {
    .pv-in { animation: none; }
    .pv-prose h2::before { transform: none !important; }
}