/* /privacy/ -- the privacy policy (a Markdown page).
   "The short version" box at the top, an "On this page" list (chips on small
   screens, a sticky column beside the text on wide ones), provider cards and
   a closing contact band. */

/* ---------------------------------------------------------------- hero: the policy's date */

.page-hero__lead .privacy-date {
  display: table; margin-top: 18px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(21, 24, 29, .6);
  font: 700 .78rem/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.page-hero__lead .privacy-date time { color: var(--ink); }

/* ---------------------------------------------------------------- the short version */

.prose > .privacy-summary {
  max-width: none; margin: 0 0 2.4em; padding: clamp(22px, 3.2vw, 36px);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(64, 181, 227, .10), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}
.privacy-summary h2 { margin: 0 0 1.1em; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.privacy-points {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 20px 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.prose .privacy-points li { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.privacy-points__icon {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(64, 181, 227, .12); border: 1px solid rgba(64, 181, 227, .25); color: var(--sky);
}
.privacy-points__icon .icon { width: 20px; height: 20px; }
.privacy-points__icon--gold { background: rgba(64, 181, 227, .1); border-color: rgba(64, 181, 227, .3); color: var(--gold); }
.privacy-points p { margin: 0; font-size: .98rem; line-height: 1.5; }
.privacy-points strong { display: block; margin-bottom: 3px; font-family: var(--round); font-weight: 400; font-size: 1.08rem; line-height: 1.3; color: var(--ink); text-wrap: pretty; }

/* ---------------------------------------------------------------- on this page */

.prose > .privacy-toc { margin: 0 0 2.6em; }
.privacy-toc__title { margin: 0 0 12px; font: 700 .74rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.privacy-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .privacy-toc__list li { margin: 0; }
.prose .privacy-toc__list a {
  display: inline-block; padding: .5em .9em; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); text-decoration: none;
  font: 700 .86rem/1.1 var(--label); letter-spacing: .02em;
}
.prose .privacy-toc__list a:hover { color: var(--ink); border-color: #4A525E; }

/* the text lines up with the hero's title on every width */
.page-privacy .section > .container--prose { max-width: 1200px; }
.page-privacy .prose { max-width: 880px; }

@media (min-width: 1100px) {
  .page-privacy .prose { max-width: none; position: relative; padding-left: 300px; }
  /* the column runs the whole height of the text; the list inside it sticks */
  .page-privacy .prose > .privacy-toc { position: absolute; top: 0; bottom: 0; left: 0; width: 230px; margin: 0; }
  .privacy-toc__inner { position: sticky; top: calc(var(--header-h) + 28px); }
  .privacy-toc__list { flex-direction: column; flex-wrap: nowrap; gap: 0; border-left: 2px solid var(--line-soft); }
  .prose .privacy-toc__list a {
    display: block; margin-left: -2px; padding: 7px 0 7px 16px; border: 0; border-left: 2px solid transparent;
    border-radius: 0; background: none; font-size: .95rem;
  }
  .prose .privacy-toc__list a:hover { border-left-color: var(--sky); color: var(--ink); }
}

/* ---------------------------------------------------------------- text */

.page-privacy .prose h2 { padding-top: .2em; }
.page-privacy .prose h3 { font-size: 1.22rem; }
.prose > .privacy-facts { margin: 0 0 1.5em; max-width: none; }
.page-privacy .table td:first-child { color: var(--ink); font-weight: 600; }
.page-privacy .prose code { font-size: .86em; }

/* ---------------------------------------------------------------- chat: four kinds */

.prose > .privacy-chat {
  max-width: none; display: grid; gap: 14px; margin: 0 0 1.5em;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.privacy-chat__item {
  padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface);
}
.prose .privacy-chat__item h4 {
  margin: 0; font: 400 1.18rem/1.2 var(--display); letter-spacing: .005em; text-transform: none; color: var(--ink);
}
.prose .privacy-chat__where { margin: 4px 0 12px; font-size: .9rem; color: var(--muted); }
.privacy-chat__item dl { margin: 0; display: grid; gap: 2px; }
.privacy-chat__item dt {
  margin-top: 8px; font: 700 .72rem/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--sky);
}
.privacy-chat__item dt:first-child { margin-top: 0; }
.privacy-chat__item dd { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------------------------------------------------------------- what other players see */

.prose > .privacy-split {
  max-width: none; display: grid; gap: 14px; margin: 0 0 1.5em;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.privacy-panel {
  padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.privacy-panel--public { border-color: rgba(64, 181, 227, .3); }
.prose .privacy-panel__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.25rem;
}
.privacy-panel__title .icon {
  flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px;
  background: rgba(64, 181, 227, .12); border: 1px solid rgba(64, 181, 227, .25); color: var(--sky);
}
.privacy-panel--private .privacy-panel__title .icon {
  background: rgba(64, 181, 227, .1); border-color: rgba(64, 181, 227, .3); color: var(--gold);
}
.privacy-panel ul { margin: 0; padding-left: 1.1em; }
.prose .privacy-panel li { margin: .4em 0; font-size: .98rem; line-height: 1.5; }
.privacy-panel--private li::marker { color: var(--gold); }

/* ---------------------------------------------------------------- who else handles it */

.prose > .privacy-orgs {
  max-width: none; display: grid; gap: 14px; margin: 0 0 1.6em;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.privacy-org { padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.prose .privacy-org h3 { margin: 0 0 .2em; font-size: 1.3rem; }
.privacy-org__role { margin: 0 0 .7em !important; font: 700 .74rem/1.3 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.privacy-org p { margin: 0; font-size: .97rem; line-height: 1.55; }
/* where the company keeps or handles the data */
.prose .privacy-org__where {
  display: flex; align-items: center; gap: 7px; margin: 0 0 .75em;
  font: 700 .84rem/1.3 var(--label); letter-spacing: .03em; color: var(--ink);
}
.privacy-org__where .icon { flex: none; width: 15px; height: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- contact band */

.prose > .privacy-contact {
  max-width: none; margin: 3.2em 0 0; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center;
  padding: clamp(22px, 3.2vw, 34px); border-radius: var(--radius-lg);
  border: 1px solid rgba(88, 101, 242, .4);
  background: linear-gradient(135deg, rgba(88, 101, 242, .16), var(--surface) 65%);
}
.privacy-contact__text { flex: 1 1 320px; min-width: 0; }
.page-privacy .privacy-contact h2 { margin: 0 0 .35em; padding: 0; }
.privacy-contact p { margin: 0; }
.prose .privacy-contact .btn { font-weight: 700; }
@media (max-width: 560px) {
  .privacy-contact .btn { width: 100%; }
}
/* on small screens the list sits right under the summary, so it skips it */
@media (max-width: 1099px) {
  .privacy-toc__top { display: none; }
}