/* shell.css — the parts of the site that are the same on every page.
   ─────────────────────────────────────────────────────────────────────────
   Loaded FIRST by every page, so a page's own stylesheet can override it.

   index.html owns a fixed composition — two wireframe hands reaching into a
   black void for a terminal held between their fingertips — and that
   composition is settled. Nothing here touches it. The tokens below are the
   hero's own values, lifted out so the pages either side of it stop inventing
   their own palette; every name that also exists in styles.css carries the
   SAME value, so load order cannot change what the hero looks like.

   Names that are new (--ink-2, --surface, --line, --sans, the scales) are new
   because the hero has no use for them: it is one panel of monospace on black.
   The pages that carry prose need a body colour, a card surface and a rhythm. */

:root {
  /* ── ground ────────────────────────────────────────────────────────────
     One black for the whole site. The hero's void, not the warmer slate the
     other two pages had been using — two dark greys a hair apart read as two
     websites, which is the exact problem this file exists to fix. */
  --void:      #04050a;
  --surface:   #0a0e15;                     /* a panel lifted off the ground   */
  --surface-2: rgba(16, 21, 30, 0.55);      /* the same panel, over an image   */
  --line:      #19212c;                     /* hairline between blocks         */
  --edge:      rgba(120, 170, 220, 0.16);   /* hairline over glass             */

  /* ── ink ───────────────────────────────────────────────────────────────
     --text is the hero's. --ink-2 is new: the hero has no body copy, and its
     --muted (4.9:1 on the void) is too close to the floor to set paragraphs
     in. --ink-2 is 6.9:1, so a whole page of it still passes AA. --muted
     stays for labels, eyebrows and metadata. */
  --text:   #dbe6ee;
  --ink-2:  #8698a8;
  --muted:  #6c7f90;

  /* ── the two agents ────────────────────────────────────────────────────
     Not decoration. Blue is Codex and orange is Claude, and that mapping is
     load-bearing: on the front page the blue hand reaching up from the
     bottom-left IS Codex, and the orange hand coming down from the top-right
     IS Claude. Any page that colours Codex differently is telling a visitor
     the hands mean something they do not. */
  --blue:   #5aa2ff;   /* codex  */
  --orange: #ff9448;   /* claude */

  /* ── type ──────────────────────────────────────────────────────────────
     Self-hosted or system, never fetched. The product's whole claim is that
     nothing leaves your machine; a webfont request from the marketing site
     would be the first thing to contradict it. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
          "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* A fifth apart, fluid between a phone and a laptop. Every heading and every
     paragraph on the site picks one of these six; nothing sets a raw px size. */
  --t-xs:   12px;
  --t-sm:   13.5px;
  --t-base: clamp(16.5px, 1.1vw, 19px);
  --t-lg:   clamp(16px, 1.5vw, 21px);
  --t-xl:   clamp(22px, 2.6vw, 32px);
  --t-2xl:  clamp(24px, 3.3vw, 46px);
  --t-3xl:  clamp(26px, 5.4vw, 58px);

  /* ── space ─────────────────────────────────────────────────────────────
     A 4px grid up to the point where a gap stops being a gap and becomes the
     silence between two sections, which is fluid because a phone cannot
     afford 150px of nothing. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --band: clamp(76px, 12vh, 150px);         /* between two sections */
  --pad:  clamp(20px, 5vw, 64px);           /* page gutter          */
  --wrap: 1180px;                           /* measure ceiling      */

  /* ── shape + motion ────────────────────────────────────────────────────
     --r stays 2px because terminals are sharp and the hero depends on it.
     Cards and inputs on the prose pages get their own, larger radii. */
  --r:    2px;
  --r-md: 8px;
  --r-lg: 12px;
  --dur:  220ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --nav-h:  52px;
  --foot-h: 44px;                           /* only the one-screen front page uses this */
}

/* Every page already declared this locally; declaring it here is what lets a new
   page skip its own reset. Without it, .shell-foot__in — width:100% plus a gutter
   — is wider than the viewport, and the whole page scrolls sideways. */
*, *::before, *::after { box-sizing: border-box; }

/* ── focus ────────────────────────────────────────────────────────────────
   A dark site is where focus rings quietly disappear: the browser default is
   a thin dark outline that vanishes on a black ground. This one is the Codex
   blue at 7.8:1 with room around it, and it is never removed. */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* ── skip link ────────────────────────────────────────────────────────────
   Off-screen until focused. The front page is one screen of animation with a
   real text input in it, so a keyboard visitor who cannot get past the nav is
   stuck in the chrome. */
.shell-skip {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  text-decoration: none;
  transform: translateY(-200%);
}
.shell-skip:focus-visible { transform: none; }

/* ── nav ──────────────────────────────────────────────────────────────────
   Left-clustered on every page, at every width, including the one page where
   a conventional right-hand link row would land on top of Claude's hand.
   Same shape in the same place on every page is most of what makes a handful
   of files read as one site — and it is the only arrangement that never
   fights the front page's composition. */
.shell-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 3vw, var(--s-6));
  min-height: var(--nav-h);
  padding: var(--s-3) var(--pad);
  font-family: var(--sans);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Earned, not assumed: the bar stays invisible over a hero and only takes a
   background once you have scrolled past one. Set by the page's own script;
   the front page never scrolls, so it never gets one. */
.shell-nav[data-scrolled] {
  background: rgba(4, 5, 10, .86);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.shell-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.shell-brand:hover { color: #fff; }

/* The "and" is two bars, one per agent, in the order the words run: Claude
   then Codex. Same two bars as the favicon, same two colours as the hands. */
.shell-brand__lock {
  display: inline-flex;
  gap: 2px;
  margin: 0 .42em;
  translate: 0 .5px;
}
.shell-brand__lock::before,
.shell-brand__lock::after {
  content: "";
  width: 3px;
  height: 11px;
}
.shell-brand__lock::before { background: var(--orange); }
.shell-brand__lock::after  { background: var(--blue); }

.shell-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-3), 2.2vw, var(--s-5));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
}
.shell-nav__links a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.shell-nav__links a:hover { color: var(--text); }
/* The page you are on is named, not just implied by a missing hover. */
.shell-nav__links a[aria-current="page"] { color: var(--text); }

/* 380px is the floor this site is built to survive. The wordmark and three
   links do fit there, but only once the gaps stop being generous. */
@media (max-width: 26rem) {
  .shell-nav { gap: var(--s-3); padding-inline: var(--s-4); }
  .shell-nav__links { gap: var(--s-3); font-size: var(--t-xs); }
  .shell-brand { font-size: var(--t-xs); }
}

/* ── footer ───────────────────────────────────────────────────────────────
   Three rows on a phone, one on a laptop. A tool with a price on it and no
   way to reach anyone reads as a weekend project no matter how the top of the
   page looks. */
.shell-foot {
  border-top: 1px solid var(--line);
  padding: var(--s-7) 0 var(--s-6);
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--muted);
}
.shell-foot__in {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-6);
  align-items: flex-start;
  justify-content: space-between;
}
.shell-foot__note {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-2);
  line-height: 1.6;
}
.shell-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shell-foot__links a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.shell-foot__links a:hover {
  color: var(--text);
  border-bottom-color: var(--edge);
}
.shell-foot__legal {
  flex-basis: 100%;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--muted);
}
.shell-foot__legal a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .shell-nav,
  .shell-nav__links a,
  .shell-foot__links a { transition: none; }
}

/* ── a page that is only words ────────────────────────────────────────────
   Terms, privacy, and anything else that is a document rather than a pitch.
   One column, one measure, the same scale as everything else. */
.doc-body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Same wrap and same gutter as every other page, so the prose starts on the
   vertical line the pitch pages start on. The measure is set on the children,
   not on the column, or a document would centre itself somewhere the rest of
   the site never puts anything. */
.doc {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--band)) var(--pad) var(--band);
}
.doc > * { max-width: 68ch; }
.doc > h1 { max-width: 22ch; }
.doc > h2 { max-width: 34ch; }
.doc .eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc h1 {
  margin: var(--s-3) 0 0;
  font-family: var(--mono);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.doc h2 {
  margin: var(--s-8) 0 var(--s-3);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.doc .lede { margin: var(--s-5) 0 0; font-size: var(--t-lg); color: var(--ink-2); }
.doc p     { margin: var(--s-4) 0 0; color: var(--ink-2); }
.doc p b, .doc li b { color: var(--text); font-weight: 500; }
.doc ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.doc li {
  position: relative;
  margin: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  color: var(--ink-2);
}
.doc li::before { content: "·"; position: absolute; left: var(--s-2); color: var(--blue); }
.doc code {
  font-family: var(--mono);
  font-size: .9em;
  color: var(--text);
  overflow-wrap: break-word;
  /* SF Mono renders `--flag` as an em dash, so a copied flag is silently wrong. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}
.doc a { color: var(--blue); text-underline-offset: 3px; }
.doc a:hover { color: var(--orange); }
.doc .stamp {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
}