/* ═══════════════════════════════════════════════════════════════
   cnemai — the site's chrome: top bar, buttons, footer.
   One copy for every page, whichever stylesheet the page itself is
   built on (site.css for the homepage and the legal pages, styles.css
   for features). Load it after that stylesheet so these win.
   ═══════════════════════════════════════════════════════════════ */

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 10px 17px; border-radius: 7px; border: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}
.btn-primary { background: var(--bone); color: var(--ink); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.btn-line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--hair-2, rgba(255,255,255,0.14)); }
.btn-line:hover { background: rgba(255,255,255,0.06); }
.btn-lg { font-size: 14.5px; padding: 12px 20px; }

/* the app's rail button (NewRailButton): one ink surface lit from its top edge,
   the glyph on a small round chip, and on hover the chip takes the violet */
.btn.btn-rail {
  gap: 10px; padding: 6px 16px 6px 6px; border-radius: 8px;
  font-weight: 500; color: #d4d4d6;
  background: linear-gradient(100deg, #161619 0%, #121214 42%, #0e0e10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.22);
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.btn-rail:hover {
  color: #f2f2f3;
  background: linear-gradient(100deg, #1d1d21 0%, #17171a 42%, #111113 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.07), 0 10px 28px rgba(0,0,0,0.38);
}
.btn-rail:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(192,166,232,0.55), 0 10px 28px rgba(0,0,0,0.38);
}
.btn-rail .chip {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: #b4b4b8;
  background: radial-gradient(circle at 35% 30%, #2a2a2f, #17171a 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 0 0 1px rgba(255,255,255,0.06);
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.btn-rail:hover .chip, .btn-rail:focus-visible .chip {
  color: var(--violet);
  background: radial-gradient(circle at 35% 30%, rgba(192,166,232,0.30), rgba(192,166,232,0.12) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 0 0 1px rgba(192,166,232,0.35);
}
/* the big ones: a bigger chip, the same surface */
.btn.btn-rail.btn-lg { padding: 7px 20px 7px 7px; font-size: 14.5px; gap: 12px; }
.btn-rail.btn-lg .chip { width: 36px; height: 36px; font-size: 16px; }
/* in the top bar the button keeps to the bar's height */
.btn.btn-rail.btn-sm { padding: 4px 14px 4px 4px; gap: 8px; }
.btn-rail.btn-sm .chip { width: 26px; height: 26px; font-size: 13px; }

/* ── top bar ─────────────────────────────────────────────── */
/* no bar: the header sits on the page itself and scrolls away with it, so it
   never floats over a picture (the none values also clear styles.css's band) */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none;
}
.wordmark { font-size: 21px; color: var(--text-bright); text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 6px; }
.nav-link {
  color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 8px 10px; border-radius: 6px;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ── footer ──────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--hair);
  max-width: var(--page, 1180px); margin: 0 auto;
  padding: 26px var(--gutter, 32px) 40px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-foot a { color: var(--mute-2); text-decoration: none; }
.site-foot a:hover, .site-foot a[aria-current="page"] { color: var(--text); }
.foot-line { flex-basis: 100%; text-transform: none; letter-spacing: 0.02em; color: var(--mute); }

@media (max-width: 720px) {
  .topbar { padding: 0 12px; }
  .hide-sm { display: none; }
  .btn { padding: 9px 13px; }
  .btn.btn-rail { padding: 5px 14px 5px 5px; }
}

/* ── the closing call to action: the recording dot, your email, the button ── */
.signup-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; max-width: 100%;
  padding: 6px 6px 6px 16px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 10px;
  transition: border-color 160ms ease;
}
.signup-cta:focus-within { border-color: rgba(202,202,203,0.55); }
.signup-cta input {
  background: transparent; border: none; outline: none;
  color: var(--text); caret-color: var(--bone);
  font-family: var(--mono); font-size: 12.5px;
  width: min(240px, 52vw);
}
.signup-cta input::placeholder { color: var(--mute); }
@media (max-width: 720px) {
  .signup-cta input { font-size: 16px; }   /* under 16px, iOS zooms the page on focus */
}