/* styles.css — the marketing site, on the product's own palette.
 *
 * Every colour here is lifted from DEFAULT_THEME in src/types.ts. The site and
 * the app drifted apart badly (the site was rust-on-cream, the app is forest
 * green on warm white), and a landing page that looks nothing like the product
 * it sells makes the first click feel like a mistake. Change a token in
 * src/types.ts, change it here.
 *
 * Typography is already shared with the app: Fraunces for display, Inter for
 * body, IBM Plex Mono for the small uppercase labels.
 */

:root {
  /* Blueprint, drafting-paper variant. Cool where the app is warm: the site
     is a technical drawing of the product, not a copy of its canvas. The one
     thing it borrows literally is the DOT ground, so the two feel related. */
  --paper: #edf1f5;      /* page ground, carries the dots */
  --card: #ffffff;       /* every panel, sheet and nav bar */
  --card-soft: #f7f9fb;  /* long-form reading: paper, not a lit panel */
  --ink: #0d2137;
  --ink-soft: #44617d;
  --ink-faint: #5f7c96;
  --node-stroke: #cbd6e0;

  /* Attribution. Blue is an agent, amber is a person: the same two colours
     label a node on a diagram and a chip in the copy, so the palette itself
     carries the product's one big idea. */
  --accent: #0f6fa8;
  --accent-deep: #0a5480;
  --accent-tint: #f4fafd;
  --accent-line: rgba(15, 111, 168, 0.32);
  --amber: #c98a10;
  --amber-deep: #8a5c05;
  --amber-tint: #fffaf0;

  --edge: rgba(13, 33, 55, 0.12);
  --edge-soft: rgba(13, 33, 55, 0.07);
  --ink-deep: #071726;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  /* The product's own face. Used for concept labels inside diagrams, so a
     drawing on the site reads as a drawing from the app. */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 10px;
  --radius-sm: 3px;
  --shadow-raised: 0 0 0 1px var(--edge);
  --shadow-float: 0 0 0 1px var(--edge), 0 10px 30px rgba(13, 33, 55, 0.05);
  --gutter: 24px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* The dot ground, lifted from the app's canvas. It is the one literal
     borrowing from the product, and it is why the site reads as related to
     it without copying its warm palette. */
  background-color: var(--paper);
  background-image: radial-gradient(rgba(13, 33, 55, 0.2) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a { color: inherit; }

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card);
  border-bottom: 1px solid var(--edge);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-nav a:hover { color: var(--ink); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: var(--card); }
.btn-primary:hover { background: var(--ink-deep); }

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--node-stroke);
}
.btn-ghost:hover { border-color: var(--ink-faint); }

.btn-lg { height: 46px; padding: 0 24px; font-size: 15px; }

/* ── Type ───────────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }

h1 {
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.012em; }

.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 18px 0 0;
}

.section { padding: 88px 0; }
/* An alternating section is a white SHEET laid on the dotted ground, not a
   different tint of the same ground. It is the drawing-board metaphor, and
   it is also what gives the dots somewhere to stop. */
.section-alt { background: var(--card); border-block: 1px solid var(--edge); }
.section-head { max-width: 62ch; margin-bottom: 44px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: 76px 0 84px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 56px;
  align-items: center;
}

.hero-ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.hero-note {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

/* ── Canvas mock — echoes the real app surface ──────────────────────────── */

.canvas-mock {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 20px;
  overflow: hidden;
}

.canvas-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13, 33, 55, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.canvas-mock svg { position: relative; display: block; width: 100%; height: auto; }

.mock-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mock-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-raised);
}

.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }

.card-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

/* ── Agent panel ────────────────────────────────────────────────────────── */

.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.panel-body { padding: 18px 16px; display: grid; gap: 16px; }

.msg { display: flex; gap: 11px; align-items: flex-start; }

.avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
}

.avatar-agent { background: var(--accent); }

.msg-who {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.msg-via {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.msg-body { margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

.panel-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--edge-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

/* ── Tool list ──────────────────────────────────────────────────────────── */

.tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }

.tool {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: 0 0 0 1px var(--edge);
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

.plan {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.plan-featured { box-shadow: 0 0 0 1.5px var(--accent-line), var(--shadow-float); }

.plan-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.plan-price {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 10px 0 2px;
  line-height: 1;
}

.plan-price small { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }

.plan-note { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 18px; min-height: 40px; }

.plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.plan li { font-size: 14px; color: var(--ink-soft); display: flex; gap: 9px; align-items: flex-start; }
.plan li svg { flex: 0 0 auto; margin-top: 4px; color: var(--accent); }
.plan .btn { margin-top: auto; width: 100%; }

.seat-picker {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  gap: 3px;
  margin-bottom: 14px;
}

.seat-picker button {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
}

.seat-picker button[aria-pressed='true'] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
}

/* ── Closer + footer ────────────────────────────────────────────────────── */

.closer { padding: 90px 0; text-align: center; }
.closer .hero-ctas { justify-content: center; }

.site-footer { border-top: 1px solid var(--edge-soft); padding: 26px 0 40px; }

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}

.footer-row a { color: var(--ink-faint); text-decoration: none; }
.footer-row a:hover { color: var(--ink); }
.footer-spacer { flex: 1; }

/* ── Prose (privacy) ────────────────────────────────────────────────────── */

.prose { max-width: 46rem; }
.prose h2 { font-size: 25px; margin: 46px 0 14px; }
.prose p { margin: 0 0 16px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .grid-2, .grid-3, .price-grid { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }
  .section { padding: 64px 0; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .hero { padding: 48px 0 56px; }
}

/* ── Sheet framing ──────────────────────────────────────────────────────── */

/* A drawing carries a cartouche: who made it, what it is, which revision.
   Sections borrow the device so the page reads as a set of plates rather
   than a scroll of blocks. */
.sheet {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 30px 36px 34px;
}

.sheet-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--edge);
  padding-bottom: 12px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sheet-no { color: var(--accent); }
.sheet-head .spacer { flex-grow: 1; }

/* Attribution, the one idea the palette carries. Blue is an agent, amber is
   a person, and the same pair labels a node in a drawing and a chip in the
   copy. */
.by-agent,
.by-person {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}
.by-agent { color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent-line); }
.by-person { color: var(--amber-deep); background: var(--amber-tint); border: 1px solid rgba(201, 138, 16, 0.4); }

/* Concept names, wherever they appear in prose, are set in the product's own
   face. It is a small thing that makes the page feel drawn from the app. */
.concept { font-family: var(--font-serif); font-weight: 600; }

/* ── Docs ───────────────────────────────────────────────────────────────── */

.docs-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 44px 0 96px;
}

/* Long-form reading goes on PAPER, not on the dotted ground. The dots are a
   texture for a canvas, and under a column of prose they fight every line of
   it. The sidebar stays on the ground, which is what separates navigation
   from the thing being read. */
.doc {
  /* A shade off white, on purpose. Pure white against this pale ground reads
     as a lit panel rather than a sheet of paper, and over a full page of
     prose that glare is the thing you notice. */
  background: var(--card-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: 44px 52px 52px;
}

/* Sticky because the page is long and the nav is the only thing telling you
   where you are in it. */
.docs-nav {
  position: sticky;
  top: 92px;
  font-size: 13.5px;
  line-height: 1.5;
}

.docs-nav-group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 22px 0 8px;
}
.docs-nav-group:first-child { margin-top: 0; }

.docs-nav a {
  display: block;
  padding: 5px 0 5px 11px;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid var(--edge);
}
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.is-current {
  color: var(--accent-deep);
  border-left-color: var(--accent);
  font-weight: 500;
}

.doc h2 {
  font-size: 30px;
  letter-spacing: -0.024em;
}

/* The id lives on the SECTION, so the offset has to as well: it was on the
   h2, where it did nothing, and every jump from the sidebar parked the
   heading underneath the sticky header. */
.doc-section { scroll-margin-top: 108px; }
.doc h3 {
  font-size: 19px;
  margin-top: 30px;
  letter-spacing: -0.015em;
}
.doc p { color: var(--ink-soft); max-width: 68ch; }
.doc ul { color: var(--ink-soft); max-width: 68ch; padding-left: 20px; }
.doc li { margin: 7px 0; }
.doc strong { color: var(--ink); font-weight: 600; }

.doc-section + .doc-section { margin-top: 60px; }

/* One step of a numbered walkthrough. The number is the drawing's callout. */
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; margin-top: 26px; }
.step-no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 { margin-top: 0; }

/* The one dark surface on the whole site. A terminal is dark; everything
   else here is paper. */
.code {
  background: var(--ink);
  color: #c7d8e6;
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  overflow-x: auto;
  margin: 14px 0 0;
  white-space: pre;
}
.code .c { color: var(--ink-faint); }
.code .k { color: #5ad2ff; }

.kv {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 14px;
}
.kv td { padding: 9px 0; border-top: 1px solid var(--edge); vertical-align: top; }
.kv tr:first-child td { border-top: none; }
.kv td:first-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-deep);
  width: 38%;
  padding-right: 20px;
}
.kv td:last-child { color: var(--ink-soft); }

.callout {
  margin-top: 20px;
  border-radius: var(--radius-sm);
  background: var(--amber-tint);
  border: 1px solid rgba(201, 138, 16, 0.4);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}
.callout strong { color: var(--amber-deep); }

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .docs-nav { position: static; }
  .doc { padding: 30px 24px 36px; }
}