/* ============================================================================
   WebFunnelWatch — Landing skin (shared across Home / Pricing / FAQ)
   ----------------------------------------------------------------------------
   This is the MARKETING skin, deliberately distinct from the app's paper-ink
   design system (Rule 16 governs the app; the landing is its own signed-off
   surface — PRD Landing-2.0 D1). Tokens here are the landing's own; do not
   import app tokens, and do not let these leak into frontend/.

   Fonts: Archivo (display/UI), Söhne (body fallback), Archivo Narrow
   (condensed labels), JetBrains Mono (the "ledger" metadata texture — dates,
   deltas, floored counts, code). Loaded once here via @import so every page
   shares one source.

   Structure:  TOKENS · BASE · GRID · TYPE · NAV · BUTTONS · FOOTER · SHARED
   Page-specific components (hero, drill composite, pricing cards, compare
   table, FAQ accordion) live in each page's own <style> block.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================ TOKENS ============================ */
:root {
  /* Surfaces (paper base, shared with the app only at the neutral ground) */
  --bg:        #ededec;
  --bg-off:    #e6e5e3;
  --surface:   #ffffff;
  --dark:      #0a0a0a;
  --dark-2:    #171717;
  --dark-3:    #1e1e23;

  /* Ink */
  --ink:       #0a0a0a;
  --ink-2:     #1a1a1a;
  --ink-soft:  #6e6e6a;
  --ink-mute:  #9a9a94;

  /* Lines */
  --line:      #d8d8d5;
  --line-2:    #cbcbc7;

  /* Brand — the one marketing accent (used sparingly: focus, one lit path) */
  --brand:     #0031a9;
  --brand-2:   #1a4fd0;

  /* Semantic signal tones — state, never decoration. Mirror the product's
     own change-feed vocabulary so the marketing surface reads as its output. */
  --sig-up:    #1f7a4d;   /* price up / renewal jump */
  --sig-down:  #b23b3b;   /* price down / removal */
  --sig-change:#8a5a00;   /* copy / structure change */
  --sig-info:  #0031a9;   /* new / neutral */

  /* Spacing — 4px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius:    10px;
  --radius-lg: 16px;
  --maxw:      1440px;
}

/* ============================ BASE ============================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: rgba(0,49,169,0.16); }

/* Reduced-motion: kill all the ambient/loop animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================ GRID ============================ */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 900px) {
  .grid-12 { padding: 0 20px; column-gap: 16px; }
  .container { padding: 0 20px; }
}

/* Section rhythm */
.section { padding: var(--space-9) 0; }
.section-tight { padding: var(--space-8) 0; }
@media (max-width: 700px) {
  .section { padding: var(--space-8) 0; }
  .section-tight { padding: var(--space-7) 0; }
}

/* ============================ TYPE ============================ */
.caption {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-4);
  display: inline-block;
}
.section-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 20ch;
}
.section-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: var(--space-4);
}
.section-head { margin-bottom: var(--space-8); }

/* ============================ NAV ============================ */
/* Scoped to #site-nav so it never leaks onto other semantic <nav> elements
   (e.g. the footer's <nav class="footer-links"> landmark). */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease, color 0.3s ease;
  border-bottom: 1px solid transparent;
}
#site-nav.scrolled {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  padding: 14px 40px;
}
#site-nav.scrolled.on-light {
  background: rgba(237, 237, 236, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(10, 10, 10, 0.08);
  color: var(--ink);
}
/* Pages that are light from the top (Pricing, FAQ) opt into ink nav immediately */
#site-nav.nav-on-light { color: var(--ink); }
@media (max-width: 900px) {
  #site-nav { padding: 16px 20px; }
  #site-nav.scrolled { padding: 12px 20px; }
}

.wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.nav-right {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-right a {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: opacity 0.2s ease;
}
.nav-right a:hover { opacity: 0.7; }
.nav-right a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 640px) {
  .nav-right { gap: 18px; }
  .nav-right .desktop-only { display: none; }
}

/* ============================ BUTTONS ============================ */
/* Primary — the metal pill (reused from the original hero CTA). Light chrome
   surface, ink text; drop-shadow lift on hover. */
.btn-metal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 44px;
  color: var(--ink) !important;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), filter 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.btn-metal:hover { transform: translateY(-1px); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)) drop-shadow(0 8px 20px rgba(0,0,0,0.22)); }
.btn-metal:active { transform: translateY(0); }
.btn-metal:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-metal .metal-surface { position: absolute; inset: 0; z-index: -1; border-radius: 999px; overflow: hidden; background: linear-gradient(180deg, #f4f4f1 0%, #e8e8e4 50%, #d8d8d3 100%); }
.btn-metal .metal-content { display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; height: 100%; position: relative; z-index: 1; }
.btn-metal .arr-box { display: inline-flex; }
.btn-metal.btn-sm { height: 38px; font-size: 13px; }
.btn-metal.btn-sm .metal-content { padding: 0 18px; }

/* Ink button — solid dark, used on light surfaces as a primary alt */
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 24px;
  background: var(--ink); color: #fff;
  border: none; cursor: pointer;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn-ink:hover { background: var(--dark-2); transform: translateY(-1px); }
.btn-ink:active { transform: translateY(0); }
.btn-ink:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-ink.btn-sm { height: 38px; padding: 0 18px; font-size: 13px; }

/* Ghost / secondary — outline on light */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); cursor: pointer;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(10,10,10,0.03); }
.btn-ghost:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-ghost.btn-sm { height: 38px; padding: 0 18px; font-size: 13px; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.link-arrow:hover { gap: 10px; border-bottom-color: var(--ink); }
.link-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ============================ FOOTER ============================ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: var(--space-8) 0;
}
.footer-grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.footer-wordmark {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: -0.02em; color: var(--ink);
}
.footer-links { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.footer-links a, .footer-links button {
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color 0.2s ease;
}
.footer-links a:hover, .footer-links button:hover { color: var(--ink); }
.footer-links a:focus-visible, .footer-links button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-mute); }
@media (max-width: 640px) {
  .footer-grid { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ============================ SHARED COMPONENTS ============================ */
/* Beta badge — used on Discovery tiers everywhere */
.badge-beta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand);
  background: rgba(0,49,169,0.08);
  border: 1px solid rgba(0,49,169,0.2);
  border-radius: 999px; padding: 3px 9px;
  vertical-align: middle;
}

/* Ledger chip — mono metadata token (dates, deltas). The recurring texture. */
.ledger {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 400;
  color: var(--ink-soft); letter-spacing: 0;
}
.ledger-up   { color: var(--sig-up); }
.ledger-down { color: var(--sig-down); }
.ledger-chg  { color: var(--sig-change); }

/* Visually-hidden (skip links, a11y labels) */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }