/* ============================================================================
   FeltOdds — legal.css
   Page-level layout ONLY for terms.html / privacy.html / cookies.html.
   Linked from those three pages alone (BRIEF Z16). All colour, type family
   and prose rules (h2/h3/p) come from styles.css's ".about" block, already
   loaded by every page that links styles.css — this file adds only what
   ".about" has no rule for: the page shell, the back-link and the date
   line, plus a scoped fix so the reused ".appfoot__link" anchors on THESE
   pages sit flush (no rest-state underline) like the button versions in
   the app footer. styles.css itself is out of scope for BRIEF Z16.
   ========================================================================== */

.legalpage {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px calc(40px + env(safe-area-inset-bottom));
}
@supports (min-height: 100dvh) {
  .legalpage { min-height: 100dvh; }
}

.legalpage__back {
  align-self: flex-start;
  margin-bottom: 22px;
  font-family: var(--font-u);
  font-weight: 700;
  font-size: 13px;
  color: var(--info);
  text-decoration: none;
}
.legalpage__back:hover,
.legalpage__back:focus-visible { text-decoration: underline; }

.legalpage h1 {
  font-family: var(--font-d);
  color: var(--text);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 800;
  line-height: 1.28;
  margin: 0 0 6px;
}

.legalpage__date {
  font-family: var(--font-u);
  font-weight: 600;
  font-size: 13px;
  color: var(--text3);
  margin: 0 0 4px;
}

/* the cross-links to the other two legal pages, bottom of page */
.legalpage .appfoot {
  margin: 32px auto 0;
  padding: 14px 0 0;
}
.legalpage .appfoot__link { text-decoration: none; }
.legalpage .appfoot__link:hover,
.legalpage .appfoot__link:focus-visible { text-decoration: underline; }