/* Privacy Policy (2026-10). Tokens, page colours, fonts, buttons, nav and footer come from
   brand.css. Same layout as the Disclaimer: a light title band (.cs-light) over the ink
   ground, a sticky contents list beside the sections on wide screens, Bebas Neue headings
   and stepped hairline fields. */
body.cs-page {
  /* the sticky site nav's height, as on the FAQ */
  --cs-nav-h: 94px;
}

/* on paper the accent goes purple (brand yellow is too faint for text) */
.cs-privacy-hero {
  --hi: var(--cs-purple);
  position: relative;
  padding: clamp(48px, 7vw, 104px) var(--cs-gutter) clamp(56px, 7vw, 96px);
}

/* a stepped hairline field in the top right, like the FAQ's */
.cs-privacy-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(44vw, 560px);
  height: 100%;
  background: var(--hatch-white);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 72% 100%, 72% 62%, 54% 62%, 54% 28%, 40% 28%);
  pointer-events: none;
}

.cs-privacy-hero-inner {
  position: relative;
  max-width: var(--cs-max);
  margin: 0 auto;
}

.cs-privacy-title {
  margin: 0 0 20px;
  font-family: var(--cs-display);
  font-size: clamp(64px, 9vw, 136px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: .01em;
}

.cs-privacy-title span {
  color: var(--hi);
}

.cs-privacy-lede {
  max-width: 46ch;
  margin: 0 0 16px;
  color: var(--cs-text-soft);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
}

.cs-privacy-date {
  margin: 0;
  color: var(--cs-text-soft);
  font-size: 14px;
  font-weight: 600;
}

/* ---- Contents and sections on the ink ground ---- */
.cs-privacy-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 clamp(40px, 6vw, 96px);
  max-width: var(--cs-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--cs-gutter) clamp(72px, 9vw, 128px);
}

.cs-privacy-nav {
  position: sticky;
  top: calc(var(--cs-nav-h) + 32px);
  align-self: start;
}

.cs-privacy-nav-title {
  margin: 0 0 14px;
  color: var(--cs-link);
  font-family: var(--cs-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .05em;
}

.cs-privacy-nav ul {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--cs-rule);
  list-style: none;
}

.cs-privacy-nav a {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  border-left: 3px solid transparent;
  color: var(--cs-text-soft);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

.cs-privacy-nav a:hover {
  border-left-color: var(--cs-teal);
  color: var(--cs-text);
}

.cs-privacy-nav a:focus-visible {
  outline: 3px solid var(--cs-teal);
  outline-offset: 2px;
}

.cs-privacy-section {
  max-width: 68ch;
  /* the program address wraps rather than overflowing on phones */
  overflow-wrap: anywhere;
  padding-bottom: clamp(40px, 5vw, 56px);
  scroll-margin-top: calc(var(--cs-nav-h) + 24px);
}

.cs-privacy-bars {
  display: block;
  width: 38px;
  height: 30px;
  margin-bottom: 16px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 15px);
}

.cs-privacy-section-title {
  margin: 0 0 18px;
  font-family: var(--cs-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
}

.cs-privacy-section p,
.cs-privacy-section ul {
  margin: 0 0 14px;
  color: var(--cs-text-soft);
  font-size: 17px;
  line-height: 1.6;
}

.cs-privacy-section ul {
  padding-left: 22px;
}

.cs-privacy-section li + li {
  margin-top: 8px;
}

.cs-privacy-section li::marker {
  color: var(--accent);
}

/* the keys-and-seed-phrase notice keeps its legal capitals, set off by a yellow rule */
.cs-privacy-section .cs-privacy-caps {
  padding-left: 16px;
  border-left: 3px solid var(--cs-yellow);
}

.cs-privacy-section strong {
  color: var(--cs-text);
  font-weight: 600;
}

.cs-privacy-hero a,
.cs-privacy-section a {
  color: var(--cs-link);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.cs-privacy-hero a:focus-visible,
.cs-privacy-section a:focus-visible {
  outline: 3px solid var(--cs-teal);
  outline-offset: 2px;
}

/* below this the contents list goes: the sections run full width */
@media screen and (max-width: 991px) {
  .cs-privacy-body {
    display: block;
  }

  .cs-privacy-nav {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  /* keep the field in the corner beside the title, off the copy */
  .cs-privacy-hero::before {
    width: 34vw;
    height: 120px;
  }
}