:root {
  --bg: #fbfaf7;
  --text: #17181c;
  --muted: #5d616b;
  --line: #e6e3dc;
  --card: #ffffff;
  --cheese: #f0bd45;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131417;
    --text: #eeece7;
    --muted: #9a9ea8;
    --line: #2a2c31;
    --card: #1b1c20;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 ui-sans-serif, -apple-system, system-ui, "Segoe UI", sans-serif;
}
.wrap { max-width: 54rem; margin: 0 auto; padding: 0 16px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--cheese); text-decoration-thickness: 2px; text-underline-offset: 4px; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }

header.site .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; }
header.site nav { display: flex; gap: 24px; font-size: 15px; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--text); }
.lock { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 22px; letter-spacing: -0.035em; text-decoration: none; }
.lock img { width: 30px; height: 30px; }

.hero { padding-top: 72px; padding-bottom: 64px; }
h1 { font-size: clamp(2.75rem, 9vw, 4rem); line-height: 1; letter-spacing: -0.045em; margin: 0 0 22px; font-weight: 800; }
.hero p { font-size: 1.2rem; color: var(--muted); max-width: 35rem; margin: 0; }

section { border-top: 1px solid var(--line); padding: 48px 0; }
h2 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 24px; }
h3 { margin: 2rem 0 0.25rem; font-size: 1.1rem; }

.app { display: flex; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.app img { width: 88px; height: 88px; border-radius: 20px; flex: none; }
.app h3 { margin: 0; font-size: 1.375rem; letter-spacing: -0.02em; }
.app p { margin: 4px 0 12px; color: var(--muted); }
.plat { display: inline-block; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; margin-left: 6px; vertical-align: 3px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; font-weight: 600; }
@media (max-width: 560px) { .app { flex-direction: column; align-items: flex-start; } }

.mail { font-size: 1.25rem; font-weight: 600; }

/* Prose pages (privacy, 404) */
.page { padding-top: 56px; padding-bottom: 64px; }
.page > * { max-width: 40rem; }
.page h1 { font-size: clamp(2.25rem, 7vw, 3rem); }
.page .lead { font-size: 1.2rem; color: var(--muted); }

footer.site { border-top: 1px solid var(--line); padding: 24px 0 32px; font-size: 13px; color: var(--muted); }
footer.site .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
footer.site p { margin: 0; }
footer.site .lock { font-size: 15px; gap: 6px; color: var(--text); }
footer.site .lock img { width: 20px; height: 20px; }