/* Bridge for the marketing pages (Dean's design, imported by
   tools/import-marketing.py). Those pages carry their own palette but not the
   tokens waitlist.css and the analytics consent banner are written against, so
   this maps them onto Light Ocean. Light only: the marketing pages have no dark
   theme, and a dark form on a light page would look broken. */
:root {
  --surface: #fff;
  --bg: var(--bone, #eff6fa);
  --accent: var(--sage-deep, #2d7a9e);
  --accent-strong: var(--forest, #1b4a62);
  --success: #2e9e5e;
  --display: 'Fraunces', ui-serif, Georgia, serif;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(21, 40, 48, .04), 0 12px 32px -14px rgba(27, 74, 98, .18);
  --shadow-lg: 0 2px 4px rgba(21, 40, 48, .05), 0 32px 64px -26px rgba(27, 74, 98, .28);
}

/* ---- analytics consent ----
   Shown only when an Amplitude key is configured and no choice is stored yet.
   Nothing loads, and no identifier is created, until "That's fine" is clicked. */
.tp-consent {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.tp-consent p { margin: 0; flex: 1 1 260px; min-width: 0; color: var(--stone); }
.tp-consent a { color: var(--accent); }
.tp-consent-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.tp-consent button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.tp-consent button.primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.tp-consent button:hover { border-color: var(--accent); }
@media (max-width: 440px) {
  .tp-consent { gap: 10px; }
  .tp-consent-btns { width: 100%; }
  .tp-consent button { flex: 1; }
}