/* ============================================================
   SITE CHROME — the home page header + footer, on their own.

   Extracted verbatim from the nav/footer rules in landing.css so
   pages with their own design system (e.g. pricing.html) can wear
   the same header and footer without pulling in all of landing.css.
   Values are literal rather than var(--token) so the chrome renders
   identically no matter what tokens the host page defines.

   Companion markup: the <nav> block below and /footer.html.
   NOTE: landing.css still carries its own copy of these rules —
   if you change the chrome, change it in both places.
   ============================================================ */

@font-face { font-family: 'Usual'; src: url('/fonts/Usual-300.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Usual'; src: url('/fonts/Usual-400.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Usual'; src: url('/fonts/Usual-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Usual'; src: url('/fonts/Usual-700.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

/* ─── NAV ─── */
/* Home uses position:fixed with the hero padded to clear it; sticky
   gives the same appearance on pages that don't reserve that space. */
nav {
  position: sticky; top: 0; z-index: 100;
  /* Home's bar is rgba(12,12,14,0.7) over its dark hero, which composites
     to roughly this. Opaque here so the bar looks the same on light pages,
     where the translucent original washes out to grey. */
  background: #0F0F12;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-inner {
  max-width: 100%; margin: 0 auto;
  padding: 14px 100px;
  display: flex; align-items: center; justify-content: space-between;
}

.nav-logo {
  text-decoration: none;
  display: flex; align-items: center;
}
.nav-logo svg {
  height: 32px;
  width: auto;
  fill: #FAFAFA;
}

.nav-design-partner {
  font-family: 'Usual', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: -0.01em;
  background: none;
  border: none;
  padding: 0;
}
.nav-design-partner:hover { color: #A8E6E4; }
.nav-design-partner[aria-current="page"] { color: #A8E6E4; }

.btn-cta {
  background: rgba(12,255,212,0.12);
  color: #A8E6E4; font-family: 'Usual', Georgia, serif;
  font-size: 14px; font-weight: 500;
  padding: 10px 22px; border-radius: 6px;
  text-decoration: none; border: 1px solid rgba(12,255,212,0.3); cursor: pointer;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: -0.01em;
  box-shadow: none;
}
.btn-cta:hover { background: transparent; border: 1px solid rgba(12,255,212,0.3); color: #A8E6E4; transform: none; }

.nav-right { display: flex; align-items: center; gap: 24px; }

/* ── Burger menu ── */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.8); border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed; top: 60px; left: 0; right: 0;
  background: #0D0E12;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 20px 20px 24px;
  flex-direction: column; gap: 12px;
  z-index: 999;
  transform: translateY(-8px); opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-drawer.open {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.nav-drawer-btn {
  display: block; text-align: center;
  padding: 12px 20px; border-radius: 6px;
  font-family: 'Usual', Georgia, serif; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-drawer-btn.primary {
  background: rgba(12,255,212,0.12); color: #A8E6E4;
  border: 1px solid rgba(12,255,212,0.3);
}
.nav-drawer-btn.secondary {
  background: transparent; color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ─── FOOTER ─── */
footer {
  font-family: 'Usual', Georgia, serif;
  background: #14151B;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 48px 0 40px;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.footer-logo-wrap { display: flex; }
.footer-ca a,
.footer-links a {
  font-size: 12px; color: #7A7A8A;
  text-decoration: none; font-weight: 400;
  transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-ca a:hover,
.footer-links a:hover { color: #A8E6E4; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-cb-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-cb-logo {
  display: flex; align-items: center;
  opacity: 0.7; text-decoration: none;
  transition: opacity 0.2s;
}
.footer-cb-logo:hover { opacity: 1; }
.footer-cb-text { font-size: 12px; color: rgba(255,255,255,0.3); font-weight: 400; }
.footer-cb-sep  { font-size: 12px; color: rgba(255,255,255,0.2); }
.footer-cb-link { font-size: 12px; color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.2s; }
.footer-cb-link:hover { color: #A8E6E4; }

/* ── Tablet 768–1024px: swap the link row for the burger ── */
@media (max-width: 1024px) {
  .nav-design-partner { display: none; }
  .nav-right { display: none; }
  .nav-burger { display: flex; }
  /* laid out but inert until .open, so the transparent panel can't
     swallow clicks meant for the hero underneath it */
  .nav-drawer { display: flex; pointer-events: none; }
  .nav-inner { padding: 14px 32px; }
}

@media (max-width: 767px) {
  .nav-inner { padding: 14px 20px; }
}