/* ==========================================================================
   Poker Range Calculator — legal pages (/privacy, /terms)

   Loaded AFTER style.css, which owns every colour token, the nav and the
   footer. This file adds only what a long prose document needs, so the legal
   pages cannot drift from the site's palette or its typography.

   These two URLs are linked from the App Store and Google Play listings, and a
   subscription listing is rejected without a working Terms of Use link. They
   must keep resolving and keep looking like the product no matter what happens
   to the marketing pages, which is why they depend on nothing but tokens.
   ========================================================================== */

.legal {
  /* A measure, not a width: ~70 characters is what makes a dense document
     readable, and these are documents somebody may actually have to read. */
  max-width: 44rem;
  margin: 0 auto;
  padding: 4rem 1.25rem 5rem;
}

.legal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.9rem;
}

.legal h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  margin: 0 0 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  font-size: 1.12rem;
  font-weight: 620;
  line-height: 1.35;
  margin: 2.75rem 0 0.85rem;
  color: var(--text);
  scroll-margin-top: 5rem;
}

.legal h3 {
  font-size: 0.98rem;
  font-weight: 620;
  margin: 1.75rem 0 0.6rem;
  color: var(--text);
}

.legal p,
.legal li {
  color: var(--muted);
  line-height: 1.7;
}

.legal p { margin: 0 0 1rem; }

.legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.5rem; }

.legal strong { color: var(--text); font-weight: 620; }

.legal a { color: var(--accent-text); }

/* The plain-language summary above the document proper. It is not a substitute
   for the terms below it and says so; it exists because a document nobody
   reads protects nobody. */
.legal-summary {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  padding: 1.4rem 1.5rem 0.6rem;
  margin: 0 0 2.5rem;
}

.legal-summary p:first-child { color: var(--text); }

.legal-summary-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.7rem;
}

/* Apple requires these acknowledgements verbatim in substance; setting them
   apart makes it obvious which clauses exist for the App Store and must not be
   edited away. */
.legal-note {
  border-left: 2px solid var(--line-strong);
  padding-left: 1.15rem;
  margin: 0 0 1.25rem;
}

.legal-contact {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .legal { padding: 2.5rem 1.25rem 3.5rem; }
}