/* Privacy Policy — long-form legal document with a sticky contents rail,
   a "basic information" ledger summary, and hairline data tables.
   Builds on the same .policy-content prose treatment as the Information
   Security Policy page, extended for tables, lists, links and navigation.
   Gold tints are derived from the brand accent (--brand-gold #DEB483);
   --brand-blue-700 (#8D6F4D) is the dark gold-brown label alias. */

/* Smooth anchor jumps (page-scoped; reduced-motion is reset globally). */
html {
  scroll-behavior: smooth;
}

/* ---- Hero ---------------------------------------------------------- */
.policy-hero {
  border-bottom: 1px solid var(--line);
}

/* Pure-CSS staggered entrance. Base state stays visible (opacity:1), so the
   legal text can never be hidden by a JS failure; the keyframe only applies
   while animating, via fill-mode backwards. Reduced-motion disables it
   globally and the element shows at its natural visible state. */
@keyframes policyRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.policy-hero .eyebrow,
.policy-hero h1 {
  animation: policyRise var(--duration-slow) var(--ease-out) backwards;
}
.policy-hero h1 { animation-delay: 60ms; }

/* ---- Two-column layout: contents rail + content ------------------- */
.policy-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-10));
  align-items: start;
}

/* ---- Contents rail (sticky) --------------------------------------- */
.policy-toc {
  position: sticky;
  top: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--text-sm);
}

.policy-toc-h {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
  padding-left: 26px;
}

.policy-toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  color: var(--slate);
  text-decoration: none;
  line-height: 1.35;
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.policy-toc a:hover {
  color: var(--ink);
}

.policy-toc-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand-blue-soft);
}

.policy-toc a.policy-toc-lead {
  display: block;
  padding-left: 26px;
  color: var(--ink);
  font-weight: 500;
}

.policy-toc a.is-active {
  color: var(--ink);
  font-weight: 500;
}

.policy-toc a.is-active .policy-toc-n {
  color: var(--brand-gold);
}

/* ---- Long-form content (shared prose treatment) ------------------- */
.policy-content {
  min-width: 0;
}

.policy-content > section {
  scroll-margin-top: var(--space-10);
}

.policy-content h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

.policy-h2-n {
  font-family: var(--font-mono);
  font-size: 1em;
  font-weight: 400;
  color: var(--brand-gold);
  flex: none;
}

.policy-content p {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--slate);}

.policy-content a {
  color: var(--brand-blue-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--brand-blue-700) 35%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.policy-content a:hover {
  text-decoration-color: var(--brand-blue-700);
}

/* ---- Bulleted lists with restrained gold markers ------------------ */
.policy-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;}

.policy-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--slate);
}

.policy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 1px;
  background: var(--brand-gold);
}

/* ---- "Basic information" ledger summary --------------------------- */
.policy-glance {
  background: var(--brand-gold-accent);
  border: 1px solid #EBDCC2;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6) var(--space-3);
  margin-bottom: var(--space-8);
  scroll-margin-top: var(--space-10);
}

.policy-content .policy-glance-h {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--brand-blue-700);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid #EBDCC2;
}

.policy-ledger {
  margin: 0;
}

.policy-ledger > div {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid #F0E6D5;
}

.policy-ledger > div:last-child {
  border-bottom: none;
}

.policy-ledger dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-blue-700);
  line-height: 1.5;
  padding-top: 2px;
}

.policy-ledger dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
}

.policy-ledger dd p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
}

.policy-ledger dd p:last-child {
  margin-bottom: 0;
}

.policy-ledger dd ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy-ledger dd li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}

.policy-ledger dd li:last-child {
  margin-bottom: 0;
}

.policy-ledger dd li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 1px;
  background: var(--brand-gold);
}

.policy-ledger dd a {
  color: var(--brand-blue-700);
}

/* ---- Data tables (hairline, mono heads) --------------------------- */
.policy-table-wrap {
  margin: var(--space-5) 0 var(--space-2);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.policy-table thead th {
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue-700);
  padding: 0 var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line));
}

.policy-table tbody td {
  vertical-align: top;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  line-height: 1.6;
}

.policy-table tbody td:last-child,
.policy-table thead th:last-child {
  padding-right: 0;
}

.policy-table-purposes thead th:nth-child(1) { width: 30%; }
.policy-table-purposes thead th:nth-child(2) { width: 42%; }
.policy-table-purposes thead th:nth-child(3) { width: 28%; }

.policy-table-annex thead th { width: 33.33%; }

/* Grouped section rows inside the purposes table */
.policy-table-group th {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  padding: var(--space-6) 0 var(--space-3);
  border-bottom: 1px solid var(--ink);
}

.policy-table-group:first-child th {
  padding-top: var(--space-2);
}

/* ---- Footnotes ----------------------------------------------------- */
.policy-fnref {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

.policy-fnref a {
  text-decoration: none;
  padding: 0 2px;
}

.policy-footnotes {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.policy-footnotes ol {
  margin: 0;
  padding-left: var(--space-5);
}

.policy-footnotes li {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);}

.policy-fn-back {
  text-decoration: none;
  margin-left: var(--space-1);
}

/* ---- Responsive: collapse rail, stack tables ---------------------- */
@media (max-width: 900px) {
  .policy-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* The contents rail becomes a compact, scrollable chip row up top. */
  .policy-toc {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }

  .policy-toc-h {
    display: none;
  }

  .policy-toc a {
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: var(--space-1);
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
  }

  .policy-toc a.is-active {
    border-color: var(--brand-gold);
  }
}

@media (max-width: 720px) {
  .policy-ledger > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* Stacked, labelled rows instead of a cramped 3-column scroll. */
  .policy-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .policy-table,
  .policy-table tbody,
  .policy-table tr,
  .policy-table td {
    display: block;
    width: 100%;
  }

  .policy-table-group th {
    display: block;
    padding: var(--space-5) 0 var(--space-2);
  }

  .policy-table tbody tr:not(.policy-table-group) {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
  }

  .policy-table tbody td {
    border-bottom: none;
    padding: 0 0 var(--space-3);
  }

  .policy-table tbody td:last-child {
    padding-bottom: 0;
  }

  .policy-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-blue-700);
    margin-bottom: var(--space-1);
  }
}