/* ============================================================
   policy.css — Legal pages (privacy, terms) + cute-animal accents.
   ============================================================ */

body.policy-body {
  background: var(--paper-50);
  color: var(--ink-900);
}

/* ----- hero ----- */
.policy-hero {
  background: var(--paper-100);
  padding-top: var(--s-10);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid var(--paper-300);
  position: relative;
  overflow: hidden;
}
.policy-hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto auto;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(60% 60% at 70% 30%, rgba(31,182,165,0.12) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.policy-hero .eyebrow { color: var(--accent-red); }
.policy-hero h1 {
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-block: var(--s-3) var(--s-5);
}
.policy-hero h1 .kinetic { display: inline-block; }
.policy-hero__lede {
  max-width: 64ch;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--ink-700);
}
.policy-hero__meta {
  margin-top: var(--s-5);
  font-size: 14px;
  color: var(--ink-500);
}

/* ----- document body ----- */
.policy-doc {
  max-width: 880px;
  margin: 0 auto;
  padding-block: var(--s-9);
  padding-inline: var(--gutter);
}

/* ----- TOC ----- */
.policy__toc {
  background: var(--paper-100);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-5);
  margin-bottom: var(--s-8);
}
.policy__toc summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  list-style: none;
  padding: var(--s-2) 0;
}
.policy__toc summary::marker { display: none; }
.policy__toc summary::-webkit-details-marker { display: none; }
.policy__toc[open] summary { padding-bottom: var(--s-3); border-bottom: 1px solid var(--paper-300); margin-bottom: var(--s-3); }
.policy__toc ol {
  list-style: decimal;
  padding-left: var(--s-5);
  display: grid;
  gap: var(--s-2);
  font-size: 14px;
  color: var(--ink-700);
}
.policy__toc a { color: var(--ink-900); border-bottom: 1px solid transparent; }
.policy__toc a:hover { color: var(--accent-red); border-bottom-color: var(--accent-red); }

/* ----- section ----- */
.policy-section {
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--paper-300);
  scroll-margin-top: 96px;
}
.policy-section:last-of-type { border-bottom: 0; }
.policy-section h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
}
.policy-section h3 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  margin-block: var(--s-5) var(--s-3);
}
.policy-section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  margin-block: var(--s-3);
}
.policy-section p strong { color: var(--ink-900); }
.policy-section ul {
  list-style: disc;
  padding-left: var(--s-5);
  margin-block: var(--s-3);
  display: grid;
  gap: var(--s-2);
  color: var(--ink-700);
}
.policy-section ul li::marker { color: var(--accent-red); }
.policy-section a {
  color: var(--accent-red);
  border-bottom: 1px solid rgba(200,16,46,0.3);
  transition: border-color var(--d-quick) var(--ease-out-soft);
}
.policy-section a:hover { border-bottom-color: var(--accent-red); }

/* ----- tables ----- */
.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--s-4);
  font-size: 14px;
  background: var(--paper-100);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  overflow: hidden;
}
.policy-table th, .policy-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--paper-300);
  vertical-align: top;
}
.policy-table th {
  background: var(--paper-200);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}
.policy-table tr:last-child td { border-bottom: 0; }
.policy-table code {
  background: var(--paper-200);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ----- anchor offset for sticky header ----- */
.policy-section:target h2 { color: var(--accent-red); }

/* ----- responsive ----- */
@media (max-width: 768px) {
  .policy-hero { padding-top: var(--s-8); }
  .policy-doc { padding-block: var(--s-7); }
  .policy-section h2 { font-size: 28px; }
  .policy-section h3 { font-size: 22px; }
  .policy-table { font-size: 13px; }
  .policy-table th, .policy-table td { padding: 10px 12px; }
}