/* Legal pages: long-form prose at measure on the sage ground, every value from
 * tokens.css. Tables and quoted text are cream plates (site.css remaps the ink,
 * rule and link tokens to their on-paper values inside them). Legal's bracketed
 * placeholders are left visible on purpose and set in a dashed cream box. */
.policy { padding: var(--space-8) 0 var(--space-12); }
@media (min-width: 880px) { .policy { padding: var(--space-12) 0 var(--space-16); } }
.policy .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (min-width: 880px) { .policy .wrap { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-16); } }
.policy-nav { position: sticky; top: var(--space-6); }
.policy-nav .label { color: var(--ink-muted); margin-bottom: var(--space-3); display: block; }
.policy-nav ol { list-style: none; border-top: 1px solid var(--hairline); }
.policy-nav li { border-bottom: 1px solid var(--hairline); }
.policy-nav a { display: block; padding: var(--space-2) 0; color: var(--ink); font: var(--type-strong); font-size: 14px; }
.policy-nav a[aria-current="page"] { color: var(--teal-text); }
.policy-prose { max-width: var(--measure); min-width: 0; }
.policy-prose .kicker { color: var(--ink-muted); display: block; margin-bottom: var(--space-3); }
.policy-prose h1 { font: var(--type-h1); text-wrap: balance; margin-bottom: var(--space-6); }
.policy-prose h2 { font: var(--type-h2); text-wrap: balance; margin-top: var(--space-12); margin-bottom: var(--space-3); }
.policy-prose h3 { font: var(--type-h3); margin-top: var(--space-8); margin-bottom: var(--space-2); }
.policy-prose h4 { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.policy-prose p, .policy-prose ul, .policy-prose ol, .policy-prose table, .policy-prose blockquote { margin-bottom: var(--space-4); }
.policy-prose ul, .policy-prose ol { padding-left: 1.3em; }
.policy-prose li + li { margin-top: var(--space-2); }
.policy-prose strong { font-weight: 600; }
.policy-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.policy-prose a:hover { text-decoration-color: currentColor; }
.policy-prose code { background: var(--surface-paper); padding: 1px 5px; border-radius: var(--radius-sm); }
.policy-prose pre { background: var(--surface-paper); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); overflow-x: auto; font: var(--type-readout); }
.policy-prose pre code { background: transparent; padding: 0; }
.policy-prose blockquote { margin-left: 0; padding: var(--space-4) var(--space-6); background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.policy-prose blockquote > :last-child { margin-bottom: 0; }
.policy-prose hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-8) 0; }
/* A table is a cream plate; it scrolls sideways inside the plate on a phone. */
.policy-prose .table-scroll { overflow-x: auto; margin-bottom: var(--space-4); background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.policy-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; margin-bottom: 0; }
.policy-prose th, .policy-prose td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.policy-prose tr:last-child td { border-bottom: 0; }
.policy-prose th { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.policy-prose .meta { font: var(--type-small); color: var(--ink-muted); padding: var(--space-3) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-8); }
.policy-prose .meta p { margin: 0; }
.policy-prose .draft { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-readout); font-size: 11px; color: var(--ink-muted); margin-bottom: var(--space-6); }
.policy-prose .draft i { width: 5px; height: 5px; border: 1.5px solid var(--attention); border-radius: var(--radius-pill); }
.policy-prose .ph { background: var(--surface-paper); border: 1px dashed var(--hairline); border-radius: var(--radius-sm); padding: 0 3px; }
.policy-prose em { font-style: italic; }