/* ---------- Tokens — Onchain Editorial ---------- */
:root {
  /* Surfaces — pure paper-white, no warm tint */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F5F7;
  --ink: #000000;
  --ink-2: #0B0D12;
  --muted: #5A6270;
  --soft: #98A0AE;
  --border: #E6E8EC;
  --border-strong: #0B0D12;   /* used for editorial rules */
  --border-soft: #EEF0F3;

  /* BASE blue — the field, not the accent */
  --accent: #0052FF;
  --accent-ink: #0040C8;
  --accent-soft: #EAF1FF;
  --accent-tint: #F4F8FF;
  --accent-border: #BFD3FF;
  --accent-dark: #002FA0;

  /* Verified state — blue */
  --verified-bg: var(--accent-soft);
  --verified-fg: var(--accent-ink);
  --verified-border: var(--accent-border);

  /* PnL only */
  --pnl-up: #0F9D58;
  --pnl-up-soft: #E6F4EB;
  --pnl-down: #B91C1C;

  --warn: #B45309;
  --warn-soft: #FDF3E5;
  --danger: #B91C1C;
  --danger-soft: #FEE7E7;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11,13,18,0.05);
  --shadow-sm: 0 1px 0 rgba(11,13,18,0.03), 0 1px 3px rgba(11,13,18,0.04);
  --shadow-md: 0 1px 2px rgba(11,13,18,0.04), 0 6px 20px rgba(11,13,18,0.06);
  --shadow-lg: 0 12px 32px rgba(11,13,18,0.08), 0 24px 64px rgba(11,13,18,0.06);
  --shadow-glass: 0 12px 40px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);

  --ring: 0 0 0 3px rgba(20, 83, 255, 0.18);

  /* Type stack — editorial display + technical mono */
  --font-display: "Space Grotesk", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: "Geist", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --t-fast: 120ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-med:  200ms cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Strong custom easing — snappy ease-out for all UI interactions */
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);
}

html { background: var(--bg); }

/* ---------- Dark mode tokens ---------- */
html.dark {
  --bg:            #0A0A10;
  --surface:       #111218;
  --surface-2:     #1C1E26;
  --ink:           #F0F2F7;
  --ink-2:         #C5CAD5;
  --muted:         #8A97B2;
  --soft:          #7888A8;
  --border:        #25272E;
  --border-strong: #F0F2F7;
  --border-soft:   #1C1E24;

  --accent-soft:   #0A1A40;
  --accent-tint:   #080F2A;
  --accent-border: #1A3870;

  --warn-soft:     #221500;
  --danger-soft:   #220808;
  --pnl-up-soft:   #082018;

  --shadow-xs:     0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:     0 1px 0 rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:     0 1px 2px rgba(0,0,0,0.30), 0 6px 20px rgba(0,0,0,0.50);
  --shadow-lg:     0 12px 32px rgba(0,0,0,0.55), 0 24px 64px rgba(0,0,0,0.50);
  --shadow-glass:  0 12px 40px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.40);
}

/* Glass / frosted overrides for dark mode */
html.dark .glass {
  background: rgba(17, 18, 26, 0.82);
  border-color: rgba(255,255,255,0.06);
}
html.dark .glass-strong {
  background: rgba(14, 15, 22, 0.94);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 16px 48px rgba(0,0,0,0.50);
}

/* Topnav frosted glass */
html.dark .topnav {
  background: rgba(10, 10, 16, 0.90);
}

/* Ghost button hover on dark bg */
html.dark .btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
}

/* btn-dark inverts on dark background */
html.dark .btn-dark {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
}

/* Fade-gradient overlays used in landing section */
html.dark .fade-bottom {
  background: linear-gradient(180deg, rgba(10,10,16,0) 0%, var(--bg) 100%);
}

/* ---------- Glass utilities ---------- */
.glass {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-glass);
}
.glass-strong {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.09);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Layout ---------- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Type ---------- */
.h-display {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--ink);
}
.h1 { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; margin: 0; }
.h2 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -0.028em; font-weight: 700; margin: 0; }
.h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; letter-spacing: -0.022em; font-weight: 600; margin: 0; }
.h4 { font-family: var(--font-display); font-size: 15px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; margin: 0; }
.italic-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow-muted { color: var(--muted); }
.eyebrow-blue { color: var(--accent); }
.lede { font-size: 20px; line-height: 1.5; color: var(--muted); letter-spacing: -0.012em; font-weight: 400; }
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; letter-spacing: -0.005em; }

/* Link styling — blue */
.link {
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
}
.link:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
              transform 140ms var(--ease-snap), box-shadow var(--t-fast);
  white-space: nowrap;
  position: relative;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #14181F; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--accent-dark); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: #BCC2CC; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(11,13,18,0.05); color: var(--ink); }
.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); }
.btn-glass {
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-glass:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.85);
}
.btn-lg { height: 52px; padding: 0 26px; font-size: 15px; border-radius: 999px; font-weight: 500; }
.btn-pill { border-radius: 999px !important; padding-left: 22px; padding-right: 22px; }
.btn-pill .icon-lg, .btn-pill .icon-sm { transition: transform var(--t-fast); }
.btn-pill:hover .icon-lg, .btn-pill:hover .icon-sm { transform: translateX(2px); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn-block { width: 100%; }

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-hover { transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-med); }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-glass {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glass);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-verified {
  background: var(--verified-bg);
  color: var(--verified-fg);
  border-color: var(--verified-border);
}
.badge-accent {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-border);
}
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: #f1d9b3; }
.badge-pnl { background: #FFF7E0; color: #8a6500; border-color: #f1d97a; }
.badge-status-open { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-border); }
.badge-status-pending { background: #FFF4E0; color: #8a6500; border-color: #f1d97a; }
.badge-status-accepted { background: #E6F4EB; color: #0a6d3e; border-color: #c6e6d2; }
.badge-status-rejected { background: #FDECEC; color: #8a1d1d; border-color: #f3c4c4; }
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ---------- Chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--border-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.chip-outline { background: transparent; border-color: var(--border); }
.chip-outline:hover { border-color: var(--border-strong); }
.chip-selected {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-border);
}

/* ---------- Input ---------- */
.input, .textarea, .select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; min-height: 80px; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.input::placeholder, .textarea::placeholder { color: var(--soft); }
.label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.label-required::after { content: " *"; color: var(--accent); }
.field-help { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Divider ---------- */
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---------- TopNav — sharp editorial rule ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--ink);
}
.topnav-inner {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;                       /* tighter — was 24, the brand sits closer to the nav links */
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;                        /* tighter than 10 so mark + wordmark read as one unit */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;                 /* +2 to match larger mark */
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  height: 40px;                    /* lock to nav control height so brand never floats above other items */
}
.brand-mark {
  width: 40px;                     /* matches all other nav controls — single horizontal axis */
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-wordmark {
  display: inline-flex;
  align-items: center;             /* center, not baseline — the serif italic descender throws off baseline */
  height: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.brand-wordmark em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-left: 1px;
  font-size: 1.08em;               /* serif italic reads a touch smaller — bump for optical balance */
  line-height: 1;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;               /* was 8 — combined with smaller topnav gap, brand area feels balanced */
}
.nav-link {
  padding: 7px 11px;
  font-size: 14px;
  color: var(--ink-2);
  border-radius: 0;
  font-weight: 500;
  position: relative;
  letter-spacing: -0.005em;
}
.nav-link:hover { color: var(--accent); background: transparent; }
.nav-link.active {
  color: var(--accent);
  background: transparent;
}
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: -22px;
  height: 3px; background: var(--accent);
}
.nav-link .badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  margin-left: 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- Avatar (geometric) ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.avatar-md { width: 48px; height: 48px; font-size: 16px; }
.avatar-lg { width: 72px; height: 72px; font-size: 22px; border-radius: 16px; }
.avatar-xl { width: 112px; height: 112px; font-size: 34px; border-radius: 24px; }
.avatar-ring {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------- Section ---------- */
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }

/* ---------- Hero \u2014 editorial left wall ---------- */
.hero-edit {
  position: relative;
  padding: 88px 0 64px;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background:
    radial-gradient(circle at 88% 18%, rgba(0,82,255,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%);
}
.hero-edit .hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(11,13,18,0.05) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-edit-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 980px) {
  .hero-edit-inner { grid-template-columns: 1fr; gap: 32px; }
}
.hero-display {
  font-family: var(--font-display);
  font-size: clamp(60px, 11vw, 168px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.hero-display .pro {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--accent);
  padding-right: 0.1em;
}
.hero-display .net {
  display: inline-block;
  padding: 0 0.18em;
  background: var(--accent);
  color: #fff;
  letter-spacing: -0.045em;
}
.hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.hero-meta-row .cell { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-row .cell .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hero-meta-row .cell .v { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }

/* ---------- Original hero-center (kept for safety) ---------- */
.hero-center {
  position: relative;
  text-align: center;
  padding: 96px 24px 64px;
  overflow: hidden;
}
.hero-pixels {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
@media (max-width: 1024px) {
  .hero-pixels-ml, .hero-pixels-mr { display: none; }
}
@media (max-width: 720px) {
  .hero-center { padding: 64px 16px 40px; }
  .hero-pixels { opacity: 0.45; }
  .hero-pixels-tl { display: none; }
}
.hero-center .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 6px 14px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
}
.hero-center .hero-title {
  font-size: clamp(52px, 7.4vw, 96px);
  line-height: 0.99;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 auto 22px;
  max-width: 980px;
}
.hero-center .hero-subtitle {
  margin: 0 auto 36px;
  max-width: 640px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.005em;
  font-weight: 400;
}
.hero-center .hero-ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Section header (base.org-inspired) ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.section-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  max-width: 720px;
  margin: 0;
}
.section-title .subtle { color: var(--muted); font-weight: 600; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Profile cards grid ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .profile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } }

/* ---------- Profile card ---------- */
.profile-card { padding: 20px; position: relative; overflow: hidden; }
.profile-card::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 2px; height: 28px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  opacity: 0.18;
  transition: opacity 220ms cubic-bezier(0.2, 0.6, 0.2, 1), height 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
  z-index: 1;
}
.profile-card.card-hover:hover::before { opacity: 1; height: 56px; }
.profile-card .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.profile-card .skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.profile-card .meta-row { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.profile-card .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.profile-card .stat b { font-weight: 600; color: var(--ink); font-size: 13px; }

/* ---------- Project cards grid ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; } }

.project-card { position: relative; overflow: hidden; }
.project-card::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 2px; height: 28px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  opacity: 0.18;
  transition: opacity 220ms cubic-bezier(0.2, 0.6, 0.2, 1), height 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.project-card.card-hover:hover::before { opacity: 1; height: 56px; }

/* ---------- Stat panel ---------- */
.stat-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}
.stat-cell:last-child { border-right: 0; }
.stat-cell .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.stat-cell .k { font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: -0.005em; }

/* ---------- Filter sidebar ---------- */
.filter-section { padding: 14px 0; border-top: 1px solid var(--border); }
.filter-section:first-child { border-top: 0; padding-top: 0; }
.filter-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.filter-row:hover { color: var(--ink); }
.filter-row input { accent-color: var(--accent); width: 14px; height: 14px; }
.filter-count { margin-left: auto; color: var(--soft); font-size: 12px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------- Slider ---------- */
input[type="range"] { accent-color: var(--accent); }

/* ---------- Misc ---------- */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; flex-shrink: 0; }
.icon-lg { width: 20px; height: 20px; flex-shrink: 0; }

.dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--soft);
  display: inline-block;
  margin: 0 2px;
}

.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ---------- Availability dot ---------- */
.avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.avail-open { background: var(--accent); }
.avail-collab { background: #7C3AED; }
.avail-hiring { background: #F59E0B; }
.avail-none { background: var(--soft); }

/* ---------- Featured patterns ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}
.feature-card .ill {
  flex: 1;
  margin: 0 -28px -28px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* ---------- Logo strip ---------- */
.logo-strip {
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-strip .lg {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--soft);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Verification status row ---------- */
.verify-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.verify-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 18, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 200ms ease;
}
.modal {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.06);
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: modalIn 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.modal-lg { max-width: 720px; }
.modal-sm { max-width: 460px; }
.modal-header {
  padding: 20px 24px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(244, 248, 255, 0.5) 0%, transparent 100%);
}
.modal-body {
  padding: 24px;
  overflow: auto;
  flex: 1;
}
.modal-footer {
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Toast ---------- */
.toast-region {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: toastIn 320ms var(--ease-snap) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* ---------- Responsive nav ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .topnav-search { display: none !important; }
  .topnav-bell { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  .container, .container-narrow { padding: 0 16px; }
  .section { padding: 56px 0; }
  .h-display { font-size: 36px !important; }
  .h1 { font-size: 28px !important; }
  .proof-stack-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .proof-stack-grid > div:nth-child(odd) { border-left: 0 !important; }
  .proof-stack-grid > div { border-top: 1px solid var(--border); }
  .proof-stack-grid > div:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 480px) {
  /* Keep brand readable but compact on phones */
  .brand-mark { width: 36px; height: 36px; }
  .brand-wordmark { font-size: 18px; }
}

.mobile-drawer {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 20px;
  box-shadow: var(--shadow-md);
  animation: drawerIn 200ms ease;
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: 8px;
  font-size: 15px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.mobile-nav-link:hover { background: var(--surface-2); }
.mobile-nav-link.active { background: var(--accent-soft); color: var(--accent-ink); }

@media (max-width: 640px) {
  .stat-panel { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-cell:nth-child(2) { border-right: 0; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
  .feature-card { min-height: 240px; padding: 22px; }
  .feature-card .ill { margin: 0 -22px -22px; }
}


/* ---------- Editorial primitives ---------- */
.rule { height: 1px; background: var(--ink); border: 0; margin: 0; }
.rule-soft { height: 1px; background: var(--border); border: 0; margin: 0; }
.section-edit { padding: 96px 0; border-bottom: 1px solid var(--ink); }
.section-edit.tight { padding: 56px 0; }
.section-edit.no-rule { border-bottom: 0; }
.section-edit.ink { background: var(--ink); color: #fff; border-bottom-color: #1a1c22; }
.section-edit.blue { background: var(--accent); color: #fff; border-bottom-color: var(--accent-dark); }

.editorial-head {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink);
}
.editorial-head .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.editorial-head .title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
  margin: 12px 0 0;
}
.editorial-head .title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.025em;
}
.editorial-head .deck {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 460px;
  margin: 0;
}
@media (max-width: 820px) {
  .editorial-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .editorial-head .deck { max-width: none; }
}

/* ---------- Marquee ticker ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 14px 0;
  flex-shrink: 0;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
}
.marquee-item {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.marquee-item .sep {
  width: 6px; height: 6px; background: var(--accent); display: inline-block;
}
.marquee-item .val { color: var(--accent); font-weight: 500; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Slab numeric callout ---------- */
.slab {
  border: 1px solid var(--ink);
  background: #fff;
  padding: 24px;
  position: relative;
}
.slab .corner {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  padding: 5px 9px; text-transform: uppercase;
}
.slab .figure {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--ink);
}
.slab .figure .unit { font-size: 0.35em; color: var(--muted); font-weight: 500; letter-spacing: -0.02em; vertical-align: super; margin-left: 4px; }
.slab .figure .pct { color: var(--accent); }
.slab .figure-label {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- Manifesto type ---------- */
.manifesto {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
  max-width: 1100px;
}
.manifesto em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.manifesto .strike {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--accent);
  color: var(--muted);
}

/* ---------- Pillar grid (editorial) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.pillars .pillar {
  padding: 28px 24px 28px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  position: relative;
  transition: background 200ms ease;
}
.pillars .pillar:hover { background: var(--accent-tint); }
.pillars .pillar .pn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}
.pillars .pillar h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.pillars .pillar p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.pillars .pillar .visual {
  margin-top: auto;
  height: 116px;
  border-top: 1px solid var(--border);
  margin-left: -24px; margin-right: -24px; margin-bottom: -28px;
  padding: 14px 24px;
  background: var(--surface-2);
  overflow: hidden;
}
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Builder rail (horizontal scroll) ---------- */
.builder-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.builder-rail > * {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 900px) { .builder-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .builder-rail { grid-template-columns: 1fr; } }

/* ---------- Step rows ---------- */
.steps-edit { border-top: 1px solid var(--ink); }
.steps-edit .step {
  display: grid;
  grid-template-columns: 100px 1fr 1.2fr auto;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.steps-edit .step .num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--accent);
  line-height: 1;
}
.steps-edit .step .title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.steps-edit .step .desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.steps-edit .step .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 820px) {
  .steps-edit .step { grid-template-columns: 60px 1fr; }
  .steps-edit .step .num { font-size: 36px; }
  .steps-edit .step .desc, .steps-edit .step .meta { grid-column: 1 / -1; padding-left: 92px; }
  .steps-edit .step .meta { padding-top: 4px; }
}

/* ---------- Big blue CTA ---------- */
.cta-blue {
  background: var(--accent);
  color: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-blue .cta-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.cta-blue .cta-display em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #fff;
  opacity: 0.75;
}
.cta-blue .cta-sub {
  margin-top: 20px;
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  max-width: 520px;
  line-height: 1.5;
}
.btn-white {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
  font-weight: 600;
}
.btn-white:hover:not(:disabled) { background: #F0F0F0; }
.btn-blue-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.42);
}
.btn-blue-outline:hover:not(:disabled) { background: rgba(255,255,255,0.10); border-color: #fff; }

/* ---------- Footer editorial ---------- */
.footer-edit {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 32px;
}
.footer-edit a { color: #fff; }
.footer-edit .footer-rule { border-top: 1px solid rgba(255,255,255,0.18); margin: 32px 0 20px; }
.footer-edit .footer-mark {
  font-family: var(--font-display);
  font-size: clamp(64px, 14vw, 220px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.86;
  color: #fff;
  margin: 36px 0 0;
}
.footer-edit .footer-mark em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  opacity: 1;
}

/* ---------- Section number tag (Editorial chapter mark) ---------- */
.chapter-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.chapter-mark .num { color: var(--accent); }
.chapter-mark .bar { width: 28px; height: 1px; background: var(--ink); display: inline-block; }


/* ---------- WorldMap ---------- */
.wm-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #fff;
  overflow: hidden;
}
.wm-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  user-select: none;
}
.wm-svg-bg {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@keyframes wm-draw {
  to { stroke-dashoffset: 0; }
}

/* WorldMap city band */
.wm-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: #fff;
}
.wm-cities > div { padding: 18px 20px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.wm-cities > div:last-child { border-right: 0; }
.wm-cities .city { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; }
.wm-cities .count { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; color: var(--ink); }
.wm-cities .tz { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
@media (max-width: 720px) {
  .wm-cities { grid-template-columns: repeat(2, 1fr); }
  .wm-cities > div { border-bottom: 1px solid var(--ink); }
  .wm-cities > div:nth-child(2) { border-right: 0; }
  .wm-cities > div:nth-child(3), .wm-cities > div:nth-child(4) { border-bottom: 0; }
}


/* ---------- EvervaultCard ---------- */
.ev-card {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: crosshair;
  isolation: isolate;
}
.ev-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.ev-beam {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, #3D75FF 0%, #0052FF 55%, #002FA0 100%);
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 2;
}
.ev-chars {
  position: absolute; inset: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.06;
  word-break: break-all;
  white-space: pre-wrap;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
  mix-blend-mode: overlay;
  pointer-events: none;
  padding: 6px;
  z-index: 3;
  transition: opacity 280ms ease;
  user-select: none;
}
.ev-center {
  position: relative;
  z-index: 5;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ev-disc {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.86);
  border-radius: 50%;
  filter: blur(2px);
}
.ev-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--ink);
  text-transform: uppercase;
}

/* Proof section grid */
.proof-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; gap: 32px; }
}
.proof-text-col { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.proof-text-col .pull {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.proof-text-col .pull em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -0.02em; }
.proof-text-col .row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
}
.proof-text-col .row:last-child { border-bottom: 1px solid var(--border); }
.proof-text-col .row .k { color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; flex: 0 0 auto; min-width: 110px; }
.proof-text-col .row .v { color: var(--ink); font-weight: 500; word-break: break-all; }
.proof-text-col .row .ok { color: var(--accent); font-weight: 500; }


/* ---------- PulseBeams ---------- */
.pulse-beams-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pulse-beams-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.pulse-beams-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pulse-beams-content .btn {
  box-shadow: 0 8px 24px rgba(0, 82, 255, 0.22), 0 1px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@keyframes pulse-beam-travel {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Hero CTA stack — column with pulse-beams button + secondary text link */
.hero-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  justify-self: end;
}
.hero-cta-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 4px;
  transition: color 140ms ease;
  background: transparent; border: 0;
}
.hero-cta-sub:hover { color: var(--accent); }
.hero-cta-sub .arrow { display: inline-block; transition: transform 140ms ease; margin-left: 6px; }
.hero-cta-sub:hover .arrow { transform: translateX(3px); }

@media (max-width: 980px) {
  .hero-cta-stack { align-items: flex-start; justify-self: start; }
}
@media (max-width: 520px) {
  .pulse-beams-wrap { width: 360px !important; height: 160px !important; }
}


/* ---------- Chapter-mark on dark surfaces ---------- */
.chapter-mark.on-dark { color: rgba(255,255,255,0.78); }
.chapter-mark.on-dark .num { color: #fff; }
.chapter-mark.on-dark .bar { background: rgba(255,255,255,0.40); }

/* Sharpen chips/avatars inside the editorial builder rail */
.builder-rail .chip { border-radius: 2px; background: var(--surface-2); border-color: var(--border-soft); }
.builder-rail .avatar-md { border-radius: 2px; }
.builder-rail .avatar-sm { border-radius: 2px; }
.builder-rail .avatar-xs { border-radius: 2px; }
.builder-rail .profile-card::before { display: none; }

/* Numbers slab inner border tone unified with section-edit dividers */


/* ---------- MarkerHighlight ---------- */
.mh-wrap { display: inline; }
.mh-mark {
  position: relative;
  display: inline-block;
  padding: 0 0.08em;
  vertical-align: baseline;
}
.mh-bar {
  position: absolute;
  inset: 0.06em -0.04em 0.06em -0.04em;
  background: var(--mh-marker);
  transform-origin: left center;
  transform: scaleX(0);
  animation: mh-sweep var(--mh-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--mh-delay) forwards;
  z-index: 0;
  pointer-events: none;
}
.mh-text {
  position: relative;
  z-index: 1;
  color: var(--mh-base);
  animation: mh-text-flip 0.28s ease-out var(--mh-text-delay) forwards;
}
@keyframes mh-sweep { to { transform: scaleX(1); } }
@keyframes mh-text-flip { to { color: var(--mh-highlight); } }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mh-bar { animation: none; transform: scaleX(1); }
  .mh-text { animation: none; color: var(--mh-highlight); }
}


/* ---------- Pricing ---------- */
.pricing-toggle {
  position: relative;
  display: flex;                 /* not inline — we use width:max-content so the container shrinks to its buttons */
  width: max-content;
  max-width: 100%;
  align-items: stretch;
  border: 1px solid var(--ink);
  padding: 4px;
  margin: 0 auto 44px;
  gap: 0;
  background: #fff;
}
.pricing-toggle-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  background: var(--ink);
  transition: transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 0;
}
.pricing-toggle-slider[data-pos="monthly"] { transform: translateX(0); }
.pricing-toggle-slider[data-pos="yearly"]  { transform: translateX(100%); }
.pricing-toggle-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;                   /* both buttons share the row equally — slider's 50% width then matches exactly one button */
  padding: 9px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: color 220ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 168px;              /* keeps "Annually save ~17%" on one line */
  justify-content: center;
  white-space: nowrap;
}
.pricing-toggle-btn.active { color: #fff; }
.pricing-save-badge {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  background: var(--accent);
  color: #fff;
  transition: background 220ms ease, color 220ms ease;
}
.pricing-toggle-btn.active .pricing-save-badge { background: #fff; color: var(--accent); }

/* Mobile: still readable, still symmetrical */
@media (max-width: 480px) {
  .pricing-toggle-btn {
    min-width: 0;
    padding: 9px 14px;
    font-size: 11px;
    gap: 6px;
  }
  .pricing-save-badge { font-size: 9px; padding: 2px 5px; }
}

/* Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--ink);
}
.pricing-grid > * {
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: 1fr; border-left: 1px solid var(--ink); }
  .pricing-grid > * + * { border-top: 0; }
}

/* Card */
.pricing-card {
  position: relative;
  background: #fff;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 620px;
  transition: background 200ms ease;
}
.pricing-card.is-popular {
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 70%);
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 24px 60px -16px rgba(0, 82, 255, 0.32),
    0 8px 24px -8px rgba(0, 82, 255, 0.18);
}

/* Current plan card — green tint */
.pricing-card.is-current-plan {
  background: linear-gradient(180deg, #F2FBF5 0%, #FFFFFF 70%);
  z-index: 1;
  box-shadow:
    inset 0 0 0 2px #22c55e,
    0 24px 60px -16px rgba(34, 197, 94, 0.20),
    0 8px 24px -8px rgba(34, 197, 94, 0.12);
}
.pricing-current-badge {
  background: #16a34a !important;
}
.pricing-current-cta {
  opacity: 0.7;
  cursor: default;
  border-color: #22c55e !important;
  color: #16a34a !important;
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  z-index: 5;
}

.pricing-card-head { display: flex; flex-direction: column; gap: 6px; }
.pricing-card-eyebrow {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pricing-card-desc {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  letter-spacing: -0.005em;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--font-display);
  letter-spacing: -0.045em;
  color: var(--ink);
}
.pricing-currency { font-size: 22px; font-weight: 600; line-height: 1; transform: translateY(-12px); display: inline-block; }
.pricing-amount   { font-size: 64px; font-weight: 700; line-height: 1; }
.pricing-period {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: lowercase;
  margin-left: 4px;
}
.pricing-card-saving {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: -4px;
}

.pricing-card-rule {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 6px 0 0;
}
.pricing-card.is-popular .pricing-card-rule { background: var(--accent-border); }

.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}
.pricing-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-card.tone-muted .pricing-check { background: var(--surface-2); color: var(--ink-2); }
.pricing-card.tone-ink .pricing-check   { background: rgba(11,13,18,0.06); color: var(--ink); }

.pricing-card-cta {
  margin-top: auto;
  padding-top: 12px;
}

/* Note */
.pricing-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px auto 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--muted);
  max-width: max-content;
  letter-spacing: 0.04em;
}
.pricing-note-dot {
  width: 8px; height: 8px; background: var(--accent); display: inline-block; flex-shrink: 0;
  animation: pricing-pulse 1.8s ease-in-out infinite;
}
@keyframes pricing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* FAQ — accordion styles defined below */


/* ---------- UpgradeBanner / Toast ---------- */
.toast-region {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  align-items: center;
}
.ub-wrap {
  pointer-events: auto;
  animation: ub-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes ub-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ub {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 6px 0 14px;
  border-radius: 8px;
  background: #F0F7FF;
  border: 1px solid #CBE7FF;
  box-shadow: 0 4px 16px rgba(0, 95, 242, 0.10), 0 1px 2px rgba(0, 35, 89, 0.06);
  font-family: var(--font-sans);
  font-size: 13px;
  white-space: nowrap;
  color: #002359;
}
.ub-wrap.tone-warn .ub {
  background: #FFF4E0;
  border-color: #F1D9A8;
  color: #6E4A00;
  box-shadow: 0 4px 16px rgba(180, 117, 9, 0.12);
}
.ub-wrap.tone-danger .ub {
  background: #FEE7E7;
  border-color: #F3C4C4;
  color: #8A1D1D;
  box-shadow: 0 4px 16px rgba(185, 28, 28, 0.12);
}
.ub-wrap.tone-ink .ub {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 6px 20px rgba(11, 13, 18, 0.32);
}

/* Action button (underlined link-style) */
.ub-btn {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 2px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #002359;
  text-decoration: underline;
  text-decoration-color: #CAE7FF;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.ub-btn:hover { color: #005FF2; text-decoration-color: #94CCFF; }
.ub-wrap.tone-warn  .ub-btn { color: #6E4A00; text-decoration-color: #F1D9A8; }
.ub-wrap.tone-warn  .ub-btn:hover { color: #8A5C00; }
.ub-wrap.tone-danger .ub-btn { color: #8A1D1D; text-decoration-color: #F3C4C4; }
.ub-wrap.tone-ink   .ub-btn { color: #fff; text-decoration-color: rgba(255,255,255,0.45); }
.ub-wrap.tone-ink   .ub-btn:hover { color: #BFD3FF; text-decoration-color: #BFD3FF; }

/* Description text */
.ub-desc {
  font-size: 13px;
  color: #005FF2;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ub-wrap.tone-warn  .ub-desc { color: #8A5C00; }
.ub-wrap.tone-danger .ub-desc { color: #8A1D1D; }
.ub-wrap.tone-ink   .ub-desc { color: rgba(255,255,255,0.85); }

/* Close button */
.ub-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: transparent;
  color: #005FF2;
  border: 0;
  cursor: pointer;
  margin-left: 2px;
  flex-shrink: 0;
  transition: background 160ms ease, color 160ms ease;
}
.ub-close:hover { background: #CAE7FF; }
.ub-wrap.tone-warn  .ub-close { color: #8A5C00; }
.ub-wrap.tone-warn  .ub-close:hover { background: #F1D9A8; }
.ub-wrap.tone-danger .ub-close { color: #8A1D1D; }
.ub-wrap.tone-danger .ub-close:hover { background: #F3C4C4; }
.ub-wrap.tone-ink   .ub-close { color: rgba(255,255,255,0.7); }
.ub-wrap.tone-ink   .ub-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Decorative gears (fly out + rotate on hover) */
.ub-gear {
  position: absolute;
  pointer-events: none;
  color: #005FF2;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg);
  transition:
    transform 900ms cubic-bezier(0.2, 1.4, 0.4, 1),
    opacity 280ms ease;
  z-index: 0;
}
.ub-gear.is-hover { opacity: 1; }
.ub-gear-1 { top: 2px; left: 4px; }
.ub-gear-1.is-hover { transform: translate(-12px, -12px) rotate(360deg); }
.ub-gear-2 { bottom: 2px; left: 96px; }
.ub-gear-2.is-hover { transform: translate(12px, 12px) rotate(360deg); }
.ub-wrap.tone-warn  .ub-gear { color: #B47509; }
.ub-wrap.tone-danger .ub-gear { color: #B91C1C; }
.ub-wrap.tone-ink   .ub-gear { color: rgba(255,255,255,0.55); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ub-gear { display: none; }
  .ub-wrap { animation: none; }
}

@media (max-width: 520px) {
  .toast-region { left: 16px; right: 16px; transform: none; }
  .ub { white-space: normal; height: auto; padding: 8px 8px 8px 14px; }
}


/* ---------- Pricing FAQ accordion ---------- */
.faq-accordion {
  border: 1px solid var(--ink);
  background: #fff;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background 220ms ease;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item.is-open { background: #FAFBFD; }

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 160ms ease;
}
.faq-trigger:hover { color: var(--accent); }
.faq-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.faq-q { flex: 1; min-width: 0; }
.faq-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  flex-shrink: 0;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease, color 220ms ease;
}
.faq-item.is-open .faq-chev {
  transform: rotate(180deg);
  background: var(--accent);
  color: #fff;
}

/* Smooth height reveal via grid-template-rows trick (no JS measurement) */
.faq-content-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-content-wrap { grid-template-rows: 1fr; }

.faq-content {
  overflow: hidden;
  padding: 0 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.faq-item.is-open .faq-content { padding-bottom: 22px; }

.pricing-faq-foot {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.pricing-faq-foot .link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 4px; }
.pricing-faq-foot .link:hover { text-decoration-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .faq-content-wrap { transition: none; }
  .faq-chev { transition: none; }
}


/* ---------- ProfileHeroCard ---------- */
.pcard-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 32px auto 80px;
  animation: pcard-in 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@keyframes pcard-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* BASE blue ambient glow underneath the card */
.pcard-glow {
  position: absolute;
  inset: 60% -6% -8% -6%;
  border-radius: 28px;
  background: #0052FF;
  filter: blur(8px);
  opacity: 0.55;
  box-shadow:
    0 40px 80px -16px rgba(0, 82, 255, 0.55),
    0 60px 120px -8px rgba(0, 82, 255, 0.45);
  z-index: 0;
  pointer-events: none;
}
.pcard-glow-caption {
  position: absolute;
  left: 0; right: 0; bottom: -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #0B0D12;
  z-index: 1;
  pointer-events: none;
  letter-spacing: -0.005em;
}
.pcard-bolt { display: inline-flex; color: #0B0D12; }

/* The card itself */
.pcard {
  position: relative;
  z-index: 2;
  border-radius: 28px;
  padding: 28px;
  background: radial-gradient(120% 120% at 30% 10%, #1A1A1A 0%, #0F0F10 60%, #0B0B0C 100%);
  color: #fff;
  box-shadow:
    0 24px 60px -16px rgba(11, 13, 18, 0.55),
    0 12px 32px -12px rgba(11, 13, 18, 0.45);
}

/* Status row */
.pcard-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.pcard-status { display: inline-flex; align-items: center; gap: 8px; }
.pcard-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
  animation: pcard-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pcard-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pcard-clock {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.72);
}
.pcard-clock .mono { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pcard-tz {
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* Identity row */
.pcard-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pcard-avatar {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
}
.pcard-avatar .avatar { width: 64px !important; height: 64px !important; border-radius: 16px !important; font-size: 22px; }
.pcard-id { min-width: 0; flex: 1; }
.pcard-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pcard-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.pcard-sub {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

/* Action buttons */
.pcard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 480px) { .pcard-actions { grid-template-columns: 1fr; } }
.pcard-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 80ms ease;
}
.pcard-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.14); }
.pcard-btn:active { transform: translateY(0.5px); }
.pcard-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0, 82, 255, 0.65); }

/* Inline pill-row of secondary actions (Follow / Message / Share) */
.pcard-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 32px;
}
.pcard-secondary .btn { height: 34px; padding: 0 14px; font-size: 13px; }


/* ---------- Messages ambient lofi background ---------- */
/* Activated by .messages-page on body — confines visuals to the Messages route. */
body.messages-page { background: #050A1A; }
body.messages-page .topnav { background: rgba(255, 255, 255, 0.78); border-bottom-color: rgba(255, 255, 255, 0.10); }
body.messages-page .topnav .brand,
body.messages-page .topnav .nav-link,
body.messages-page .topnav .topnav-search { color: inherit; }

.msg-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #0A1A40 0%, #050A1A 70%, #02050E 100%);
}

.msg-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}

.msg-bg-blob-1 {
  width: 60vmax; height: 60vmax;
  top: -22vmax; left: -22vmax;
  background: radial-gradient(circle, rgba(0, 82, 255, 0.85) 0%, rgba(0, 82, 255, 0) 65%);
  animation: msg-drift-1 28s ease-in-out infinite alternate;
}
.msg-bg-blob-2 {
  width: 58vmax; height: 58vmax;
  top: -18vmax; right: -22vmax;
  background: radial-gradient(circle, rgba(20, 83, 255, 0.78) 0%, rgba(20, 83, 255, 0) 65%);
  animation: msg-drift-2 36s ease-in-out infinite alternate;
}
.msg-bg-blob-3 {
  width: 50vmax; height: 50vmax;
  bottom: -18vmax; left: 8vmax;
  background: radial-gradient(circle, rgba(61, 117, 255, 0.65) 0%, rgba(61, 117, 255, 0) 70%);
  animation: msg-drift-3 32s ease-in-out infinite alternate;
}
.msg-bg-blob-4 {
  width: 55vmax; height: 55vmax;
  bottom: -22vmax; right: -18vmax;
  background: radial-gradient(circle, rgba(0, 47, 160, 0.85) 0%, rgba(0, 47, 160, 0) 65%);
  animation: msg-drift-4 40s ease-in-out infinite alternate;
}
.msg-bg-blob-5 {
  width: 38vmax; height: 38vmax;
  top: 28%; left: 32%;
  background: radial-gradient(circle, rgba(92, 138, 255, 0.55) 0%, rgba(92, 138, 255, 0) 70%);
  animation: msg-drift-5 30s ease-in-out infinite alternate;
}

@keyframes msg-drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vmax, 4vmax, 0) scale(1.10); }
}
@keyframes msg-drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6vmax, 8vmax, 0) scale(0.94); }
}
@keyframes msg-drift-3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vmax, -6vmax, 0) scale(1.08); }
}
@keyframes msg-drift-4 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8vmax, -4vmax, 0) scale(1.12); }
}
@keyframes msg-drift-5 {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(-6vmax, 6vmax, 0) scale(1.16); }
}

/* Dark BASE-blue tinted vignette overlay — keeps content readable */
.msg-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0, 47, 160, 0.45) 0%, rgba(0, 0, 0, 0) 50%),
    linear-gradient(180deg, rgba(5, 10, 26, 0.55) 0%, rgba(5, 10, 26, 0.28) 38%, rgba(5, 10, 26, 0.55) 100%);
}

/* Subtle SVG film grain for texture (data URI — no external request) */
.msg-bg-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: overlay;
}

/* Lift Messages content above the background */
body.messages-page .container,
body.messages-page main,
body.messages-page > [data-screen-label] > * { position: relative; z-index: 1; }

/* Cards stand out from the dark bg with stronger shadows */
body.messages-page .card {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 48px rgba(2, 5, 14, 0.45), 0 2px 6px rgba(2, 5, 14, 0.30);
}

/* Toast region pills should still pop on dark */
body.messages-page .ub { box-shadow: 0 10px 30px rgba(0, 30, 100, 0.45); }

/* Reduced motion: stop drifting */
@media (prefers-reduced-motion: reduce) {
  .msg-bg-blob { animation: none; }
}

/* Mobile: simplify — fewer blobs, lower opacity, lighter blur for perf */
@media (max-width: 720px) {
  .msg-bg-blob-3, .msg-bg-blob-5 { display: none; }
  .msg-bg-blob { filter: blur(60px); animation-duration: 50s; }
  .msg-bg-grain { display: none; }
  .msg-bg-overlay { background: linear-gradient(180deg, rgba(5,10,26,0.7) 0%, rgba(5,10,26,0.55) 100%); }
}


/* ---------- Messages bg video layer + BASE blue tint ---------- */
.msg-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: blur(3px) saturate(0.55) brightness(0.55) contrast(1.05);
  pointer-events: none;
  /* Hint to browsers: this is decorative — don't promote excessively */
  will-change: opacity;
  /* Hide while loading so the mesh shows behind */
  opacity: 0;
  animation: msg-video-fade 800ms ease 200ms forwards;
}
@keyframes msg-video-fade { to { opacity: 1; } }

.msg-bg-tint {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 82, 255, 0.55) 0%, rgba(0, 82, 255, 0.20) 55%, transparent 90%),
    linear-gradient(180deg, rgba(20, 83, 255, 0.45) 0%, rgba(0, 47, 160, 0.65) 100%);
  mix-blend-mode: color;
}

/* Re-stack the overlay and grain above the video + tint */
.msg-bg .msg-bg-overlay { z-index: 3; }
.msg-bg .msg-bg-grain   { z-index: 4; }

/* Mobile: video is conditionally not rendered; the mesh + tint do the work */
@media (max-width: 720px) {
  .msg-bg-video { display: none; }
  .msg-bg-tint  {
    background:
      radial-gradient(ellipse at 50% 40%, rgba(0, 82, 255, 0.35) 0%, rgba(0, 82, 255, 0.15) 55%, transparent 90%),
      linear-gradient(180deg, rgba(20, 83, 255, 0.30) 0%, rgba(0, 47, 160, 0.45) 100%);
    mix-blend-mode: normal;
  }
}

/* Reduced motion: video isn't rendered (React state); freeze the mesh too */
@media (prefers-reduced-motion: reduce) {
  .msg-bg-blob { animation: none; }
  .msg-bg-video { animation: none; opacity: 1; }
}


/* ========== Messages — cohesive rebuild ========== */

/* Page shell */
.msg-page {
  padding: 24px 0 40px;
  position: relative;
  z-index: 1;
}
.msg-page-inner { height: calc(100vh - 64px - 64px); min-height: 600px; }

.msg-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(2, 5, 14, 0.40), 0 4px 12px rgba(2, 5, 14, 0.20);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
@media (max-width: 820px) {
  .msg-shell { grid-template-columns: 1fr; }
  .msg-list { display: none; } /* on mobile, show only active conv for now */
}

/* ----- Conversation list ----- */
.msg-list {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.msg-list-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-list-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.msg-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--muted);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.msg-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12);
}
.msg-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.msg-list-scroll { overflow: auto; flex: 1; }
.msg-list-empty { padding: 24px 16px; color: var(--muted); font-size: 13px; text-align: center; }

.msg-list-item {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.msg-list-item:hover { background: var(--surface-2); }
.msg-list-item.is-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

/* Avatar with overlaid presence dot */
.msg-list-avatar {
  position: relative;
  flex-shrink: 0;
}
.msg-list-avatar .avatar { border-radius: 6px; }
.msg-status-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
}
.msg-status-dot.lg { width: 14px; height: 14px; border-width: 2.5px; }

.msg-list-body { flex: 1; min-width: 0; }
.msg-list-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg-list-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.018em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-list-time {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.msg-list-project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  margin-top: 3px;
  font-weight: 500;
}
.msg-list-preview {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.msg-list-unread {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

/* ----- Active conversation card ----- */
.msg-conv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.msg-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

/* Header */
.msg-conv-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  position: sticky;
  top: 0;
  z-index: 5;
}
.msg-conv-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: inherit;
}
.msg-conv-avatar { position: relative; flex-shrink: 0; }
.msg-conv-avatar .avatar { border-radius: 8px; width: 44px !important; height: 44px !important; font-size: 15px !important; }
.msg-conv-id { min-width: 0; }
.msg-conv-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.msg-conv-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.msg-conv-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: -0.005em;
  flex-wrap: wrap;
}
.msg-conv-sub > span:first-child { font-size: 7px; line-height: 1; }

.msg-conv-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.msg-icon-btn { width: 36px; padding: 0; }

/* Project banner */
.msg-project-banner {
  padding: 10px 18px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--accent-ink);
}
.msg-project-banner .icon-sm { color: var(--accent); }
.msg-project-link { margin-left: auto; font-size: 13px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

/* Scroll area */
.msg-conv-scroll {
  flex: 1;
  overflow: auto;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
}
.msg-conv-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}
.msg-system {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  text-transform: uppercase;
}

/* Message row */
.msg-row {
  display: flex;
  margin: 4px 0;
}
.msg-row-me { justify-content: flex-end; }
.msg-row-other { justify-content: flex-start; }
.msg-row-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 78%;
}
.msg-row-me .msg-row-inner { flex-direction: row-reverse; }
.msg-row-avatar { flex-shrink: 0; }
.msg-row-avatar .avatar { border-radius: 6px; width: 32px !important; height: 32px !important; font-size: 11px !important; }

.msg-row-content { min-width: 0; }

/* Bubble */
.msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: -0.005em;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
}
.msg-row-other .msg-bubble { border-top-left-radius: 4px; }
.msg-row-me .msg-bubble {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  border-top-right-radius: 4px;
}

/* Meta line under bubble (time + actions) */
.msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 0 4px;
}
.msg-row-me .msg-meta { justify-content: flex-end; flex-direction: row-reverse; }
.msg-time {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.msg-actions {
  opacity: 0;
  transition: opacity 140ms ease;
  position: relative;
}
.msg-row:hover .msg-actions,
.msg-actions:focus-within { opacity: 1; }
.msg-actions-btn {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--ink-2);
  cursor: pointer;
}
.msg-actions-btn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-border); }

/* Call-scheduled card inline */
.msg-call-card {
  align-self: center;
  padding: 14px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-call-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--accent-ink); }
.msg-call-when { font-size: 13px; color: var(--ink-2); }
.msg-call-link { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composer */
.msg-composer {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.msg-composer-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.msg-composer-input {
  min-height: 44px;
  max-height: 160px;
  flex: 1;
  border-radius: 10px;
}
.msg-composer-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.msg-composer-hint .kbd {
  display: inline-block;
  height: 16px;
  line-height: 14px;
  padding: 0 5px;
  font-size: 10px;
  margin: 0 2px;
}

/* ========== Vanilla dropdown menu ========== */
.dm-wrap { position: relative; display: inline-block; }
.dm-content {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow:
    0 12px 32px rgba(11, 13, 18, 0.18),
    0 2px 6px rgba(11, 13, 18, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: dm-in 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dm-align-right { right: 0; }
.dm-align-left { left: 0; }
@keyframes dm-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}
.dm-item:hover { background: var(--surface-2); color: var(--ink); }
.dm-item .dm-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dm-item .dm-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.dm-item:hover .dm-icon { color: var(--ink); }
.dm-item.dm-tone-danger { color: var(--danger); }
.dm-item.dm-tone-danger .dm-icon { color: var(--danger); }
.dm-item.dm-tone-danger:hover { background: var(--danger-soft); }
.dm-item.dm-tone-warn { color: var(--warn); }
.dm-item.dm-tone-warn .dm-icon { color: var(--warn); }
.dm-item.dm-tone-warn:hover { background: var(--warn-soft); }

/* Make the topnav slightly more readable over the dark video bg */
body.messages-page .topnav { background: rgba(255, 255, 255, 0.92); }


/* ========== LiveProjectGlobe ========== */
.bh-globe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(0,82,255,0.2);
  border-radius: 16px;
  background: linear-gradient(160deg, #0C1535 0%, #07102A 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,82,255,0.08);
  overflow: hidden;
}
.bh-globe.is-compact { padding: 16px; gap: 12px; }

.bh-globe-head { display: flex; flex-direction: column; gap: 4px; }
.bh-globe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7AABFF;
  font-weight: 500;
}
.bh-globe-ping {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 82, 255, 0.45);
  animation: bh-globe-ping 1.8s ease-out infinite;
}
@keyframes bh-globe-ping {
  0%   { box-shadow: 0 0 0 0 rgba(0, 82, 255, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 82, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 82, 255, 0); }
}

.bh-globe-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: rgba(255,255,255,0.93);
  margin: 0;
}
.bh-globe-caption { font-size: 13px; color: rgba(255,255,255,0.4); margin: 0; }

.bh-globe-stage {
  position: relative;
  align-self: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.bh-globe-stage:active { cursor: grabbing; }

.bh-globe-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.bh-globe-canvas {
  position: relative;
  z-index: 1;
  transition: opacity 800ms ease;
  pointer-events: none;
}

/* Project marker rings — z-index > canvas (z:1), moved by positionMarkers() each RAF */
.bh-globe-ring {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.bh-globe-ring-wave {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(80, 160, 255, 0.65);
  border-radius: 50%;
  opacity: 0;
  animation: bh-ring-expand 2.2s ease-out infinite;
}
.bh-globe-ring-core {
  width: 8px;
  height: 8px;
  background: #1a6fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.98),
    0 0 0 4px rgba(0, 100, 255, 0.28),
    0 0 8px rgba(0,82,255,0.6);
  flex-shrink: 0;
  transition: transform 120ms ease;
}
.bh-globe-ring:hover .bh-globe-ring-core {
  transform: scale(1.25);
}
@keyframes bh-ring-expand {
  0%   { transform: scale(0.3); opacity: 0.65; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Live viewers badge */
.bh-globe-live-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}
.bh-globe-live-dot {
  width: 8px; height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff3b30;
  animation: bh-globe-live-pulse 1.5s ease-in-out infinite;
}
@keyframes bh-globe-live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.bh-globe-live-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff3b30;
  text-transform: uppercase;
}
.bh-globe-live-count {
  font-family: var(--font-sans);
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

/* Project name labels — offset from ring position by CSS margin */
.bh-globe-pin-label {
  position: absolute;
  left: 0; top: 0;
  /* offset: above and to the right of the ring center */
  margin: -38px 0 0 16px;
  padding: 5px 10px;
  background: rgba(6, 12, 36, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(80, 140, 255, 0.25);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: 4;
}
.bh-globe-pin-label:hover {
  border-color: rgba(80, 140, 255, 0.5);
  background: rgba(10, 20, 55, 0.92);
}
.bh-globe-pin-name {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.bh-globe-pin-city {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(130, 180, 255, 0.6);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Foot */
.bh-globe-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bh-globe-count {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
}
.bh-globe-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7AABFF;
}
.bh-globe-link:hover { color: #A8C8FF; }

/* Responsive */
@media (max-width: 480px) {
  .bh-globe { padding: 18px; }
  .bh-globe-pin-name { font-size: 10.5px; }
}
@media (max-width: 400px) {
  .bh-globe-stage { transform: scale(0.85); transform-origin: top center; }
  .bh-globe-pin-city { display: none; }
}

/* Skeleton pulse — used by nav session loading state */
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.25; }
}


/* ========== Globe section in Landing ========== */
.globe-section { background: linear-gradient(180deg, #F8FAFF 0%, #EEF3FF 100%); }
.globe-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .globe-section-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Compact-mode tweaks (used in Projects sidebar) */
.bh-globe.is-compact .bh-globe-title { font-size: 15px; }
.bh-globe.is-compact .bh-globe-caption { font-size: 12px; }
.bh-globe.is-compact .bh-globe-pin-name { font-size: 10px; }


/* ========== NotificationPopover ========== */
.np-wrap { position: relative; display: inline-block; }
.np-btn {
  position: relative;
  height: 36px;
  width: 36px;
  padding: 0;
}
.np-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--bg);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  pointer-events: none;
}

/* Popover */
.np-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 20px 60px rgba(11, 13, 18, 0.18),
    0 4px 12px rgba(11, 13, 18, 0.06);
  z-index: 200;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  animation: np-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes np-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.np-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.np-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.np-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 2px;
}
.np-mark-all {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border-radius: 4px;
  transition: background 120ms ease;
}
.np-mark-all:hover { background: var(--accent-soft); }

/* List */
.np-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Item */
.np-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
  position: relative;
  opacity: 0;
  animation: np-item-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes np-item-in {
  from { opacity: 0; transform: translateX(10px); filter: blur(4px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.np-item:hover { background: var(--surface-2); }
.np-item.is-unread { background: rgba(0, 82, 255, 0.04); }
.np-item.is-unread:hover { background: rgba(0, 82, 255, 0.08); }
.np-item.is-read { opacity: 0.7; }
.np-item.is-read:hover { opacity: 1; }

.np-kind {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.np-kind-accepted { background: #E6F4EB; color: #0a6d3e; }
.np-kind-rejected { background: var(--danger-soft); color: var(--danger); }
.np-kind-call     { background: #EAF1FF; color: var(--accent-ink); }

.np-body { min-width: 0; }
.np-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.np-item-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-item-time {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.np-item-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12);
}

/* Empty state */
.np-empty {
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.np-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.np-empty-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.np-empty-body {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 240px;
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 520px) {
  .np-popover {
    width: calc(100vw - 32px);
    right: -8px;
  }
}


/* ========== MessagesOverlay (floating chat widget) ========== */

/* Floating action bubble (closed state) */
.mo-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 20px 60px rgba(15, 23, 42, 0.18),
    0 6px 18px rgba(0, 82, 255, 0.16),
    0 0 0 1px rgba(0, 82, 255, 0.06) inset;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 200ms ease;
  animation: mo-fab-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mo-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 24px 72px rgba(15, 23, 42, 0.22),
    0 10px 24px rgba(0, 82, 255, 0.22);
}
.mo-fab:active { transform: translateY(0) scale(1); }
.mo-fab:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.25), 0 20px 60px rgba(15, 23, 42, 0.18); }
@keyframes mo-fab-in {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mo-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0, 82, 255, 0.32);
}

/* Backdrop for expanded on mobile */
.mo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 14, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 89;
  animation: fadeIn 220ms ease;
}
@media (min-width: 721px) { .mo-backdrop { display: none; } }

/* Panel (compact / expanded) */
.mo-panel {
  position: fixed;
  z-index: 91;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 20px 60px rgba(15, 23, 42, 0.16),
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(0, 82, 255, 0.08) inset;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  animation: mo-panel-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes mo-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mo-compact {
  right: 24px;
  bottom: 24px;
  width: 380px;
  height: min(560px, calc(100vh - 96px));
}
.mo-expanded {
  right: 24px;
  bottom: 24px;
  width: min(820px, calc(100vw - 48px));
  height: min(640px, calc(100vh - 96px));
}

/* Header */
.mo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11, 13, 18, 0.08);
  background: rgba(255, 255, 255, 0.40);
}
.mo-head-tight { padding: 12px 14px; }
.mo-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mo-subtitle {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.mo-head-actions { display: inline-flex; gap: 4px; }
.mo-icon-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.mo-icon-btn:hover { background: rgba(0, 82, 255, 0.08); color: var(--accent); }

/* Search */
.mo-search {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(11, 13, 18, 0.06);
}
.mo-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.mo-search:focus-within { background: rgba(0, 82, 255, 0.04); }

/* Thread list */
.mo-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mo-list-slim { border-right: 1px solid rgba(11, 13, 18, 0.08); padding: 6px 6px; }

/* Thread item */
.mo-thread {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.mo-thread:hover { background: rgba(0, 82, 255, 0.06); }
.mo-thread.is-active { background: rgba(0, 82, 255, 0.10); box-shadow: inset 2px 0 0 var(--accent); }
.mo-thread.is-compact { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 8px 10px; }

.mo-thread-avatar { position: relative; flex-shrink: 0; }
.mo-thread-avatar .avatar { border-radius: 6px; width: 36px !important; height: 36px !important; font-size: 13px !important; }
.mo-thread.is-compact .mo-thread-avatar .avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; }
.mo-thread-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.mo-thread-body { min-width: 0; }
.mo-thread-line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.mo-thread-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mo-thread-time { font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; flex-shrink: 0; }
.mo-thread-project {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--accent); margin: 1px 0 2px; font-weight: 500;
}
.mo-thread-preview {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mo-thread-unread {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

/* Expanded — grid */
.mo-expanded-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100%;
  min-height: 0;
}
.mo-expanded-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, 0.55);
}
.mo-expanded-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, 0.92);
}
/* In overlay context, the embedded ThreadView card chrome (its own shell) is unnecessary */
.mo-expanded-thread .msg-conv {
  background: transparent;
  height: 100%;
}
.mo-expanded-thread .msg-conv-head {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
}

/* Empty states */
.mo-list-empty, .mo-empty-thread {
  padding: 36px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.mo-empty-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 82, 255, 0.10);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mo-empty-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); }
.mo-empty-body { font-size: 12.5px; color: var(--muted); max-width: 220px; line-height: 1.45; }

/* Mobile — bottom sheet */
@media (max-width: 720px) {
  .mo-fab { right: 16px; bottom: 16px; }
  .mo-compact {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    height: 70vh;
    border-radius: 18px;
  }
  .mo-expanded {
    right: 0; left: 0; bottom: 0; top: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .mo-expanded-grid { grid-template-columns: 1fr; }
  .mo-expanded-list { display: none; } /* hide list on small expanded; thread fills the screen */
}


/* ========== ExpandingSearchDock ========== */
.esd-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* reserve enough space for the expanded form so siblings don't reflow */
  min-width: 36px;
  height: 36px;
}

/* The collapsed-state icon button (default visible) */
.esd-icon-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 220ms ease, transform 220ms ease;
  font-family: var(--font-sans);
}
.esd-icon-btn:hover { background: var(--surface-2); border-color: #BCC2CC; }
.esd-icon-btn .esd-kbd-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--surface-2);
}
.esd-wrap.is-open .esd-icon-btn {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}

/* The expanded-state form (absolutely positioned over the icon button slot) */
.esd-form {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.esd-wrap.is-open .esd-form {
  opacity: 1;
  pointer-events: auto;
}

.esd-shell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  width: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 13, 18, 0.10), 0 1px 2px rgba(11, 13, 18, 0.04);
  transition:
    width 320ms cubic-bezier(0.4, 0.0, 0.2, 1),
    border-color 200ms ease,
    box-shadow 200ms ease;
}
.esd-wrap.is-open .esd-shell { width: 340px; padding: 0 4px 0 0; border-color: var(--accent-border); }
.esd-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.18), 0 10px 30px rgba(0, 82, 255, 0.16); }

.esd-shell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  color: var(--muted);
}
.esd-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0 0 0 0;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.005em;
  min-width: 0;
}
.esd-input::placeholder { color: var(--soft); }
/* hide native search clear button — we have our own X */
.esd-input::-webkit-search-cancel-button { display: none; }

.esd-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.esd-close:hover { background: var(--surface-2); color: var(--ink); }

/* Mobile — full-width drop the kbd hint */
@media (max-width: 820px) {
  .esd-icon-btn .esd-kbd-hint { display: none; }
  .esd-wrap.is-open .esd-shell { width: 280px; }
}
@media (max-width: 520px) {
  /* The whole dock is hidden on mobile (search button still in mobile menu / Explore page) */
  .topnav-search { display: none !important; }
}


/* ========== SocialIcons (footer pill) ========== */
.si-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.20);
}
.si-gradient {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
}
.si-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  text-decoration: none;
  outline: none;
}
.si-item:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.si-fill {
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background: rgba(0, 82, 255, 0.20);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 260ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.si-fill.is-hover { opacity: 1; transform: scale(1); }

.si-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.55);
  transition: color 260ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.si-icon.is-hover { color: var(--accent); transform: scale(1.10); }

.si-underline {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0;
  transition: width 260ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 260ms ease;
}
.si-underline.is-hover { width: 12px; opacity: 1; }

.si-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff;
  color: #0B0D12;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.si-tooltip.is-hover { opacity: 1; transform: translateX(-50%) translateY(0); }
.si-tooltip-arrow {
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: #fff;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .si-fill, .si-icon, .si-underline, .si-tooltip { transition: none; }
}


/* ========== SignInPage (animated characters) ========== */
.sip-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 980px) { .sip-page { grid-template-columns: 1fr; } }

/* Left — BASE blue stage */
.sip-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 40px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 80%, rgba(124, 168, 255, 0.30) 0%, transparent 55%),
    linear-gradient(135deg, #0040C8 0%, #0052FF 55%, #1453FF 100%);
  min-height: 100vh;
}
@media (max-width: 980px) { .sip-left { display: none; } }

.sip-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
}
.sip-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.sip-blob-a { width: 320px; height: 320px; top: 18%; right: 12%; background: rgba(124, 168, 255, 0.35); }
.sip-blob-b { width: 420px; height: 420px; bottom: -10%; left: -8%; background: rgba(255, 255, 255, 0.10); }

.sip-brand {
  position: relative; z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.sip-foot {
  position: relative; z-index: 2;
  display: inline-flex;
  gap: 24px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sip-foot a { color: inherit; transition: color 140ms ease; }
.sip-foot a:hover { color: #fff; }

/* Characters */
.sip-stage {
  position: relative;
  width: 100%;
  max-width: 550px;
  height: 440px;
  margin: 0 auto;
  z-index: 2;
}
.sip-char {
  position: absolute;
  bottom: 0;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), height 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: bottom center;
}
.sip-char-deep { background: #0029A0; border-radius: 14px 14px 0 0; z-index: 1; box-shadow: inset 0 -8px 0 rgba(0,0,0,0.10); }
.sip-char-ink  { background: #0B0D12; border-radius: 12px 12px 0 0; z-index: 2; box-shadow: inset 0 -8px 0 rgba(0,0,0,0.20); }
.sip-char-sky  { background: #7CA8FF; border-radius: 120px 120px 0 0; z-index: 3; box-shadow: inset 0 -10px 0 rgba(0,0,0,0.06); }
.sip-char-sand { background: #FFE07A; border-radius: 70px 70px 0 0; z-index: 4; box-shadow: inset 0 -8px 0 rgba(0,0,0,0.06); }

.sip-eyes {
  position: absolute;
  display: flex;
  transition: all 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sip-eyes-gap-md { gap: 24px; }
.sip-eyes-gap-lg { gap: 32px; }
.sip-eye {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: height 150ms ease, background 200ms ease;
}
.sip-pupil { border-radius: 50%; transition: transform 100ms ease-out; }
.sip-mouth {
  position: absolute;
  width: 80px;
  height: 4px;
  background: #0B0D12;
  border-radius: 4px;
  transition: all 200ms ease-out;
}

/* Right — form */
.sip-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: #fff;
  min-height: 100vh;
}
.sip-form-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sip-back {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: -8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  transition: color 140ms ease;
}
.sip-back:hover { color: var(--accent); }

.sip-header { display: flex; flex-direction: column; gap: 6px; }
.sip-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0;
}
.sip-subtitle {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

.sip-error {
  padding: 10px 12px;
  background: var(--danger-soft);
  border: 1px solid #f3c4c4;
  border-radius: 8px;
  color: #8a1d1d;
  font-size: 13px;
}

.sip-form { display: flex; flex-direction: column; gap: 16px; }
.sip-field { display: flex; flex-direction: column; gap: 6px; }
.sip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.sip-input-wrap { position: relative; display: flex; align-items: center; }
.sip-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sip-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.18); }
.sip-input::placeholder { color: var(--soft); }
.sip-input-suffix {
  position: absolute;
  right: 12px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.sip-input-toggle {
  position: absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.sip-input-toggle:hover { color: var(--ink); background: var(--surface-2); }

.sip-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sip-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sip-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.sip-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
}
.sip-link:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

.sip-submit { margin-top: 4px; height: 50px; }

.sip-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 -2px;
}
.sip-divider::before, .sip-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sip-divider span {
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sip-demo-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sip-demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--ink);
  transition: background 140ms ease, border-color 140ms ease;
}
.sip-demo:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-ink); }
.sip-demo .mono { font-size: 12.5px; }

.sip-switch {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* hide the topnav on signin/signup routes for full-screen feel */
body[data-route="signin"] .topnav,
body[data-route="signup"] .topnav { display: none; }


/* Signin page — keep small text labels on a single line */
.sip-back, .sip-link { white-space: nowrap; }
.sip-row-between { gap: 12px 16px; }


/* ========== Dashboard cohesion ========== */

/* Completeness banner */
.dash-banner {
  padding: 18px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.dash-banner-meta { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.dash-banner-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.dash-banner-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.dash-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Side nav */
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.dash-nav-btn:hover { background: var(--surface-2); color: var(--ink-2); }
.dash-nav-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.dash-nav-label { flex: 1; }
.dash-nav-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--border-strong);
  color: #fff;
  min-width: 18px;
  text-align: center;
}
.dash-nav-btn.is-active .dash-nav-badge { background: var(--accent); }

/* Panel */
.dash-panel { padding: 24px; }
.dash-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.dash-panel-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.dash-panel-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.5;
}
.dash-panel-body { display: flex; flex-direction: column; gap: 16px; }

/* Shared icon disc — used by Identity, Verification, Project, Application, PnL */
.dash-icon-disc {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-icon-disc.neutral {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
}


/* Dashboard plan pill */
.dash-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
}
.dash-plan-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
}
.dash-plan-free    { background: var(--surface-2);  color: var(--ink-2); }
.dash-plan-builder { background: var(--accent-soft); color: var(--accent-ink); }
.dash-plan-pro     { background: var(--ink);        color: #fff; }
.dash-plan-up {
  background: transparent;
  border: 0;
  padding: 0 2px 0 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.dash-plan-up:hover { color: var(--accent-dark); }

/* ========== Hero mobile fix ========== */
@media (max-width: 600px) {
  .hero-display { font-size: clamp(36px, 10vw, 60px) !important; }
  .hero-last-line { white-space: normal; overflow: visible; }
}

/* ========== Cycling word hero animation ========== */
.hero-last-line {
  display: block;
  white-space: nowrap;   /* never wraps regardless of word length */
  overflow: hidden;
}
.cycling-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}
.cycling-word {
  display: inline-block;
  white-space: nowrap;
  animation: cycling-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cycling-in {
  from { opacity: 0; transform: translateY(0.75em); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cycling-word { animation: none; }
}

/* ========== IconGrid (components/ui/icon-set) ========== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
@media (min-width: 480px)  { .icon-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px)  { .icon-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .icon-grid { grid-template-columns: repeat(6, 1fr); } }

.icon-grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.icon-grid-cell {
  display: flex;
  width: 96px;
  height: 96px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg, 14px);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.icon-grid-cell:hover {
  background: var(--surface-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.icon-grid-wrapper {
  width: 48px;
  height: 48px;
  color: var(--muted);
  transition: transform 300ms ease, color 300ms ease;
}
.icon-grid-cell:hover .icon-grid-wrapper {
  transform: scale(1.1);
  color: var(--ink);
}


/* ========================================================================
   Dark mode overrides — ink-background sections
   .section-edit.ink, .footer-edit, .marquee all use background:var(--ink).
   In dark mode --ink flips to near-white, so we restore a dark background.
   ======================================================================== */

html.dark .section-edit.ink {
  background: #13141A;
  border-bottom-color: #2A2C34;
}

html.dark .footer-edit {
  background: #0D0E14;
}

html.dark .marquee {
  background: #13141A;
  border-top-color: #2A2C34;
  border-bottom-color: #2A2C34;
}

/* Pricing toggle — slider is var(--ink) which becomes near-white in dark mode.
   That's fine (light slider on dark bg), but the active label must be dark. */
html.dark .pricing-toggle-btn.active {
  color: var(--bg);
}
html.dark .pricing-toggle-btn.active .pricing-save-badge {
  background: var(--accent);
  color: #fff;
}

/* Inline-styled elements that need dark overrides via class name */
html.dark .pillar-msg-received {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html.dark .wm-map-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}


/* ========================================================================
   Dark mode overrides — hardcoded light colors
   All selectors require html.dark to avoid touching light-mode styles.
   ======================================================================== */

/* --- Hero section --- */
html.dark .hero-edit {
  background:
    radial-gradient(circle at 88% 18%, rgba(0,82,255,0.15) 0%, transparent 55%),
    linear-gradient(180deg, #0A0A10 0%, #0E101A 100%);
}
html.dark .hero-edit .hero-grid-bg {
  background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* --- Globe section background --- */
html.dark .globe-section {
  background: linear-gradient(180deg, #080B14 0%, #060810 100%);
}

/* --- Slab numeric callout --- */
html.dark .slab {
  background: var(--surface);
}

/* --- Pillar feature grid --- */
html.dark .pillars .pillar {
  background: var(--surface);
}
html.dark .pillars .pillar:hover {
  background: var(--accent-tint);
}

/* --- World map --- */
html.dark .wm-container {
  background: var(--surface);
}
html.dark .wm-cities {
  background: var(--surface);
}

/* --- Evervault card --- */
html.dark .ev-card {
  background: var(--surface);
}
html.dark .ev-fade {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(17,18,26,0) 100%);
}
html.dark .ev-disc {
  background: rgba(17,18,26,0.80);
}

/* --- Glass buttons / cards --- */
html.dark .btn-glass {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
html.dark .btn-glass:hover:not(:disabled) {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.20);
}
html.dark .card-glass {
  background: rgba(17,18,26,0.82);
  border-color: rgba(255,255,255,0.08);
}

/* --- Badges --- */
html.dark .badge-pnl {
  background: rgba(200,150,0,0.15);
  color: #E8B84B;
  border-color: rgba(200,150,0,0.25);
}
html.dark .badge-warn {
  border-color: rgba(180,83,9,0.30);
}
html.dark .badge-status-pending {
  background: rgba(180,120,0,0.15);
  color: #E8B84B;
  border-color: rgba(180,120,0,0.25);
}
html.dark .badge-status-accepted {
  background: var(--pnl-up-soft);
  color: #34d87a;
  border-color: rgba(34,197,94,0.25);
}
html.dark .badge-status-rejected {
  background: var(--danger-soft);
  color: #f87171;
  border-color: rgba(185,28,28,0.30);
}

/* --- Button secondary hover / expanding search hover --- */
html.dark .btn-secondary:hover:not(:disabled) {
  border-color: var(--border);
}
html.dark .esd-icon-btn:hover {
  border-color: var(--border);
}

/* --- Modal --- */
html.dark .modal {
  border-color: rgba(255,255,255,0.08);
}
html.dark .modal-header {
  background: linear-gradient(to bottom, rgba(0,82,255,0.06) 0%, transparent 100%);
}

/* --- Pricing toggle --- */
html.dark .pricing-toggle {
  background: var(--surface);
}

/* --- Pricing cards --- */
html.dark .pricing-card {
  background: var(--surface);
}
html.dark .pricing-card.is-popular {
  background: linear-gradient(180deg, rgba(0,82,255,0.12) 0%, var(--surface) 70%);
}
html.dark .pricing-card.is-current-plan {
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, var(--surface) 70%);
}

/* --- FAQ accordion --- */
html.dark .faq-accordion {
  background: var(--surface);
}
html.dark .faq-item.is-open {
  background: var(--surface-2);
}

/* --- Upgrade banner / toast (ub) --- */
html.dark .ub {
  background: rgba(0,82,255,0.15);
  border-color: rgba(0,82,255,0.30);
  color: var(--ink);
}
html.dark .ub-btn {
  color: #7AABFF;
  text-decoration-color: rgba(0,82,255,0.40);
}
html.dark .ub-btn:hover { color: #A8C8FF; }
html.dark .ub-desc { color: #7AABFF; }
html.dark .ub-close { color: #7AABFF; }
html.dark .ub-close:hover { background: rgba(0,82,255,0.15); }
html.dark .ub-gear { color: #7AABFF; }

html.dark .ub-wrap.tone-warn .ub {
  background: rgba(180,83,9,0.15);
  border-color: rgba(180,83,9,0.30);
  color: var(--ink);
}
html.dark .ub-wrap.tone-warn .ub-btn { color: #FBBF24; text-decoration-color: rgba(180,83,9,0.40); }
html.dark .ub-wrap.tone-warn .ub-btn:hover { color: #FCD34D; }
html.dark .ub-wrap.tone-warn .ub-desc { color: #FBBF24; }
html.dark .ub-wrap.tone-warn .ub-close { color: #FBBF24; }
html.dark .ub-wrap.tone-warn .ub-close:hover { background: rgba(180,83,9,0.20); }
html.dark .ub-wrap.tone-warn .ub-gear { color: #FBBF24; }

html.dark .ub-wrap.tone-danger .ub {
  background: rgba(185,28,28,0.15);
  border-color: rgba(185,28,28,0.30);
  color: var(--ink);
}
html.dark .ub-wrap.tone-danger .ub-btn { color: #F87171; text-decoration-color: rgba(185,28,28,0.35); }
html.dark .ub-wrap.tone-danger .ub-btn:hover { color: #FCA5A5; }
html.dark .ub-wrap.tone-danger .ub-desc { color: #F87171; }
html.dark .ub-wrap.tone-danger .ub-close { color: #F87171; }
html.dark .ub-wrap.tone-danger .ub-close:hover { background: rgba(185,28,28,0.20); }
html.dark .ub-wrap.tone-danger .ub-gear { color: #F87171; }

/* --- Dropdown menu --- */
html.dark .dm-content {
  background: var(--surface);
}

/* --- Notification popover --- */
html.dark .np-popover {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.dark .np-kind-accepted {
  background: var(--pnl-up-soft);
  color: #34d87a;
}
html.dark .np-kind-call {
  background: var(--accent-soft);
}

/* --- Messages page: shell + conversation head --- */
html.dark .msg-shell {
  background: var(--surface);
  border-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.dark .msg-conv-head {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.dark .msg-status-dot {
  border-color: var(--surface);
}
html.dark body.messages-page .card {
  background: rgba(17,18,26,0.97);
  box-shadow: var(--shadow-lg);
}
html.dark body.messages-page .topnav {
  background: rgba(10,10,16,0.92);
}

/* --- Messages floating overlay panel --- */
html.dark .mo-fab {
  background: rgba(28,30,38,0.92);
  border-color: rgba(255,255,255,0.12);
}
html.dark .mo-panel {
  background: rgba(17,18,26,0.96);
  border-color: rgba(255,255,255,0.10);
}
html.dark .mo-head {
  background: rgba(17,18,26,0.60);
  border-bottom-color: rgba(255,255,255,0.08);
}
html.dark .mo-expanded-list {
  background: rgba(17,18,26,0.75);
}
html.dark .mo-expanded-thread {
  background: var(--surface);
}
html.dark .mo-expanded-thread .msg-conv-head {
  background: rgba(17,18,26,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.dark .mo-thread-dot {
  border-color: var(--surface);
}
html.dark .mo-list-slim {
  border-right-color: rgba(255,255,255,0.06);
}

/* --- Expanding search dock --- */
html.dark .esd-shell {
  background: rgba(17,18,26,0.90);
}

/* --- Social icons tooltip --- */
html.dark .si-tooltip {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
html.dark .si-tooltip-arrow {
  background: var(--surface);
}

/* --- Sign-in / Sign-up page right panel --- */
html.dark .sip-right {
  background: var(--bg);
}
html.dark .sip-input {
  background: var(--surface);
}
html.dark .sip-error {
  border-color: rgba(185,28,28,0.40);
  color: #f87171;
}

/* ─────────────────────────────────────────────────────────────────────
   Emil Kowalski polish — stagger card grids + card micro-interactions
   ───────────────────────────────────────────────────────────────────── */

@keyframes card-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Profile grid stagger — Explore page */
.profile-grid > * {
  animation: card-fade-up 340ms var(--ease-snap) both;
}
.profile-grid > *:nth-child(3n+2) { animation-delay: 40ms; }
.profile-grid > *:nth-child(3n+3) { animation-delay: 80ms; }
.profile-grid > *:nth-child(n+4)  { animation-delay: calc(60ms + 30ms * (var(--i, 0))); }
.profile-grid > *:nth-child(4)  { animation-delay: 40ms; }
.profile-grid > *:nth-child(5)  { animation-delay: 70ms; }
.profile-grid > *:nth-child(6)  { animation-delay: 100ms; }
.profile-grid > *:nth-child(7)  { animation-delay: 80ms; }
.profile-grid > *:nth-child(8)  { animation-delay: 110ms; }
.profile-grid > *:nth-child(9)  { animation-delay: 140ms; }

/* Project grid stagger */
.project-grid > * {
  animation: card-fade-up 340ms var(--ease-snap) both;
}
.project-grid > *:nth-child(3n+2) { animation-delay: 40ms; }
.project-grid > *:nth-child(3n+3) { animation-delay: 80ms; }
.project-grid > *:nth-child(4)  { animation-delay: 40ms; }
.project-grid > *:nth-child(5)  { animation-delay: 70ms; }
.project-grid > *:nth-child(6)  { animation-delay: 100ms; }

/* Card hover — touch devices should not see hover states */
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}

/* Chip press feedback */
.chip:active { transform: scale(0.96); }

/* Honor reduced motion — no movement, keep opacity fades */
@media (prefers-reduced-motion: reduce) {
  .profile-grid > *,
  .project-grid > * {
    animation: none;
  }
  .btn:active:not(:disabled) { transform: none; }
  .chip:active { transform: none; }
  @keyframes toastIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}