/* Praying Circles web pages: same colors and type scale as the app (src/constants/theme.ts). */
:root {
  --canvas: #FBFAF7;
  --surface: #FFFFFF;
  --element: #F1EEE7;
  --border: #E2DDD2;
  --text: #1B1A1F;
  --text-2: #6B6672;
  --accent: #5B4FCF;
  --accent-soft: #ECE9FB;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #121115;
    --surface: #1E1D23;
    --element: #24232A;
    --border: #2E2C34;
    --text: #F4F2EE;
    --text-2: #A9A4B0;
    --accent: #9D93F5;
    --accent-soft: #2A2742;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { opacity: 0.85; }
.page { max-width: 480px; margin: 0 auto; padding: 24px 24px 40px; min-height: 100dvh; display: flex; flex-direction: column; gap: 16px; }
.doc { max-width: 680px; margin: 0 auto; padding: 32px 24px 64px; }
.doc h1 { font-size: 34px; line-height: 41px; letter-spacing: 0.4px; margin: 24px 0 8px; }
.doc h2 { font-size: 20px; line-height: 25px; letter-spacing: -0.45px; margin: 32px 0 8px; }
.doc p, .doc li { font-size: 17px; line-height: 26px; letter-spacing: -0.2px; }
.doc .meta { color: var(--text-2); font-size: 15px; line-height: 20px; margin: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.43px; }
.brand svg { width: 28px; height: 34px; }
.title1 { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.4px; margin: 0; text-align: center; }
.callout { font-size: 16px; line-height: 21px; letter-spacing: -0.31px; color: var(--text-2); margin: 0; text-align: center; }
.footnote { font-size: 13px; line-height: 18px; letter-spacing: -0.08px; color: var(--text-2); margin: 0; text-align: center; }
.button { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 20px; border-radius: 16px; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.43px; text-decoration: none; border: 0; cursor: pointer; width: 100%; }
.button.primary { background: var(--accent); color: #FFFFFF; }
.button.secondary { background: var(--element); color: var(--accent); }
.button[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.code { font-weight: 700; letter-spacing: 2px; color: var(--text); }
.hero { position: relative; width: 100%; max-width: 402px; aspect-ratio: 402 / 330; margin: 8px auto 0; }
.halo { position: absolute; left: 50%; top: 50%; width: 58.7%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed var(--border); }
.bubble { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; transform: translate(-50%, -50%); }
.bubble.leader { box-shadow: 0 2px 40px rgba(0, 0, 0, 0.07); }
.members { display: flex; align-items: center; justify-content: center; gap: 10px; }
.stack { display: flex; }
.stack span { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); border: 2px solid var(--canvas); margin-left: -8px; }
.stack span:first-child { margin-left: 0; }
.spacer { flex: 1; min-height: 16px; }
.center { text-align: center; }
.notice { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
footer.links { display: flex; gap: 16px; justify-content: center; font-size: 13px; line-height: 18px; }
footer.links a { color: var(--text-2); text-decoration: none; }