/* LEGAL FOOTER — the imprint / privacy line every page carries.
 *
 * Its own stylesheet for the same reason overlay.css is: the four surfaces
 * that render this line (landing page, giveaway, giveaway terms, and the
 * story pages) have three separate stylesheets between them, and the line has
 * to look identical on all of them.
 *
 * Deliberately quiet. This is the small print a visitor looks for when they
 * are looking for it, not something that competes with the page — muted until
 * hovered or focused, on a hairline that separates it from the copy above.
 */

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.38);
}

.legal-footer a {
  /* The tap target is the padding, pulled back out by the margin so the line
     still sits tight — a 11px link with no padding is a miss on a phone. */
  padding: 8px 4px;
  margin: -8px 0;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
  color: rgba(255, 255, 255, 0.92);
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* A separator and the link it introduces are one unwrappable unit. */
.legal-footer .legal-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.legal-footer .legal-sep {
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}

/* ── Placements ──────────────────────────────────────────────────────────
   The line itself never sets its own outer spacing; each surface says where
   it sits, so the rule above the passport's copy does not turn up in the
   middle of a giveaway screen. */

/* Landing page: under the passport's own small print. */
.legal-footer.in-sheet {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Giveaway and terms pages: under the page's own links line. */
.legal-footer.in-page {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Story pages: a strip that closes the page, with the wordmark opposite the
   links on anything wider than a phone and stacked under it on a narrow one. */
.legal-footer-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 20px 24px calc(26px + var(--vh-toolbar, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-footer-strip .legal-wordmark {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.legal-footer-strip .legal-footer {
  justify-content: flex-end;
  flex: 1;
}

/* On a phone the two do not fit on one line without the links wrapping into a
   ragged block, so they stack: wordmark, then the line under it. */
@media (max-width: 430px) {
  .legal-footer-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .legal-footer-strip .legal-footer {
    justify-content: flex-start;
  }
}