/* Ako waitlist — Circuit brand direction. Lime on carbon.
 *
 * The palette and type are canonical (see the landing brief): lime is the
 * single accent and stays under ~5% of any viewport, depth comes from
 * lighter surfaces rather than shadows, and motion is fast and mechanical
 * — 160ms ease-out for controls, 240ms for panels. No bounces. */

:root {
  --carbon: #101312;
  --surface: #1a1f1d;
  --graphite: #2a302e;
  --chip-border: #3a413e;
  --fog: #e7eae6;
  --muted: #a8afaa;
  --dim: #8e948f;
  --lime: #c6f24e;
  --lime-press: #a8d63a;

  --grotesk: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --control: 160ms ease-out;
  --panel: 240ms ease-out;

  --gutter: 40px;
  --band: 88px;
}

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

html {
  background: var(--carbon);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--fog);
  font-family: var(--grotesk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--fog); text-decoration: none; }
a:hover { color: var(--lime); }
::selection { background: var(--lime); color: var(--carbon); }

/* One focus treatment everywhere: 2px lime, never removed. */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only, .hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--lime);
  color: var(--carbon);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 16px;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--carbon); }

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 0;
}

.brand {
  display: block;
  width: 96px;          /* the mark's 96px minimum width */
  color: var(--lime);
  padding: 8px 0;
}
.brand:hover { color: var(--lime); }

.mark { display: block; width: 100%; height: auto; overflow: visible; }
.mark-sm { width: 56px; }

.site-nav { display: flex; align-items: center; gap: 10px; }

.ghost-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 9px 16px;
  border: 1px solid var(--graphite);
  border-radius: 2px;
  transition: border-color var(--control), color var(--control);
}
.ghost-link:hover { border-color: var(--lime); color: var(--lime); }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 96px 0 104px;
}
.hero-copy, .hero-visual { min-width: 0; }
.hero-visual svg { display: block; overflow: visible; }

h1 {
  margin: 0;
  font-size: clamp(40px, 5.1vw, 72px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hero-sub {
  margin: 24px 0 0;
  max-width: 33em;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.hero-lede {
  margin: 14px 0 0;
  max-width: 33em;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ signup form */

.signup { margin: 36px 0 0; scroll-margin-top: 80px; }
.closer .signup { margin: 0; }

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 520px;
}

.field {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--graphite);
  border-radius: 2px;
  color: var(--fog);
  font-family: inherit;
  font-size: 15px;
  padding: 15px 16px;
  transition: border-color var(--control);
}
.field::placeholder { color: var(--dim); }
.field:hover { border-color: var(--chip-border); }
.field:focus-visible { border-color: var(--lime); }

.btn-primary {
  flex: 0 0 auto;
  background: var(--lime);
  color: var(--carbon);
  border: 0;
  border-radius: 2px;
  font-family: var(--grotesk);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 15px 24px;
  cursor: pointer;
  transition: background var(--control), transform var(--control);
}
.btn-primary:hover { background: var(--lime-press); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline-offset: 3px; }
.btn-sm { font-size: 14px; padding: 12px 22px; }

/* The face is a fixed box so swapping the label for the pending mark
   never resizes the button mid-submit. */
.btn-face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 20px;
}
.btn-sm .btn-face { min-width: 0; height: auto; }
.btn-pending { display: none; width: 44px; color: var(--carbon); }
[data-pending] .btn-label { display: none; }
[data-pending] .btn-pending { display: block; }
[data-pending] .btn-primary { cursor: progress; }

.btn-ghost {
  background: none;
  border: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 2px;
  cursor: pointer;
  transition: color var(--control);
}
.btn-ghost:hover { color: var(--fog); }

.form-error {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fog);
}

.microline {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--dim);
}

/* --------------------------------------------------------- survey (step 2) */

.panel {
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--graphite);
  border-radius: 3px;
  padding: 24px 24px 20px;
  animation: panel-in var(--panel) both;
}
.closer .panel { max-width: 520px; }

.panel-head { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--lime); }
.panel-sub { margin: 8px 0 22px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.survey-group { margin: 0 0 18px; }
.survey-label {
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--dim);
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* Selected is a lime border, never a lime fill — lime discipline. */
.chip {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 13px;
  border: 1px solid var(--chip-border);
  border-radius: 2px;
  background: var(--graphite);
  color: var(--fog);
  cursor: pointer;
  transition: border-color var(--control), color var(--control);
}
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }

.panel-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; }

.confirm-head { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.confirm-sub { margin: 8px 0 0; font-family: var(--mono); font-size: 13px; color: var(--dim); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- bands */

.band { border-top: 1px solid var(--graphite); padding: var(--band) 0; }
.band-last { padding-bottom: 96px; }

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.section-title {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
}
.measure-title { max-width: 20em; }

.section-body {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.section-body.wide { max-width: 46em; margin-bottom: 44px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: start;
}

/* ------------------------------------------------- 01 fragmentation scatter */

/* Nothing here is on a grid, which is the point: the section's claim is
 * that this material was never filed together, and a tidy 3×3 of it
 * quietly contradicts the sentence next to it. Each chip is placed by an
 * offset from the centre of the box, tilted a degree or two, and drifting
 * on its own vector — related only by being in the same rectangle. */
.scatter {
  position: relative;
  aspect-ratio: 4 / 3;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  --spread: 1;
}

.scatter-cell {
  position: absolute;
  left: calc(50% + var(--x) * var(--spread));
  top: calc(50% + var(--y));
  transform: translate(-50%, -50%);
  animation: drift var(--dur) ease-in-out infinite var(--delay);
}

.scatter-chip {
  background: var(--surface);
  border: 1px solid var(--graphite);
  border-radius: 2px;
  padding: 14px 12px;
  white-space: nowrap;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
  transition: transform var(--panel);
}
.scatter[data-live] .scatter-chip { transition-duration: var(--control); }

/* The centring translate is repeated in the keyframes because the
   animation replaces the base transform outright — without it, every chip
   would jump a half-width right and down the moment it started. */
@keyframes drift {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))); }
}

/* The nine placements. These belong in the markup by every instinct, and
   cannot go there: the CSP allows no inline styles, so a style attribute
   is silently dropped and the whole scatter collapses into one corner.
   Positions are offsets from the centre of the box and are tuned to not
   collide at any width — check the extremes if you move one. */
.scatter-cell:nth-child(1) { --x: -26%; --y: -40%; --dur: 5.2s; --delay: 0s;   --mx: -4px; --my: -6px; }
.scatter-cell:nth-child(2) { --x:  18%; --y: -44%; --dur: 6.1s; --delay: .5s;  --mx:  5px; --my: -4px; }
.scatter-cell:nth-child(3) { --x:  38%; --y: -24%; --dur: 5.6s; --delay: 1.1s; --mx:  3px; --my:  6px; }
.scatter-cell:nth-child(4) { --x: -38%; --y: -17%; --dur: 6.4s; --delay: .3s;  --mx: -5px; --my:  4px; }
.scatter-cell:nth-child(5) { --x:  -5%; --y: -20%; --dur: 5.9s; --delay: 1.4s; --mx:  4px; --my: -7px; }
.scatter-cell:nth-child(6) { --x:  24%; --y:   0%; --dur: 5.4s; --delay: .8s;  --mx: -6px; --my: -3px; }
.scatter-cell:nth-child(7) { --x: -20%; --y:   7%; --dur: 6.2s; --delay: .2s;  --mx:  6px; --my:  5px; }
.scatter-cell:nth-child(8) { --x:  10%; --y:  26%; --dur: 5.7s; --delay: 1.6s; --mx: -3px; --my:  7px; }
.scatter-cell:nth-child(9) { --x: -32%; --y:  34%; --dur: 6s;   --delay: .9s;  --mx:  5px; --my: -5px; }

.scatter-cell:nth-child(1) .scatter-chip { --r: -3.5deg; }
.scatter-cell:nth-child(2) .scatter-chip { --r:  2.8deg; }
.scatter-cell:nth-child(3) .scatter-chip { --r:   -2deg; }
.scatter-cell:nth-child(4) .scatter-chip { --r:    4deg; }
.scatter-cell:nth-child(5) .scatter-chip { --r: -1.5deg; }
.scatter-cell:nth-child(6) .scatter-chip { --r:    3deg; }
.scatter-cell:nth-child(7) .scatter-chip { --r:   -4deg; }
.scatter-cell:nth-child(8) .scatter-chip { --r:    2deg; }
.scatter-cell:nth-child(9) .scatter-chip { --r: -2.5deg; }

/* ------------------------------------------------------- 02 receipt card */

.receipt {
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--graphite);
  border-radius: 3px;
  padding: 34px 36px;
}

.receipt-query {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lime);
}

.caret {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -3px;
  background: var(--lime);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.receipt-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--dim);
}
.receipt-node { height: 16px; overflow: visible; flex: none; }

.receipt-answer {
  margin: 18px 0 26px;
  max-width: 30em;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.receipt-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--graphite);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
.src { background: var(--graphite); border-radius: 2px; padding: 6px 12px; }
.src-primary { background: var(--lime); color: var(--carbon); }

/* ---------------------------------------------------------- 03 governance */

.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.step {
  border: 1px solid var(--graphite);
  border-radius: 2px;
  padding: 11px 18px;
  color: var(--dim);
}
.step-done { border-color: var(--lime); color: var(--lime); }
.step-arrow { color: var(--dim); }

/* --------------------------------------------------------- 04 the trade */

/* The closing band. No visual, no lime, a little extra air above it, so
   the page lands on the sign-up rather than on another feature.
   `.ka-line` lived here too — a note about an embedded Knowledge
   Architect for larger teams — and went with the copy it styled. */
.band-plain { padding-top: calc(var(--band) + 16px); }
.band-plain .section-body { margin-top: 24px; }

.closer {
  margin: 56px 0 0;
  padding: 36px 0 0;
  border-top: 1px solid var(--graphite);
  max-width: 620px;
}
.closer .section-title { margin-bottom: 20px; }

.fnote-line {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--dim);
}
.fnote-line a { color: var(--muted); }
.fnote-line a:hover { color: var(--fog); }

/* ----------------------------------------------------------- founders note
 *
 * The overlay has two drivers. Without JS it is pure :target — the
 * html:not(.js) guards below — so the nav link, the pre-CTA link and the
 * #founders-note deep link all work on markup alone, and the close/backdrop
 * anchors navigate back to #top. With JS (ako.js sets the .js class) the
 * :target rules are inert and [data-open] takes over, because :target does
 * not re-evaluate on history.replaceState and would otherwise hold the
 * overlay open after a scripted close.
 *
 * Lime discipline: one lime element on this surface — .fnote-kicker. The
 * global lime focus ring and selection are interaction states and stay. */

.fnote-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  overflow-y: auto;
  background: var(--carbon);
}
html:not(.js) .fnote-overlay:target,
.fnote-overlay[data-open] { display: block; }

body.fnote-lock { overflow: hidden; }
html:not(.js) body:has(.fnote-overlay:target) { overflow: hidden; }

.fnote-backdrop { position: fixed; inset: 0; cursor: default; }
/* It renders no text, but the global a:hover would still paint it lime
   for anything auditing computed styles — keep the surface strictly
   one-lime. */
.fnote-backdrop:hover { color: var(--carbon); }

.fnote-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--graphite);
  border-radius: 2px;
  background: var(--carbon);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: border-color var(--control), color var(--control);
}
.fnote-close:hover { border-color: var(--fog); color: var(--fog); }

.fnote-panel {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 88px 24px 96px;
  animation: panel-in var(--panel) both;
}

.fnote-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.03em;
}
.fnote-sub { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

.fnote-body .eyebrow { margin: 56px 0 0; }
.fnote-body p:not(.eyebrow) {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.fnote-body p.fnote-kicker { margin-top: 26px; font-size: 19px; font-weight: 500; color: var(--lime); }

/* Unresolved manifesto placeholders, kept deliberately visible. The
   inline variant marks a placeholder that sits mid-paragraph. */
.fnote-placeholder-inline {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dim);
  border: 1px dashed var(--chip-border);
  border-radius: 2px;
  padding: 1px 6px;
}
.fnote-body p.fnote-placeholder {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
  border: 1px dashed var(--chip-border);
  border-radius: 2px;
  padding: 14px 16px;
}
.fnote-body p.fnote-placeholder:last-child { margin-top: 48px; }

.fnote-cta {
  display: inline-block;
  margin-top: 32px;
  border: 1px solid var(--fog);
  border-radius: 2px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fog);
  transition: background var(--control), color var(--control);
}
.fnote-overlay .fnote-cta:hover { background: var(--fog); color: var(--carbon); }

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

.site-footer {
  border-top: 1px solid var(--graphite);
  padding: 28px 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.footer-brand { display: flex; align-items: center; gap: 16px; color: var(--lime); }
.footer-brand span { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
}
.footer-meta a { color: var(--dim); }
.footer-meta a:hover { color: var(--lime); }

/* --------------------------------------------------------------- flow svg */

.flow-label { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.flow-node-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; fill: var(--lime); }
/* Solid rails; the motion lives in the .flow-dots circles, which ride the
   rail paths via SMIL animateMotion in the markup (see index.html). */
.flow-rail { stroke: var(--chip-border); stroke-width: 1.2; }
.flow-dots { fill: var(--lime); }

.node-trace { animation: trace 1.5s linear infinite; }
@keyframes trace { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -34; } }

/* The wordmark's staggered pulse, used only on a pending submit. */
.mark-stagger use {
  transform-box: fill-box;
  transform-origin: center;
  animation: stagger 1.35s cubic-bezier(.4, 0, .2, 1) infinite;
}
.mark-stagger use:nth-child(2) { animation-delay: .15s; }
.mark-stagger use:nth-child(3) { animation-delay: .3s; }
@keyframes stagger {
  0%, 62%, 100% { opacity: .26; transform: translateY(0) scale(1); }
  22% { opacity: 1; transform: translateY(-1.3px) scale(1.07); }
}

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

@media (max-width: 900px) {
  :root { --gutter: 24px; --band: 64px; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 64px 0 72px;
  }
  .hero-visual { order: 2; max-width: 520px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Stacked, the scatter has the whole column; 4:3 of that is a lot of
     empty carbon. Cap it and let it stay a compact drift of paper. */
  .scatter { max-width: 480px; }
  .receipt { padding: 26px 22px; }
}

@media (max-width: 560px) {
  .hero-sub { font-size: 19px; }
  .hero-lede { font-size: 16px; }
  .signup-form { flex-direction: column; align-items: stretch; }
  /* flex-basis is height once the form stacks, and 240px of email field
     is not a design. */
  .field { flex: 0 0 auto; width: 100%; }
  .btn-primary { width: 100%; }
  .btn-face { min-width: 0; }
  /* Narrower box, same chips: pull the outliers back toward the middle so
     nothing hangs off the edge, and buy the height back vertically. */
  .scatter { aspect-ratio: 1 / 1; font-size: 10px; --spread: .72; }
  .scatter-chip { padding: 11px 9px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .node-trace, .caret, .scatter-cell, .mark-stagger use, .panel,
  .fnote-panel {
    animation: none !important;
  }
  /* SMIL, not CSS, moves the dots — hiding the group is the off switch. */
  .flow-dots { display: none; }
  .scatter-chip { transition: none; }
}