/* ───────────────────────────────────────
   Nod — landing page
   Design tokens match daemon/policy + wireframes:
   dark mode, mono for code, single warm-orange accent
   ─────────────────────────────────────── */
:root {
  --bg: #0a0a0a;
  --bg-panel: #111111;
  --bg-elevated: #161616;
  --ink: #f5f5f5;
  --ink-soft: #d4d4d4;
  --dim: #8a8a8a;
  --line: #232323;
  --accent: #f97316;
  --accent-deep: #c2410c;
  --danger: #ef4444;
  --safe: #10b981;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --radius: 12px;
  --shadow-watch: 0 0 0 8px #0a0a0a, 0 0 0 10px #3a3a3a, 0 30px 60px rgba(0,0,0,.85);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.92em; color: var(--accent); background: rgba(249,115,22,0.06); padding: 1px 5px; border-radius: 4px; }

/* ─────────────── NAV ─────────────── */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  position: sticky;
  top: 0;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; font-size: 16px; }
.brand:hover { color: var(--ink); }
/* Brand mark is now an SVG mascot (see nav/footer in index.html). The span
   is just a sized container; the SVG fills it. Background comes from the
   SVG's <rect>, not this rule. Keeping width/height here so the layout
   math is unchanged from the text-based version. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  overflow: hidden;
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-mark.small { width: 20px; height: 20px; }
.brand-text { letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 24px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.nav-links a { color: var(--dim); }
.nav-links a:hover { color: var(--ink); }
.nav-github {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink) !important;
}
.nav-github:hover { border-color: var(--ink); }

/* ─────────────── HERO ─────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 80px 32px 100px;
  max-width: 1180px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 32px;
  line-height: 1.55;
}
.lede code { font-size: 0.92em; }
.cta-row { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.cta:active { transform: translateY(1px); }
.cta.primary { background: var(--accent); color: #000; }
.cta.primary:hover { background: #fb8a32; color: #000; }
.cta.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.cta.secondary:hover { border-color: var(--ink); color: var(--ink); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
}
.status-dot {
  width: 7px; height: 7px;
  background: var(--safe);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--safe);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% {opacity: 1;} 50% {opacity: 0.5;} }

.hero-watch { display: flex; justify-content: center; }

/* ─────────────── WATCH MOCKUP ─────────────── */
/* One watch shape, used for every mockup on the page. Dimensions + chrome
   are identical everywhere; only the inner content (.notif vs .notif.number-
   match) changes between the hero and the number-match section. Keeping
   these locked makes the two feel like the same device in two states
   instead of two different mockups. */
.watch {
  width: 220px;
  height: 280px;
  background: #000;
  border-radius: 44px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--sans);
  position: relative;
  box-shadow: var(--shadow-watch);
}
.notif { display: flex; flex-direction: column; height: 100%; gap: 6px; padding-top: 2px; }

/* Sender bar: mascot avatar + "nod" label + time.
   Same top-of-card layout that real iOS notifications use. The mascot is
   the dominant visual — 28x28 so the expression (idle vs worried) is
   legible, not a dot. "nod" label sits beside it; time pushed right via
   margin-left: auto. */
.notif .sender-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.notif .sender-mascot {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 7px;
  flex-shrink: 0;
}
.notif .sender-name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.notif .time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.notif .session { font-family: var(--mono); font-size: 10px; color: var(--dim); font-weight: 500; margin-top: 2px; }
.notif .tool-name { font-family: var(--mono); font-size: 19px; font-weight: 700; margin-top: 8px; letter-spacing: -0.01em; }
.notif .tool-summary { font-family: var(--mono); font-size: 12px; color: var(--dim); line-height: 1.3; margin-top: 2px; }
.notif .buttons { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.btn { border: 0; padding: 9px 0; border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; }
.btn-primary { background: var(--accent); color: #000; }
.btn-secondary { background: #1a1a1a; color: var(--ink); border: 1px solid #333; }
.btn-danger { background: var(--danger); color: #fff; }

/* Destructive notification variant. Same geometry as the regular notification
   but with a red warning chip, red Approve button, and a subtle red tint on
   the tool name. Visually clear without number-matching: you can see at a
   glance that this one is different. */
.danger-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-top: 2px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--danger);
}
.notif.destructive .tool-name { color: var(--danger); }
.notif.destructive .tool-summary { color: var(--ink-soft); }

/* ─────────────── SECTIONS ─────────────── */
.section {
  padding: 100px 32px;
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* HOW IT WORKS — vertical numbered narrative, no card chrome.
   Big mono numerals in the gutter, hairline rules between rows, generous space. */
.flow {
  list-style: none;
  margin-top: -16px;
  max-width: 880px;
}
.flow li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.flow li:last-child { border-bottom: 1px solid var(--line); }
.flow-num {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum" 1;  /* tabular numerals so 01/02/03 align */
}
.flow-body h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.flow-body p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
}
.flow-body code { font-size: 0.92em; }

/* SPLIT (text + visual side-by-side) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split-text h2 { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 24px; }
.split-text h2 em { font-style: italic; color: var(--accent); }
.split-text p { color: var(--ink-soft); margin-bottom: 16px; line-height: 1.6; }
.split-visual { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.terminal {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  width: 320px;
  max-width: 100%;
  overflow-x: auto;
}
.terminal .cmd-text { color: var(--ink); }
.terminal .dim { color: var(--dim); }
.terminal .danger { color: var(--danger); font-weight: 700; }
.terminal .strong { color: var(--accent); font-weight: 700; font-size: 15px; }

/* SPEC SHEET — used by Features and Privacy. Two-column rows with a mono
   label in the left column and prose in the right. Hairline separators only
   — no filled cards, no left-borders, no rounded boxes. */
.specs {
  margin-top: -16px;
  max-width: 920px;
}
.specs > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.specs > div:last-child { border-bottom: 1px solid var(--line); }
.specs dt {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.specs dd {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.specs dd code { font-size: 0.92em; }
.specs dd a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.specs dd a:hover { border-bottom-color: var(--accent); }

/* MEET NOD — the character introduced in his own section. Text left,
   a grid of 6 expression cards on the right. The cards all use the same
   64x64 viewBox so every face sits identically in its frame.

   Why in the middle of the page and not the hero: the hero needs to sell
   the utility first (approve Claude from your wrist). The character is a
   brand layer on top, not the product promise. Showing him here, after
   "how it works" but before architecture, lets visitors form the utility
   model first and then enjoy the personality. */
.meet-nod-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.meet-nod-text .eyebrow { margin-bottom: 16px; }
.meet-nod-text h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.meet-nod-text p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}
.meet-nod-faces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.face-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.15s;
}
.face-card:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.face-card svg { width: 64px; height: 64px; }
.face-card span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ARCHITECTURE — ASCII diagram on desktop, stacked HTML on narrow mobile.
   Same content twice; a media query swaps which is visible so the narrow-
   viewport user never has to horizontal-scroll to read the architecture. */
.diagram {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-x: auto;
  white-space: pre;
  padding: 8px 0;
}
/* Mobile-stack variant: hidden by default (desktop sees the ASCII), shown
   when the viewport is too narrow for the ASCII art to fit. */
.arch-stack { display: none; }
.arch-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 20px;
  text-align: center;
  min-width: 220px;
  font-family: var(--mono);
}
.arch-title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.arch-sub {
  font-size: 11px;
  color: var(--dim);
  line-height: 1.5;
  margin-top: 6px;
}
.arch-edge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  padding: 6px 0;
}
.diagram-caption {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 720px;
}
.diagram-caption strong { color: var(--ink); font-weight: 600; }

/* INSTALL — primary path is big and obvious. Source path is a small footnote
   below, expandable via <details>. No card chrome. */
.install-primary {
  margin-top: -8px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.install-primary h3 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.code {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
  display: block;
  margin: 0 0 12px;
}
.code .prompt { color: var(--dim); user-select: none; }
.code .comment { color: var(--dim); }
.install-then {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 16px 0 12px;
}
.install-source {
  margin-top: 32px;
  padding-top: 0;
}
.install-source summary {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
}
.install-source summary::-webkit-details-marker { display: none; }
.install-source summary:hover { color: var(--ink); }
.install-source summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
}
.install-source[open] summary::before {
  transform: rotate(90deg);
}
.install-source[open] summary { color: var(--ink); margin-bottom: 16px; }
.install-uninstall {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--dim);
}

/* (Privacy section reuses .specs from the FEATURES block above.) */

/* FOOTER */
footer {
  margin-top: 100px;
  padding: 32px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 14px; font-weight: 700; }
.footer-brand .small { font-size: 12px; font-weight: 400; }
.footer-links { display: flex; gap: 20px; font-family: var(--mono); font-size: 13px; }
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--ink); }
.footer-fineprint {
  max-width: 1180px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--dim);
  font-family: var(--mono);
}

.dim { color: var(--dim); }
.small { font-size: 12px; }

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: left;
    padding: 60px 24px 80px;
  }
  /* No scale override — both hero and split watches render at their natural
     220×280 size so they feel like the same device. */
  .split { grid-template-columns: 1fr; gap: 48px; }
  .section { padding: 72px 24px; }
  nav { padding: 16px 24px; }
  .nav-links { gap: 16px; font-size: 12px; }
  .nav-links a:not(.nav-github) { display: none; }

  /* New layouts: collapse mono gutters → stacked rows */
  .flow li {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
  .flow-num { font-size: 28px; }
  .specs > div {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }
  .specs dt { font-size: 12px; color: var(--accent); }

  /* Meet Nod collapses to stacked rows on narrow viewports, same as .split. */
  .meet-nod-grid { grid-template-columns: 1fr; gap: 40px; }
  .meet-nod-faces { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .face-card { padding: 14px 8px; }
  .face-card svg { width: 48px; height: 48px; }

  /* Code blocks: shrink font so shell commands fit without horizontal scroll.
     brew install speculative-dynamics/nod/nod is 41 chars which was overflowing
     the 287px inner width at 14px mono. 12px → ~290px wide, fits cleanly. */
  .code { font-size: 12px; padding: 14px 16px; }
  .terminal { font-size: 12px; width: 100%; max-width: 320px; }

  /* Swap ASCII diagram for the stacked mobile version. The ASCII is >70
     chars wide; no realistic font size fits that in a 375px viewport. */
  .diagram { display: none; }
  .arch-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0 16px;
  }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 36px; }
  .lede { font-size: 16px; }
  .section-head h2 { font-size: 26px; }
  .flow-body h3 { font-size: 18px; }
  .flow-body p, .specs dd { font-size: 15px; }

  /* Narrowest mobile: tighten code font further so lines don't break awkwardly.
     At 11px mono (~6.6px/char) a 43-char shell line ≈ 284px, fits 327px. */
  .code { font-size: 11px; padding: 12px 14px; }
  .terminal { font-size: 11px; }
  /* arch-stack takes over from .diagram here; already hidden at 880px. */
  .arch-node { min-width: 180px; padding: 12px 16px; }
}

/* ─────────────── ANIMATIONS ───────────────
   Gated on prefers-reduced-motion so motion-sensitive users see the static
   state above. Three animations, each tied to a core product concept:

     1. Watch buzz       → "your wrist buzzes"     (hero + split watches)
     2. Keypad type demo → "type the code"         (number-match section)
     3. CTA hover lift   → polish                  (installs buttons)

   Kept intentionally subtle. No scroll-reveal, no section fade-ins, no
   parallax, no hero typewriter — motion should earn its keep.
   ─────────────────────────────────────────── */

/* Tiny hover lift on the CTA buttons. Works with or without reduced-motion;
   it's a 1px translate, not a motion event. */
.cta { transition: transform 0.12s, background 0.15s, border-color 0.15s; }
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(1px); }

@media (prefers-reduced-motion: no-preference) {

  /* ── Mascot blink ──
     One blink near the start of each 3s cycle, so the first blink fires
     ~180ms after page load instead of at the cycle's end. Right eye
     trails the left by 40ms so it reads as organic, not mechanical.
     Hold fully-closed for ~120ms then open — noticeable but not twitchy.

     SVG transforms: without `transform-box: fill-box` browsers interpret
     `transform-origin` against the SVG's root viewBox, not the element's
     own bounding box, so the eye visibly shifts as it scales. fill-box
     anchors at the element, so `center` means center-of-eye.
     Chrome/Safari/Firefox all support this combination. */
  .mascot-blink .eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: mascot-blink 3s infinite;
  }
  .mascot-blink .eye-r { animation-delay: 0.04s; }
  @keyframes mascot-blink {
    0%, 4%     { transform: scaleY(1); }
    6%, 10%    { transform: scaleY(0.05); }
    14%, 100%  { transform: scaleY(1); }
  }

  /* ── Watch haptic buzz ──
     5s cycle, buzz at the START so the first wobble fires soon after page
     load (delay + 0), not at the end of the cycle. Amplitude is larger than
     a real haptic because a 220px mockup viewed at ~30% screen area needs
     bigger movements to read as motion: ±5px, ±3deg. Two watches staggered
     so they don't sync when both are in view. translate3d promotes each
     watch to its own compositor layer; the animation paints nothing else. */
  .hero-watch .watch {
    animation: watch-buzz 5s infinite;
    animation-delay: 0.6s;
    will-change: transform;
    transform-origin: 50% 30%; /* pivot near the top, like a dangling watch */
  }
  .split-visual .watch {
    animation: watch-buzz 5s infinite;
    animation-delay: 2.5s;
    will-change: transform;
    transform-origin: 50% 30%;
  }
  @keyframes watch-buzz {
    0%       { transform: translate3d(0, 0, 0) rotate(0); }
    2%       { transform: translate3d(-5px, 0, 0) rotate(-3deg); }
    4%       { transform: translate3d(5px, -2px, 0) rotate(3deg); }
    6%       { transform: translate3d(-4px, 0, 0) rotate(-2.2deg); }
    8%       { transform: translate3d(3px, 1px, 0) rotate(1.5deg); }
    10%      { transform: translate3d(-2px, 0, 0) rotate(-0.8deg); }
    12%      { transform: translate3d(1px, 0, 0) rotate(0.4deg); }
    14%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  }

  /* ── Destructive chip pulse ──
     Subtle red ring that pulses on the warning chip. Draws the eye without
     being garish. Only runs on the destructive notification — the normal
     notification has nothing animating. */
  .notif.destructive .danger-chip {
    animation: danger-pulse 2.5s infinite;
  }
  @keyframes danger-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
  }
}