/* /privacy only. Values from Paper “Privacy notice — APPROVED”
   (Desktop 1440, Mobile 390). Shared header, footer and tokens live in site.css. */

:root { --body-copy: #444444; } /* Paper body grey: 9.7:1 on white */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.back-link {
  font-size: 14px; line-height: 20px;
  text-decoration: underline 1px; text-underline-position: from-font;
}
.back-link:hover { text-decoration-thickness: 2px; }

/* Title block */
.privacy-title {
  display: flex; flex-direction: column; gap: 20px;
  padding-block: 104px 64px;
  border-bottom: 1px solid var(--rule);
}
.privacy-title h1 {
  font: 900 72px/76px var(--font-display);
  letter-spacing: -0.03em;
}
.privacy-intro {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; padding-top: 8px;
}
.privacy-lede { color: var(--body-copy); font-size: 20px; line-height: 30px; }
.privacy-updated { color: var(--pencil); font-size: 14px; line-height: 20px; }

/* Body: contents column + sections column */
.privacy-body {
  display: grid;
  grid-template-columns: minmax(0, 336px) minmax(0, 720px);
  column-gap: clamp(48px, 6.667vw, 96px);
  align-items: start;
  padding-block: 72px 120px;
}

.privacy-contents {
  position: sticky; top: 32px;
  max-height: calc(100vh - 64px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; /* 14px gap + 4px label padding */
  /* overflow-y clips outlines, so the nav carries 8px side/bottom padding for focus rings;
     the ink rule is a background so it still spans only the column. */
  padding: 21px 8px 8px; margin-inline: -8px;
  background: linear-gradient(var(--ink), var(--ink)) 8px 0 / calc(100% - 16px) 1px no-repeat;
}
.privacy-contents ul {
  display: flex; flex-direction: column; gap: 14px;
  list-style: none; padding: 0;
}
.privacy-contents a {
  font-size: 15px; line-height: 22px;
  text-decoration: none;
}
.privacy-contents a:hover { text-decoration: underline 1px; text-underline-position: from-font; }

.privacy-sections { display: flex; flex-direction: column; gap: 64px; }
.privacy-sections section { display: flex; flex-direction: column; gap: 20px; }
.privacy-sections h2 {
  font: 800 30px/36px var(--font-display);
  letter-spacing: -0.015em;
  scroll-margin-top: 32px;
}
.privacy-sections p { color: var(--body-copy); font-size: 18px; line-height: 28px; }
.privacy-sections strong { color: var(--ink); font-weight: 600; }
.privacy-sections a {
  color: var(--ink);
  text-decoration: underline 1px; text-underline-position: from-font;
}
.privacy-sections a:hover { text-decoration-thickness: 2px; }
.privacy-sections .privacy-strong { color: var(--ink); font-weight: 600; }

/* Section 1: label + value rows */
.privacy-facts {
  list-style: none; padding: 0;
  border-top: 1px solid var(--ink);
}
.privacy-facts li {
  display: flex; gap: 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 18px; line-height: 26px;
}
.privacy-facts strong {
  flex-shrink: 0; width: 200px;
  color: var(--pencil); font-size: 16px; font-weight: 600; line-height: 26px;
}

/* Bulleted lists: 6px ink squares */
.privacy-list {
  display: flex; flex-direction: column; gap: 10px;
  list-style: none; padding: 0;
  color: var(--body-copy); font-size: 18px; line-height: 28px;
}
.privacy-list--collect { gap: 14px; }
.privacy-list li { position: relative; padding-left: 22px; }
.privacy-list li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; background: var(--ink);
}

/* Section 2: visits, video and hosting get small headings */
.privacy-notes { display: flex; flex-direction: column; gap: 20px; padding-top: 12px; }
.privacy-notes strong { display: block; margin-bottom: 4px; }

/* Tables */
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid var(--ink);
  text-align: left;
}
.privacy-table th,
.privacy-table td {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 16px; line-height: 24px;
}
.privacy-table th:last-child,
.privacy-table td:last-child { padding-right: 0; }
.privacy-table th {
  padding-block: 14px;
  color: var(--pencil);
  font: 600 12px/16px var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.privacy-table td:nth-child(1) { color: var(--ink); font-weight: 600; }
.privacy-table td:nth-child(2) { color: var(--body-copy); }
.privacy-table td:nth-child(3) { color: var(--ink); }
/* Column widths from Paper: 250 / 220 / 210 and 190 / 250 / 240, with 20px gaps */
.privacy-table--basis th:nth-child(1) { width: 37.5%; }
.privacy-table--basis th:nth-child(2) { width: 33.333%; }
.privacy-table--services th:nth-child(1) { width: 29.167%; }
.privacy-table--services th:nth-child(2) { width: 37.5%; }

/* Narrower desktop: contents list sits above the sections, not sticky */
@media (max-width: 1023px) {
  .privacy-body { display: block; }
  .privacy-contents {
    position: static; max-height: none; overflow: visible;
    margin-bottom: 64px;
    padding: 20px 0 0; margin-inline: 0;
    background: none; border-top: 1px solid var(--ink);
  }
}

@media (max-width: 767px) {
  .privacy-title { gap: 14px; padding-block: 40px 32px; }
  .privacy-title h1 { font-size: 44px; line-height: 48px; }
  .privacy-lede { font-size: 18px; line-height: 28px; }

  .privacy-body { padding-block: 32px 64px; }
  .privacy-contents { margin-bottom: 48px; }

  .privacy-sections { gap: 48px; }
  .privacy-sections h2 { font-size: 24px; line-height: 30px; }

  .privacy-facts li { flex-direction: column; gap: 2px; padding-block: 12px; }
  .privacy-facts strong { width: auto; font-size: 14px; line-height: 20px; }

  /* Tables stack. Real <th scope="col"> headers stay for screen readers;
     the explicit ARIA roles keep table semantics when display changes. */
  .privacy-table,
  .privacy-table tbody,
  .privacy-table tr,
  .privacy-table td { display: block; }
  .privacy-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .privacy-table tbody tr {
    display: flex; flex-direction: column; gap: 4px;
    padding-block: 16px;
    border-bottom: 1px solid var(--rule);
  }
  .privacy-table td { padding: 0; border: 0; }
  .privacy-table td:nth-child(3) { color: var(--pencil); font-size: 14px; line-height: 20px; }
  .privacy-table td[data-label]::before {
    content: attr(data-label) ' ';
    content: attr(data-label) ' ' / '';
  }
}