:root {
  --bg: #FAF3E8; --card: #FFFCF6; --ink: #3B2F24; --ink2: #94826F;
  --coral: #FF6F52; --line: #EDE3D4;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1F1913; --card: #2A221A; --ink: #F3EADF; --ink2: #B5A794;
          --coral: #FF8567; --line: #3A3128; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", sans-serif;
  line-height: 1.65; padding: 48px 20px 80px;
}
main { max-width: 660px; margin: 0 auto; }
.logo { font-size: 44px; }
h1 { font-size: 30px; font-weight: 800; margin: 10px 0 4px; }
.tagline { color: var(--ink2); margin-bottom: 36px; font-weight: 600; }
h2 { font-size: 19px; font-weight: 800; margin: 34px 0 10px; color: var(--coral); }
p, li { color: var(--ink); margin-bottom: 10px; }
.muted { color: var(--ink2); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 20px 22px; margin: 14px 0;
}
.card h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.card p { color: var(--ink2); margin: 0; }
a { color: var(--coral); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
.btn {
  display: inline-block; background: var(--coral); color: #fff; font-weight: 800;
  padding: 12px 22px; border-radius: 999px; margin-top: 6px;
}
.btn:hover { text-decoration: none; opacity: 0.92; }
footer { margin-top: 48px; color: var(--ink2); font-size: 14px; }