:root {
  --board: #0B0C0A;
  --card: #10120F;
  --bar: #181B16;
  --line: #2C3028;
  --t1: #E6E9DF;
  --t2: #A8AD9F;
  --t3: #80867A;
  --acc: #9FE870;
  --onacc: #0B1405;
  --warn: #FFC857;
  --onwarn: #2A1C05;
  --note: #E9E2B8;
  --api: #6FD3E8;
  --web: #FF7A6B;
  --mobile: #B79CFF;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 48px; }

body {
  margin: 0;
  background-color: var(--board);
  background-image:
    linear-gradient(var(--bar) 1px, transparent 1px),
    linear-gradient(90deg, var(--bar) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--t1);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

.grow { flex: 1; }

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  background: var(--acc);
  color: var(--onacc);
  font-weight: 700;
}

.bar nav { display: flex; height: 100%; }

.bar nav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--t2);
  border-right: 1px solid var(--line);
}

.bar nav a:hover { color: var(--acc); background: var(--board); }

.bar-note { padding: 0 14px; color: var(--t3); }

.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 88px 24px 56px;
}

.app-icon { display: block; margin-bottom: 28px; }

h1 {
  margin: 0;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--t2);
  font-size: 17px;
}

.agents { margin: 20px 0 0; color: var(--t1); font-size: 13px; }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 36px 0 0;
}

.button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background: var(--acc);
  color: var(--onacc);
  font-weight: 700;
}

.cta-note { color: var(--t3); font-size: 13px; }

.stage-wrap {
  max-width: 1188px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: hidden;
}

.stage {
  --u: calc(100cqw / 1140);
  position: relative;
  aspect-ratio: 1140 / 700;
  min-width: 720px;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--board);
  color: var(--t2);
  white-space: nowrap;
}

.s-top span, .s-foot, .s-body div { white-space: pre; }

.stage > *, .mac > *, .r-board > * { font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); }
.stage b { font-weight: 700; }
.stage i { font-style: normal; }
.stage u { color: var(--t1); }

.acc { color: var(--acc); }
.warn { color: var(--warn); }
.off { color: var(--line); }
.dim { color: var(--t3); }
.t1 { color: var(--t1); }

.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wires text { font-family: var(--mono); font-size: 12px; text-anchor: middle; }
.wires .link { stroke: var(--t3); stroke-width: 1.5; }
.wires .flow-base { stroke: var(--warn); stroke-width: 2; opacity: 0.35; }
.wires .flow { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 6; animation: flow 0.5s linear infinite; }
.wires .drawn rect, .wires .drawn path { stroke: var(--t1); }
.wires .drawn text { fill: var(--t1); }
.wires .drawn .new { stroke: var(--api); }
.wires .port-bg { fill: var(--board); }
.wires .api { fill: var(--api); }
.wires .web { fill: var(--web); }
.wires .mobile { fill: var(--mobile); }
.wires .note { fill: var(--note); }
.wires .cursor path { fill: var(--api); stroke: var(--board); }
.wires .cursor rect { fill: var(--api); }
.wires .cursor text { fill: var(--board); font-weight: 700; }

@keyframes flow { to { stroke-dashoffset: -12; } }

.s-top, .s-tools, .s-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: var(--bar);
}

.s-top { top: 0; height: calc(32 * var(--u)); border-bottom: 1px solid var(--line); }
.s-tools { top: calc(33 * var(--u)); height: calc(32 * var(--u)); border-bottom: 1px solid var(--line); }
.s-bottom { bottom: 0; height: calc(28 * var(--u)); border-top: 1px solid var(--line); }

.s-top > span, .s-tools > span, .s-bottom > span {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(12 * var(--u));
}

.s-brand { background: var(--acc); color: var(--onacc); font-weight: 700; }
.s-tab { border-right: 1px solid var(--line); }
.s-tab.l { border-right: 0; border-left: 1px solid var(--line); }
.s-tab.on { background: var(--board); color: var(--t1); font-weight: 700; }
.s-tools > span { padding: 0 calc(10 * var(--u)); }
.s-tools .on { background: var(--board); color: var(--acc); font-weight: 700; }
.s-tools .new { color: var(--acc); font-weight: 700; border-left: 1px solid var(--line); }

.s-card, .s-note, .s-send {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}

.s-card {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
}

.s-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(28 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-bottom: 1px solid var(--line);
}

.s-head .path { flex: 1; overflow: hidden; color: var(--t3); }
.s-head .name { color: var(--t1); }
.s-head .dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.dot.api { background: var(--api); }
.dot.web { background: var(--web); }
.dot.mobile { background: var(--mobile); }

.s-body { flex: 1; padding: calc(12 * var(--u)) calc(14 * var(--u)); overflow: hidden; }
.s-body .ind { padding-left: calc(18 * var(--u)); }

.s-foot {
  height: calc(24 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-top: 1px solid var(--line);
  color: var(--t3);
  line-height: calc(24 * var(--u));
}

.s-note {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--note);
  color: #2B2410;
  white-space: normal;
}

.s-send {
  height: calc(24 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--note);
  color: #2B2410;
  font-weight: 700;
  line-height: calc(24 * var(--u));
}

.s-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #F6F5F0;
  color: #1D1F1A;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

.s-page { gap: calc(8 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)); }
.s-page > b { font-size: calc(16 * var(--u)); }

.s-device {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: calc(20 * var(--u));
  background: #000;
}

.s-device img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.s-device .island {
  position: absolute;
  left: 34.5%;
  top: 1.3%;
  width: 31%;
  height: 4.2%;
  border-radius: calc(8 * var(--u));
  background: #000;
}

.stage .row { display: flex; justify-content: space-between; color: #4A4D45; }
.stage .row.total { padding-top: calc(6 * var(--u)); border-top: 1px solid #D5D3C8; color: #1D1F1A; font-weight: 700; }

.stage .pay {
  position: relative;
  margin-top: auto;
  padding: calc(6 * var(--u)) 0;
  background: #1D1F1A;
  color: #F6F5F0;
  font-weight: 700;
  text-align: center;
}

.s-page .pay { align-self: flex-start; padding: calc(6 * var(--u)) calc(20 * var(--u)); }

.stage .tap {
  position: absolute;
  left: 50%;
  top: 92.5%;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin: calc(-9 * var(--u));
  border: calc(2 * var(--u)) solid var(--web);
  border-radius: 50%;
}

.stage .x { display: none; }

.s-body [data-at], .wires [data-at], .s-card[data-at] { animation: appear 0.3s backwards; }

@keyframes appear { from { opacity: 0; } }

.flow-intro { max-width: 1188px; margin: 0 auto 28px; padding: 0 24px; }
.flow-intro.next { margin-top: 96px; }
.flow-intro h2 { font-size: 24px; color: var(--t1); }
.flow-intro p { max-width: 680px; margin: 0; color: var(--t2); }

.flows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1188px;
  margin: 0 auto 20px;
  padding: 0 24px;
}

.flows[hidden] { display: none; }

.flows button {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 0;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--t2);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
}

.flows b { color: var(--t1); font-size: 16px; }
.f-top { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.f-top svg { height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.f-sub { flex: 1; }
.f-bar { display: block; align-self: stretch; height: 3px; margin: 8px -18px 0; background: var(--line); }
.f-bar i { display: block; width: 0; height: 100%; background: var(--acc); }

.flows button:hover { border-color: var(--t3); }
.flows .on, .flows .on:hover { border-color: var(--acc); background: var(--bar); }
.flows .on .f-top { color: var(--acc); }
.flows button:focus { outline: none; }
.flows button:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }

@keyframes fill { to { width: 100%; } }

@media (max-width: 640px) {
  .flows { gap: 8px; }
  .flows button { padding: 12px 10px 0; }
  .flows b { font-size: 13px; }
  .f-sub { display: none; }
  .f-bar { margin: 4px -10px 0; }
}

.stage.short { aspect-ratio: 1140 / 580; }
.dot.open, .wires .open { background: var(--acc); fill: var(--acc); }
.dot.review, .wires .review { background: var(--warn); fill: var(--warn); }

.mac {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1140 * var(--u));
  height: calc(700 * var(--u));
  background: var(--board);
  transform-origin: 0 0;
}

.stage.remote { background: var(--card); }
.stage.remote .mac { outline: 1px solid var(--t3); overflow: hidden; }
.stage[data-flow="ipad"] .mac { transform: translate(calc(724 * var(--u)), calc(196 * var(--u))) scale(0.345); }
.stage[data-flow="iphone"] .mac { transform: translate(calc(560 * var(--u)), calc(150 * var(--u))) scale(0.48); }

.stage.docked .mac {
  transform: translate(calc(262 * var(--u)), calc(76 * var(--u))) scale(0.765);
}

.settle .mac, .settle .dev { transition: transform 1.2s cubic-bezier(0.6, 0, 0.2, 1); }

.stage.docked[data-flow="ipad"] .mac { transform: translate(calc(355 * var(--u)), calc(112 * var(--u))) scale(0.68); }

.s-cap {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  transform: translateX(-50%);
  color: var(--t2);
}

.docked .s-cap {
  left: calc(var(--dx) * var(--u));
  top: calc(var(--dy) * var(--u));
}

.settle .s-cap { transition: left 1.2s cubic-bezier(0.6, 0, 0.2, 1), top 1.2s cubic-bezier(0.6, 0, 0.2, 1); }

.s-wire {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  border-top: 2px dashed var(--warn);
  animation: appear 0.3s;
}

.s-wire span {
  position: absolute;
  left: 50%;
  bottom: calc(6 * var(--u));
  transform: translateX(-50%);
  color: var(--warn);
  font-size: calc(10 * var(--u));
}

.s-lights { gap: calc(6 * var(--u)); border-right: 1px solid var(--line); }
.s-lights i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #FF5F57; }
.s-lights i:nth-child(2) { background: #FEBC2E; }
.s-lights i:nth-child(3) { background: #28C840; }

.ink {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  overflow: visible;
  fill: none;
  stroke: var(--t1);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ink-defs { position: absolute; }
.mac .pencil { display: none; }
.pencil { opacity: 0.85; }
.pencil path { fill: #B9B9B2; stroke: none; }
.pencil rect { fill: #F4F4F0; stroke: none; }

.s-fly {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border: 1px solid var(--acc);
  background: var(--card);
  color: var(--t1);
  font-size: calc(9.2 * var(--u));
  line-height: calc(15 * var(--u));
  white-space: normal;
}

.fly { z-index: 3; transition: left 1.2s, top 1.2s, width 1.2s, font-size 1.2s; transition-timing-function: cubic-bezier(0.6, 0, 0.2, 1); }

.fly.from {
  left: calc(var(--fx) * var(--u));
  top: calc(var(--fy) * var(--u));
  width: calc(var(--fw) * var(--u));
  transition: none;
}

.s-fly.from { font-size: calc(9.5 * var(--u)); }

.s-flash { position: absolute; inset: -1px; border: 1px solid var(--acc); animation: flash 1.2s both; }

@keyframes flash { 50% { opacity: 1; } from, to { opacity: 0; } }

.s-remote {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: calc(10 * var(--u));
  line-height: calc(16 * var(--u));
}

.dev {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  padding: calc(var(--bezel) * var(--u));
  border: 1px solid var(--t3);
  border-radius: calc(var(--r) * var(--u));
  background: #000;
  transform-origin: 0 0;
  transform: scale(var(--cs));
}

.docked .dev {
  transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) scale(var(--ds));
}

.dev-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc((var(--r) - var(--bezel)) * var(--u));
  background: var(--card);
}

.r-bar {
  display: flex;
  flex: none;
  align-items: center;
  height: calc(30 * var(--u));
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}

.r-bar > span, .r-composer > .s-tab {
  position: relative;
  white-space: pre;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(10 * var(--u));
}

.r-ink i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.r-ink.on { background: var(--board); }
.r-ink.on i { outline: 1px solid var(--acc); outline-offset: calc(2 * var(--u)); }

.r-canvas {
  position: relative;
  flex: 1;
  background-color: var(--board);
}

.r-board {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1140 * var(--u));
  height: calc(700 * var(--u));
  transform-origin: 0 0;
  transform: translateY(calc(6 * var(--u))) scale(0.6772);
}

.r-board.phone {
  transform: translate(calc(-543 * var(--u)), calc(-13 * var(--u))) scale(0.72);
  animation: phone-pan 5.5s ease-in-out backwards;
}

@keyframes phone-pan {
  from, 12% { transform: translate(calc(-150 * var(--u)), calc(-13 * var(--u))) scale(0.72); }
  45%, 57% { transform: translate(calc(-340 * var(--u)), calc(-13 * var(--u))) scale(0.72); }
}

.r-select, .r-select-bar {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}

.r-select { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); border: 1px solid var(--acc); }

.r-select-bar {
  display: flex;
  height: calc(30 * var(--u));
  background: var(--acc);
  color: var(--onacc);
  font-weight: 700;
}

.r-select-bar span {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 calc(12 * var(--u));
}

.touch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin: calc(-13 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: touch 0.8s ease-out both;
}

@keyframes touch {
  from { transform: scale(2); opacity: 0; }
  50%, to { transform: scale(1); opacity: 1; }
}

.r-status {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: calc(36 * var(--u));
  padding: 0 calc(26 * var(--u));
  background: var(--bar);
  color: var(--t1);
  font-weight: 700;
}

.r-status .island {
  position: absolute;
  left: 50%;
  top: calc(8 * var(--u));
  width: calc(78 * var(--u));
  height: calc(22 * var(--u));
  margin-left: calc(-39 * var(--u));
  border-radius: calc(11 * var(--u));
  background: #000;
}

.r-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  white-space: normal;
}

.r-user { align-self: flex-end; max-width: 86%; color: var(--t1); text-align: right; }

.r-composer {
  display: flex;
  flex: none;
  align-items: flex-end;
  background: var(--bar);
  border-top: 1px solid var(--line);
}

.r-composer > .s-tab { height: calc(34 * var(--u)); }

.typed {
  flex: 1;
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  color: var(--t1);
  white-space: normal;
}

.typed:empty::before { content: "Message"; color: var(--t3); }

.r-home { position: relative; flex: none; height: calc(20 * var(--u)); background: var(--bar); }

.r-home::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(7 * var(--u));
  width: calc(96 * var(--u));
  height: calc(4 * var(--u));
  margin-left: calc(-48 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--t1);
}

.features {
  max-width: 1188px;
  margin: 96px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
}

.features article {
  padding: 28px;
  background: var(--card);
  outline: 1px solid var(--line);
}

h2, h3 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--acc);
}

.features p, .local p { margin: 0; color: var(--t2); }

.faq { margin-top: 0; }

.local {
  max-width: 880px;
  margin: 96px auto;
  padding: 0 24px;
}

.local h2 { font-size: 24px; color: var(--t1); }

.foot {
  position: static;
  flex-wrap: wrap;
  height: auto;
  min-height: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.foot .brand { height: 36px; }

@media (max-width: 640px) {
  .bar nav a:nth-child(n+3) { display: none; }
  .hero { padding-top: 56px; }
  .features { grid-template-columns: 1fr; margin-top: 64px; }
  .local { margin: 64px auto; }
  .foot .bar-note { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wires .flow { animation: none; }
  .r-board.phone { animation: none; }
}