:root {
  --magenta: #E20074;
  --bg: #ffffff;
  --surface: #f7f7f9;
  --text: #0c0c0e;
  --muted: #55565b;
  --border: #e9e9ef;
}
* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
}
.brand img.logo { height: 44px; width: auto; display: block; }
.site-header nav a { margin: 0 .75rem; color: var(--text); font-weight: 600; }
.site-header nav a:hover { color: var(--magenta); }

.hero { padding: 80px 0 40px; }
h1, h2, h3 { font-family: "Sora", DM Sans, system-ui, sans-serif; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 12px 0 10px; }
.lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--muted); max-width: 62ch; }

.pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; }
.pill .dot { width: 8px; height: 8px; background: var(--magenta); border-radius: 50%; display: inline-block; }

.section { padding: 56px 0; border-top: 1px solid var(--border); background: #fff; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.subtle { color: var(--muted); }

.footer { border-top: 1px solid var(--border); padding: 22px 0; color: var(--muted); }
.footer a { color: var(--muted); margin-left: 10px; }
.footer a:hover { color: var(--magenta); }

.prose { line-height: 1.7; }
.prose h2 { margin-top: 26px; }
.prose h3 { margin-top: 20px; }
.prose ul { margin: 0 0 0 1.25rem; }
.prose li { margin: .4rem 0; color: var(--muted); }
.notice { background: #fff; border: 1px dashed var(--border); padding: 12px 14px; border-radius: 12px; }