/* ---------------------------------------------------------------------------
   The legal pages (privacy, terms, data deletion), 2026-10-23.

   They loaded design.css and shell.css only, and .card is styled per page,
   so each section rendered as bare text across the full width. This gives
   them a reading column, cards and a heading scale - LAYOUT ONLY: these are
   the URLs Meta reads for App Review, and not one word of them changes here.
   Tokens only (design.css).
   --------------------------------------------------------------------------- */

main {
  max-width: 760px;
  margin-inline: auto;
  padding: 28px 20px 56px;
}

main > section.card,
main > .card {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-xs);
  padding: 20px 24px;
}

main h2,
main h3 {
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.35;
}
main h2 { font-size: 20px; }
main h3 { font-size: 17px; color: var(--ui-text); }

main p,
main li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ui-text-secondary);
}
main p { margin: 0 0 12px; }
main p:last-child { margin-bottom: 0; }
main ul,
main ol { margin: 0 0 12px; padding-inline-start: 22px; }

main a { color: var(--ui-accent); }
main a:hover { color: var(--ui-accent-hover); }

main .muted { color: var(--ui-text-muted); font-size: 13.5px; }

.topbar h1 { font-size: 17px; }

@media (max-width: 640px) {
  main { padding: 16px 12px 40px; }
  main > section.card,
  main > .card { padding: 16px 16px; }
}