/* The legal pages.
 *
 * BRAND COLOURS, NOT INVENTED ONES
 *
 * Every value below is lifted from the app's own palette (DesignSystem/Palette.
 * swift and designsystem/Palette.kt), which is a near-black blue with a PINK
 * accent — #C51F5D for anything you act on, #E8446F as the gradient end, cream
 * for text. An earlier version of this file made up a purple scheme that
 * appeared nowhere in the product; a terms page that does not look like the app
 * it belongs to reads as somebody else's page.
 *
 * Deliberately plain otherwise. These are read by two audiences with nothing in
 * common: somebody deciding whether to trust the app with their taste, and an
 * App Store reviewer checking a box. Both are served by text that is large,
 * high-contrast and quick, so there is no webfont here — a legal page that waits
 * on a 400KB download renders in Times New Roman for the first second on every
 * slow connection.
 */

:root {
  --bg: #141D26;          /* near-black blue */
  --surface: #1B2634;     /* one step up, for cards */
  --surface-high: #243447;
  --stroke: rgba(255, 255, 255, 0.09);
  --text: #E2E2D2;        /* brand cream */
  --muted: #8B9AAB;       /* muted, from the slate family */
  --accent: #C51F5D;      /* brand pink — actions only */
  --accent-2: #E8446F;    /* lighter pink, gradient end */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 96px; }

header.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 26px;
}

.mark {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  font-weight: 800; font-size: 19px; color: #fff;
  flex: none;
  letter-spacing: 0.5px;
}

.brand h1 { font-size: 20px; margin: 0; font-weight: 800; }
.brand .sub { color: var(--muted); font-size: 13px; margin: 0; }

h2 {
  font-size: 18px;
  margin: 34px 0 10px;
  font-weight: 700;
}
h2:first-of-type { margin-top: 8px; }

p, li { color: #cfd4dc; }
li { margin-bottom: 7px; }
ul { padding-inline-start: 22px; margin: 10px 0; }

a { color: var(--accent-2); }

.updated {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 26px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 15px;
  padding: 16px 18px;
  margin: 22px 0;
}
.card p:last-child { margin-bottom: 0; }
.card p:first-child { margin-top: 0; }

footer {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding: 20px 16px 72px; }
}