/* ============================================================
   Legal pages: Terms, Privacy notice.
   Loaded only by those pages, not by the launch page, so the
   one screen that has to paint fast does not carry any of it.
   Depends on the custom properties and font faces declared in
   style.css, which these pages load first.
   ============================================================ */

body.legal {
  background-color: var(--bg-midnight);
  color: var(--text-main);
  font-family: var(--font-sans);
  /* The launch page pins the body to one screen and hides overflow.
     A document has to be allowed to be as long as it is. */
  height: auto;
  overflow: visible;
  line-height: 1.7;
  padding: 0 1.25rem calc(4rem + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
}

.legal-wrap {
  /* 68ch of body copy. Beyond about 75 the eye loses the start of
     the next line, which on a document this long is the difference
     between read and skimmed. */
  max-width: 40rem;
  margin: 0 auto;
}

/* ---- Skip link: the table of contents is long, so a keyboard or
   screen-reader user needs a way past it. ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-readable);
  color: #06122b;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  z-index: 20;
}
.skip-link:focus {
  left: 0;
}

/* ---- Header ---- */
.legal-head {
  padding: clamp(1.75rem, 5vw, 3rem) 0 0;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-size: var(--text-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.legal-back:hover { color: var(--accent-readable); }
.legal-back:focus-visible {
  outline: 2px solid var(--accent-readable);
  outline-offset: 3px;
  border-radius: 3px;
}

.legal-mark {
  display: block;
  height: 2.4rem;
  width: auto;
  margin: 1.5rem 0 2rem;
}

.legal-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 5.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
  margin-bottom: .6rem;
}
.legal-sub {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-bottom: 2.25rem;
}
.legal-sub strong { color: var(--text-muted); font-weight: 600; }

/* ---- Table of contents ---- */
.legal-toc {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 3rem;
}
.legal-toc h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .85rem;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: .1rem;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  /* Comfortably past the 44px target without looking like a button list. */
  padding: .5rem .25rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
  transition: color .2s ease, background .2s ease;
}
.legal-toc a::before {
  content: counter(toc);
  font-variant-numeric: tabular-nums;
  color: var(--accent-readable);
  font-weight: 600;
  min-width: 1.1rem;
}
.legal-toc a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.legal-toc a:focus-visible {
  outline: 2px solid var(--accent-readable);
  outline-offset: 1px;
}

/* ---- Body ---- */
.legal-body > section {
  /* Anchored headings land under the top edge otherwise. */
  scroll-margin-top: 1.5rem;
  margin-bottom: 2.75rem;
}
.legal-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 3.4vw, 1.35rem);
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.legal-body h2 .num {
  color: var(--accent-readable);
  font-family: var(--font-sans);
  font-size: .8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: .55rem;
}
.legal-body h3 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-main);
  margin: 1.5rem 0 .5rem;
}
.legal-body p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  /* 16px floor on phones. Anything smaller in a document this long
     is where people give up and tick the box unread. */
  font-size: 1rem;
}
.legal-body ul {
  list-style: none;
  margin: 0 0 1.25rem;
  display: grid;
  gap: .55rem;
}
.legal-body li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: 1rem;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-readable);
  opacity: .75;
}
.legal-body a {
  color: var(--accent-readable);
  text-underline-offset: 3px;
}
.legal-body a:focus-visible {
  outline: 2px solid var(--accent-readable);
  outline-offset: 2px;
  border-radius: 2px;
}
.legal-body strong { color: var(--text-main); font-weight: 600; }

/* Pulled-out statement for the clauses that carry the most weight. */
.legal-callout {
  background: rgba(37, 99, 235, .1);
  border-left: 3px solid var(--accent-readable);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
}
.legal-callout p:last-child { margin-bottom: 0; }

/* Contact details block. */
.legal-contact {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.legal-contact p { margin-bottom: .3rem; }
.legal-contact p:last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.legal-foot {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.legal-foot a { color: var(--accent-readable); text-decoration: none; }
.legal-foot a:hover { text-decoration: underline; }
.legal-foot nav {
  margin-top: .9rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.legal-foot nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 48rem) {
  .legal-body p, .legal-body li { font-size: 1.05rem; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; gap: .1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-back, .legal-toc a { transition: none; }
  html { scroll-behavior: auto; }
}