/* The privacy and terms pages: one white booklet page on the slate-blue world, the logo above. */
body { background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 480px) var(--sky-bottom) no-repeat; }
header { display: grid; place-items: center; padding: 36px 16px 22px; }
header img { width: min(320px, 70vw); filter: drop-shadow(0 8px 14px rgba(13, 20, 38, 0.3)); }
article {
  max-width: 760px; margin: 0 auto; padding: 34px clamp(20px, 5vw, 48px) 40px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--edge); border-radius: 8px; box-shadow: var(--shadow);
  color: #3a3d44; font-size: 16px; line-height: 1.65;
}
@media (max-width: 800px) { article { margin: 0 16px; } }
h1 { margin: 0; font: 800 34px/1.2 var(--body); color: var(--ink-strong); }
h2 { margin: 30px 0 6px; font: 800 19px/1.3 var(--body); color: var(--ink-strong); }
.when { margin: 4px 0 22px; color: var(--soft); font-size: 14px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
b { color: var(--ink-strong); }
article a { color: #3f73a8; }
footer { padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 12px; }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; }
footer .links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
footer .links a:hover, footer .links a:focus-visible { color: #fff; text-decoration: underline; }
footer p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); }