/* Policy pages: privacy, cookies, terms, accessibility.

   A separate stylesheet rather than a block in style.css, so editing a policy
   page's layout never means bumping the ?v= stamp on every other page. Only the
   four policy pages load this. Everything here builds on the tokens in
   style.css, which those pages load first. */

.policy {
  max-width: 78ch;
  margin: 0 auto;
  padding: var(--space-16) var(--gutter) var(--space-24);
}

.policy-eyebrow {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--space-3);
}
.policy h1 {
  font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.policy-meta {
  font-size: var(--text-sm); color: var(--ink-muted);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
}

/* Scroll margin so an in-page link to a section clears the sticky nav. The
   global [id] rule in base.css already does this; restated here because these
   headings are the only reason anyone deep-links into a policy. */
.policy h2, .policy h3 { scroll-margin-top: 88px; }

.policy h2 {
  font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.01em;
  margin-top: var(--space-12); margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.policy h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.policy h3 {
  font-size: var(--text-base); font-weight: 500;
  margin-top: var(--space-8); margin-bottom: var(--space-3);
}

.policy p, .policy li {
  font-size: var(--text-base); line-height: 1.65; color: var(--ink-2);
}
.policy p { margin-bottom: var(--space-4); }
.policy strong { color: var(--ink); font-weight: 500; }

.policy ul { margin: 0 0 var(--space-4) 0; }
.policy ul li {
  position: relative; padding-left: var(--space-5);
  margin-bottom: var(--space-2);
}
.policy ul li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 5px; height: 5px; border-radius: var(--r-full);
  background: var(--brand);
}
.policy ol { margin: 0 0 var(--space-4) var(--space-5); list-style: decimal; }
.policy ol li { margin-bottom: var(--space-2); padding-left: var(--space-2); }

.policy a {
  color: var(--brand-strong); text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.policy a:hover { text-decoration-color: currentColor; }

.policy code {
  /* Brown, not a mono face: the brand typeface carries body copy everywhere on
     the site, and the tinted box below is what marks these out as literals. The
     override is explicit because <code> defaults to monospace in the UA sheet. */
  font-family: inherit; font-size: 0.875em;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 0.1em 0.35em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Tables carry the cookie inventories and the CPRA categories, which are wide.
   The wrapper scrolls rather than the page: a policy that forces the whole body
   sideways on a phone is unreadable. */
.policy-table {
  overflow-x: auto;
  margin: 0 0 var(--space-6) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
.policy-table table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.policy-table th, .policy-table td {
  text-align: left; vertical-align: top;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.policy-table th {
  font-weight: 500; color: var(--ink);
  background: var(--bg-alt);
  white-space: nowrap;
}
.policy-table td { color: var(--ink-2); }
.policy-table tr:last-child td { border-bottom: none; }
.policy-table code { white-space: nowrap; }

.policy hr {
  border: none; border-top: 1px solid var(--border);
  margin: var(--space-12) 0;
}

@media (max-width: 640px) {
  .policy { padding-top: var(--space-10); }
  .policy-table th, .policy-table td { padding: var(--space-2) var(--space-3); }
}