/* The Quiubo website. Colours, fonts, radii and borders come from tokens.css, generated from
   design-system/tokens.json; it follows the visitor's system, or the theme switch.

   The page is a frame of hairlines: two rules down the sides, one across between rows, and
   cells inside a row divided the same way. Content sits in the cells, not in boxes. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Spline Sans Mono";
  src: url("/fonts/spline-sans-mono.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: var(--color-text-ink);
  --grey: var(--color-text-grey);
  --sheet: var(--color-surface-sheet);
  --edge: var(--color-surface-sheet-border);
  --hairline: var(--color-surface-hairline);
  --strong: var(--border-strong) solid var(--ink);
  --rule: 1px solid var(--edge);
  --frame: 1200px;
  --pad: 56px;
  /* What changes with the scheme beyond colour tokens. On dark the highlighter band is dimmed so
     light letters stay readable, and the guide's mark loses its chip (R8). */
  --band: var(--color-guide-strong);
  --mark-chip: var(--color-guide-strong);
  --mark-cell: var(--color-guide-on-yellow);
  --panel: var(--color-surface-field-dark);
  --panel-inner: var(--color-surface-sheet-dark);
  --shadow: drop-shadow(0 18px 36px rgba(20, 22, 28, 0.16)) drop-shadow(0 0 1px rgba(20, 22, 28, 0.3));
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

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

body {
  margin: 0;
  background: var(--color-surface-field);
  color: var(--ink);
  font-family: var(--font-room);
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: var(--color-text-link);
}

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

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--color-text-link);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Type */

.h1 {
  max-width: 720px;
  font-family: var(--font-guide);
  font-weight: 700;
  font-size: 68px;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.h2 {
  font-family: var(--font-guide);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.h3 {
  font-family: var(--font-guide);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
}

.lede {
  max-width: 600px;
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
}

.body {
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
}

/* A row's label, set in the room font: "02 · The app so far". */
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.small {
  font-size: 13px;
}

.grey {
  color: var(--grey);
}

.hl {
  padding: 0 0.08em;
  background: linear-gradient(transparent 64%, var(--band) 64%, var(--band) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grow {
  flex-grow: 1;
}

.stack {
  display: flex;
  flex-direction: column;
}

.row:not(section) {
  display: flex;
  align-items: center;
}

/* People colours. The -d set is for the panel that is dark in either scheme. */

.c-green { color: var(--color-people-green); }
.c-blue { color: var(--color-people-blue); }
.c-magenta { color: var(--color-people-magenta); }
.c-red { color: var(--color-people-red); }
.c-teal { color: var(--color-people-teal); }
.c-orange { color: var(--color-people-orange); }
.c-violet { color: var(--color-people-violet); }
.c-pink { color: var(--color-people-pink); }

.c-green-d { color: var(--color-people-green-dark); }
.c-blue-d { color: var(--color-people-blue-dark); }
.c-magenta-d { color: var(--color-people-magenta-dark); }
.c-red-d { color: var(--color-people-red-dark); }
.c-teal-d { color: var(--color-people-teal-dark); }
.c-orange-d { color: var(--color-people-orange-dark); }
.c-violet-d { color: var(--color-people-violet-dark); }
.c-pink-d { color: var(--color-people-pink-dark); }

.nick {
  font-weight: 500;
}

.you {
  background: var(--color-guide-strong);
  color: var(--color-guide-on-yellow);
  padding: 0 3px;
}

/* Buttons and fields */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--ink);
  color: var(--color-text-on-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  color: var(--color-text-on-ink);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: var(--strong);
  font-weight: 400;
}

.btn-outline:hover {
  color: var(--ink);
}

.btn-28 { height: 28px; padding: 0 11px; font-size: 13px; }
.btn-36 { height: 36px; padding: 0 15px; }
.btn-48 { height: 48px; padding: 0 20px; font-size: 15px; }
.btn-52 { height: 52px; padding: 0 21px; font-size: 16px; }

.field {
  flex-grow: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: var(--strong);
  border-radius: var(--radius-button);
  background: var(--color-surface-input);
  color: var(--ink);
  font: inherit;
}

.field::placeholder {
  color: var(--grey);
}

.field[aria-invalid="true"] {
  border-color: var(--color-people-red);
}

.field-48 { height: 48px; }
.field-52 { height: 52px; font-size: 16px; }

/* The signup that stands in for downloads until the first release. The status line answers a
   submit; the note under it never changes, so what the list is for stays on screen. */

.signup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}

.signup-center {
  align-items: center;
}

.signup-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.signup-status {
  font-family: var(--font-guide);
  font-weight: 700;
  font-size: 15px;
}

.signup-status:empty {
  display: none;
}

.signup-status[data-kind="error"] {
  color: var(--color-people-red);
}

.signup-status[data-kind="done"] {
  color: var(--color-people-green);
}

.hp {
  position: absolute;
  left: -10000px;
}

/* Small pieces from the app */

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 6px;
  border-radius: var(--radius-tag);
  background: var(--color-people-green);
  color: var(--color-text-on-ink);
  font-size: 13px;
  line-height: 20px;
}

.tag-outline {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 5px;
  border: var(--border-small-button) solid currentColor;
  border-radius: var(--radius-tag);
  font-size: 13px;
}

/* The tag component's "agent" example: every line an agent writes says so (rule 4). */
.agent-tag {
  padding: 0 4px;
  border: var(--border-small-button) solid currentColor;
  border-radius: var(--radius-tag);
  font-size: 13px;
  font-weight: 500;
  color: var(--grey);
}

/* The guide's mark (N29): four cells on strong yellow, 25%, 50% and 75% dither, then solid.
   On dark the cells turn yellow and the chip goes away (R8). */
.mark {
  --cell-w: 8px;
  --cell-h: 14px;
  --dot: 4px;
  --cell: var(--mark-cell);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: flex-end;
  width: calc(var(--cell-w) * 4);
  background: var(--mark-chip);
}

.mark i {
  width: var(--cell-w);
  height: var(--cell-h);
  flex-shrink: 0;
  background: var(--cell);
}

.mark i:nth-child(1) {
  background: conic-gradient(var(--cell) 25%, transparent 0) 0 0 / var(--dot) var(--dot);
}

.mark i:nth-child(2) {
  background: repeating-conic-gradient(var(--cell) 0% 25%, transparent 0% 50%) 0 0 / var(--dot) var(--dot);
}

.mark i:nth-child(3) {
  background: conic-gradient(transparent 25%, var(--cell) 0) 0 0 / var(--dot) var(--dot);
}

.note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-guide-note-edge);
  border-radius: var(--radius-block);
  background: var(--color-guide-pale);
  color: var(--color-guide-on-pale);
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

.note-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-head strong {
  font-weight: 700;
  font-size: 15px;
}

.segmented {
  display: inline-flex;
  flex-shrink: 0;
  border: var(--strong);
  border-radius: var(--radius-button);
  overflow: hidden;
  font-size: 13px;
}

.segmented span,
.segmented button {
  padding: 2px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.segmented button {
  cursor: pointer;
}

.segmented .on,
.segmented [aria-pressed="true"] {
  background: var(--ink);
  color: var(--color-text-on-ink);
}

/* Lines in a room */

.line {
  --name: 80px;
  display: grid;
  grid-template-columns: 42px var(--name) minmax(0, 1fr);
  column-gap: 12px;
  padding: 1px 0;
}

.line > :first-child {
  color: var(--grey);
}

.line > :nth-child(2) {
  text-align: right;
}

.line.event > * {
  color: inherit;
}

/* The bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: var(--rule);
  background: color-mix(in srgb, var(--color-surface-field) 92%, transparent);
  backdrop-filter: blur(8px);
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--frame);
  height: 60px;
  margin: 0 auto;
  padding: 0 24px;
  border-left: var(--rule);
  border-right: var(--rule);
}

.home {
  display: block;
}

.wordmark {
  display: block;
  width: auto;
  height: 30px;
}

.say {
  font-size: 13px;
  color: var(--grey);
}

.nav {
  display: flex;
  gap: 22px;
}

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

.nav a:hover {
  text-decoration: underline;
}

.theme-switch {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.theme-switch:hover {
  background: var(--color-surface-tint);
}

.theme-switch svg {
  width: 20px;
  height: 20px;
}

/* The switch shows where it goes: a moon on light, a sun on dark. :root lifts these above
   rules like `.shot img` that set display. */
:root .theme-switch .sun,
:root .only-dark {
  display: none;
}

/* The frame and its rows */

.frame {
  max-width: var(--frame);
  margin: 0 auto;
  border-left: var(--rule);
  border-right: var(--rule);
}

section.row {
  padding: 104px var(--pad) 0;
  border-bottom: var(--rule);
}

section.row > :last-child:not(.cells, .hero-shot, .tour) {
  margin-bottom: 104px;
}

.row-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 48px;
  row-gap: 24px;
  align-items: start;
}

.row-head .label {
  grid-column: 1 / -1;
}

/* The lede's first line sits on the heading's cap height. */
.row-head .lede {
  padding-top: 6px;
  font-size: 18px;
}

/* Cells reach the frame's edges and are divided by its rules. */
.cells {
  display: grid;
  margin: 64px calc(var(--pad) * -1) 0;
  border-top: var(--rule);
}

.cells + .cells {
  margin-top: 0;
}

.cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells-agents { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cells in more than one row: the rules are the gaps between them. */
.cells-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
}

.cells.cells-grid > .cell {
  border: 0;
  background: var(--color-surface-field);
}

.cells-grid .demo {
  min-height: 190px;
}

.cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 40px var(--pad) 48px;
}

.cell + .cell {
  border-left: var(--rule);
}

.cell .demo {
  margin-bottom: 20px;
}

.demo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  font-size: 13px;
  line-height: 1.5;
}

.boxed {
  padding: 12px 14px;
  border: var(--strong);
  border-radius: var(--radius-block);
}

.asked {
  padding: 6px 10px;
  border-radius: var(--radius-block);
  background: var(--color-surface-tint);
}

.diff {
  border: var(--strong);
  border-radius: var(--radius-block);
  overflow: hidden;
}

.diff > div {
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
}

.diff .removed {
  background: color-mix(in srgb, var(--color-people-red) 10%, transparent);
  color: var(--color-people-red);
}

.diff .added {
  background: color-mix(in srgb, var(--color-people-green) 10%, transparent);
  color: var(--color-people-green);
}

/* A list of plain statements, each with a cursor cell. */
.facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  list-style: none;
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
}

.facts li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 12px;
}

.facts li::before {
  content: "";
  width: 8px;
  height: 14px;
  margin-top: 5px;
  background: var(--ink);
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 64px;
  padding-top: 88px !important;
}

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 48px;
  row-gap: 24px;
}

.hero-copy .label {
  grid-column: 1 / -1;
}

.hero-copy .h1 {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: end;
}

.hero-copy .lede {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  font-size: 18px;
}

.hero-copy .signup {
  grid-column: 2;
  grid-row: 3;
}

/* Screenshots of the app */

.shot {
  position: relative;
  display: block;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--shadow);
}

.shot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

section.row > .hero-shot {
  margin: 0 calc(var(--pad) * -1);
  padding: 56px var(--pad) 40px;
  border-top: var(--rule);
  background:
    radial-gradient(circle, var(--edge) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--color-surface-field);
}

.shot-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 32px;
}

.looks-pick {
  font-size: 14px;
}

.looks-pick button {
  padding: 4px 14px;
}

/* A crop of a screenshot: the part that matters, at a readable size. --zoom scales the
   1280-wide window; --x and --y are the crop's top-left corner in the window's points. */
.shot-crop {
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border: var(--rule);
  border-radius: var(--radius-sheet);
  background: var(--sheet);
}

.shot-crop img {
  width: calc(var(--zoom, 1) * 100%);
  max-width: none;
  margin-left: calc(var(--x, 0) / 1280 * var(--zoom, 1) * -100%);
  margin-top: calc(var(--y, 0) / 1280 * var(--zoom, 1) * -100%);
  filter: none;
}

figcaption {
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
}

figcaption strong {
  color: var(--ink);
}

/* The guide: the one yellow row, so the yellow stays the guide's. */

.band-guide {
  background: var(--color-guide-pale);
  color: var(--color-guide-on-pale);
}

.band-guide .label,
.band-guide .body {
  color: color-mix(in srgb, var(--color-guide-on-pale) 72%, transparent);
}

.band-guide .cells,
.band-guide .cell + .cell {
  border-color: color-mix(in srgb, var(--color-guide-on-pale) 16%, transparent);
}

.band-guide .demo {
  min-height: 196px;
  padding: 14px;
  border-radius: var(--radius-block);
  background: var(--sheet);
  color: var(--ink);
}

.held {
  gap: 8px;
  padding: 6px 10px;
  border: var(--strong);
  border-radius: var(--radius-block);
  overflow-wrap: anywhere;
}

.step {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-block);
  background: var(--color-surface-tint);
}

.step > :nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tour: four parts of the app, one screenshot at a time. */

.tour-tabs {
  margin-top: 64px;
}

.tab {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
  padding: 28px var(--pad) 30px;
  border: 0;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--grey);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tab + .tab {
  border-left: var(--rule);
}

.tab strong {
  font-family: var(--font-guide);
  font-size: 19px;
  color: var(--ink);
}

.tab span {
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
}

.tab[aria-pressed="true"] {
  border-top-color: var(--ink);
  color: var(--ink);
}

.tab:hover strong {
  text-decoration: underline;
}

.stage {
  margin: 0 calc(var(--pad) * -1);
  padding: 48px var(--pad) 64px;
  border-top: var(--rule);
  background:
    radial-gradient(circle, var(--edge) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--color-surface-field);
}

/* Agents: a room that plays */

.cell-flush {
  padding: 32px;
}

.room-demo {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 380px;
  padding: 14px 16px;
  border: var(--rule);
  border-radius: var(--radius-sheet);
  background: var(--sheet);
}

.room-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.room-title {
  font-family: var(--font-guide);
  font-size: 21px;
  line-height: 1;
}

.replay {
  padding: 2px 8px;
  border: var(--border-small-button) solid var(--grey);
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--grey);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* The log keeps its newest line at the bottom, as a room does; older lines leave at the top. */
.log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  flex-grow: 1;
  min-height: 0;
  padding: 10px 0;
  overflow: hidden;
}

.log .note {
  margin-top: 6px;
}

.cells-run {
  display: inline-flex;
  gap: 2px;
  vertical-align: -1px;
}

.cells-run i {
  width: 6px;
  height: 11px;
  background: var(--hairline);
}

.cells-run i.on {
  background: currentColor;
}

.composer {
  gap: 10px;
  height: 40px;
  padding: 0 6px 0 12px;
  border: var(--strong);
  border-radius: var(--radius-sheet);
  color: var(--grey);
  white-space: nowrap;
}

.composer-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composer-text.typing {
  color: var(--ink);
}

.composer-text.typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--ink);
}

.stop-key {
  padding-right: 6px;
  font-size: 13px;
}

/* At rest the composer shows a grey reminder of the key; while agents run, a red stop (rule 14). */
.stop-all {
  padding: 3px 9px;
  border-radius: var(--radius-button);
  background: var(--color-people-red);
  color: var(--color-text-on-ink);
  font-size: 13px;
  font-weight: 700;
}

.subhead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 calc(var(--pad) * -1);
  padding: 56px var(--pad) 32px;
  border-top: var(--rule);
}

.subhead .h3 {
  font-size: 28px;
}

.subhead + .cells {
  margin-top: 0;
}

.ink {
  color: var(--ink);
}

.takes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.take {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  border: var(--rule);
  border-radius: var(--radius-block);
  background: var(--sheet);
}

.catchup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-block);
  background: var(--color-surface-tint);
}

.meter {
  height: 6px;
  background: var(--hairline);
}

.meter i {
  display: block;
  height: 100%;
  background: var(--ink);
}

.quote {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-left: 3px solid var(--ink);
  background: var(--color-surface-tint);
}

.check {
  display: block;
}

.check::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  vertical-align: -1px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
}

.check.on {
  color: var(--grey);
}

.check.on::before {
  background: var(--ink);
}

.tools .cell {
  justify-content: center;
}

.permissions {
  margin-top: 14px;
}

.permission {
  gap: 10px;
  min-height: 38px;
  border-top: 1px solid var(--hairline);
}

/* For regulars: the row that is dark in either scheme. */

.band-dark {
  background: var(--panel);
  color: var(--color-text-ink-dark);
}

.band-dark .label {
  color: var(--color-text-grey-dark);
}

.band-dark .cells,
.band-dark .cell + .cell {
  border-color: var(--color-surface-sheet-border-dark);
}

.wire-window {
  border: 1px solid var(--color-surface-sheet-border-dark);
  border-radius: var(--radius-sheet);
  background: var(--panel-inner);
  overflow: hidden;
}

.wire-bar {
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--color-surface-hairline-dark);
  font-size: 13px;
}

.grey-dark {
  color: var(--color-text-grey-dark);
}

.segmented-dark {
  border-color: var(--color-text-ink-dark);
}

.segmented-dark [aria-pressed="true"] {
  background: var(--color-text-ink-dark);
  color: var(--color-text-on-ink-dark);
}

.wire {
  min-height: 168px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.wire .line {
  --name: 64px;
}

.wire .line > :first-child,
.wire .t {
  color: var(--color-text-grey-dark);
}

.wire .got { color: var(--color-people-green-dark); }

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-content: start;
}

.features > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.features strong {
  font-family: var(--font-guide);
  font-size: 18px;
}

.features span {
  color: var(--color-text-grey-dark);
}

/* Pricing */

.price-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.price-head .h3 {
  font-size: 32px;
  line-height: 1;
}

.price-head .tag-outline {
  margin-left: auto;
}

/* The end */

section.end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 120px;
  text-align: center;
}

.end .icon {
  display: block;
  width: 101px;
  height: 100px;
}

.closing-word {
  font-family: var(--font-guide);
  font-weight: 700;
  font-size: 136px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.say-big {
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 20px;
}

.end .signup {
  margin-top: 16px;
}

/* Footer */

.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 18px 24px 28px;
  font-size: 13px;
  color: var(--grey);
}

.mark-c {
  display: block;
  width: auto;
  height: 20px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--grey);
}

/* Motion. A scene's steps that have not arrived keep their space, except in the agents' room,
   where lines arrive at the bottom and push older ones up. */

[data-at].pending {
  visibility: hidden;
}

.log [data-at].pending {
  display: none;
}

/* Pages of text: privacy. */

.doc {
  max-width: 680px;
  font-family: var(--font-guide);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
}

.doc h1 {
  margin: 16px 0 8px;
}

.doc h2 {
  margin: 44px 0 10px;
  font-size: 26px;
  line-height: 1.15;
}

.doc p {
  margin: 0 0 14px;
}

.doc .updated {
  margin-bottom: 32px;
  font-family: var(--font-room);
  font-size: 13px;
  color: var(--grey);
}

/* Dark systems, and the theme switch. tokens.css has already swapped the colours; these are
   the few places where light and dark differ in more than colour. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band: color-mix(in srgb, var(--color-guide-strong) 45%, transparent);
    --mark-chip: transparent;
    --mark-cell: var(--color-guide-strong);
    --panel: var(--color-surface-sheet);
    --panel-inner: var(--color-surface-field);
    --shadow: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25));
  }

  :root:not([data-theme="light"]) .only-light,
  :root:not([data-theme="light"]) .theme-switch .moon {
    display: none;
  }

  :root:not([data-theme="light"]) .only-dark,
  :root:not([data-theme="light"]) .theme-switch .sun {
    display: block;
  }
}

:root[data-theme="dark"] {
  --band: color-mix(in srgb, var(--color-guide-strong) 45%, transparent);
  --mark-chip: transparent;
  --mark-cell: var(--color-guide-strong);
  --panel: var(--color-surface-sheet);
  --panel-inner: var(--color-surface-field);
  --shadow: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25));
}

:root[data-theme="dark"] .only-light,
:root[data-theme="dark"] .theme-switch .moon {
  display: none;
}

:root[data-theme="dark"] .only-dark,
:root[data-theme="dark"] .theme-switch .sun {
  display: block;
}

/* Narrower windows. */

@media (max-width: 1100px) {
  .nav {
    display: none;
  }

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

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

  .hero-copy .label,
  .hero-copy .h1,
  .hero-copy .lede,
  .hero-copy .signup {
    grid-column: 1;
    grid-row: auto;
  }

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

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

  .cells-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cells-4 > .tab:nth-child(3) {
    border-left: 0;
  }

  .cells-4 > .tab:nth-child(n + 3) {
    border-top: var(--rule);
  }

  .cells-4 > .tab[aria-pressed="true"] {
    border-top: 3px solid var(--ink);
  }

  .cells-agents .cell + .cell {
    border-left: 0;
    border-top: var(--rule);
  }
}

@media (max-width: 860px) {
  :root {
    --pad: 32px;
  }

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

  .cell + .cell {
    border-left: 0;
    border-top: var(--rule);
  }

  .demo,
  .band-guide .demo,
  .cells-grid .demo {
    min-height: 0;
  }

  .h1 {
    font-size: 54px;
  }
}

@media (max-width: 640px) {
  :root {
    --pad: 20px;
  }

  .bar-in {
    gap: 10px;
    padding: 0 12px;
  }

  .say {
    display: none;
  }

  .wordmark {
    height: 26px;
  }

  section.row {
    padding-top: 72px;
  }

  section.row > :last-child:not(.cells, .hero-shot, .tour) {
    margin-bottom: 72px;
  }

  .hero {
    padding-top: 56px !important;
    row-gap: 40px;
  }

  .h1 {
    font-size: 44px;
  }

  .h2 {
    font-size: 32px;
  }

  .lede,
  .hero-copy .lede {
    font-size: 17px;
  }

  .cells {
    margin-top: 40px;
  }

  .cell {
    padding: 32px var(--pad) 36px;
  }

  .cell-flush {
    padding: 20px 12px;
  }

  section.row > .hero-shot {
    padding: 24px 12px 32px;
  }

  .signup-row {
    flex-direction: column;
  }

  .signup-row .field {
    flex-grow: 0;
  }

  /* Names above lines, as the app does in a narrow window (V3, messageRowStacked). */
  .line,
  .wire .line {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    padding: 3px 0;
  }

  .line > :nth-child(2) {
    text-align: left;
  }

  .line > :nth-child(3) {
    grid-column: 1 / -1;
  }

  .stop-key {
    display: none;
  }

  .wire {
    height: auto;
  }

  .wire .clip {
    white-space: normal;
    overflow-wrap: anywhere;
  }

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

  .closing-word {
    font-size: 72px;
  }

  .say-big {
    font-size: 17px;
  }

  .foot-links {
    margin-left: -8px;
  }

  .foot-links a {
    padding: 0 8px;
  }
}