/* Rove — product page.
   Loaded after base.css, which owns tokens, buttons, badges, and the eyebrow,
   lede and footer the docs page shares. */

body { line-height: 1.6; }

/* Nav --------------------------------------------------------------------- */


/* Hero -------------------------------------------------------------------- */

.hero {
  max-width: 940px;
  margin: 0 auto;
  padding: 72px 28px 56px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(27px, 4.4vw, 44px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.022em;
  max-width: 24ch;
}

.hero h1 em { font-style: normal; color: var(--accent); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

/* Sections ---------------------------------------------------------------- */

main { max-width: 940px; margin: 0 auto; padding: 0 28px; }

.section {
  padding: 46px 0;
  border-top: 1px solid var(--border);
}

.section > h2 {
  margin: 0 0 22px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.prose { max-width: 66ch; }
.prose p { margin: 0 0 14px; color: var(--text-muted); font-size: 15.5px; }
.prose p:last-child { margin-bottom: 0; }

.note {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--border-strong);
  max-width: 66ch;
  font-size: 14px;
  color: var(--text-faint);
}

.note em { color: var(--text-muted); font-style: italic; }

/* Cards ------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.card h3 { margin: 0; font-size: 16px; font-weight: 600; }

.card-role {
  margin: 3px 0 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.card p:last-child { margin: 0; color: var(--text-muted); font-size: 14.5px; }

/* A highlight on hover: the accent edge and a slight lift. Kept gentle, since
   the cards aren't links and shouldn't promise a click. */
.card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px -10px var(--accent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Capabilities: the same cards, label first, so the three scan as a row of
   claims before the reader gets to the demo that shows them. */
.capabilities .card-role { margin: 0 0 6px; }
.capabilities .card h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -0.01em; }

/* Ticks ------------------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.ticks li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text);
}

.ticks li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
}

/* Hero, split ------------------------------------------------------------- */

/* Two columns once there is room for the record to sit beside the pitch, one
   below the other when there is not. The record is not decoration: visitors
   decide in seconds, and seeing the product decides it. */
.hero-split {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.hero-split .hero-actions { margin-top: 26px; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
}

/* Versus ------------------------------------------------------------------ */

/* The hero's right column: one prompt, two outcomes, in the demo's terminal
   pane. Without script both outcomes show, each labelled; with it, a toggle
   picks one and the labels go. min-width:0 lets the grid column shrink instead
   of a long line widening the page. */
.versus { margin: 0; min-width: 0; display: grid; gap: 10px; }
.versus .demo-pane { box-shadow: 0 14px 34px -24px var(--text); }

.versus-toggle {
  justify-self: start;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
}
.versus-toggle button {
  padding: 6px 14px;
  border: 0;
  border-radius: 100px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.versus-toggle button:hover { color: var(--text); }
.versus-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.versus-toggle button[data-show="without"][aria-pressed="true"] { background: var(--text-muted); color: var(--surface); }

.versus-case { display: grid; gap: 7px; }
.versus-case > p { margin: 0; }
.versus-label {
  margin-top: 6px !important;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.versus[data-mode] .versus-label { display: none; }
/* Enhanced, both outcomes share one grid cell and only the chosen one is
   visible, so the pane keeps the taller one's height: switching never moves
   the pane, the hero beside it, or anything below. */
.versus[data-mode] .versus-cases { display: grid; }
.versus[data-mode] .versus-case { grid-area: 1 / 1; visibility: hidden; }
/* The timing note is true only once Alice's work survived, so it rides in
   the shared bar and appears only in "with". display rather than opacity,
   so a screen reader is not told about a day that did not happen. */
.demo-when { display: none; }
.versus[data-mode="with"] .demo-when { display: inline; }
.demo-when strong { color: var(--text); font-weight: 600; }

.versus[data-mode="with"] [data-only="with"],
.versus[data-mode="without"] [data-only="without"] { visibility: visible; }
/* The chosen outcome plays in, line by line, each time it is picked. */
.versus .versus-case.is-playing > p { animation: demo-in 0.35s ease-out both; }
.versus .versus-case.is-playing > p:nth-child(3) { animation-delay: 0.2s; }
.versus .versus-case.is-playing > p:nth-child(4) { animation-delay: 0.4s; }
.versus .versus-case.is-playing > p:nth-child(5) { animation-delay: 0.6s; }

.versus-verdict {
  margin-top: 4px !important;
  padding-top: 8px;
  border-top: 1px dashed var(--border-strong);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}
[data-only="without"] .versus-verdict { color: var(--danger); }

.versus-foot { margin: 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .versus .versus-case.is-playing > p { animation: none; }
}

/* Demo -------------------------------------------------------------------- */

/* A scripted walkthrough: a terminal on the left, the console on the right.
   Without script every step shows, stacked; landing.js adds .is-enhanced and shows
   one at a time. Colours come from the theme tokens, so it follows light/dark. */

.demo-lede { margin: -10px 0 20px; color: var(--text-muted); font-size: 15.5px; }

.demo:focus { outline: none; }

.demo-tabs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: none;
  gap: 8px;
  flex-wrap: wrap;
}
.demo.is-enhanced .demo-tabs { display: flex; }

.demo-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.demo-tab span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 100px;
  background: var(--surface-sunken);
  font: 600 11px/1 var(--mono);
}
.demo-tab:hover { color: var(--text); border-color: var(--border-strong); }
.demo-tab[aria-current="step"] { color: var(--text); border-color: var(--accent); }
.demo-tab[aria-current="step"] span,
.demo-tab[data-done="true"] span { background: var(--accent); color: var(--accent-text); }

.demo-step {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
/* Enhanced, every step shares one grid cell and only the current one is
   visible: the stage takes the tallest step's height, so moving between steps
   never moves the controls below. visibility (not display) keeps that height,
   and still takes hidden steps out of the accessibility tree. */
.demo.is-enhanced .demo-stage { display: grid; }
.demo.is-enhanced .demo-step { grid-area: 1 / 1; margin-bottom: 0; visibility: hidden; }
.demo.is-enhanced .demo-step.is-current { visibility: visible; }
/* Each step also fills that cell: the panes take the spare height and the
   caption has a fixed two-line slot, so the terminal and console boxes are the
   same size on every step, not just the stage around them. */
.demo.is-enhanced .demo-step { grid-template-rows: 1fr auto; }
.demo.is-enhanced .demo-caption { min-height: 3.2em; min-height: 2lh; }

.demo-pane {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}
/* Three window dots, drawn by one element so the markup stays quiet. */
.dots {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--border-strong);
  box-shadow: 13px 0 0 var(--border-strong), 26px 0 0 var(--border-strong);
  margin-right: 26px;
}

.demo-lines { padding: 12px 14px 14px; display: grid; gap: 7px; align-content: start; }
.demo-lines p { margin: 0; }

.demo-term .demo-lines { font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.demo-term { background: var(--surface-sunken); }
.demo-term .demo-bar { background: var(--surface); }
.t-cmd::before { content: "$ "; color: var(--text-faint); }
.t-you::before { content: "> "; color: var(--accent); font-weight: 600; }
.t-you { color: var(--text); font-weight: 600; }
.t-out { color: var(--text-muted); padding-left: 1.2em; }
.t-tool { color: var(--accent); padding-left: 1.2em; }
.t-tool::before { content: "● "; }
.t-ok { color: var(--text); padding-left: 1.2em; }
.t-ok::before { content: "✓ "; color: var(--accent); }
.t-cmd, .t-out, .t-tool, .t-ok { overflow-wrap: anywhere; }

.demo-app .demo-lines { font-size: 13.5px; line-height: 1.5; }
.a-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.a-muted { color: var(--text-faint); font-size: 12px; }

.t-chat {
  margin-top: 6px !important;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  font-size: 12.5px;
  color: var(--text);
}
.t-chat strong { margin-right: 6px; color: var(--accent); }

.a-empty { color: var(--text-faint); font-size: 13px; font-style: italic; }
/* A Session on the Topic's timeline, as the console shows it. */
.a-session {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.a-session.is-open, .a-session.is-new { border-left-color: var(--accent); }
.a-session p { margin: 0; }
.a-title { color: var(--text); font-weight: 600; font-size: 13.5px; }
.a-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
}
.a-session dl {
  display: grid;
  grid-template-columns: 9ch 1fr;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: 12.5px;
}
.a-session dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.a-session dd { margin: 0; color: var(--text-muted); }

.demo-caption {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}
/* Same size as every other caption, so the last step doesn't change the
   layout; colour and weight carry the emphasis. */
.demo-punch { font-weight: 600; color: var(--accent); }

.demo-controls { display: none; align-items: center; gap: 12px; margin-top: 16px; }
.demo.is-enhanced .demo-controls { display: flex; }
.demo-count { font-family: var(--mono); font-size: 12px; color: var(--text-faint); min-width: 4ch; }
/* "Next" becomes "Replay" on the last step; a fixed width keeps it still. */
[data-demo-next] { min-width: 6.5em; }

/* Lines arrive in order, like the session happening. Delays come from position,
   not inline styles, which the CSP forbids. */
@keyframes demo-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.demo.is-enhanced .demo-step.is-playing .demo-lines > *,
.demo.is-enhanced .demo-step.is-playing .demo-caption {
  animation: demo-in 0.35s ease-out both;
}
.demo-step.is-playing .demo-term .demo-lines > *:nth-child(2) { animation-delay: 0.25s; }
.demo-step.is-playing .demo-term .demo-lines > *:nth-child(3) { animation-delay: 0.5s; }
.demo-step.is-playing .demo-term .demo-lines > *:nth-child(4) { animation-delay: 0.75s; }
.demo-step.is-playing .demo-term .demo-lines > *:nth-child(5) { animation-delay: 1s; }
.demo-step.is-playing .demo-term .demo-lines > *:nth-child(6) { animation-delay: 1.25s; }
.demo-step.is-playing .demo-term .demo-lines > *:nth-child(7) { animation-delay: 1.5s; }
/* The console updates once the agent has done its part. */
.demo-step.is-playing .demo-app .demo-lines > * { animation-delay: 1.2s; }
.demo-step.is-playing .demo-app .demo-lines > *:nth-child(n + 3) { animation-delay: 1.4s; }
.demo-step.is-playing .demo-caption { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .demo.is-enhanced .demo-step.is-playing .demo-lines > *,
  .demo.is-enhanced .demo-step.is-playing .demo-caption { animation: none; }
}

@media (max-width: 760px) {
  .demo-step { grid-template-columns: 1fr; }
  /* Stacked, the two panes share the spare height equally. */
  .demo.is-enhanced .demo-step { grid-template-rows: 1fr 1fr auto; }
  .a-session dl { grid-template-columns: 1fr; gap: 0; }
}

/* The bar ----------------------------------------------------------------- */

/* Reuses .ticks, but these items are sentences rather than labels, so they need
   room to breathe and a readable measure. */
.bar-list { margin-top: 20px; max-width: 72ch; gap: 12px; }
.bar-list li { line-height: 1.55; color: var(--text-muted); }
.bar-list strong { color: var(--text); font-weight: 600; }

.bar-list code {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

/* Fact sheet -------------------------------------------------------------- */

/* A sample of the console's standing view. Deliberately not a screenshot: a
   screenshot goes stale the first time the console changes, and cannot be read
   by anyone using a screen reader. */
.factsheet {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 72ch;
}

.factsheet-head {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.factsheet-head span { color: var(--text); }

.factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.factlist li {
  display: grid;
  /* The verb column is sized to the longest verb, so the statements line up into
     a single edge the eye can run down. */
  grid-template-columns: 11ch 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.5;
}

.verb {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  /* Wraps rather than overflowing its column when the face is wide. */
  overflow-wrap: anywhere;
}

.factsheet-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-faint);
}

@media (max-width: 560px) {
  /* Two columns stop working once the statement has four words per line. */
  .factlist li { grid-template-columns: 1fr; gap: 3px; }
}

/* Quote ------------------------------------------------------------------- */

.section-quote { padding-bottom: 56px; }

.section-quote blockquote em { font-style: normal; color: var(--accent); }

.section-quote blockquote {
  margin: 0 0 26px;
  max-width: 54ch;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Contact ----------------------------------------------------------------- */

.contact {
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: 66ch;
}
.contact h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.contact p { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; }
.contact-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contact-address { display: inline-flex; align-items: center; gap: 8px; }
/* "Copy" becomes "Copied" or "Copy failed"; a fixed width keeps it still. */
.contact-address [data-copy] { min-width: 7.5em; }
.contact-address code {
  font-family: var(--mono);
  font-size: 13px;
  user-select: all;
  color: var(--text);
}

/* Narrow ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .hero { padding: 48px 16px 40px; }
  main { padding: 0 16px; }
  .hero-actions .btn { flex: 1; text-align: center; }
}