/* ====== Replence shared site chrome (nav + footer + tokens) ====== */
:root {
  --paper: #f5f5f7;
  --paper-2: #fbfbfd;
  --white: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --ink-4: #86868b;
  --rule: #d2d2d7;
  --rule-2: #ececef;
  --hairline: rgba(0,0,0,0.08);
  --black: #000000;
  --noir: #0a0a0c;
  --noir-2: #131317;
  --noir-3: #1d1d22;
  --signal: #0071e3;
  --signal-bright: #2997ff;
  --signal-hover: #0077ed;
  --wa: #25d366;
  --wa-deep: #128c7e;
  --warm: #e8a87c;
  --gold: #d4a851;
  --good: #1f8a5b;
  --serif: "Instrument Serif", "New York", "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-feature-settings: "ss01", "cv11"; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); background: rgba(245,245,247,0.72); border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand-mark { width: 24px; height: 24px; }
.brand-mark .c1 { fill: currentColor; }
.brand-mark .c2 { fill: none; stroke: currentColor; stroke-width: 4; }
.brand-word { font-weight: 600; font-size: 18px; letter-spacing: -0.025em; }
.nav-center { display: flex; gap: 32px; font-size: 12px; color: var(--ink-2); }
.nav-center a { transition: color 0.15s; }
.nav-center a:hover { color: var(--ink); }
.nav-center a.active { color: var(--ink); font-weight: 500; }
.nav-end { display: flex; align-items: center; gap: 22px; font-size: 12px; color: var(--ink-2); }
.nav-cta { background: var(--signal); color: white; padding: 6px 13px; border-radius: 980px; font-size: 12px; font-weight: 500; transition: background 0.15s; }
.nav-cta:hover { background: var(--signal-hover); color: white; }

/* FOOTER */
footer.site-footer { background: var(--paper); padding: 72px 24px 32px; }
.foot-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--hairline); }
.foot-brand { display: flex; flex-direction: column; gap: 16px; }
.foot-brand .brand { color: var(--ink); }
.foot-brand p { font-size: 13px; color: var(--ink-3); max-width: 320px; line-height: 1.5; }
.foot-col h6 { font-size: 12px; font-weight: 600; margin-bottom: 16px; color: var(--ink); letter-spacing: -0.01em; }
.foot-col a { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { max-width: 1280px; margin: 24px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-3); }
.foot-bottom .right { display: flex; gap: 24px; }
.foot-bottom .status { display: inline-flex; align-items: center; gap: 6px; }
.foot-bottom .status .d { width: 6px; height: 6px; border-radius: 50%; background: #34c759; }

/* shared eyebrow */
.eyebrow { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 12px; }
.eyebrow .num { color: var(--ink); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.5; }

/* shared button */
.btn-pill { background: var(--signal); color: white; padding: 13px 26px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: all 0.25s; display: inline-flex; align-items: center; gap: 8px; }
.btn-pill:hover { background: var(--signal-hover); transform: scale(1.03); color: white; }
.btn-pill.ghost { background: white; color: var(--ink); border: 1px solid var(--rule); }
.btn-pill.ghost:hover { background: var(--ink); color: white; border-color: var(--ink); }

/* serif utility */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }

@media (max-width: 1100px) {
  .nav-center { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}