/* Boidwatch marketing landing — tokens lifted from web/src/styles/index.css
   and PRODUCT.md / DESIGN.md. Keep this file in sync when the SPA palette
   evolves. */

:root {
  /* ── Surfaces (cool light). Never pure white. */
  --color-canvas: oklch(98% 0.005 240);
  --color-surface: oklch(96% 0.008 235);
  --color-surface-2: oklch(93% 0.010 230);

  /* ── Ink (cool dark, never black). */
  --color-ink: oklch(22% 0.020 245);
  --color-ink-soft: oklch(40% 0.015 245);
  --color-muted: oklch(60% 0.012 240);

  /* ── Lines. */
  --color-hairline: oklch(88% 0.010 235);
  --color-hairline-strong: oklch(78% 0.013 235);

  /* ── Action. Used very sparingly. */
  --color-action: oklch(50% 0.13 245);
  --color-action-fg: var(--color-canvas);

  /* ── Persona palette (categorical, low chroma). Used as data accents
     in the cognition quad and the funnel illustration. Hue tells you
     which persona; nothing else. */
  --color-p-scanner: oklch(62% 0.10 200);
  --color-p-skimmer: oklch(64% 0.09 150);
  --color-p-tabhopper: oklch(60% 0.08 320);
  --color-p-goal: oklch(58% 0.10 250);
  --color-p-confused: oklch(60% 0.10 30);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;

  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:
    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --content-max: min(1040px, calc(100vw - 48px));

  /* Marketing page is pinned to light — the signature surface. It
     deliberately does NOT follow the OS dark-mode preference the way
     the SPA does, so first impressions and share screenshots are
     consistent for every visitor. */
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input {
  font: inherit;
  color: inherit;
}

body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

.font-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

a {
  color: inherit;
}

/* The "accent" span is the one place on the marketing landing where a
   color emphasis is allowed — the hero's single highlighted word.
   Everywhere else, emphasis is weight and geometry, not hue. */
.accent {
  color: var(--color-action);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Brand backdrop: a faint cool gradient + dot field that sits
   beneath the live boid simulation (flock.js) on the hero and closing
   sections. Acts as a fallback when JS is disabled and as a calming
   ground beneath the moving flock. */
.bg-vectorfield {
  background-image:
    radial-gradient(
      ellipse at 20% 0%,
      color-mix(in oklch, var(--color-p-scanner) 5%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 110% 110%,
      color-mix(in oklch, var(--color-p-tabhopper) 4%, transparent) 0%,
      transparent 60%
    ),
    repeating-radial-gradient(
      circle at 110% 110%,
      color-mix(in oklch, var(--color-ink) 2%, transparent) 0,
      color-mix(in oklch, var(--color-ink) 2%, transparent) 1px,
      transparent 1px,
      transparent 32px
    );
}

/* ── Canvas backdrops for hero and closing. The flock simulation
   (flock.js) draws on these. Sized absolute to fill the parent;
   pointer-events none so clicks pass through. The content wrapper
   gets `position: relative` so it stacks above the canvas (positioned
   descendants paint after non-positioned ones; equalising the
   stacking level lets DOM source order put content on top). */
.hero,
.closing {
  position: relative;
  overflow: hidden;
}
.hero-canvas,
.closing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-inner,
.closing-inner {
  position: relative;
}

/* ── Inline boid icon: a small triangle used as a label prefix in
   the cognition quad and as a corner accent on the three-card grid.
   Color comes from the parent via `currentColor`. */
.boid-icon {
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}
.boid-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Three-card: persona-color accent triangle in the top-right of
   each card. Telegraphs the categorical-color principle on the
   landing without adding a separate "personas" section. */
.card {
  position: relative;
}
.card-accent {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 12px;
  height: 12px;
}
.card-accent.persona-scanner   { color: var(--color-p-scanner); }
.card-accent.persona-skimmer   { color: var(--color-p-skimmer); }
.card-accent.persona-tabhopper { color: var(--color-p-tabhopper); }
.card-accent.persona-goal      { color: var(--color-p-goal); }
.card-accent.persona-confused  { color: var(--color-p-confused); }

/* ── Cognition quad label gets a small boid prefix in a persona hue.
   Pairs each cognitive role to one persona for visual variety. */
.quad-cell.persona-scanner   { --quad-hue: var(--color-p-scanner); }
.quad-cell.persona-skimmer   { --quad-hue: var(--color-p-skimmer); }
.quad-cell.persona-tabhopper { --quad-hue: var(--color-p-tabhopper); }
.quad-cell.persona-goal      { --quad-hue: var(--color-p-goal); }
.quad-cell.persona-confused  { --quad-hue: var(--color-p-confused); }
.quad-label .boid-icon {
  margin-right: 8px;
  width: 10px;
  height: 10px;
  vertical-align: -1px;
  color: var(--quad-hue, var(--color-muted));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

:where(a, button, [role="button"], input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: color-mix(in oklch, var(--color-action) 30%, transparent);
  color: var(--color-ink);
}

/* ── Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-ink);
}
.boidmark {
  color: var(--color-ink);
}
.wordmark {
  font-size: var(--text-lg);
  font-weight: 500;
}
/* Quiet hairline "BETA" pill — mirrors the SPA top-rail recipe
   (web/src/components/Logo.tsx). Deliberately not action-colored:
   color is identity, not emphasis (DESIGN.md, Categorical Color Rule). */
.beta-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  line-height: 1;
}
.topbar-link {
  text-decoration: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.topbar-link:hover {
  color: var(--color-action);
}

/* ── Hero */
.hero {
  position: relative;
  padding: 64px 24px 96px;
}
.hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.hero-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin: 0 0 20px;
}
.hero-title {
  font-size: clamp(2.25rem, 5.5vw, var(--text-5xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 auto;
  max-width: 18ch;
}
.hero-sub {
  margin: 24px auto 36px;
  max-width: 52ch;
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
}

/* ── Beta form (used in hero and closing) */
.beta-form {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.beta-form input[type="email"] {
  flex: 1 1 280px;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.beta-form input[type="email"]:focus {
  border-color: var(--color-action);
}
.beta-form button {
  height: 48px;
  padding: 0 20px;
  border-radius: var(--radius);
  border: 0;
  background: var(--color-ink);
  color: var(--color-action-fg);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.beta-form button:hover {
  background: var(--color-action);
}
.form-microcopy {
  margin: 16px auto 0;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ── One-line bet */
.oneline {
  padding: 96px 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.oneline-text {
  font-size: clamp(1.5rem, 3vw, var(--text-2xl));
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 auto;
  max-width: 64ch;
  font-weight: 500;
}
.oneline-break {
  display: block;
  margin-top: 12px;
  color: var(--color-ink);
}

/* ── Three-card */
.threecard {
  padding: 32px 24px 96px;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) {
  .threecard {
    grid-template-columns: 1fr;
  }
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  padding: 24px;
}
.card-title {
  font-size: var(--text-xl);
  margin: 0 0 12px;
  font-weight: 500;
  line-height: 1.25;
}
.card-body {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ── Cognition four-card (the shareable section) */
.cognition {
  padding: 96px 24px;
  text-align: center;
}
.cognition-eyebrow {
  font-size: clamp(1.25rem, 2.6vw, var(--text-2xl));
  margin: 0 auto 48px;
  font-weight: 500;
  max-width: 36ch;
}
.quad {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.quad-cell {
  padding: 36px 28px;
  border-right: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  text-align: left;
}
.quad-cell:nth-child(2n) {
  border-right: 0;
}
.quad-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}
@media (max-width: 560px) {
  .quad {
    grid-template-columns: 1fr;
  }
  .quad-cell {
    border-right: 0;
    border-bottom: 1px solid var(--color-hairline);
  }
  .quad-cell:last-child {
    border-bottom: 0;
  }
}
.quad-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0 0 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.quad-quote {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.quote-mark {
  color: var(--color-muted);
  margin: 0 1px;
}
.quad-meters {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.meter {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-feature-settings: "tnum";
}
.meter-key {
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.meter-val {
  color: var(--color-ink);
  font-weight: 500;
}
.cognition-foot {
  margin: 36px auto 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* ── Illustrated funnel */
.funnel {
  padding: 96px 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.funnel-figure {
  margin: 0;
  text-align: center;
}
.funnel-svg {
  width: 100%;
  height: auto;
  max-width: 760px;
  margin: 0 auto;
}
.funnel-grid line {
  stroke: var(--color-hairline);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.funnel-headers text {
  fill: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.archetype-label {
  fill: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
/* Funnel cells: each row is a persona (color-coded by hue), each cell
   is a single boid triangle whose opacity encodes how many of that
   persona made it through the step. Drop cells get a dashed outline
   under the boid. The whole illustration becomes the categorical-color
   story made literal: rows ARE personas, opacity IS retention. */
.cell-step .cell-bg {
  fill: color-mix(in oklch, var(--color-ink) 3%, transparent);
  stroke: var(--color-hairline);
  stroke-width: 0.5;
}
.cell-step .cell-boid {
  color: var(--color-ink);  /* default; overridden by row-* classes */
}
.row-scanner   .cell-boid { color: var(--color-p-scanner); }
.row-evaluator .cell-boid { color: var(--color-p-goal); }
.row-novice    .cell-boid { color: var(--color-p-confused); }
.row-pricing   .cell-boid { color: var(--color-p-tabhopper); }
.row-skimmer   .cell-boid { color: var(--color-p-skimmer); }
.row-trust     .cell-boid { color: var(--color-ink); }

.cell-step.fill-3 .cell-boid { opacity: 0.85; }
.cell-step.fill-2 .cell-boid { opacity: 0.55; }
.cell-step.fill-1 .cell-boid { opacity: 0.28; }
.cell-step.fill-0 .cell-boid { opacity: 0.10; }

.cell-step.cell-drop .cell-bg {
  stroke: var(--color-action);
  stroke-width: 1.2;
  stroke-dasharray: 3 2;
}
.funnel-caption {
  margin: 28px auto 0;
  max-width: 56ch;
  color: var(--color-ink-soft);
  font-size: var(--text-base);
}

/* ── Real report. The proof section: one actual unedited run, linked
   out (new tab) rather than iframed so the static host needs no CSP
   frame rules. The live card is the only place a whole card is a link;
   the "soon" card is inert (a plain div, no href). Verbatim quote +
   the real 0.36 trust number do the persuading — paraphrase would read
   like marketing. */
.report {
  padding: 96px 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.report-eyebrow {
  font-size: clamp(1.25rem, 2.6vw, var(--text-2xl));
  margin: 0 auto 16px;
  font-weight: 500;
  max-width: 28ch;
}
.report-sub {
  margin: 0 auto 48px;
  max-width: 60ch;
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.6;
}
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}
@media (max-width: 720px) {
  .report-grid {
    grid-template-columns: 1fr;
  }
}
.report-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.report-card--live {
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quint);
}
.report-card--live:hover {
  border-color: var(--color-hairline-strong);
  transform: translateY(-2px);
}
.report-card--soon {
  border-style: dashed;
  background: var(--color-canvas);
}
.report-card-tag {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.report-card-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
}
.report-card-desc {
  margin: -4px 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.report-card-found {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-card-finding {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.report-card-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.report-card-meta {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.report-card-cta {
  margin-top: auto;
  padding-top: 4px;
  font-size: var(--text-sm);
  color: var(--color-action);
  font-feature-settings: "tnum";
}

/* ── Pricing. Reuses the three-card pattern; prices and counts are
   mono + tnum because they columnate and compare. No "popular" badge —
   color is categorical, not hierarchical; the three packs read flat. */
.pricing {
  padding: 96px 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.pricing-eyebrow {
  font-size: clamp(1.25rem, 2.6vw, var(--text-2xl));
  margin: 0 auto 48px;
  font-weight: 500;
  max-width: 36ch;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}
.pricing-card {
  text-align: left;
}
.pricing-amount {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.pricing-credits {
  margin: 6px 0 0;
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}
.pricing-note {
  margin: 16px 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.pricing-foot {
  margin: 36px auto 0;
  max-width: 56ch;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ── Closing CTA strip */
.closing {
  padding: 96px 24px;
  text-align: center;
}
.closing-line {
  font-size: clamp(2rem, 4.5vw, var(--text-4xl));
  margin: 0 auto 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ── Footer */
.footer {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: var(--text-xs);
  border-top: 1px solid var(--color-hairline);
}
.footer a {
  color: var(--color-muted);
  text-decoration: none;
}
.footer a:hover {
  color: var(--color-action);
}