/* A READING SURFACE.
   body::before paints a gold diagonal lattice across the whole page, and this
   wrapper had no background at all — so every paragraph of the privacy policy and
   terms sat directly on the pattern. The callouts and tables were legible only
   because they happen to carry their own background, which is the tell.
   These are the two pages App Review actually opens, and the two a user reads when
   they are already suspicious about a camera app, so legibility is not cosmetic. */
.legal-wrap {
  max-width: 820px;
  margin: 40px auto 70px;
  padding: 44px clamp(20px, 5vw, 56px) 56px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
}
/* Phones: keep the panel edge-to-edge so the text column stays as wide as
   possible — a card with side margins wastes ~12% of a 390pt screen. */
@media (max-width: 560px) {
  .legal-wrap {
    margin: 0 auto;
    border-radius: 0;
    border-left: 0; border-right: 0;
    padding: 28px 18px 48px;
  }
}
/* Long legal prose needs a longer measure than the default. */
.legal-wrap p, .legal-wrap li { line-height: 1.68; }
.legal-back {
  display: inline-block; margin-bottom: 18px;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.legal-wrap h1 {
  font-size: 24px; margin: 6px 0 4px; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.legal-wrap .meta { color: var(--muted-foreground); font-size: 12.5px; margin-bottom: 26px; }
.legal-wrap .callout {
  padding: 16px 18px; margin-bottom: 28px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.65; color: var(--foreground);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.legal-wrap .warning {
  border: 1px solid color-mix(in srgb, var(--primary-low) 55%, transparent);
  background: color-mix(in srgb, var(--primary-low) 10%, var(--card));
}
.legal-wrap .warning strong { color: var(--primary); }
.legal-wrap h2 {
  font-size: 17px; margin: 32px 0 10px; color: var(--foreground);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.legal-wrap h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; margin: 22px 0 8px; color: var(--foreground); }
.legal-wrap p, .legal-wrap li { font-size: 14px; line-height: 1.7; color: var(--muted-foreground); }
.legal-wrap a { color: var(--primary); }
.legal-wrap table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 13px; }
.legal-wrap th, .legal-wrap td {
  text-align: left; padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  vertical-align: top; color: var(--muted-foreground);
}
.legal-wrap th { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); font-family: 'Inter', sans-serif; }
.legal-wrap ul { padding-left: 20px; }
.legal-footer {
  margin-top: 50px; padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 12px; color: var(--muted-foreground);
}

/* HORIZONTAL OVERFLOW ON PHONES.
   The data tables are 3 columns of prose and will not compress below their content,
   so on a 390pt screen they pushed the whole page wider than the viewport — headings
   were cut mid-word and the reader had to pan sideways to finish a sentence. Each
   table now scrolls inside its own box; the page itself never does. */
.legal-wrap table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-wrap table thead, .legal-wrap table tbody { display: table; width: 100%; min-width: 460px; }
html, body { max-width: 100%; overflow-x: hidden; }
/* Long unbroken strings (URLs, the company address, email addresses) must not set the
   floor for the layout width either. */
.legal-wrap { overflow-wrap: anywhere; }
.legal-wrap h1, .legal-wrap h2 { overflow-wrap: anywhere; }