/* ── Policy pages — terms, privacy, cookies, AI use ───────────
   Long-form legal copy. The job here is legibility, not drama: the hero
   carries the monumental type, the body drops to a single quiet measure
   and stays there. Reuses .cs-nav and .cs-hero-* from case-study.css. */

/* Case studies keep the nav pinned because it rides over full-bleed imagery.
   A policy page is a document: a nav parked over the measure would sit on the
   copy for the whole scroll, so here it belongs to the hero and leaves with it. */
.pol-page .cs-nav {
  position: absolute;
}

.pol-hero {
  padding-top: 100px;
  background-color: var(--color-black);
  color: var(--color-white);
}

.pol-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0 var(--pad-h) var(--space-sm);
}

.pol-hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 120px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  padding: 0 var(--pad-h) var(--space-lg);
  color: var(--color-white);
}

/* ── Body ─────────────────────────────────────────────────────── */
/* Top rung is smaller than the bottom: the hero already ends on a --space-lg,
   and stacking two --space-xl rungs leaves the first line stranded. */
.pol-body {
  background-color: var(--color-off-white);
  padding: var(--space-lg) var(--pad-h) var(--space-xl);
}

.pol-article {
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--color-black);
}

.pol-article p {
  margin-bottom: 1.4em;
}

.pol-article a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;
}

.pol-article a:hover {
  color: var(--color-orange);
}

.pol-nb {
  white-space: nowrap;
}

/* Section headings. The rule above each one is what gives a wall of legal
   copy its rhythm — the type alone is not enough at this length. */
.pol-article .pol-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--space-md) 0 0.8em;
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.pol-article .pol-h2:first-child {
  margin-top: 0;
}

.pol-article ul,
.pol-article ol {
  margin: 0 0 1.4em;
  padding-left: 1.2em;
  list-style: none;
}

.pol-article li {
  position: relative;
  margin-bottom: 0.45em;
}

.pol-article li::before {
  content: "–";
  position: absolute;
  left: -1.2em;
  color: var(--color-orange);
}

/* ── Accordions ───────────────────────────────────────────────
   Termageddon groups each data point into a <details>. Native disclosure,
   no script: it works with JS off and announces its own state. */
.pol-accordions {
  margin-bottom: var(--space-md);
  border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.pol-accordion {
  border-bottom: 1px solid rgba(26, 26, 26, 0.15);
}

.pol-summary {
  cursor: pointer;
  padding: 0.9em 2em 0.9em 0;
  position: relative;
  list-style: none;
  transition: color 0.2s ease;
}

.pol-summary::-webkit-details-marker {
  display: none;
}

.pol-summary:hover {
  color: var(--color-orange);
}

.pol-summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-orange);
}

.pol-accordion[open] > .pol-summary::after {
  content: "–";
}

.pol-article .pol-h3 {
  display: inline;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
}

.pol-acc-content {
  padding-bottom: var(--space-xs);
}

.pol-acc-section {
  margin-bottom: 1.2em;
}

.pol-article .pol-h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.5em;
}

.pol-acc-body ul:last-child,
.pol-acc-body p:last-child {
  margin-bottom: 0;
}

/* ── Legal footer nav ─────────────────────────────────────────── */
.pol-footer-nav {
  background-color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  padding: var(--space-lg) var(--pad-h);
  font-family: var(--font-body);
  font-size: 16px;
}

.pol-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pol-footer-nav a {
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.pol-footer-nav a:hover {
  opacity: 0.5;
}

.pol-footer-nav a[aria-current="page"] {
  color: var(--color-orange);
}

@media (min-width: 768px) {
  .pol-hero {
    padding-top: 120px;
  }
}