/* The legal pages (privacy, and later terms and support) sit on the landing's
   ground and read as one light card, in the palette styles.css publishes.
   Light only, like the app (decision 0039). */
main.legal {
  display: block;
  padding-top: 12px;
  padding-bottom: 32px;
}
.legal article {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(24px, 5vw, 48px);
  font-size: 16px;
  line-height: 1.6;
}
.legal h1 {
  text-align: left;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}
.legal .updated { color: var(--ink-secondary); margin: 0 0 28px; font-size: 14px; }
.legal .reach { margin: 0 0 8px; }
.legal .reach div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0 0 10px;
}
.legal .reach dt,
.legal .reach dd { margin: 0; }
.legal .reach dt { color: var(--ink-secondary); }
.legal h2 { font-size: 20px; line-height: 1.3; margin: 32px 0 8px; color: var(--ink); }
.legal p, .legal ul { margin: 0 0 14px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
/* Ink, underlined: the brand's jade (`jade`, #89A48B) is 2.71:1 on white, a
   glyph's colour and never a word's (UI/INTERFACE-STANDARD.md §6). */
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:focus-visible { outline-color: var(--ink); }
.legal strong { font-weight: 700; }
@media (max-width: 640px) {
  main.legal { padding-left: 16px; padding-right: 16px; }
  .legal article { padding: 24px 20px; border-radius: 18px; font-size: 15px; }
}
/* The invite page (profile/) borrows the landing's store buttons, which are
   drawn for the dark ground; on the light card they sit in a row of their own. */
.invite .store-buttons { margin-top: 24px; }
/* An invite's second step sits under the store buttons, not against them. */
.invite #invite-open { margin-top: 24px; }
.legal .invite .store { color: var(--on-action); text-decoration: none; }
/* The licences page (licences/): each licence's text folds under its name and
   keeps its own line breaks, wrapped so it never runs off a phone's screen,
   on the page's white inside the grey card. A summary is a control, so it
   shows focus as a link does. */
.legal details { margin: 0 0 10px; }
.legal summary { cursor: pointer; font-weight: 600; }
.legal summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.legal pre {
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: var(--canvas);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.legal ul.packages { font-size: 14px; overflow-wrap: anywhere; }