/**
 * Shared site chrome (nav + footer) — dispatch 014 Phase 6.
 *
 * Used by pricing.html and how-it-works.html so a visitor clicking from the
 * new homepage into those pages still sees the same nav + footer. Self-
 * contained and scoped to .site-nav / .site-footer / body.site-chrome so it
 * doesn't conflict with the existing /styles.css (which scopes its nav under
 * header.site / footer.site rather than bare .nav).
 *
 * Aligned to the rebuilt homepage (dispatch 014): body/nav/footer font is
 * DM Sans (Google Fonts, loaded per-page); logo heights match the homepage
 * (nav 65px / footer 79px). Cormorant + JetBrains stay self-hosted.
 */

:root {
  --paper: #FFFFFF;
  --ink: #000000;
  --body: #1A1A1A;
  --mute: #6B7280;
  --sky: #D3E3FD;
  --sky-deep: #BBD0F8;
  --rule-chrome: rgba(0,0,0,0.14);
}

/* Self-hosted display + mono — font-display: swap so text paints immediately.
 * DM Sans (body/nav/footer) is loaded per-page via the Google Fonts <link>,
 * matching the rebuilt homepage. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/cormorant-garamond-300-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); }

/* Override the body to use DM Sans + paper grain on these secondary pages too */
body.site-chrome { font-family: 'DM Sans', system-ui, sans-serif; }

body.site-chrome::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  opacity: 0.045;
  mix-blend-mode: multiply;
}

.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-chrome);
}
.site-nav .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; gap: 16px;
  max-width: 1180px; margin: 0 auto;
}
@media (min-width: 800px) { .site-nav .nav-inner { padding: 16px 56px; } }
.site-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.site-nav .brand-logo { display: block; height: 65px; width: auto; margin: -16px 0; }
@media (max-width: 700px) { .site-nav .brand-logo { height: 50px; margin: -12px 0; } }
.site-nav .nav-links { display: none; gap: 32px; }
.site-nav .nav-links a { text-decoration: none; font-size: 15px; color: var(--ink); position: relative; }
.site-nav .nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 1px; background: currentColor;
  transition: right .35s cubic-bezier(.4,.7,.3,1);
}
.site-nav .nav-links a:hover::after, .site-nav .nav-links a:focus-visible::after { right: 0; }
@media (min-width: 800px) { .site-nav .nav-links { display: flex; } }

.site-nav .btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px; min-height: 44px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500; font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .25s ease;
}
.site-nav .btn:hover { background: var(--paper); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.32); }
.site-nav .btn .arrow { font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1; }

.site-footer {
  padding: 56px 24px 40px;
  border-top: 1px solid var(--rule-chrome);
  font-family: 'DM Sans', system-ui, sans-serif;
}
@media (min-width: 800px) { .site-footer { padding: 56px 56px 40px; } }
.site-footer .foot-inner { max-width: 1180px; margin: 0 auto; }
.site-footer .foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (min-width: 800px) { .site-footer .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } }
.site-footer .foot-grid h4 { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; font-weight: 500; }
.site-footer .foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer .foot-grid a { text-decoration: none; font-size: 15px; color: var(--ink); }
.site-footer .foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand-logo { display: block; height: 79px; width: auto; margin: -16px 0 -8px -4px; }
@media (max-width: 700px) { .site-footer .brand-logo { height: 61px; margin: -12px 0 -6px -2px; } }
.site-footer .foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-chrome); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--mute); }