/* The app's look (src/styles/theme.ts UI_THEME and FONTS): light only, ink text, white cards. */
:root {
  color-scheme: light;
  --background: #F6F7F4;
  --card: #FFFFFF;
  --ink: #14202B;
  --on-ink: #FFFFFF;
  --muted: #5A6672;
  --line: #E8EBE6;
  --display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font: 500 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; }
h1 { font: 700 28px/1.2 var(--display); letter-spacing: -0.01em; }
h2 { font: 700 17px/1.35 var(--body); }
p, li { margin: 0; color: var(--muted); }
strong { color: var(--ink); font-weight: 700; }
a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.card { background: var(--card); border-radius: 18px; padding: 16px; }
.small { font-size: 14px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 18px var(--display); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

/* Privacy policy: the same column as the in-app screen (padding 24, gaps 20 / 8) */
.page { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.page section { display: flex; flex-direction: column; gap: 8px; }
.page ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.page li { display: flex; gap: 8px; }
.page li::before { content: '•'; }

/* Coming soon */
.hero { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px 88px; text-align: center; }
.hero img { width: 96px; height: 96px; border-radius: 22px; }
.hero h1 { margin-top: 8px; font-size: 34px; }
.hero p { max-width: 420px; }
.pill { margin-top: 12px; padding: 16px 28px; border-radius: 20px; background: var(--ink); color: var(--on-ink); font-weight: 700; }
.hero footer { position: absolute; bottom: 24px; font-size: 14px; }