@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* Values match keeper/Theme.swift exactly, so this site and the app share
   one visual language rather than approximating it. */
:root {
  color-scheme: light dark;
  --bg: #f2f2f7;              /* Theme.lightBg */
  --ink-primary: #1c1c1e;     /* Theme.inkPrimary */
  --ink-secondary: #55555c;   /* Theme.inkSecondary */
  --accent-blue: #0a6cff;     /* Theme.accentBlue */
  --accent-blue-light: #3d8bff; /* Theme.accentBlueLight */
  --keep-green: #34c759;      /* Theme.keepGreen */
  --delete-red: #ff453a;      /* Theme.deleteRed */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --card-shadow: 0 8px 30px rgba(10, 30, 60, 0.06);
  --hairline: rgba(60, 60, 67, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0d;             /* Theme.darkBg */
    --ink-primary: #f2f2f7;
    --ink-secondary: #9a9aa3;
    --accent-blue: #3d8bff;
    --accent-blue-light: #6fa8ff;
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-shadow: none;
    --hairline: rgba(255, 255, 255, 0.1);
  }
}

* { box-sizing: border-box; }

body {
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink-primary);
  background: var(--bg);
  background-image: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 45%);
  background-attachment: fixed;
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand img {
  width: 44px; height: 44px;
  border-radius: 11px;
  box-shadow: 0 2px 10px rgba(10, 60, 200, 0.25);
}
.brand h1 {
  font-family: "Rubik", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.tagline {
  color: var(--ink-secondary);
  font-size: 1.05rem;
  margin: 12px 0 0;
}

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 22px;
  padding: 24px;
  margin-top: 20px;
}
.card h2 {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 0 0 10px;
}
.card p { margin: 0 0 16px; color: var(--ink-primary); }

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-blue-light), var(--accent-blue));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-blue) 35%, transparent);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); opacity: 0.9; }

.links { display: flex; flex-direction: column; }
.links a {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 500;
  padding: 12px 0;
}
.links a:hover { text-decoration: underline; }
.links a + a { border-top: 1px solid var(--hairline); }

footer {
  margin-top: 56px;
  font-size: 0.85rem;
  color: var(--ink-secondary);
  text-align: center;
}

/* Privacy page specifics */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 32px;
}
.back:hover { text-decoration: underline; }

.doc h1 {
  font-family: "Rubik", sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.doc .updated { color: var(--ink-secondary); font-size: 0.9rem; margin: 0 0 8px; }
.doc h2 {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 2.2em 0 0.7em;
}
.doc h2:first-of-type { margin-top: 2em; }
.doc p, .doc li { margin: 0 0 0.9em; }
.doc ul { padding-left: 1.2em; margin: 0 0 0.9em; }
.doc a { color: var(--accent-blue); }
.doc hr { border: none; border-top: 1px solid var(--hairline); margin: 2.4em 0; }