/* trail.codes — landing page styles.
   Tokens lifted from design_handoff_trail/tokens.css (the source of truth);
   only the subset the landing page uses is inlined here. Forensic-Instrument
   aesthetic: Newsreader serif at scale, Public Sans body, JetBrains Mono for
   technical text, a single copper pigment, the 1px copper horizon line. */

:root {
  /* ink scale (cool dark) */
  --ink-1000: #06090d; --ink-950: #0e1116; --ink-900: #161a21;
  --ink-850: #1f2530; --ink-800: #2a313d; --ink-700: #3d4654;
  --ink-500: #6b7585; --ink-400: #a3acb9; --ink-200: #e8ecf0;

  /* copper (the single pigment) */
  --copper-300: #f5a472; --copper-400: #e07a3c; --copper-500: #c56021;

  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --border-subtle: var(--ink-800);
  --border-strong: var(--ink-700);
  --text-primary: var(--ink-200);
  --text-secondary: var(--ink-400);
  --text-tertiary: var(--ink-500);
  --text-on-accent: var(--ink-1000);
  --accent: var(--copper-400);
  --accent-hover: var(--copper-500);
  --accent-text: var(--copper-300);

  --ff-serif: "Newsreader", Georgia, serif;
  --ff-sans: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --r1: 2px;
  --maxw: 920px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1;
}

h1, h2, h3 { margin: 0; font-family: var(--ff-serif); font-weight: 500; letter-spacing: -0.015em; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--copper-300); text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.label {
  font-family: var(--ff-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text);
}
.mono { font-family: var(--ff-mono); }

/* ── nav ── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--text-primary); }
.brand:hover { text-decoration: none; color: var(--text-primary); }
.brand .ring { color: var(--accent); font-size: 13px; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.nav-links a { color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); text-decoration: none; }

/* ── hero ── */
.hero { padding: 64px 0 12px; }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.08;
  max-width: 16ch;
  margin: 18px 0 0;
}
.hero .lede {
  color: var(--text-secondary);
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.62;
  max-width: 66ch;
  margin: 22px 0 0;
}
.pipeline {
  font-family: var(--ff-mono);
  color: var(--text-tertiary);
  font-size: 13px; letter-spacing: 0.02em;
  margin: 26px 0 0;
}
.pipeline b { color: var(--accent-text); font-weight: 500; }

/* horizon line — the signature motif */
.horizon {
  height: 1px; background: var(--accent);
  width: 260px; margin: 30px 0 0;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .horizon { animation: draw 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── CTAs ── */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 34px 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r1);
  font-family: var(--ff-sans); font-size: 14px; font-weight: 600;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-primary);
  cursor: pointer; transition: background 90ms, border-color 90ms, color 90ms;
}
.btn:hover { background: var(--surface); border-color: var(--border-strong); text-decoration: none; color: var(--text-primary); }
.btn.primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }

.install {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r1);
  font-family: var(--ff-mono); font-size: 13px; color: var(--text-secondary);
  background: var(--surface);
}
.install .dollar { color: var(--text-tertiary); user-select: none; }
.install button {
  margin-left: 2px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-tertiary); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.install button:hover { color: var(--accent-text); }

/* ── callout (the distinctive hook) ── */
.callout { margin: 80px 0 0; padding: 28px 0 0; border-top: 1px solid var(--border-subtle); }
.callout h2 { font-size: clamp(24px, 3.4vw, 34px); max-width: 18ch; }
.callout p { color: var(--text-secondary); max-width: 64ch; margin: 14px 0 0; }

/* ── packet grid ── */
.section { margin: 76px 0 0; }
.section > .label { display: block; margin-bottom: 26px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.cell { background: var(--bg); padding: 26px 24px; }
.cell h3 { font-size: 20px; }
.cell .k { font-family: var(--ff-mono); font-size: 11px; color: var(--accent-text); letter-spacing: 0.06em; text-transform: uppercase; }
.cell p { color: var(--text-secondary); font-size: 15px; margin: 10px 0 0; }

/* ── footer ── */
.footer { margin: 92px 0 0; padding: 26px 0 60px; border-top: 1px solid var(--border-subtle); }
.footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer .meta { font-family: var(--ff-mono); font-size: 12px; color: var(--text-tertiary); }
.footer .links { display: flex; gap: 20px; font-size: 14px; }
.footer .links a { color: var(--text-secondary); }
.footer .links a:hover { color: var(--text-primary); text-decoration: none; }

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .nav-links { gap: 16px; }
}