:root { color-scheme: dark; --paper: #0C0B0A; --ink: #F2F1EF; --faded: #8D8C8A; --rule: #2A2928; --red: #D03A26; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
main { max-width: 640px; margin: 0 auto; padding: 56px 24px 80px; }
.kicker { color: var(--faded); font-size: 15px; margin: 0; }
.kicker a { color: inherit; text-decoration: none; }
h1 { font-size: 40px; line-height: 1.1; margin: 6px 0 8px; letter-spacing: -0.5px; }
h2 { font-size: 22px; margin: 40px 0 8px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 20px; }
.muted { color: var(--faded); }
a { color: var(--red); }
nav.lang { margin: 18px 0 32px; font-size: 15px; }
nav.lang a { margin-right: 14px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; }
footer { color: var(--faded); font-size: 14px; margin-top: 56px; }

/* Motion: content rises in line by line on load; links and icons respond on hover. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.86) rotate(-6deg); } to { opacity: 1; transform: none; } }
main:not(.home) > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
main:not(.home) > *:nth-child(2) { animation-delay: 0.08s; }
main:not(.home) > *:nth-child(3) { animation-delay: 0.16s; }
main:not(.home) > *:nth-child(4) { animation-delay: 0.24s; }
main:not(.home) > *:nth-child(5) { animation-delay: 0.32s; }
main:not(.home) > *:nth-child(6) { animation-delay: 0.40s; }
main:not(.home) > *:nth-child(n+7) { animation-delay: 0.48s; }
.hero-icon { animation: pop 1s cubic-bezier(0.2, 0.8, 0.2, 1.2) 0.1s both; }

a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.35s ease; }
a:hover { background-size: 100% 1px; }
.wordmark a, .kicker a, .app h2 a, .app > a { background: none; }

.app img, .hero-icon { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.4), box-shadow 0.5s ease; }
.app:hover img, .hero-icon:hover { transform: translateY(-3px) rotate(-3deg) scale(1.04); box-shadow: 0 0 0 1px var(--rule), 0 12px 28px -12px rgba(0, 0, 0, 0.35); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Legal pages: a red band with the app icon, serif titles like the landing page */
body:not(.home) { border-top: 6px solid var(--red); }
.back { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; background: none; margin-bottom: 40px; }
.back img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6); }
body:not(.home) h1 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 48px; letter-spacing: -0.035em; }