/* ──────────────────────────────────────────────────────────────────────────
   Archipath marketing — shared styles
   Built on the Kyro22 design system (colors_and_type.css imported below).
   Contains: tokens (inlined), base, nav, footer, section primitives, cards.
   Page-specific styles live in each page's <style> block.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Kyro22 design tokens (inlined for portability) ───────────────────────── */
:root {
  --ink-950: #0E1012; --ink-900: #1A1D21; --ink-800: #2A2E34; --ink-700: #3E434A;
  --ink-600: #565C64; --ink-500: #767D86; --ink-400: #9CA2AB; --ink-300: #C2C6CC;
  --ink-200: #DEE0E4; --ink-150: #E8E9EC; --ink-100: #EFF0F2; --ink-75: #F3F2EE;
  --ink-50: #F8F6F2; --ink-25: #FBFAF7;

  --amber-700: #9E6218; --amber-600: #C57E24; --amber-500: #E89A3C;
  --amber-400: #F0B56C; --amber-300: #F5CD99; --amber-200: #F9E0BF;
  --amber-100: #FCEFDC; --amber-50: #FDF7EC;

  --forest-600: #1F4536; --forest-500: #2D5F4A; --forest-100: #DCE8E2;
  --red-600: #9B2B2B; --red-500: #C43838; --red-100: #F4DADA;
  --slate-600: #2E3E4F; --slate-500: #3E5266; --slate-100: #D9E0E6;

  --bg: var(--ink-50); --bg-raised: var(--ink-25); --bg-sunken: var(--ink-75); --bg-inverse: var(--ink-950);
  --fg: var(--ink-950); --fg-muted: var(--ink-600); --fg-subtle: var(--ink-500);
  --fg-faint: var(--ink-400); --fg-inverse: var(--ink-50); --fg-on-accent: var(--ink-950);

  --border: rgba(14,16,18,0.10); --border-strong: rgba(14,16,18,0.18);
  --border-subtle: rgba(14,16,18,0.06); --border-inverse: rgba(248,246,242,0.14);

  --accent: var(--amber-500); --accent-hover: var(--amber-600); --accent-press: var(--amber-700);
  --positive: var(--forest-500); --positive-bg: var(--forest-100);
  --warning: var(--amber-600); --warning-bg: var(--amber-100);
  --danger: var(--red-500); --danger-bg: var(--red-100);
  --info: var(--slate-500); --info-bg: var(--slate-100);

  --surface-hover: rgba(14,16,18,0.04); --surface-press: rgba(14,16,18,0.07);
  --scrim: rgba(14,16,18,0.45);

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;

  --shadow-1: 0 1px 0 0 rgba(14,16,18,0.04), 0 1px 2px 0 rgba(14,16,18,0.06);
  --shadow-2: 0 4px 12px -2px rgba(14,16,18,0.08), 0 2px 4px -1px rgba(14,16,18,0.06);
  --shadow-3: 0 24px 48px -12px rgba(14,16,18,0.18);

  --container-wide: 1280px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.4;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
::selection { background: var(--accent); color: var(--fg-on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

.container { max-width: var(--container-wide); margin: 0 auto; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  padding: 14px 64px;
  background: rgba(248, 246, 242, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.nav-brand img { height: 22px; }
.nav-links { display: flex; gap: 26px; margin-left: 24px; }
.nav-links a { font-size: 13px; color: var(--fg-muted); transition: color 120ms ease-out; }
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--fg); }
.nav-spacer { flex: 1; }
.nav-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }
.btn-nav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--fg); color: var(--fg-inverse);
  font-size: 13px; font-weight: 500;
}
.btn-nav:hover { background: var(--ink-800); }

/* ── Section primitives ───────────────────────────────────────────────────── */
section { border-top: 1px solid var(--border); }
.sec { padding: 96px 64px; }
.sec-sunken { background: var(--bg-sunken); }
.sec-head { display: grid; grid-template-columns: 1fr 2.2fr; gap: 80px; margin-bottom: 48px; }
.sec-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-bottom: 12px; }
.sec-title { font-size: 40px; letter-spacing: -0.02em; line-height: 1.05; }
.sec-lede { font-size: 17px; line-height: 1.6; color: var(--fg-muted); max-width: 600px; }

/* Page hero (used on inner pages — shorter than landing hero) */
.page-hero { padding: 72px 64px 48px; border-top: 0; position: relative; overflow: hidden; }
.page-hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14,16,18,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 75% 30%, black 0%, transparent 65%);
          mask-image: radial-gradient(ellipse at 75% 30%, black 0%, transparent 65%);
  opacity: .55; pointer-events: none;
}
.page-hero-inner { position: relative; }
.page-hero h1 {
  font-size: 56px; letter-spacing: -0.024em; line-height: 1.02;
  max-width: 960px; margin-bottom: 24px;
}
.page-hero h1 .subdued { color: var(--fg-muted); }
.page-hero p {
  font-size: 18px; line-height: 1.55; color: var(--fg-muted);
  max-width: 720px;
}

/* ── Pills, meta strip ────────────────────────────────────────────────────── */
.meta-strip { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); font-size: 11px;
  font-family: var(--font-mono); color: var(--fg-muted);
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); }
.micro-label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); margin-bottom: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--accent); color: var(--fg-on-accent);
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500;
  transition: background 120ms ease-out;
}
.btn-primary:hover { background: var(--amber-600); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised); color: var(--fg);
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500;
}
.btn-secondary:hover { background: var(--surface-hover); }

/* ── Cards (default surface) ──────────────────────────────────────────────── */
.card {
  padding: 20px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.card h3 { font-size: 15px; margin-bottom: 4px; }
.card .meta { display: block; margin-bottom: 10px; }
.card p { font-size: 13px; line-height: 1.6; color: var(--fg-muted); }

/* ── Grids ────────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ── Stat tiles ───────────────────────────────────────────────────────────── */
.stat {
  padding: 24px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.stat-num {
  font-family: var(--font-mono); font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 8px; font-feature-settings: "tnum";
}
.stat-h { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.stat-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  padding: 40px 64px; border-top: 1px solid var(--border-inverse);
  background: var(--fg); color: var(--ink-500); font-size: 12px;
}
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 360px; }
.footer-brand img { height: 24px; }
.footer-brand .meta { color: var(--ink-500); margin-left: 0; line-height: 1.6; }
.footer-brand a:hover { color: var(--ink-200); }
.footer-links { display: flex; gap: 28px; color: var(--ink-400); flex-wrap: wrap; }
.footer-links a:hover { color: var(--ink-200); }
.footer-social { display: flex; gap: 16px; color: var(--ink-400); }
.footer-social a:hover { color: var(--ink-200); }
.footer-copy { flex-basis: 100%; margin: 8px 0 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav { padding: 14px 32px; }
  .nav-links { display: none; }
  .sec, .page-hero { padding: 56px 32px; }
  footer { padding: 32px; }
  .sec-head { grid-template-columns: 1fr; gap: 24px; }
  .page-hero h1 { font-size: 40px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}