/* ══════════════════════════════════════════════════════════════
   OFFICIAL — long-form pages: /support, /privacy, /terms

   Loaded AFTER styles.css, which it leans on for everything the landing page
   already defines: the tokens, the nav, the footer, .btn, .wrap, .skip. This
   file adds only what a document needs and a landing page does not — a reading
   column, headings at document scale, tables, a table of contents, and the
   support form.

   It replaces privacy.css, which was a wholesale copy of the ORIGINAL white
   site's stylesheet. That was right while the black design was a candidate and
   wrong the moment it went live: clicking Privacy in the footer took you off
   the product and onto something that looked like a different company.

   Type is the system stack from --font, same as the rest of the site. The old
   pages loaded Coolvetica and Space Grotesk; nothing here uses them.
   ══════════════════════════════════════════════════════════════ */

/* ── the nav, pinned solid ──────────────────────────────────────
   .nav is transparent until script.js adds .stuck on scroll. These pages load
   no script, so the nav needs the scrolled treatment from the start or it is
   white text on whatever the top of the document happens to be. */
.nav--solid {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-color: var(--line);
}

/* ── the document ───────────────────────────────────────────────
   One column, measured in ch so the line length stays readable rather than
   tracking the viewport. 72ch is about 90 characters at this size — long for
   prose, right for legal copy, which is read in clauses rather than paragraphs.

   The top padding clears the fixed nav (76px) with room to breathe. */
.legal {
  padding: clamp(124px, 12vw, 168px) 0 clamp(72px, 8vw, 112px);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.legal__in { max-width: 72ch; margin-inline: auto; }

.legal__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 18px;
}

.legal h1 {
  font-size: clamp(40px, 6vw, 68px); font-weight: 600; line-height: 1.02;
  letter-spacing: -.04em; color: var(--text); margin: 0 0 20px;
}

.legal h2 {
  font-size: clamp(23px, 2.6vw, 29px); font-weight: 600; line-height: 1.18;
  letter-spacing: -.025em; color: var(--text);
  margin: 60px 0 16px; scroll-margin-top: 96px;
}
.legal h3 {
  font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; color: var(--text);
  margin: 34px 0 10px; scroll-margin-top: 96px;
}
.legal h4 {
  font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--text);
  margin: 26px 0 8px;
}

.legal p { margin: 0 0 16px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal em { color: var(--text); font-style: italic; }

/* Links carry an underline rather than a colour: on black, the accent-blue the
   old sheet used for hover reads as a visited-link artefact, and these pages
   are mostly prose with links inside it. */
.legal a {
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
  transition: border-color .2s var(--ease);
}
.legal a:hover { border-color: #fff; }

/* The global reset strips markers from every ul/ol. Legal copy is the one place
   they carry meaning, so they go back — and only inside .legal__in, so the nav
   and footer lists above and below are untouched. */
.legal__in ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal__in ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.legal__in li { margin-bottom: 9px; }
.legal__in li::marker { color: var(--text-3); }

.legal__updated { font-size: 14px; color: var(--text-3); margin: 0 0 30px; }
.legal__note {
  margin: 26px 0; padding: 18px 20px;
  border: 1px solid var(--line); border-left: 2px solid var(--text-3);
  border-radius: 12px; background: var(--panel);
  font-size: 15px;
}

/* ── contents ───────────────────────────────────────────────── */
.legal__toc {
  margin: 36px 0 12px; padding: 24px 26px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
}
.legal__toc h2 {
  margin: 0 0 14px; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.legal__toc ol { margin: 0; padding-left: 20px; list-style: decimal; columns: 2; column-gap: 34px; }
.legal__toc li { margin-bottom: 9px; break-inside: avoid; }
.legal__toc a { border-bottom: 0; color: var(--text-2); }
.legal__toc a:hover { color: #fff; }
@media (max-width: 620px) { .legal__toc ol { columns: 1; } }

/* ── tables ─────────────────────────────────────────────────────
   The processor list and the retention schedule. They must never push the page
   sideways on a phone, so they scroll inside their own box. */
.legal__table {
  overflow-x: auto; margin: 0 0 24px;
  border: 1px solid var(--line); border-radius: 14px;
}
.legal table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14.5px; }
.legal th, .legal td {
  padding: 12px 15px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal tr:last-child td { border-bottom: 0; }
.legal th {
  font-weight: 600; color: var(--text); background: var(--panel);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}

/* ══════════════════════════════════════════════════════════════
   The support form
   Authored with support.html in ../Official-Landing and copied here by
   tools/sync-support.mjs. These are its styles in this site's palette.
   ══════════════════════════════════════════════════════════════ */
.sform {
  margin: 24px 0 10px; padding: clamp(20px, 3.4vw, 28px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
}
.sform[hidden] { display: none; }

.sform__f { margin: 0 0 18px; }
.sform__f:last-of-type { margin-bottom: 0; }

.sform__lbl {
  display: block; margin: 0 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.sform__opt { font-weight: 400; letter-spacing: .02em; text-transform: none; }

.sform__in {
  width: 100%; display: block;
  font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text);
  background: #000; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.sform__in::placeholder { color: var(--text-3); }
.sform__in:hover { border-color: rgba(255, 255, 255, .3); }
.sform__in:focus {
  outline: none; border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .09);
}
textarea.sform__in { resize: vertical; min-height: 140px; }

.sform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sform__row .sform__f { margin-bottom: 18px; }

/* Topic. Radios, not a <select>: five options is few enough to show all of
   them, and seeing "a sport you should add" among them is most of the reason
   anybody tells us about one. A plain div of <label>s, not a <ul> — a
   radiogroup is not allowed listitem children. */
.sform__topics { display: flex; flex-wrap: wrap; gap: 9px; }
.sform__topic { position: relative; }
.sform__topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sform__topic span {
  display: block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  font-size: 14px; color: var(--text-2); white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.sform__topic input:hover + span { border-color: rgba(255, 255, 255, .34); color: #fff; }
.sform__topic input:checked + span { background: #fff; border-color: #fff; color: #000; }
.sform__topic input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }

.sform__hint { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }

/* The honeypot. Off-screen rather than display:none, because a bot reading the
   computed style skips what is not rendered. */
.sform__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sform__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line);
}
.sform__send { border: 0; cursor: pointer; background: #fff; color: #000; }
.sform__send:hover { background: #e6ecee; }
.sform__send:disabled { opacity: .45; cursor: default; }
.sform__fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); flex: 1; min-width: 190px; }

/* Errors and the sent confirmation share one live region, which is in the DOM
   from the start — a region that appears at the same moment its text does is
   not announced. Empty and silent until there is something to say. */
.sform__say { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; }
.sform__say:empty { display: none; }
.sform__say[data-tone="bad"] { color: #ff9d94; }
.sform__say[data-tone="good"] { color: var(--text-2); }

.sform__done {
  margin: 24px 0 10px; padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  text-align: center;
}
.sform__done h3 {
  font-size: clamp(20px, 2.4vw, 25px); font-weight: 600; letter-spacing: -.02em;
  color: var(--text); margin: 0 0 10px;
}
.sform__done h3:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 6px; }
.sform__done p { margin: 0 auto; max-width: 44ch; font-size: 15.5px; line-height: 1.65; }
.sform__tick {
  width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .09); border: 1px solid var(--line-2); color: #fff;
}
.sform__again {
  margin-top: 20px; background: none; border: 1px solid var(--line-2); color: var(--text);
  border-radius: 999px; padding: 11px 22px; font-family: var(--font); font-size: 14px;
  cursor: pointer; transition: border-color .2s var(--ease);
}
.sform__again:hover { border-color: #fff; }

.sform__spin {
  width: 13px; height: 13px; flex: none; border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, .25); border-top-color: #000;
  animation: sform-spin .7s linear infinite;
}
@keyframes sform-spin { to { transform: rotate(360deg); } }

/* No JavaScript, or no endpoint configured: the form never appears and this
   does instead. The page said "email us" before the form existed, so there is
   a correct thing to fall back to. */
.sform__nojs {
  margin: 24px 0 10px; padding: 18px 22px;
  border: 1px solid var(--line); border-left: 2px solid var(--text-3);
  border-radius: 12px; background: var(--panel);
  font-size: 15px; line-height: 1.6;
}
.sform__nojs p { margin: 0; }

@media (max-width: 560px) {
  .sform__row { grid-template-columns: 1fr; gap: 0; }
  .sform__topic span { padding: 9px 14px; font-size: 13.5px; }
  .sform__send { width: 100%; justify-content: center; }
}

@media print {
  .nav, .foot, .sform, .sform__done, .sform__nojs { display: none; }
  .legal { padding-top: 0; color: #000; }
}