/* Hallmark · shape: Bento Grid · genre: modern-minimal · theme: Console (deal 2/3, seed kestrel-free-open-source-desktop-27c2·6c550d5c·2026-10-28·r0) · redesign: full · draw: 069274
 * hero: Counter · nav: edge-aligned · footer: letter close · imagery: screenshots 4 (the product, docs/images) · signature: the agent asking before it runs npm test, on the first screen · console: graphite
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, the trail is a sequence by nature; set as the theme's audit trail on a spine, not as numbered steps */
/* Hallmark · waive 77 · #code-signing holds two paragraphs of policy text · the signing and privacy statement stays verbatim, so it stays short and plain */
/* Hallmark · reworded "Let coding agents write code without letting them run your machine." to "Let agents code, not run your machine." · 58 names the 11-word hero head */
/* Hallmark · reworded "How an agent's change reaches your code" to "How an agent’s change reaches your code" · F1 typographic apostrophe */
/* Hallmark · reworded "Download v0.9.0 · 121 MB" to "Download 0.9.0 (121 MB)" · 63 names the middle-dot meta string; the sizes still come from the release */
/* Hallmark · swap · the close shows no last screen: a redesign adds no picture the page did not have */
@import url('./tokens.css');
@import url('./base.css');

/* Self-hosted (no requests to other servers), SIL Open Font License, see fonts/. */
@font-face {
  font-family: 'Host Grotesk';
  src: url('fonts/host-grotesk-latin-wght.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('fonts/atkinson-hyperlegible-mono-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  color: var(--color-muted);
  font-size: 1.0625rem;
}

h1,
h2,
h3 {
  color: var(--color-ink);
}

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule-2);
  transition:
    color var(--dur-short) var(--ease-out),
    text-decoration-color var(--dur-short) var(--ease-out);
}

a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

a:active {
  color: var(--color-accent);
}

strong {
  color: var(--color-ink);
  font-weight: 500;
}

code {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 4px;
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-family: var(--font-outlier);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}

.visually-hidden:not(:focus) {
  position: absolute;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: calc(-1 * var(--space-3xl));
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.skip:focus {
  top: var(--space-md);
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font: 500 var(--text-md) / 1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn:hover {
  border-color: var(--color-ink-2);
  background: var(--color-rule);
  color: var(--color-ink);
}

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

.btn--primary,
.downloads li.detected .btn {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover,
.downloads li.detected .btn:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-accent-ink);
}

.text-link {
  font-weight: 500;
  text-underline-offset: 0.25em;
}

/* ---------- Navigation ---------- */

.nav {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.nav .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}

.nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  font-size: var(--text-sm);
}

.nav nav a {
  color: var(--color-muted);
  text-decoration: none;
}

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

/* ---------- Hero (Counter: the download beside the screen at work) ---------- */

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
  min-height: calc(100dvh - 65px);
  padding-block: var(--space-2xl);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.eyebrow:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.hero .lead {
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
}

.fineprint {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

/* Screenshots of the real app: shown as captured, never toned like photographs. */
.shot {
  margin: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 10;
}

.shot[data-kind='product'] {
  background: var(--color-paper-3);
}

.shot[data-kind='product'] > img {
  filter: none;
  mix-blend-mode: normal;
}

.shot[data-kind='product']::before {
  content: none;
}

.hero .shot {
  aspect-ratio: 1 / 1;
  max-height: 560px;
  width: 100%;
}

.hero .shot > img {
  object-position: 100% 70%;
}

.caption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

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

.section {
  padding-block: var(--section-gap-s);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.section--gap {
  padding-block: var(--section-gap);
}

.head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-md) var(--space-2xl);
  align-items: end;
  margin-bottom: var(--space-2xl);
}

.head .lead {
  color: var(--color-ink-2);
}

.trail {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  border-left: var(--rule-hair) solid var(--color-rule-2);
}

.trail li {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-lg);
}

.trail li:last-child {
  padding-bottom: 0;
}

.trail li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-cool);
}

.trail li.you::before {
  background: var(--color-accent);
}

.trail p {
  margin-top: var(--space-2xs);
}

/* Tour: the screenshot stays pinned while the steps scroll past; the active
   step's part of the app is framed and zoomed (site/tour.js sets the values). */
.tour {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(17rem, 2fr);
  gap: var(--space-2xl);
  align-items: start;
}

.tour .lead {
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
}

.tour-stage {
  position: sticky;
  top: max(var(--space-lg), calc(50dvh - 19rem));
  margin: 0;
}

.tour-view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  /* As wide as the column, but never taller than the window. */
  width: min(100%, calc((100dvh - 2 * var(--space-2xl)) * 1.6));
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
}

.tour-layer {
  --s: 1;
  --x: 0%;
  --y: 0%;
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: translate(var(--x), var(--y)) scale(var(--s));
  transition: transform var(--dur-long) var(--ease-in-out);
}

.tour-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur-short) var(--ease-out);
}

.tour-img[data-img='agent'] {
  opacity: 0;
}

.tour[data-img='agent'] .tour-img[data-img='agent'] {
  opacity: 1;
}

.tour-mark {
  position: absolute;
  left: var(--ml, 0%);
  top: var(--mt, 0%);
  width: var(--mw, 100%);
  height: var(--mh, 100%);
  border-radius: calc(var(--radius-card) / var(--s));
  outline: calc(var(--rule-hair) * 2 / var(--s)) solid var(--color-accent);
  box-shadow: 0 0 0 200vmax color-mix(in oklab, var(--color-paper) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    left var(--dur-long) var(--ease-in-out),
    top var(--dur-long) var(--ease-in-out),
    width var(--dur-long) var(--ease-in-out),
    height var(--dur-long) var(--ease-in-out),
    opacity var(--dur-short) var(--ease-out);
}

.tour:not([data-step='0']) .tour-mark {
  opacity: 1;
}

.tour .trail li {
  padding-bottom: 30dvh;
}

/* Room below the last step, so the stage stays pinned while it is read. */
.tour .trail li:last-child {
  padding-bottom: 26dvh;
}

.tour.is-live .trail li h3,
.tour.is-live .trail li p {
  transition: color var(--dur-short) var(--ease-out);
}

.tour.is-live .trail li:not(.is-active) h3,
.tour.is-live .trail li:not(.is-active) p {
  color: var(--color-muted);
}

.tour.is-live .trail li.is-active p {
  color: var(--color-ink-2);
}

/* Without the pinned stage (phones, reduced motion): each step shows its own crop. */
.tour-crop {
  display: none;
}

@media (max-width: 60rem), (prefers-reduced-motion: reduce) {
  .tour {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-stage {
    display: none;
  }

  .tour .trail li {
    padding-bottom: var(--space-xl);
  }

  .tour .trail li:last-child {
    padding-bottom: 0;
  }

  .tour-crop {
    display: block;
    margin-bottom: var(--space-sm);
    aspect-ratio: calc(var(--cw) * 16) / calc(var(--ch) * 10);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-card);
    background-color: var(--color-paper-3);
    background-repeat: no-repeat;
    background-size: calc(100% * 100 / var(--cw)) auto;
    background-position: calc(var(--cl) / (100 - var(--cw)) * 100%)
      calc(var(--ct) / (100 - var(--ch)) * 100%);
  }

  .tour li[data-img='agent'] .tour-crop {
    background-image: url('images/agent.png');
  }

  .tour li[data-img='review'] .tour-crop {
    background-image: url('images/review.png');
  }
}

/* Table: what you bring and what it becomes */
.byo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.byo th,
.byo td {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

.byo thead th {
  padding-block: var(--space-sm);
  border-top: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.byo tbody th {
  width: 42%;
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.byo tbody tr:last-child > * {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* Bento: panels cut from one surface */
.panels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--rule-hair);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-rule);
  color: var(--color-muted);
  overflow: hidden;
}

.panels > * {
  background: var(--color-paper-2);
  color: var(--color-muted);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
}

.tile--shot {
  padding-bottom: 0;
}

.tile--shot .shot {
  margin-top: auto;
  border-bottom: 0;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  aspect-ratio: 16 / 9;
}

.span-7 {
  grid-column: span 7;
}

.span-5 {
  grid-column: span 5;
}

.span-4 {
  grid-column: span 4;
}

.ways {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ways .text-link {
  margin-top: auto;
  padding-top: var(--space-sm);
}

.tile--quiet {
  justify-content: center;
  background: var(--color-paper);
}

.tile--quiet p + p {
  margin-top: var(--space-xs);
}

/* The short: text beside a phone-format video */
.short {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}

.short .lead {
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

.short-video {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(80dvh, 760px);
  aspect-ratio: 9 / 16;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
}

/* Rows: what Hoverwing will not do */
.rows-wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
}

.facts {
  margin: 0;
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-md) var(--space-xl);
  padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.facts > div:last-child {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.facts dt {
  color: var(--color-ink);
  font-size: var(--text-title);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.facts dd {
  margin: 0;
}

/* Band: the download */
.band {
  background: var(--color-paper-3);
  color: var(--color-muted);
}

.downloads {
  margin: 0;
  padding: 0;
  list-style: none;
}

.downloads.panels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.downloads li {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
}

.downloads p {
  font-size: var(--text-sm);
}

.downloads .btn {
  margin-top: auto;
  align-self: flex-start;
}

.downloads li > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.downloads li.detected h3::after {
  content: 'Your system';
  display: inline-block;
  margin-left: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: 4px;
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: middle;
}

.downloads .note {
  color: var(--color-accent);
}

.more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.policy .rows-wrap p + p {
  margin-top: var(--space-md);
}

/* ---------- Footer (a letter close) ---------- */

.footer {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
}

.footer .closing {
  max-width: 30ch;
  margin-bottom: var(--space-xl);
  color: var(--color-ink);
  font-size: var(--text-title);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.footer p + p {
  margin-top: var(--space-sm);
}

.footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Website privacy page ---------- */

.prose {
  max-width: 760px;
  padding-block: var(--space-2xl);
}

.prose h1 {
  font-size: var(--text-section);
}

.prose h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: var(--text-title);
}

.prose p,
.prose ul {
  margin-block: 0 var(--space-md);
}

.prose .muted {
  color: var(--color-muted);
}

/* ---------- Small screens ---------- */

@media (max-width: 60rem) {
  .hero .container,
  .head,
  .rows-wrap,
  .facts > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .container {
    min-height: 0;
    gap: var(--space-xl);
  }

  .rows-wrap {
    gap: var(--space-xl);
  }

  .short {
    grid-template-columns: minmax(0, 1fr);
  }

  .span-7,
  .span-5,
  .span-4 {
    grid-column: 1 / -1;
  }

  .downloads.panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .byo thead {
    display: none;
  }

  .byo tr,
  .byo th,
  .byo td {
    display: block;
    width: auto;
  }

  .byo tbody th {
    width: auto;
    padding-bottom: var(--space-2xs);
  }

  .byo td {
    padding-top: 0;
    border-top: 0;
  }

  .byo tbody tr:last-child > * {
    border-bottom: 0;
  }
}

@media (max-width: 40rem) {
  .nav .nav-wide {
    display: none;
  }

  .tile,
  .downloads li {
    padding: var(--space-lg);
  }
}