/* Shared site-wide tokens, primitives, and font-faces. Each page links
   this BEFORE its inline <style>, so page-specific overrides still win.
   Extracted in #467; expanded in the 2026-05-08 design refinement pass
   to also house topbar / nav / footer / CTA primitives, the hamburger
   drawer, the skip-to-main link, focus-visible, and shared shadow
   tokens. After that pass each page's inline <style> shrinks to
   page-specific styles only. */

/* Self-hosted Geist (SIL OFL 1.1). Files under /fonts/. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Geist-Bold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/GeistMono-Medium.woff2") format("woff2"); }

:root {
  --ink-0: #0e0d0c; --ink-1: #1a1814; --ink-2: #24211d; --ink-3: #2f2a24;
  --bone-0: #f4efe3; --bone-1: #d7d0c0; --bone-2: #a8a193;
  --bone-3: #7a7366; --bone-4: #6a6358;
  --accent: #3a9b92; --accent-hi: #56b8ae; --accent-soft: rgba(58,155,146,0.12);
  --hairline: rgba(255,255,255,0.07); --hairline-hi: rgba(255,255,255,0.15);
  --radius: 10px; --radius-lg: 14px;
  --shadow-card: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
  --shadow-pill-glow: 0 10px 24px -14px var(--accent);
  --shadow-hero: 0 40px 100px -50px rgba(58, 155, 146, 0.3);
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

/* ── Skip-to-main link ───────────────────────────────────────────────
   First focusable child of <body>; visually hidden until tabbed to.
   Required for keyboard users to bypass the topbar nav. */
.skip-to-main {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--ink-0);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.15s ease;
  z-index: 100;
}
.skip-to-main:focus,
.skip-to-main:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* ── Global focus ring ──────────────────────────────────────────────
   Single source of truth for keyboard focus across every interactive
   element. Uses the accent color so it reads as "this is where you
   are" without competing with hover states. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── Topbar ──────────────────────────────────────────────────────────
   Sticky, blurred, identical across every marketing page. Page-specific
   overrides (none expected) can still win via the cascade because the
   page <style> block is loaded after this file. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ink-0) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--bone-0);
}
.brand-mark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  display: inline-block;
}
.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.86rem;
  color: var(--bone-2);
}
.nav a { color: inherit; }
.nav a:hover { color: var(--bone-0); }
.nav a.active { color: var(--bone-0); }
.topbar-ctas {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.topbar-signin {
  font-size: 0.86rem;
  color: var(--bone-2);
  font-weight: 500;
}
.topbar-signin:hover { color: var(--bone-0); }

/* ── CTA buttons ─────────────────────────────────────────────────────
   Filled primary, hairline ghost. The :hover override on .cta-btn is
   load-bearing — the generic `a:hover` rule re-tints anchor text to
   var(--accent-hi), which on a teal-filled button would make the label
   the same color as the background. */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-0);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  text-decoration: none;
}
.cta-btn:hover,
a.cta-btn:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--ink-0);
}
.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline-hi);
  background: transparent;
  color: var(--bone-1);
  font-weight: 500;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.cta-ghost:hover { color: var(--bone-0); border-color: var(--bone-2); }

/* ── Hamburger button (visible <721px) ───────────────────────────────
   Hidden by default; the @media block below promotes it. The drawer
   itself is also rendered on every page but display:none until the
   media query and aria-expanded conspire to show it. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 0.4rem;
  border: 1px solid var(--hairline-hi);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--bone-1);
  transition: border-color 0.15s, color 0.15s;
}
.nav-toggle:hover { border-color: var(--bone-2); color: var(--bone-0); }
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drawer — slides in from the right, traps focus while open. */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  pointer-events: none;
}
.mobile-drawer[aria-hidden="false"] {
  display: block;
  pointer-events: auto;
}
.mobile-drawer .scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.mobile-drawer[aria-hidden="false"] .scrim { opacity: 1; }
.mobile-drawer .panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 340px);
  background: var(--ink-1);
  border-left: 1px solid var(--hairline-hi);
  padding: 1.2rem 1.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.6);
}
.mobile-drawer[aria-hidden="false"] .panel { transform: translateX(0); }
.mobile-drawer .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.mobile-drawer .panel-head .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.mobile-drawer .close-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline-hi);
  border-radius: 8px;
  color: var(--bone-1);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mobile-drawer .close-btn:hover { border-color: var(--bone-2); color: var(--bone-0); }
.mobile-drawer .close-btn svg { width: 16px; height: 16px; }
.mobile-drawer .links {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.mobile-drawer .links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.2rem;
  font-size: 1rem;
  color: var(--bone-1);
  border-bottom: 1px solid var(--hairline);
  transition: color 0.15s;
}
.mobile-drawer .links a:hover { color: var(--bone-0); }
.mobile-drawer .links a.active { color: var(--accent-hi); }
.mobile-drawer .links a .arrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--bone-3);
}
.mobile-drawer .panel-foot {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mobile-drawer .panel-foot .cta-btn,
.mobile-drawer .panel-foot .cta-ghost {
  justify-content: center;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
}

/* Lock body scroll when drawer is open. The .nav-open class is added to
   <body> by the inline drawer script. */
body.nav-open { overflow: hidden; }

/* ── Footer ──────────────────────────────────────────────────────────
   Single shared footer treatment. Pages always-include the same link
   list (Pricing now in every footer per the 2026-05-08 pass). */
footer.site-footer {
  padding: 2.5rem 2rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--bone-3);
  border-top: 1px solid var(--hairline);
}
footer.site-footer nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
footer.site-footer nav a { color: inherit; }
footer.site-footer nav a:hover { color: var(--bone-0); }
footer.site-footer .footer-tagline {
  margin-top: 0.4rem;
  color: var(--bone-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
/* Nominative-use trademark attribution. Sits as a full-width paragraph
   below the flex row; the flex container rewraps to accommodate it. */
.tm-notice {
  flex-basis: 100%;
  font-size: 0.7rem;
  color: var(--bone-3);
  max-width: 62ch;
  margin: 1rem 0 0;
  line-height: 1.5;
}

/* ── H2 utilities ────────────────────────────────────────────────────
   Two clamps for the two roles H2 plays on the marketing site:
   .h2-display = landing flow-section H2 (slightly bigger)
   .h2-content = content-page H2 (sub-pages, security, integrations)
   Pages opt in. Default H2 sizing remains in each page's inline style
   for backwards compat; new sections should use these classes. */
.h2-display {
  font-size: clamp(1.5rem, 3vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h2-content {
  font-size: clamp(1.4rem, 2.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Mobile breakpoint for shared primitives ─────────────────────────
   Page-specific @media blocks still handle their own section padding;
   this block handles topbar/footer/drawer affordances. */
@media (max-width: 720px) {
  .topbar { padding: 0.85rem 1.2rem; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .topbar-signin { display: none; }
  footer.site-footer { padding: 2rem 1.2rem 2.5rem; }
  footer.site-footer nav { gap: 0.75rem 1rem; }
}

/* Reduce-motion users get instant drawer transitions. */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer .scrim,
  .mobile-drawer .panel,
  .skip-to-main { transition: none; }
}
