/* WhisperSignal — public web styles
 * Hand-written CSS, single sheet. Shares the landing page's visual identity
 * (landing.css): a dark "financial terminal" look — navy surfaces, aqua accent,
 * Chakra Petch UI type + Red Hat Mono for numerics. Dark-only, like the landing:
 * there is one identity across the whole public web, no light/dark switch.
 *
 * The semantic tokens below (--bg/--fg/--primary/…) map onto the landing palette
 * (--void/--ink/--aqua/…) so every existing component class and inline
 * `var(--token)` in the templates re-themes from this one block.
 */

:root {
  /* landing palette (see landing.css) */
  --void: #040912;
  --bg: #07101f;             /* page background */
  --panel: #0b1830;          /* raised surface */
  --line: #16263f;           /* hairline */
  --line-2: #21354f;         /* stronger line / control border */
  --ink: #eaf6ff;
  --aqua: #35e0d0;
  --amber: #ffc24d;
  --green: #36e07f;
  --rose: #ff5d6c;

  /* semantic tokens consumed by components + template inline styles */
  --fg: var(--ink);
  /* Meta tier (ages, captions). 7.2 :1 on --panel — the ladder is
     fg 16.1 -> muted-fg 9.5 -> muted 7.2; #7488a3 sat at 4.9, technically
     AA and not actually readable at the 11-13px this token is used at. */
  --muted: #97a7bc;          /* dim meta (ages, captions) */
  --muted-fg: #aebfd6;       /* readable secondary text (body copy) */
  --border: #1c2e49;         /* dividers, card borders */
  --card: var(--panel);
  --secondary: rgba(255, 255, 255, 0.04);       /* subtle fills / secondary buttons */
  --secondary-hover: rgba(255, 255, 255, 0.08);
  --primary: var(--aqua);                        /* fills, washes, control accents */
  --primary-hover: #4fe8da;                      /* brighter aqua on hover */
  --primary-fg: #04231e;                         /* dark ink on aqua fills */
  --primary-ink: var(--aqua);                    /* accent text on the dark surface */
  --emerald: var(--green);
  --red: var(--rose);
  --radius: 12px;

  --font-ui: 'Chakra Petch', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-md { max-width: 760px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 24px;
  max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0.01em; }
.brand__mark {
  width: 32px; height: 32px; border-radius: 8px;
  display: block; object-fit: cover;
}
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-2); background: var(--secondary); color: var(--fg);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, filter .15s, transform .15s;
}
.btn:hover { background: var(--secondary-hover); border-color: var(--aqua); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 1px var(--aqua), 0 0 18px rgba(53, 224, 208, 0.22); }
.btn--primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); filter: brightness(1.03); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--secondary); border-color: var(--line-2); }

/* Article (legal pages, the open-in-app interstitial) */
.article { padding: 32px 16px 96px; }
.article header { margin-bottom: 24px; }
.article .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.article h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; }
.article .body { color: var(--muted-fg); font-size: 16px; line-height: 1.55; margin: 0 0 8px; }

/* Legal pages (privacy/terms) — prose additions over .article */
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal ul.body { padding-left: 20px; margin: 0 0 8px; }
.legal ul.body li { margin-bottom: 8px; }
.legal .body a { color: var(--primary-ink); }
.legal .body strong { color: var(--fg); font-weight: 600; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border); padding: 32px 0;
  font-size: 13px; color: var(--muted);
}
.site-footer .inner {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center;
}
.site-footer a:hover { color: var(--fg); }

/* Empty states */
.empty { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }

/* Responsive tweaks */
/* Mobile header + chrome: below the desktop breakpoint the waitlist CTA is the
   priority — the brand + CTA share one row, and the body is padded so the
   fixed CTA bar never sits over the footer. */
@media (max-width: 767px) {
  .site-header__inner { padding: 0 16px; }
  body { padding-bottom: 76px; }
}