:root {
  --bg: #ECEBE8;
  --bg-2: #E2E0DC;
  --fg: #1B1B1F;
  --fg-soft: #5A5A63;
  --fg-mute: #9A99A2;
  --accent-1: #8080CC;
  --accent-2: #C4AAEF;
  --accent-3: #F5A878;
  --glass: rgba(255,255,255,0.45);
  --glass-stroke: rgba(255,255,255,0.6);
  --chip: rgba(0,0,0,0.04);
  --chip-stroke: rgba(0,0,0,0.06);
  --shadow: 0 20px 60px -20px rgba(40,30,80,0.18);
  --ease: cubic-bezier(.22,.61,.36,1);
  --aura-1: rgba(245,168,120,0.20);
  --aura-2: rgba(245,168,120,0.05);
}
html[data-theme="dark"] {
  --bg: #15141A;
  --bg-2: #1C1B23;
  --fg: #ECEBF2;
  --fg-soft: #B6B4C2;
  --fg-mute: #6E6C7A;
  --glass: rgba(255,255,255,0.05);
  --glass-stroke: rgba(255,255,255,0.08);
  --chip: rgba(255,255,255,0.04);
  --chip-stroke: rgba(255,255,255,0.06);
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  --aura-1: rgba(245,168,120,0.13);
  --aura-2: rgba(245,168,120,0.03);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
  font-family: "Manrope", ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--fg);
  transition: background 400ms var(--ease), color 200ms var(--ease);
  -webkit-font-smoothing: antialiased;
}

.toggles {
  position: fixed;
  top: 22px;
  right: 22px;
  display: flex;
  gap: 10px;
  z-index: 10;
}
.pill {
  position: relative;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: 999px;
  padding: 6px;
  display: flex;
  box-shadow: var(--shadow);
}
.pill .thumb {
  position: absolute;
  top: 6px; left: 6px;
  height: calc(100% - 12px);
  width: 0;
  background: var(--fg);
  border-radius: 999px;
  transition: left 320ms var(--ease), width 320ms var(--ease);
  z-index: 0;
}
.pill button, .pill a {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms var(--ease);
  letter-spacing: 0.02em;
}
.pill button[aria-pressed="true"],
.pill a[aria-pressed="true"] { color: var(--bg); }

main {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14vh 8vw 10vh 12vw;
}
.col { position: relative; max-width: 560px; }
@media (min-width: 900px) { .col { max-width: 880px; } }
.theme-icon { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pill button#theme-light, .pill button#theme-dark { padding: 6px 10px; }
.col > *:not(.aura) { position: relative; z-index: 1; }
.aura {
  position: absolute;
  pointer-events: none;
  left: 32px; top: 32px;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: radial-gradient(
    closest-side,
    rgba(128, 128, 204, 0.25) 0%,
    rgba(196, 170, 239, 0.22) 15%,
    rgba(245, 168, 120, 0.18) 30%,
    rgba(196, 170, 239, 0.10) 45%,
    transparent 62%
  );
  filter: blur(28px);
}
html[data-theme="dark"] .aura {
  background: radial-gradient(
    closest-side,
    rgba(128, 128, 204, 0.15) 0%,
    rgba(196, 170, 239, 0.13) 15%,
    rgba(245, 168, 120, 0.11) 30%,
    rgba(196, 170, 239, 0.06) 45%,
    transparent 62%
  );
}

.logo { width: 64px; height: 64px; margin-bottom: 36px; display: block; }

h1 {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 8px 0;
}
h1 .brand { font-weight: 400; }
h1 .tag {
  display: block;
  font-family: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  font-style: italic;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 300;
  color: var(--fg-soft);
  letter-spacing: -0.005em;
  margin-top: 18px;
}

.lede {
  margin: 28px 0 28px 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 640px;
}
@media (min-width: 900px) {
  .lede { white-space: nowrap; }
  .chips { flex-wrap: nowrap; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.chip {
  font-size: 12.5px;
  color: var(--fg-soft);
  background: var(--chip);
  border: 1px solid var(--chip-stroke);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 8px 0px rgba(128, 128, 204, 0.15),
    0 0 16px 2px rgba(196, 170, 239, 0.16),
    0 0 24px 4px rgba(245, 168, 120, 0.11),
    0 0 32px 6px rgba(196, 170, 239, 0.08);
}
html[data-theme="dark"] .chip {
  box-shadow:
    0 0 8px 0px rgba(128, 128, 204, 0.10),
    0 0 16px 2px rgba(196, 170, 239, 0.09),
    0 0 24px 4px rgba(245, 168, 120, 0.07),
    0 0 32px 6px rgba(196, 170, 239, 0.04);
}

.cta {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  color: white;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 70%, var(--accent-3));
  box-shadow: 0 10px 30px -10px rgba(128,128,204,0.55);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), opacity 200ms var(--ease);
  letter-spacing: 0.02em;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(128,128,204,0.65); }
.cta:active { transform: translateY(0); }

.form-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 600ms var(--ease), opacity 400ms var(--ease), transform 500ms var(--ease);
}
body.open .form-wrap { max-height: 560px; opacity: 1; transform: translateY(0); }
body.open .cta { display: none; }

.glass {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow);
  max-width: 480px;
}
.glass p.note {
  margin: 2px 4px 14px 4px;
  color: var(--fg-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.field {
  background: transparent;
  border: 1px solid var(--chip-stroke);
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--fg);
  margin-bottom: 10px;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.field:focus { outline: none; border-color: var(--accent-1); background: var(--chip); }
textarea.field { resize: none; min-height: 84px; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 22px; justify-content: space-between; }
.privacy {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--fg-soft);
  margin: 8px 4px 4px 4px; line-height: 1.5;
  cursor: pointer;
}
.privacy input { margin-top: 2px; accent-color: var(--accent-1); }
.privacy a { color: var(--accent-1); text-decoration: underline; text-underline-offset: 2px; }
.submit {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: white;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2) 70%, var(--accent-3));
  letter-spacing: 0.02em;
}
.submit:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.ghost {
  border: 0; background: transparent;
  color: var(--fg-mute);
  font: inherit; font-size: 13px;
  cursor: pointer; padding: 8px 10px;
  border-radius: 999px;
}
.ghost:hover { color: var(--fg-soft); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.error {
  color: #C44545;
  font-size: 12.5px;
  margin: 8px 4px 0 4px;
  min-height: 1em;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-mute);
  font-size: 12px;
  margin-top: 80px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12vw;
  padding-right: 8vw;
}
footer a {
  color: var(--fg-mute);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.prose footer {
  max-width: 720px;
  padding: 24px 24px 0 24px;
  margin-top: 64px;
  border-top: 1px solid var(--chip-stroke);
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 720px) {
  main { padding: 10vh 6vw 8vh 6vw; }
  footer { padding-left: 6vw; padding-right: 6vw; }
  .toggles { top: 14px; right: 14px; }
}

/* Privacy page */
.prose {
  position: relative; z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 120px 24px;
  line-height: 1.6;
}
.prose a.back {
  display: inline-block;
  color: var(--fg-mute);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.prose a.back:hover { color: var(--fg-soft); }
.prose h1 {
  font-weight: 300;
  font-size: 44px;
  letter-spacing: -0.03em;
  margin: 0 0 8px 0;
}
.prose .meta {
  color: var(--fg-mute);
  font-size: 13px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--chip-stroke);
}
.prose h2 { font-weight: 400; font-size: 20px; letter-spacing: -0.01em; margin: 48px 0 12px 0; }
.prose h3 { font-weight: 400; font-size: 15px; color: var(--fg-soft); margin: 24px 0 8px 0; }
.prose p, .prose li { color: var(--fg-soft); font-size: 15.5px; }
.prose a { color: var(--accent-1); text-underline-offset: 2px; }
.prose ul { padding-left: 20px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--chip-stroke); color: var(--fg-soft); vertical-align: top; }
.prose th { font-weight: 500; color: var(--fg); }