/* AGIdock — bright paper / technical editorial
 *
 * Only give display:grid or display:flex to an element whose children are all
 * elements. Grid and flex turn every child element AND every contiguous run of
 * bare text into a separate item, so a list item holding
 * <strong>…</strong> plain text <a>…</a> shatters across the columns. Table
 * layout has no such rule, which is why the comparison is a real <table>: a
 * cell may hold whatever mix of prose and markup the sentence needs.
 */

:root {
  --bg: #fbfbf7;
  --surface: #f2f3ec;
  --surface-2: #e9ebe1;

  --fg: #171a13;
  --mut: #565d4e;
  --dim: #6c7464;

  --line: #dde0d0;
  --line-strong: #c2c7b0;
  --dot: #dfe2d4;

  --acc: #4a7a12;
  --acc-strong: #3a6009;
  --acc-soft: #eef4de;
  --acc-fg: #fbfbf7;

  --measure: 60rem;

  --mono:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
}

/* -------------------------------------------------------------------------
   foundation
   ------------------------------------------------------------------------- */

html {
  color-scheme: light;
  scroll-behavior: smooth;
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--acc);
  color: var(--acc-fg);
}

body {
  position: relative;

  max-width: var(--measure);
  margin: 0 auto;

  padding: 0 1.6rem 6rem;

  color: var(--fg);

  background:
    radial-gradient(
      900px 550px at 15% -10%,
      rgba(74, 122, 18, .07),
      transparent 65%
    ),
    radial-gradient(
      700px 500px at 90% 25%,
      rgba(23, 26, 19, .022),
      transparent 70%
    ),
    var(--bg);

  font:
    16px/1.65
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;

  -webkit-text-size-adjust: 100%;
}

body::before {
  content: "";

  position: fixed;
  z-index: 100;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--acc) 25%,
      var(--acc) 75%,
      transparent
    );

  opacity: .7;

  pointer-events: none;
}

a {
  color: var(--acc);
  text-underline-offset: .16em;
}

strong {
  font-weight: 650;
}

/* -------------------------------------------------------------------------
   navigation
   ------------------------------------------------------------------------- */

nav {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;

  padding: 1.05rem 0 .95rem;

  background:
    linear-gradient(
      to bottom,
      rgba(251, 251, 247, .97),
      rgba(251, 251, 247, .89)
    );

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(12px);

  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .01em;
}

nav .brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  margin-right: auto;

  color: var(--fg);

  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.mark {
  width: 17px;
  height: 17px;
  display: block;
  flex: none;
}

.mark .slot {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .3;
}

.mark .core {
  fill: var(--acc);
}

nav a {
  color: var(--mut);
  text-decoration: none;

  transition:
    color .15s ease,
    opacity .15s ease;
}

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

nav .cta {
  color: var(--acc);

  border: 1px solid var(--line-strong);
  border-radius: 3px;

  padding: .34rem .8rem;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease;
}

nav .cta:hover {
  color: var(--acc-fg);
  border-color: var(--acc);
  background: var(--acc);
}

/* -------------------------------------------------------------------------
   typography
   ------------------------------------------------------------------------- */

h1 {
  max-width: 15ch;

  margin: 0 0 2rem;

  font-size: clamp(3.2rem, 8vw, 5.8rem);
  line-height: .93;

  letter-spacing: -.065em;
  font-weight: 720;
}

h1 .dot {
  color: var(--acc);
}

/* A compound adjective must not break at its own hyphen. */
.nb {
  white-space: nowrap;
}

h2 {
  margin: 0 0 1.1rem;

  font-size: clamp(1.55rem, 3.4vw, 2rem);
  line-height: 1.12;

  letter-spacing: -.04em;
  font-weight: 680;
}

h3 {
  margin: 0;

  font-size: 1rem;
  line-height: 1.35;
  font-weight: 620;

  letter-spacing: -.008em;
}

section {
  padding: 6rem 0 5rem;
  scroll-margin-top: 4rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;

  margin: 0 0 1.3rem;

  color: var(--mut);

  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";

  width: 1.6rem;
  height: 1px;

  background: var(--acc);

  opacity: .8;
}

.mut {
  color: var(--mut);
  font-size: .9rem;
}

.lede {
  max-width: 38rem;

  color: var(--mut);

  font-size: 1.08rem;
  line-height: 1.68;
}

/* -------------------------------------------------------------------------
   hero
   ------------------------------------------------------------------------- */

header {
  position: relative;

  padding: 7rem 0 2rem;
}

header::before {
  content: "";

  position: absolute;
  inset: 0 -5rem auto;

  height: 35rem;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(74, 122, 18, .075),
      transparent 22rem
    ),
    radial-gradient(
      circle,
      var(--dot) 1px,
      transparent 1px
    );

  background-size:
    auto,
    30px 30px;

  mask-image:
    radial-gradient(
      100% 90% at 20% 0%,
      #000 15%,
      transparent 80%
    );

  -webkit-mask-image:
    radial-gradient(
      100% 90% at 20% 0%,
      #000 15%,
      transparent 80%
    );

  pointer-events: none;
}

header > * {
  position: relative;
}

header .lede {
  margin-bottom: 2.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  min-height: 46px;

  padding: .68rem 1.1rem;

  border: 1px solid var(--acc);
  border-radius: 3px;

  background: var(--acc);

  color: var(--acc-fg);

  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;

  text-decoration: none;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.button::before {
  content: "$";
  opacity: .5;
}

.button:hover {
  background: var(--acc-strong);
  border-color: var(--acc-strong);
  transform: translateY(-1px);
}

.button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}

.button.secondary:hover {
  color: var(--acc);
  border-color: var(--acc);
  background: transparent;
}

/* -------------------------------------------------------------------------
   comparison — one table, so the two sides are named once in the header
   rather than beside every claim. It follows the hero with no heading of its
   own, so the section keeps only enough padding to separate the two.
   ------------------------------------------------------------------------- */

header + section {
  padding: 2.5rem 0;
}

header + section + section {
  padding-top: 3rem;
}

header + section .sheet {
  margin-top: 0;
}

.versus {
  min-width: 40rem;
}

.versus th,
.versus td {
  padding: 1.05rem 1.4rem 1.05rem 0;
  vertical-align: top;
}

.versus tbody th {
  width: 11rem;

  color: var(--fg);

  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -.008em;
}

.versus td {
  color: var(--mut);

  font-size: .93rem;
  line-height: 1.6;
}

/* The accent rule runs the height of our column, which is what identifies it
   once the per-cell tags are gone. */
.versus .us {
  padding-left: 1.2rem;
  border-left: 2px solid var(--acc);
}

.versus thead th.us {
  color: var(--acc);
}

.versus td.us {
  color: var(--fg);
}

/* -------------------------------------------------------------------------
   pricing
   ------------------------------------------------------------------------- */

.sheet {
  overflow-x: auto;

  margin: 2.5rem 0 1.6rem;

  border-top: 1px solid var(--line-strong);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: .85rem 1.3rem .85rem 0;

  text-align: left;

  border-bottom: 1px solid var(--line);
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  padding-top: .75rem;
  padding-bottom: .65rem;

  color: var(--mut);

  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 500;

  letter-spacing: .15em;
  text-transform: uppercase;
}

tbody td:first-child {
  font-weight: 520;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: rgba(23, 26, 19, .028);
}

td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}

td.num {
  color: var(--acc);

  font-family: var(--mono);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

/* -------------------------------------------------------------------------
   spec strip — what the prices below are buying. Grid is safe here because
   every child is an <li>; the label/value stacking inside one is done with a
   block <b>, not with a second grid.
   ------------------------------------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;

  margin: 2.2rem 0 0;
  padding: 0;

  list-style: none;
}

.specs li {
  margin: 0;

  color: var(--fg);

  font-size: .95rem;
  line-height: 1.45;
}

.specs b {
  display: block;

  margin-bottom: .3rem;

  color: var(--dim);

  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   notice
   ------------------------------------------------------------------------- */

.notice {
  margin: 0 0 1.6rem;
  padding: .45rem 0 .45rem 1.1rem;

  border-left: 2px solid var(--acc);

  color: var(--fg);

  font-size: 1rem;
}

.notice::before {
  content: "EXAMPLE";

  display: block;

  margin-bottom: .2rem;

  color: var(--acc);

  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .15em;
}

/* -------------------------------------------------------------------------
   the handover prompt — the whole of getting started
   ------------------------------------------------------------------------- */

.prompt {
  margin: 2.4rem 0 1.5rem;

  padding: 1.15rem 1.35rem;

  background: var(--acc-soft);

  border: 1px solid var(--line);
  border-left: 2px solid var(--acc);
  border-radius: 3px;

  color: var(--fg);

  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1.6;
}

.prompt::before {
  content: "Paste this to your agent";

  display: block;

  margin-bottom: .55rem;

  color: var(--acc);

  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   code
   ------------------------------------------------------------------------- */

pre {
  margin: 1.4rem 0;

  padding: 1rem 1.1rem;

  overflow-x: auto;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 3px;

  color: var(--fg);

  font-size: .84rem;
  line-height: 1.55;
}

pre::before {
  content: "$";

  margin-right: .6rem;

  color: var(--acc);
}

code {
  font-family: var(--mono);
}

p code,
li code,
td code {
  background: var(--surface);

  border: 1px solid var(--line);

  padding: .06rem .32rem;

  border-radius: 2px;

  color: var(--fg);

  font-size: .86em;
}

ul {
  padding-left: 1.2rem;
}

li {
  margin: .35rem 0;
}

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

footer {
  margin-top: 4.5rem;

  padding-top: 1.8rem;

  border-top: 1px solid var(--line);
}

footer p {
  margin: .55rem 0;
}

footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;

  font-family: var(--mono);
  font-size: .76rem;
}

footer .links a {
  color: var(--mut);
  text-decoration: none;
}

footer .links a:hover {
  color: var(--acc);
}

/* -------------------------------------------------------------------------
   the pricing page — no hero, so its h1 is a page title at reading scale
   rather than at hero scale
   ------------------------------------------------------------------------- */

body.page section {
  padding-top: 4.5rem;
}

body.page h1 {
  max-width: 24ch;

  margin: 0 0 1.2rem;

  font-size: clamp(2.1rem, 4.6vw, 3rem);
  line-height: 1.06;

  letter-spacing: -.045em;
}

body.page .actions {
  margin-top: 3.2rem;
}

/* -------------------------------------------------------------------------
   the idea page — the page chrome above, at the site's own width. Nothing
   here narrows the body or the paragraphs: the page is as wide as every other
   page and the text fills it. What is added is vertical space: the title sits
   clear of the article, and each heading clear of the section before it,
   because this page stacks several under one section.
   ------------------------------------------------------------------------- */

body.essay h1 {
  margin-bottom: 2.4rem;
}

body.essay h2 {
  margin: 3.2rem 0 .9rem;

  font-size: 1.35rem;
}

/* -------------------------------------------------------------------------
   rendered markdown pages
   ------------------------------------------------------------------------- */

/* Prose end to end, so it keeps a reading measure rather than the wider one
   the marketing pages need for their tables. */
body.doc {
  max-width: 54rem;
}

body.doc nav {
  margin-bottom: 2.6rem;
  gap: .5rem;
}

body.doc nav a:first-child {
  color: var(--fg);
  font-weight: 700;
}

body.doc h1 {
  max-width: none;

  margin-bottom: 1.4rem;

  font-size: clamp(2.3rem, 6vw, 3.8rem);

  letter-spacing: -.045em;
}

body.doc h2 {
  margin: 3rem 0 .8rem;

  font-size: 1.35rem;
}

body.doc h3 {
  margin: 2rem 0 .5rem;

  font-size: 1.05rem;
}

body.doc table {
  font-size: .94rem;
}

body.doc th,
body.doc td {
  padding: .6rem .8rem .6rem 0;
}

/* -------------------------------------------------------------------------
   responsive
   ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  body {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-bottom: 5rem;
  }

  nav {
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: .9rem;
  }

  nav .brand {
    flex-basis: 100%;
    margin-right: 0;
  }

  header::before {
    inset-left: -2rem;
    inset-right: -2rem;
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 12vw, 4.8rem);
  }

  section {
    padding: 5rem 0 4rem;
  }

  header {
    padding: 5rem 0 1.5rem;
  }

  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
  }

  .versus {
    min-width: 0;
  }

  .versus thead {
    display: none;
  }

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

  .versus tr {
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line);
  }

  .versus tr:last-child {
    border-bottom: 0;
  }

  .versus th,
  .versus td {
    padding: 0;
    border-bottom: 0;
  }

  .versus tbody th {
    margin-bottom: .85rem;
  }

  .versus td {
    padding-left: 1.1rem;
    border-left: 2px solid var(--line-strong);
  }

  .versus td + td {
    margin-top: .9rem;
  }

  .versus td::before {
    content: attr(data-col);

    display: block;

    margin-bottom: .3rem;

    color: var(--dim);

    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .versus td.us::before {
    color: var(--acc);
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .sheet {
    margin-left: -1.2rem;
    margin-right: -1.2rem;

    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  th,
  td {
    padding-right: 1rem;
  }

  .prompt {
    padding: 1rem 1.1rem;
    font-size: .88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}