/* Remi's reading pages (privacy, support): the day look of the home page,
   without the orb or the scenes. Tokens match styles.css. */

:root {
  --canvas: #F4F4F8;
  --surface: #FFFFFF;
  --hairline: #DDDDE3;
  --ink: #191A1F;
  --ink2: #61636A;
  --ink3: #6E7078;
  --iris: #6B55DF;
  --nav-bg: rgba(244, 244, 248, 0.72);
  --shade: 34, 26, 90;

  --display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Nunito", system-ui, sans-serif;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --column: 820px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2 { font-family: var(--display); margin: 0; text-wrap: balance; }
a { color: inherit; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; border-radius: 10px; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter-r) 12px var(--gutter-l);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 var(--hairline);
}
@media (min-width: 900px) {
  .nav { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 900 21px/1 var(--display);
  letter-spacing: -0.01em;
}
.brand-tag { font-weight: 800; color: var(--ink2); }
@media (max-width: 599px) { .brand-tag { display: none; } }
.app-icon { display: block; flex: none; border-radius: 22.5%; box-shadow: 0 0 0 1px var(--hairline); }
.logo-icon { width: 28px; height: 28px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font: 800 14.5px/1 var(--display);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), 0 4px 14px rgba(var(--shade), .06);
}

/* ---------- Page ---------- */

.page {
  max-width: calc(var(--column) + 64px);
  margin: 0 auto;
  padding: 56px var(--gutter-r) 72px var(--gutter-l);
}
@media (min-width: 900px) {
  .page { padding: 80px 32px 96px; }
}
.page h1 {
  font-weight: 900;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.updated { margin: 12px 0 0; color: var(--ink3); font-size: 14px; }

.prose { margin-top: 32px; }
.prose h2 {
  margin: 40px 0 10px;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.prose p, .prose ul { margin: 0 0 14px; color: var(--ink); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a {
  color: var(--iris);
  text-decoration: underline;
  text-decoration-color: rgba(107, 85, 223, .35);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: currentColor; }

/* ---------- Footer ---------- */

.foot { border-top: 1px solid var(--hairline); }
.foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  font-size: 14px;
  color: var(--ink3);
}
.foot-brand { display: inline-flex; align-items: center; gap: 8px; font: 800 15px/1 var(--display); color: var(--ink); text-decoration: none; }
.foot-icon { width: 22px; height: 22px; box-shadow: none; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot nav a { text-decoration: none; color: var(--ink2); }
.foot nav a:hover, .foot nav a[aria-current="page"] { color: var(--ink); }
.foot-note a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.foot-note a:hover { color: var(--ink); text-decoration-color: currentColor; }