/* JetBrains Mono — one variable file per subset, weights 400 700. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — one variable file per subset, weights 300 700. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Palette. Every value below is one the page actually paints.
   ------------------------------------------------------------------ */

:root {
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;

  /* field */
  --bg: #0A1929;
  --bg-deep: #060F1C;
  --bg-panel: #0D1F33;
  --bg-raise: #0F2438;
  --bg-active: #132C46;
  --bg-wash: rgba(31, 64, 104, .14);
  --bg-select: rgba(31, 127, 204, .16);

  /* hairlines */
  --line: #16304A;
  --line-mid: #1F4068;
  --line-strong: #2C5688;

  /* text, brightest to faintest */
  --text: #EAF2FA;
  --text-body: #D6E4F0;
  --text-muted: #A9C4DC;
  --text-dim: #8AA9C8;
  --text-quiet: #6E9BC7;
  --text-faint: #4377AB;

  /* the one blue */
  --blue: #1F7FCC;
  --blue-bright: #6BB6FF;
  --blue-pale: #CFE8FF;

  /* signal */
  --green: #4E9B6B;
  --green-soft: #7AB891;
  --red: #D14545;
  --red-soft: #E07474;
  --amber: #E5A13C;
  --amber-line: rgba(229, 161, 60, .55);
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--line-mid); color: var(--text); }

@keyframes kz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@keyframes kz-caret {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

.sprite { display: none; }

.mono { font-family: var(--mono); }
.hi { color: var(--text); }

/* Read aloud, never drawn. Absolute, so a flex or grid parent skips it. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Section gutter. Vertical rhythm is set per section. */
.hero,
.statement,
.features,
.deep-section,
.steps,
.price,
.facts {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  color: var(--text-dim);
}
.eyebrow--spaced { padding-bottom: 20px; }

/* The wordmark, at its three sizes. */
.mark { display: block; flex: none; }
.mark--nav { width: 19px; height: 18.5px; margin-right: -4px; }
.mark--hero { width: 56px; height: 55px; }
.mark--foot { width: 15px; height: 14.6px; margin-right: -4px; }

/* ------------------------------------------------------------------
   Site header
   ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 25, 41, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wordmark {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}

/* Body hides horizontal overflow, so below the 345px three items need, the
   Download button would be cut off rather than reachable. Wrapping drops it to
   a second row instead. Nothing moves at 360px and up. */
.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.site-nav__link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

.btn {
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
}

.btn--ghost {
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-raise);
  color: var(--blue-pale);
}
.btn--ghost:hover { background: var(--line); color: var(--text); }

.btn--primary {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  background: var(--blue);
  font-weight: 500;
  color: var(--text);
}
.btn--primary:hover { background: var(--line-strong); }

/* The free tier's button. Same size and weight as the primary one beside it,
   without the fill: the two tiers are one choice, so the free one must not
   read as a lesser button, and the money button stays the loud one. */
.btn--outline {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  background: var(--bg-raise);
  font-weight: 500;
  color: var(--blue-pale);
}
.btn--outline:hover { background: var(--line); color: var(--text); }

.link-mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--blue-bright);
}

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

.hero { padding-top: 88px; }

.hero__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.hero__title {
  margin: 0;
  font-size: clamp(30px, 5.2vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: pretty;
}

.hero__lede {
  margin: 0;
  max-width: 600px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.hero__actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Directly under the download button, so visitors know they can start without
   paying or creating an account. */
.hero__free {
  margin: -10px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
}

/* The other platforms sit under the primary button, not beside it: three
   download buttons in a row read as three equal choices. */
.hero__alt {
  margin: -10px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}
.hero__alt a {
  color: var(--blue-bright);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
}
.hero__alt a:hover { text-decoration-color: currentColor; }

/* The seven builds in #download, one row per platform. The hero line above
   carries the x86_64 four and points here; this block is where a visitor on
   arm64 hardware corrects the button. Same mono ramp as .hero__alt, because it
   is the same kind of line, only wrapped onto four of them.

   Why these are hrefs rather than URLs a script builds from latest.json is in
   index.html, above the block. */
.builds__lead {
  margin: -10px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
}

.builds {
  margin: -8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* The platform column is fixed so the architectures line up down the block and
   read as a column of choices. Narrower than that and the row wraps, which is
   the right answer on a phone. */
.builds__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
}
.builds__os {
  flex: none;
  min-width: 132px;
  color: var(--text-muted);
}
.builds__arch a {
  color: var(--blue-bright);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
}
.builds__arch a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------
   App screenshot: window frame and toolbar
   ------------------------------------------------------------------ */

/* Wider than the prose sections: the window it draws is 1680px in the app, and
   the review pane needs room to read as one. */
.shot {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px 0;
}

.app {
  background: var(--bg);
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  overflow: hidden;
}

.app__titlebar {
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line-mid);
}

.traffic { flex: none; display: flex; gap: 7px; }

.traffic__light {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.traffic__light--close { background: #FF5F57; }
.traffic__light--min { background: #FEBC2E; }
.traffic__light--zoom { background: #28C840; }

.app__title {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.app__titlebar-pad { width: 60px; flex: none; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

/* Above the split, so it spans the window: the project it names is what both
   panes are showing. */
.proj-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 8px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line-mid);
}

.proj-tab {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 10px;
  border-bottom: 2px solid transparent;
}
.proj-tab__name { padding: 7px 0; font-size: 12px; color: var(--text-dim); }
.proj-tab--on { background: var(--bg-select); border-bottom-color: var(--blue); }
.proj-tab--on .proj-tab__name { font-weight: 500; color: var(--text); }

.proj-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-quiet);
}

.proj-tab__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  align-self: center;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
}

/* The second filter. What it matches on is not a list the board can offer, so
   it is neither pills nor a menu. */
.search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-raise);
}
.search__glyph { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.search__field { width: 96px; font-size: 11px; color: var(--text-quiet); }
.search__key { font-family: var(--mono); font-size: 9px; color: var(--text-faint); }

.repo-chips { flex: none; display: flex; align-items: center; gap: 5px; }

.repo-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-select);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--blue-pale);
}
.repo-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
}
.repo-chip__count { color: var(--text-quiet); }

/* Takes the free space, and keeps an 18px floor once the toolbar overflows. */
.toolbar__live {
  flex: 1 0 auto;
  padding-right: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-quiet);
}

.btn-new {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--blue);
  font-size: 10.5px;
  font-weight: 500;
  color: #FFF;
}
.btn-new__key { font-family: var(--mono); font-size: 9px; opacity: .7; }

/* ------------------------------------------------------------------
   Board
   ------------------------------------------------------------------ */

.app__body { display: flex; flex-wrap: wrap; align-items: stretch; }

/* 828px is what the six columns take when there is room, and the first thing to
   give when there is not — the way the app's board pane behaves. */
.board {
  flex: 0 1 828px;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

/* Once the pane wraps under the board, the board takes the whole row: 828px in a
   wider one would leave a gap where the pane used to be. */
@media (max-width: 1209px) {
  .board { flex-basis: 100%; }
}

/* Collapsed columns, turned on their side. */
.rail {
  flex: none;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  border-right: 1px solid var(--line);
}
.rail--empty { gap: 0; background: var(--bg-wash); }
.rail--last { border-right: 0; }

.rail__label {
  writing-mode: vertical-rl;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.rail__label--dim { margin-bottom: 0; color: var(--text-faint); }

.rail__stub {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: var(--bg-raise);
  border: 1px solid var(--line-mid);
}

.column {
  flex: none;
  width: 214px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
}
.column--approved { width: 268px; background: var(--bg-wash); }

.column__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px 3px;
}
.column__name {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.column__name--active { color: var(--blue-pale); }
.column__count { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }

/* ------------------------------------------------------------------
   Task cards
   ------------------------------------------------------------------ */

.task-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px;
  background: var(--bg-raise);
  border: 1px solid var(--line-mid);
  border-radius: 5px;
}
.task-card--waiting { border-left: 2px solid var(--amber); }
.task-card--working {
  background: var(--bg-active);
  border-color: var(--line-strong);
  border-left: 2px solid var(--blue);
}
.task-card--idle { border-left: 2px solid var(--text-faint); }
.task-card--ready { border-color: var(--line-strong); }
.task-card--queue {
  gap: 7px;
  padding: 9px 10px;
  border-color: var(--amber-line);
}

.task-card__title {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text);
  text-wrap: pretty;
}
.task-card__title--muted { color: var(--text-muted); }

.task-card__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--text-quiet);
}
.task-card__meta--agent { color: var(--green); }

.task-card__note {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  text-wrap: pretty;
}

.tags { display: flex; flex-wrap: wrap; gap: 4px; }

.tag {
  padding: 1.5px 5px;
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--text-dim);
}

/* A repo badge in shape, brighter in weight: the repo says where the work runs,
   the ticket says what it answers to. */
.tag--ticket {
  border-color: var(--line-strong);
  background: var(--bg-select);
  color: var(--blue-pale);
}

.chips { display: flex; flex-wrap: wrap; gap: 4px; }

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1.5px 6px;
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.chip__dot { width: 5px; height: 5px; border-radius: 50%; }
.chip--landed { color: var(--green); }
.chip--landed .chip__dot { background: var(--green); }
.chip--running {
  border-color: var(--line-strong);
  background: var(--bg-select);
  color: var(--blue-pale);
}
.chip--running .chip__dot { background: var(--blue-bright); animation: kz-pulse 1.4s ease-in-out infinite; }

.badge-unread {
  align-self: flex-start;
  padding: 2px 5px;
  border: 1px solid var(--amber-line);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
}

/* A column is 214px and the clock grew with the rest of the mono ramp, so the
   row wraps rather than running past the card: the time drops under the word. */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.dot { width: 5px; height: 5px; border-radius: 50%; }
.dot--amber { background: var(--amber); }
.dot--blue { background: var(--blue-bright); }
.dot--slate { background: var(--text-quiet); }
.dot--live { animation: kz-pulse 1.4s ease-in-out infinite; }

.status__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
}
.status__label--waiting { color: var(--amber); }
.status__label--working { color: var(--blue-pale); }
.status__label--idle { color: var(--text-dim); }

.status__time { font-family: var(--mono); font-size: 10px; color: var(--text-quiet); }

.diffstat { display: flex; gap: 6px; font-family: var(--mono); font-size: 10px; }
.diffstat__add { color: var(--green); }
.diffstat__del { color: var(--red); }
.diffstat__notes { color: var(--text-quiet); }
.diffstat__notes--none { color: var(--text-faint); }

/* Wraps for the same reason the status row does: the flag says what is wrong
   with the branch, and a narrow column must not clip the half that says it. */
.flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
}

.mini-btn {
  flex: none;
  padding: 5px 8px;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-muted);
}
.mini-btn--amber { border-color: var(--amber-line); color: var(--amber); text-align: center; }
.mini-btn--grow { flex: 1; padding: 5px 7px; }
.mini-btn--block { padding: 4px 7px; }
.mini-btn--tight { padding: 2px 8px; }

/* The Approved card expands into a per-repo merge queue. */
.queue__head { display: flex; align-items: flex-start; gap: 8px; }
.queue__title { flex: 1; min-width: 0; }
.queue__caret { flex: none; font-family: var(--mono); font-size: 10px; color: var(--text-quiet); }

.queue__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

.queue__progress {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--amber);
}

.queue__repos {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}

.repo-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  background: var(--bg);
}
.repo-row__handle { font-family: var(--mono); font-size: 9px; color: var(--text-faint); }
.repo-row__name {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-body);
}
.repo-row__base { font-family: var(--mono); font-size: 9.5px; color: var(--text-quiet); }
.repo-row__state {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .05em;
}
.repo-row__state--merged { color: var(--green); }
.repo-row__state--blocked { color: var(--amber); }

.queue__note {
  margin: 0;
  padding: 0 7px;
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--text-dim);
  text-wrap: pretty;
}

.queue__actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }

/* ------------------------------------------------------------------
   Session panel
   ------------------------------------------------------------------ */

.session {
  flex: 1 1 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--line-strong);
}

.session__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-mid);
}

.session__ident {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.session__task {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-wrap: pretty;
}
.session__branch { font-family: var(--mono); font-size: 10px; color: var(--text-quiet); }
.head-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.tabs {
  flex: none;
  display: flex;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  overflow: hidden;
}
.tab { padding: 5px 11px; font-size: 11px; color: var(--text-quiet); }
.tab--on { background: var(--line-mid); color: var(--text); }

.session__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.session__cwd {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session__model {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-faint);
}

/* One control in two places: the transcript/terminal switch and the diff/file
   switch are the same segmented pair. */
.toggle {
  flex: none;
  display: flex;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  overflow: hidden;
}
.toggle__opt { padding: 2px 9px; font-size: 10px; color: var(--text-quiet); }
.toggle__opt--on { background: var(--bg-select); color: var(--text); }

.term {
  flex: 1;
  min-height: 170px;
  padding: 9px 0;
  background: var(--bg-deep);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.75;
  overflow: hidden;
}
.term__line { padding: 0 13px; }
.term__line--tool { color: var(--text-quiet); }
.term__line--out { color: var(--text-faint); }

/* The one line in a transcript the human wrote. Everything else runs full-bleed
   at the same left edge, so the block and the green down its side are what a
   scroll back lands on. */
.term__said,
.chat__said {
  margin: 0 13px 8px;
  padding: 5px 9px;
  border-left: 2px solid var(--green);
  border-radius: 0 4px 4px 0;
  background: rgba(31, 64, 104, .32);
  font-weight: 500;
  color: var(--text);
}
.term__caret,
.chat__caret { padding-right: 8px; color: var(--green); }

.term__prose {
  margin: 6px 0;
  padding: 0 13px;
  color: var(--text-body);
}

/* The call the agent is inside. The one thing a folded transcript would lose
   against a live terminal, so it is the one thing drawn as motion. */
.term__cursor {
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 6px;
  vertical-align: -1px;
  background: var(--blue-bright);
  animation: kz-caret 1s step-end infinite;
}

/* Inline runs inside terminal and diff text. */
.t-file { color: var(--blue-bright); }
.t-dim { color: var(--text-quiet); }
.t-muted { color: var(--text-muted); }
.t-arg { color: var(--text-dim); }
.t-add { color: var(--green); }
.t-del { color: var(--red); }

.prompt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-top: 1px solid var(--line-mid);
  background: var(--bg-raise);
}
.prompt__caret { font-family: var(--mono); font-size: 10.5px; color: var(--green); }
.prompt__placeholder { flex: 1; min-width: 0; font-size: 11px; color: var(--text-quiet); }
.prompt__hint {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-faint);
}

/* The prompt is a box inside the composer, not the composer's own edge: the
   two endings sit under it. */
.composer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 14px;
  border-top: 1px solid var(--line-strong);
  background: var(--bg-raise);
}
.composer .prompt {
  padding: 7px 10px;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  background: none;
}
.composer__foot { display: flex; align-items: center; gap: 8px; }
.composer__note {
  flex: 1;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

.prompt--assistant { border-top-color: var(--line); }
.prompt--assistant .prompt__caret { font-size: 11px; }
.prompt--assistant .prompt__placeholder { font-size: 11.5px; }

/* ------------------------------------------------------------------
   Project assistant
   ------------------------------------------------------------------ */

.assistant {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
  background: var(--bg-panel);
}

/* Toolbar space is tight and the controls keep arriving, so the row wraps
   rather than pushing the last of them off the panel. Each label stays whole:
   a name broken over two lines costs more room than the wrap saves. */
.assistant__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
}
.assistant__label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
}
.assistant__scope {
  padding-right: 8px;
  font-family: var(--mono);
  font-size: 9px;
  white-space: nowrap;
  color: var(--text-faint);
}
.assistant__dot { margin-left: auto; }

/* A standing yes is a thing to notice, not a thing to be congratulated on, so
   it takes the dock's amber rather than a green. */
.auto {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.auto__dot { width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentcolor; }

/* Which agent and model the assistant runs, in one chip. It sits beside Clear
   because the two are about the same thing: a picked agent reaches the
   conversation the next time one starts, and Clear is what starts one. Drawn
   with Clear's metrics rather than a form field's — the row is a toolbar. */
.agent-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
}
.agent-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
}
.agent-chip__agent { color: var(--text-muted); }
/* A model the assistant was given reads as text; one it inherited from the CLI
   reads as a note. This one was given. */
.agent-chip__model { color: var(--blue-pale); }
.agent-chip__caret { font-size: 8px; color: var(--text-quiet); }

.assistant__key { font-family: var(--mono); font-size: 9px; color: var(--text-faint); }

.assistant__log {
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
}

.chat__line { padding: 0 13px; }
.chat__line--tool { color: var(--text-body); }
.chat__line--out { color: var(--text-faint); }

.chat__prose {
  margin: 0;
  padding: 2px 13px 0;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-body);
  text-wrap: pretty;
}

/* A tool call the assistant has to ask about. */
.permission {
  margin: 9px 13px 2px;
  border: 1px solid rgba(229, 161, 60, .5);
  border-radius: 5px;
  background: rgba(229, 161, 60, .07);
  overflow: hidden;
}

.permission__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(229, 161, 60, .32);
}
.permission__icon { font-size: 10px; color: var(--amber); }
.permission__title {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--amber);
}
.permission__tool { font-family: var(--mono); font-size: 10px; }
.permission__policy {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-quiet);
}
.permission__policy--end { color: var(--text-faint); }

.permission__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
}
.permission__ask {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-body);
  text-wrap: pretty;
}
.permission__why {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}
.permission__choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.choice {
  padding: 4px 11px;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.choice--yes { border-color: rgba(78, 155, 107, .6); color: var(--green-soft); }

/* ------------------------------------------------------------------
   Statement, features, steps, facts
   ------------------------------------------------------------------ */

.statement { padding-top: 96px; }
.statement__text {
  margin: 0;
  max-width: 820px;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

.features { padding-top: 72px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 22px 24px;
  background: var(--bg-panel);
}
.feature__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.feature__text {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

.steps { padding-top: 96px; }
.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-mid);
}
.step__num { font-family: var(--mono); font-size: 10px; color: var(--text-quiet); }
.step__title { margin: 0; font-size: 16px; font-weight: 400; color: var(--text); }
.step__text {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
}

.price { padding-top: 96px; }

/* Two tiers, side by side. Free is the tier almost every visitor is on, so it
   comes first and sits on the left. The pair is one decision and is read as
   one, which is why the cards share a row until the row stops fitting. 760px
   is the measure the hero prose already uses. */
.price__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
}
@media (max-width: 720px) {
  .price__tiers { grid-template-columns: 1fr; }
}

.price__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 26px 28px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* Grid rows stretch, so the two cards are the same height while their contents
   are not. Every card ends with its button, so pinning the last one to the
   foot puts both buttons on one line instead of leaving the shorter card's
   floating in the middle of an empty box. */
.price__card > .btn:last-child { margin-top: auto; }

.price__figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
/* .price__amount and .price__term are the paid price, and check-price.py reads
   them by those exact class names. The free tier draws its figure in the same
   type under names of its own, so the check can never match on it. */
.price__amount,
.price__word {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text);
}
.price__term,
.price__unit { font-family: var(--mono); font-size: 11px; color: var(--text-quiet); }
/* Under the figure, not merely after it: it qualifies the number, and the
   paragraph below is about what the licence covers. .price__card is a flex
   column with a 16px gap, so -9px lands the line 7px under the term, in the
   term's own type. */
.price__qualifier {
  margin: -9px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-quiet);
  text-wrap: pretty;
}
.price__text {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}
/* One cap per line. A visitor comparing the tiers counts them; a sentence
   makes them read three numbers out of a paragraph to do it. */
.price__caps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-muted);
}
.price__caps li { position: relative; padding-left: 15px; }
.price__caps li::before {
  content: '';
  position: absolute;
  top: .6em;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--text-faint);
}

/* The purchase notes sit under the pair rather than inside the paid card:
   they are about the sale, not about the tier, and a card carrying them
   stands a head taller than the free one beside it. */
.price__foot {
  margin: 16px 0 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-quiet);
}

.facts { padding-top: 96px; }
.facts__list {
  margin: 0;
  padding: 14px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-muted);
}
.facts__item--dim { color: var(--text-quiet); }

@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Deep sections: the intro every one of them opens with
   ------------------------------------------------------------------ */

.deep-section {
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.deep-section__intro {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.deep-section__title {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text);
}

/* Wider type than a feature card's: a deep section carries two or three
   sentences and nothing else. */
.deep-section__text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Every mock below sits in one of these — the panel .diffview is. The inner
   holds a min-width, so a narrow screen scrolls the mock sideways instead of
   folding the screenshot it is drawing. */
.deep-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  overflow-x: auto;
}
.deep-panel__inner { display: flex; flex-direction: column; }

/* ------------------------------------------------------------------
   Review: file tree, diff, comment thread
   ------------------------------------------------------------------ */

.diffview {
  background: var(--bg-panel);
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  overflow-x: auto;
}
.diffview__inner { min-width: 860px; display: flex; flex-direction: column; }

.diffview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-mid);
}

.diffview__body { display: flex; align-items: stretch; }

.filetree {
  flex: none;
  width: 196px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--line-mid);
}

.filetree__tabs {
  display: flex;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line-mid);
}
.repo-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 6px;
  text-align: center;
  border-bottom: 2px solid transparent;
}
.repo-tab--on { background: var(--bg-select); border-bottom-color: var(--blue); }
.repo-tab__name { font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); }
.repo-tab--on .repo-tab__name { color: var(--text); }
.repo-tab__count { font-family: var(--mono); font-size: 8.5px; color: var(--text-quiet); }

.filetree__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
}
.filetree__root {
  padding: 4px 12px 6px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-faint);
}

.filter {
  display: flex;
  margin: 8px 12px 4px;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  overflow: hidden;
}
.filter__opt {
  flex: 1;
  padding: 3px 0;
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.filter__opt--on { background: var(--bg-select); color: var(--text); }

.file {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border-left: 2px solid transparent;
}
.file:hover { background: var(--bg-raise); }
.file--on { background: var(--bg-select); border-left-color: var(--blue); }
.file--on:hover { background: var(--bg-select); }
.file__name { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); }
.file--on .file__name { color: var(--text); }
/* The card's stat row idiom, one file at a time. Resolved sits beside open
   rather than in it. */
.file__marks { padding-left: 6px; font-size: 9px; }
.file__open { color: var(--amber); }
.file__done { padding-left: 5px; color: var(--green); }

.file__meta { font-family: var(--mono); font-size: 9px; color: var(--text-quiet); }

.filetree__note {
  margin: 0;
  margin-top: auto;
  padding: 9px 12px;
  border-top: 1px solid var(--line-mid);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  color: var(--text-faint);
}

.diff {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
}
.diff__file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.diff__path {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
}
.diff__repo { color: var(--text-quiet); }

.diff__hunk { font-family: var(--mono); font-size: 11px; line-height: 1.85; }
.diff__header {
  padding: 3px 13px;
  background: rgba(31, 64, 104, .25);
  color: var(--text-faint);
}
.diff__row { display: flex; padding: 0 13px; }
.diff__row--last { padding-bottom: 8px; }
.diff__row--del { background: rgba(209, 69, 69, .13); border-left: 2px solid var(--red); }
.diff__row--add { background: rgba(78, 155, 107, .13); border-left: 2px solid var(--green); }
.diff__num { width: 34px; flex: none; color: var(--text-faint); }
.diff__code { white-space: pre; color: var(--text-dim); }
.diff__row--del .diff__code { color: var(--red-soft); }
.diff__row--add .diff__code { color: var(--green-soft); }

.thread {
  margin: 7px 13px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--bg-panel);
  overflow: hidden;
}

.thread__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-mid);
  background: rgba(31, 64, 104, .35);
}
.thread__band { display: flex; align-items: center; gap: 8px; }
.thread__label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.thread__quote {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--text-quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread__resolve,
.thread__dismiss {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
}
.thread__resolve { margin-left: auto; color: var(--green); }
.thread__resolve:hover { background: rgba(78, 155, 107, .18); color: var(--green-soft); }
.thread__dismiss { color: var(--text-muted); }
.thread__dismiss:hover { background: rgba(209, 69, 69, .18); color: var(--red-soft); }

.thread__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
}
.thread__author { display: flex; align-items: center; gap: 7px; }
.avatar {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--blue);
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 500;
  color: #FFF;
}
.thread__who {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}
.thread__state { font-size: 9.5px; color: var(--text-faint); }

.thread__comment {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-body);
  text-wrap: pretty;
}
.thread__ref { font-family: var(--mono); font-size: 10.5px; color: var(--blue-bright); }

.diffview__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--line-strong);
  background: var(--bg-raise);
}
.submit__summary { display: flex; flex-direction: column; gap: 2px; }
.submit__count { font-size: 11.5px; font-weight: 500; color: var(--text); }
.submit__detail { font-family: var(--mono); font-size: 9.5px; color: var(--text-quiet); }
.submit__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.walk {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 2px 4px;
}
.walk__step { padding: 0 4px; font-size: 12px; color: var(--text-quiet); }
.walk__at { font-family: var(--mono); font-size: 9.5px; color: var(--text-quiet); }

.btn-flat {
  padding: 7px 12px;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.btn-flat--primary {
  padding: 7px 14px;
  border: 0;
  background: var(--blue);
  font-weight: 500;
  color: #FFF;
}

/* ------------------------------------------------------------------
   Project assistant: the dock on its own
   ------------------------------------------------------------------ */

/* The dock, lifted out of the window frame. In the app it draws the edge
   between itself and the panes above it; here the panel draws that edge. */
.assistant--alone {
  min-width: 620px;
  border-top: 0;
}

/* ------------------------------------------------------------------
   Actions: the configuration sheet, and where the buttons land
   ------------------------------------------------------------------ */

.actions-mock { min-width: 920px; }

.actions-mock__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-mid);
}
.actions-mock__title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.actions-mock__body { display: flex; align-items: stretch; }

.cfg {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px 14px;
  background: var(--bg);
}

.action-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: var(--bg-raise);
  border: 1px solid var(--line-mid);
  border-radius: 4px;
}
/* The open row and its toggles are one block, so the row loses the edge they
   share. */
.action-row--on {
  background: var(--bg-active);
  border-color: var(--line-strong);
  border-radius: 4px 4px 0 0;
}

.action-row__line { display: flex; align-items: center; gap: 9px; }
.action-row__name { flex: none; font-size: 11.5px; color: var(--text); }

/* The kind is the whole of what the button does, so it is drawn as a kind and
   not as a word in the line. */
.action-row__kind {
  flex: none;
  padding: 1.5px 6px;
  border: 1px solid var(--line-mid);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.action-row__kind--merge { border-color: rgba(78, 155, 107, .5); color: var(--green-soft); }
.action-row__kind--command { border-color: var(--line-strong); color: var(--blue-pale); }
.action-row__kind--prompt { border-color: var(--amber-line); color: var(--amber); }

.action-row__detail {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-row__note {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}

.where {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: -7px;
  padding: 9px 10px 10px;
  background: var(--bg-wash);
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.where__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
/* Eight options where the pair usually holds two, so it wraps rather than
   running past the sheet. */
.toggle--where { align-self: flex-start; flex-wrap: wrap; }
.where__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
  color: var(--text-faint);
  text-wrap: pretty;
}

.actions-mock__aside {
  flex: none;
  width: 268px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 14px;
  border-left: 1px solid var(--line-mid);
}
.actions-mock__label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* The board's own button row, which leads with New task whether or not the
   project has an action of its own. */
.proj-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: var(--bg-raise);
  border: 1px solid var(--line-mid);
  border-radius: 4px;
}
.actions-mock__note {
  margin: auto 0 0;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
  color: var(--text-faint);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Columns: the board strip a project names its own stages in
   ------------------------------------------------------------------ */

.board-strip { flex-direction: row; min-width: 1020px; }
/* Five columns and no rail, so they share the panel rather than leaving a
   strip of it empty. Below 1020px they hold their width and the panel scrolls,
   the way the app's board pane does. */
.board-strip .column { flex: 1 0 204px; width: auto; }
.board-strip .column:last-child { border-right: 0; }

/* What a column does on arrival, under its name. The board itself does not
   warn about it — the Columns tab is the one place that names the rule — so
   this line is the tab's sentence, said here. */
.column__note {
  margin: -3px 3px 2px;
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}

/* Time in the column, drawn louder the longer it reads. A card three days on a
   test branch is one somebody forgot, and it must not look like one deployed an
   hour ago. */
.task-card__meta--age { color: var(--text-faint); }
.task-card__meta--aged { color: var(--amber); }

/* ------------------------------------------------------------------
   Site footer
   ------------------------------------------------------------------ */

.site-footer {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 20px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.site-footer__copy { font-family: var(--mono); font-size: 11px; color: var(--text-quiet); }
.site-footer__nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer__nav a { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.site-footer__identity {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-quiet);
}
.site-footer__identity a { color: var(--text-quiet); text-decoration: underline; }

.site-footer__nav { flex-wrap: wrap; }
/* Under the download button, not beside it. .hero__inner is a flex column with
   an 18px gap, so -8px lands the line 10px below the button it belongs to. */
.legal-action-links {
  margin: -8px 0 0;
  font-size: 12px;
}
.legal-action-links a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
}
.legal-action-links a:hover { color: var(--text); }
.price__note a { text-decoration: underline; }
a:focus-visible { outline: 3px solid #f3bb62; outline-offset: 4px; }