/* ============================================================
   iliad.md — the landing page is an Iliad document.
   Tokens below are copied from the app's src/styles/tokens.css
   (single source of truth). Do not invent values here.
   ============================================================ */
:root {
  /* surfaces */
  --editor: #fffefa;
  --card: #fbfaf4;
  --paper: #f4f3ec;
  /* ink */
  --ink-1: #1f211f;
  --ink-2: #272a26;
  --ink-3: #2f332e;
  --muted-1: #52584f;
  --muted-2: #62675f;
  --muted-3: #767a72;
  --ink-inverse: #fffdf6;
  /* borders */
  --hairline: #e3e0d6;
  --hairline-strong: #d9d7cc;
  --border-control: #cfcec3;
  /* accent — teal carries every interactive signal */
  --teal: #196f64;
  --teal-deep: #145b52;
  --teal-tint: #e8efe9;
  --focus-ring-border: #9db4ad;
  /* review washes — the agent's colors */
  --review-insert: rgba(93, 125, 98, 0.12);
  --review-insert-strong: rgba(93, 125, 98, 0.18);
  --review-insert-ink: #1f3a2c;
  --review-delete: rgba(155, 102, 88, 0.1);
  --review-delete-strong: rgba(155, 102, 88, 0.16);
  --review-delete-ink: #7a463b;
  --review-delete-line: rgba(122, 70, 59, 0.45);
  /* elevation */
  --shadow-card: 0 8px 22px rgba(40, 42, 36, 0.08);
  --shadow-launch: 0 18px 54px rgba(40, 42, 36, 0.07);
  --shadow-sm: 0 1px 3px rgba(36, 38, 34, 0.08);
  /* radii */
  --radius-surface: 8px;
  --radius-control: 6px;
  --radius-pill: 999px;
  /* type — system stacks ARE the brand; no webfonts */
  --font-serif: "Iowan Old Style", "New York", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-sans: "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* status-derived dot tints (bases: --error #8a3d2a, --pending #c98912, --create #2f9a5b) */
  --dot-close: rgba(138, 61, 42, 0.42);
  --dot-min: rgba(201, 137, 18, 0.42);
  --dot-max: rgba(47, 154, 91, 0.42);
  /* diagram washes — review-insert/delete color bases at diagram alpha */
  --diagram-ins: rgba(93, 125, 98, 0.45);
  --diagram-del: rgba(155, 102, 88, 0.4);
  /* vertical rhythm unit — body line-height at body size */
  --beat: 1.65rem;
}

/* ---- reset-ish ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--editor);
  color: var(--ink-1);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, p, dd, dt { text-wrap: pretty; }
/* Deviation from the app's --focus-ring-border (#9db4ad, 2.18:1): teal for
   WCAG 1.4.11 non-text contrast (5.95:1). Intentional. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- the single document column ---- */
.measure-wide, .nav-inner { max-width: 50rem; margin-inline: auto; padding-inline: 1.5rem; }
.measure { max-width: 41rem; }
section { padding-block: 5rem; }

/* ---- nav (chrome = sans, quiet) ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 50rem; margin-inline: auto;
  padding: 1.4rem 1.5rem;
  font-family: var(--font-sans);
}
.wordmark, .wordmark-foot {
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 700;
  text-decoration: none; color: var(--ink-1);
}
.wordmark-ext { color: var(--muted-2); font-weight: 400; }
.nav nav { display: flex; align-items: center; gap: 1.4rem; }
.nav nav a {
  font-size: 0.88rem; color: var(--muted-1); text-decoration: none;
}
.nav nav a:hover { color: var(--ink-1); }
.nav nav a.btn-nav, .nav nav a.btn-nav:hover { color: var(--ink-inverse); }

/* ---- buttons: teal only, the app's interactive signal ---- */
.btn {
  display: inline-block;
  background: var(--teal); color: var(--ink-inverse);
  border: 1px solid var(--teal-deep);
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500;
  padding: 0.7em 1.25em; border-radius: var(--radius-control);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--teal-deep); }
.btn-nav { font-size: 0.85rem; padding: 0.5em 0.95em; }
.quiet-link {
  font-family: var(--font-sans); font-size: 0.95rem;
  color: var(--teal); text-decoration: none;
}
.quiet-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- hero ---- */
.hero {
  max-width: 50rem; margin-inline: auto;
  padding: 4.5rem 1.5rem 5.5rem;
}
.hero h1 {
  font-size: clamp(2.7rem, 7.5vw, 4.5rem);
  line-height: 1.06; font-weight: 700; letter-spacing: -0.015em;
  max-width: 41rem;
}
.hero .lede {
  margin-top: var(--beat); max-width: 41rem;
  font-size: 1.26rem; line-height: 1.55; color: var(--ink-3);
}
.cta-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: calc(var(--beat) * 1.5); }
.fineprint {
  margin-top: 1.1rem;
  font-family: var(--font-sans); font-size: 0.82rem; color: var(--muted-2);
}

/* ---- the demo window: a faithful Iliad frame ---- */
.window {
  margin-top: 3.5rem;
  background: var(--editor);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-launch);
  overflow: hidden;
}
.titlebar {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  padding: 0.6rem 0.9rem;
  font-family: var(--font-sans);
}
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; }
.dots i:nth-child(1) { background: var(--dot-close); }
.dots i:nth-child(2) { background: var(--dot-min); }
.dots i:nth-child(3) { background: var(--dot-max); }
.filename { font-size: 0.8rem; color: var(--muted-1); }
.titlebar-right { margin-left: auto; font-size: 0.72rem; color: var(--muted-2); }
.doc {
  padding: 2.4rem 2.8rem 2.8rem;
  min-height: 23rem;
  font-size: 1.06rem; line-height: 1.7;
}
.doc .line { margin-top: 0.85em; text-wrap: pretty; }
.doc .line:first-child { margin-top: 0; }
.doc .line-h2 { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.doc .md-syntax { color: var(--muted-2); }
.doc .caret {
  display: inline-block; width: 2px; height: 1.15em;
  background: var(--ink-1); vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* agent review marks — exactly the app's washes */
.doc .ins {
  background: var(--review-insert-strong); color: var(--review-insert-ink);
  border-radius: 3px; padding: 0 2px;
}
.doc .del {
  background: var(--review-delete); color: var(--review-delete-ink);
  text-decoration: line-through; text-decoration-color: var(--review-delete-line);
  border-radius: 3px; padding: 0 2px;
  margin-right: 0.35em;
}
.doc .ins.settled {
  background: transparent; color: inherit; padding: 0;
  transition: background 0.6s ease, color 0.6s ease, padding 0.5s ease;
}
.doc .del.collapsing {
  display: inline-block; opacity: 0; white-space: nowrap;
  overflow: hidden; vertical-align: bottom; margin-right: 0; padding: 0;
  transition: max-width 0.5s ease, opacity 0.35s ease, margin-right 0.5s ease, padding 0.5s ease;
}
.agent-row {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.1em;
  font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted-1);
}
.agent-chip, .accept-chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
  background: var(--card); padding: 0.3em 0.85em;
  box-shadow: var(--shadow-sm);
}
.agent-chip .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.accept-chip { color: var(--teal); border-color: var(--teal-tint); cursor: default; }
.accept-chip.pressed { background: var(--teal-tint); }

/* ---- section headings: the markdown conceit, once per section ---- */
h2 {
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1.2; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: var(--beat);
}
h2 .hash { color: var(--muted-3); font-weight: 400; }
section p + p { margin-top: 1.1em; }

/* ---- manifesto: the one set-apart passage, on the app's own paper ---- */
.manifesto {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 6.5rem;
}
.manifesto .measure { max-width: 41rem; margin-inline: auto; padding-inline: 1.5rem; }
.manifesto p { color: var(--ink-2); }
.manifesto .pullquote {
  margin-top: calc(var(--beat) * 1.5);
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  line-height: 1.35; font-style: italic; color: var(--ink-1);
  text-wrap: balance;
}

/* ---- the new way to write ---- */
.new-way .measure { margin-inline: auto; padding-inline: 1.5rem; }
.stack-diagram {
  display: flex; align-items: center; justify-content: center; gap: 2rem;
  max-width: 50rem; margin: 3.5rem auto 0; padding-inline: 1.5rem;
  flex-wrap: wrap;
}
.stack-before { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.mini-frame {
  width: 8.2rem; padding: 0.7rem 0.8rem 1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.mini-title {
  font-family: var(--font-sans); font-size: 0.68rem; color: var(--muted-2);
  margin-bottom: 0.15rem;
}
.mini-line { height: 6px; border-radius: 3px; background: var(--hairline-strong); }
.mini-line.ins { background: var(--diagram-ins); }
.mini-line.del { background: var(--diagram-del); }
.mini-line.mini-h { height: 9px; background: var(--border-control); }
/* chat app: alternating bubbles */
.mini-bubble { height: 10px; border-radius: 6px; background: var(--hairline-strong); }
.mini-bubble-me { align-self: flex-end; background: var(--border-control); }
/* editor: sidebar rail + page body */
.mini-cols { display: flex; gap: 7px; flex: 1; }
.mini-rail { width: 13px; border-radius: 3px; background: var(--paper); border: 1px solid var(--hairline); }
.mini-body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
/* git diff: +/− gutter */
.mini-diff { display: flex; align-items: center; gap: 5px; }
.mini-diff i {
  font-family: var(--font-mono); font-style: normal; font-size: 0.6rem;
  width: 0.7em; color: var(--muted-2);
}
.mini-diff .plus { color: var(--review-insert-ink); }
.mini-diff .minus { color: var(--review-delete-ink); }
.mini-diff .mini-line { flex: 0 0 auto; }
.w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.stack-arrow { font-family: var(--font-serif); font-size: 1.7rem; color: var(--muted-3); }
.mini-frame.luminous {
  width: 11rem; background: var(--editor);
  border-color: var(--border-control);
  box-shadow: var(--shadow-card);
}

/* ---- features ---- */
.features .measure { margin-inline: auto; padding-inline: 1.5rem; }
.feature-grid {
  max-width: 50rem; margin: 2.8rem auto 0; padding-inline: 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.1rem 3rem;
}
.feature-grid dt { font-size: 1.1rem; font-weight: 700; }
.feature-grid dd {
  margin-top: 0.35rem;
  font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.5;
  color: var(--muted-1);
}
.feature-grid code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--paper); border-radius: 3px; padding: 0.05em 0.3em;
}

/* ---- download ---- */
.download { padding-bottom: 6rem; }
.download-card {
  max-width: 50rem; margin-inline: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-surface);
  background: var(--card);
  box-shadow: var(--shadow-launch);
  padding: 3rem 3.2rem;
}
.download-title { font-size: 2rem; margin-bottom: 0.4rem; }
.download-version {
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--muted-1);
  margin-bottom: 1.8rem;
}
.download-notes {
  margin-top: 1.8rem; max-width: 34rem;
  font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.6;
  color: var(--muted-2);
}

/* ---- footer ---- */
.footer {
  border-top: 1px solid var(--hairline);
  max-width: 50rem; margin-inline: auto;
  padding: 2.6rem 1.5rem 3.2rem;
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--muted-2);
}
.footer .wordmark-foot { font-size: 1rem; }
.footer-meta { margin-top: 0.5rem; }
.footer a { color: var(--muted-1); }
.footer a:hover { color: var(--ink-1); }

/* ---- entrance ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.reveal { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal:nth-child(4) { animation-delay: 0.22s; }
.reveal:nth-child(5) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
  .doc .caret { animation: none; }
  .agent-chip .pulse { animation: none; }
}

/* ---- small screens ---- */
@media (max-width: 520px) {
  /* mobile nav: wordmark + one action; hero CTA covers the rest */
  .nav nav a { display: none; }
  .nav nav a.btn-nav { display: inline-block; }
}
@media (max-width: 720px) {
  body { font-size: 1.08rem; }
  .doc { padding: 1.6rem 1.4rem 2rem; min-height: 21rem; font-size: 0.95rem; }
  .feature-grid { grid-template-columns: 1fr; gap: 1.7rem; }
  .stack-arrow { transform: rotate(90deg); }
  .download-card { padding: 2.2rem 1.6rem; }
  .nav nav { gap: 1rem; }
}