/* Terms and Privacy pages. Same text styles, colors and background as the waitlist
   landing (landing.css): Fraunces headings, Lexend text, one green, light only. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/lexend-latin.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --neutral-100: #ffffff;
  --neutral-600: #707070;
  --neutral-800: #191919;
  --green: #034123;
  --font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  /* The landing's scale: title for the page heading, subtitle for sections, body, small. */
  --fs-title: 4.5rem;
  --fs-subtitle: 2rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --header-h: 68px;
  --column: min(100% - 32px, 60ch);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-family); font-size: var(--fs-body); line-height: 1.5;
  color: var(--neutral-800); background: var(--neutral-100);
}
/* The landing's plain pastel background, pinned behind the page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("page-bg.jpg") center / cover no-repeat;
}

/* Frosted nav, as on the landing. */
header {
  position: sticky; top: 0; z-index: 10; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
}
nav { width: var(--column); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
nav .brand { margin-right: auto; display: block; border-radius: 4px; color: var(--green); }
nav .brand svg { display: block; height: 28px; width: auto; }
nav a { font-size: var(--fs-small); font-weight: 500; }
nav a[aria-current="page"] { color: var(--green); }

main, footer { width: var(--column); margin-inline: auto; }
main { padding-block: 64px 80px; line-height: 1.6; overflow-wrap: break-word; }
h1, h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4;
  font-variation-settings: "SOFT" 100; text-wrap: balance;
}
h1 { margin: 0 0 16px; font-size: var(--fs-title); }
h2 { margin: 48px 0 16px; font-size: var(--fs-subtitle); }
p { margin-block: 8px; text-wrap: pretty; }
strong, b { font-weight: 600; }
.updated { margin-bottom: 40px; color: var(--neutral-600); font-size: var(--fs-small); }
ul { padding-left: 24px; }
li { margin-block: 8px; }
a { color: var(--green); text-underline-offset: 0.18em; text-decoration-thickness: from-font; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--neutral-800); outline-offset: 2px; }
footer {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding-block: 24px 40px; border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--neutral-600); font-size: var(--fs-small);
}

@media (max-width: 720px) {
  :root { --fs-title: 2.5rem; --fs-subtitle: 1.5rem; }
  main { padding-block: 40px 64px; }
  h2 { margin-top: 40px; }
}