:root{
  --bg:#0f1014;
  --surface:#16181e;
  --raised:#1d2029;
  --line:#272b34;
  --line-soft:#1e212a;

  --ink:#f2f2ed;
  --ink-2:#b6bac5;
  --ink-3:#878c9a;

  --human:#ff9d50;      /* you: decisions, primary action */
  --human-hi:#ffb87c;
  --human-dim:rgba(255,157,80,.13);
  --agent:#3aa9cf;      /* agent activity */
  --agent-dim:rgba(58,169,207,.14);
  --ok:#7cd5c7;         /* passed, carried over */
  --gate:#9096d6;       /* human gate */
  --stop:#e2635a;

  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --col:1180px;
  --gut:clamp(20px,5vw,44px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--human);text-decoration:none}
a:hover{color:var(--human-hi)}
:focus-visible{outline:2px solid var(--human);outline-offset:3px;border-radius:3px}
::selection{background:rgba(255,157,80,.26)}

.skip{position:absolute;left:-9999px;top:0;padding:10px 14px;background:var(--raised);color:var(--ink);z-index:99}
.skip:focus{left:12px;top:12px}

/* machine voice */
code,.path,.chip,.mono{font-family:var(--mono)}
.path{font-size:.92em;color:var(--ink-2)}

/* ---------- header ---------- */
.head{
  position:sticky;top:0;z-index:40;
  background:rgba(15,16,20,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{
  max-width:var(--col);margin:0 auto;padding:0 var(--gut);
  height:62px;display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.mark{
  width:28px;height:28px;border-radius:7px;background:var(--human);
  display:grid;place-items:center;color:#14151a;
}
.mark img{width:22px;height:22px}
.brand-word{font-size:16px;font-weight:600;letter-spacing:.01em}
.head-nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px}
.head-nav a{color:var(--ink-3)}
.head-nav a:hover{color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 17px;border:1px solid transparent;border-radius:7px;
  font:500 14.5px/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn-solid{background:var(--human);color:#17130d;font-weight:600}
.btn-solid:hover{background:var(--human-hi);color:#17130d}
.btn-solid:active{background:#e8873c}
.btn-quiet{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-quiet:hover{border-color:#3d424f;color:var(--ink)}
.head-cta{padding:8px 14px;font-size:14px}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero-in{
  max-width:var(--col);margin:0 auto;padding:0 var(--gut);
  display:grid;gap:clamp(36px,5vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:start;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font:400 12.5px/1 var(--mono);color:var(--ink-3);margin-bottom:26px;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--human);box-shadow:0 0 0 0 rgba(255,157,80,.5);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,157,80,.45)}70%{box-shadow:0 0 0 9px rgba(255,157,80,0)}100%{box-shadow:0 0 0 0 rgba(255,157,80,0)}}

.hero h1{font-size:clamp(36px,4.9vw,55px);letter-spacing:-.032em;margin-bottom:22px}
.hero-lede{color:var(--ink-2);font-size:17.5px;max-width:52ch}
.hero-fine{margin-top:12px;font-size:13px;color:var(--ink-3)}

.waitlist-form{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.field{
  flex:1 1 210px;min-width:0;padding:12px 14px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);
  font:400 15px/1.2 var(--sans);transition:border-color .14s ease;
}
.field::placeholder{color:#6b7180}
.field:hover{border-color:#343a46}
.field:focus{border-color:var(--human);outline:none}
.field-wide{flex:2 1 260px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-msg{flex:1 0 100%;margin:2px 0 0;min-height:1.3em;font-size:13.5px;color:var(--ink-3)}
.form-msg.is-ok{color:var(--ok)}
.form-msg.is-err{color:var(--stop)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ---------- the run panel ---------- */
.hero-show{align-self:stretch}
.run{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);overflow:hidden;
}
.run-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line-soft);background:var(--raised);
}
.run-task{font:500 12.5px/1 var(--mono);color:var(--ink-2)}
.run-agent{font:400 11.5px/1 var(--mono);color:var(--ink-3)}

.run-feed{list-style:none;margin:0;padding:14px;min-height:214px;display:flex;flex-direction:column;gap:9px}
.run-feed li{
  display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:baseline;
  font:400 13px/1.5 var(--mono);
  animation:slip .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes slip{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.run-feed .k{color:var(--ink-3);font-size:11.5px;letter-spacing:.02em}
.run-feed .v{color:var(--ink-2);word-break:break-word}
.run-feed .v b{color:var(--ink);font-weight:500}
.run-feed li[data-tone=agent] .k{color:var(--agent)}
.run-feed li[data-tone=you] .k{color:var(--human)}
.run-feed li[data-tone=ok] .k{color:var(--ok)}
.run-feed li[data-tone=stop] .k{color:var(--stop)}
.run-feed .add{color:var(--ok)}
.run-feed .del{color:var(--stop)}

.run-gate{
  margin:0 14px 14px;padding:14px;border-radius:9px;
  background:var(--human-dim);border:1px solid rgba(255,157,80,.34);
  animation:slip .3s ease both;
}
.gate-head{font:500 12px/1 var(--mono);color:var(--human);margin-bottom:10px}
.gate-cmd{margin-bottom:8px}
.gate-cmd code{
  display:inline-block;padding:5px 9px;border-radius:5px;
  background:rgba(0,0,0,.34);color:var(--ink);font-size:13.5px;
}
.gate-why{font-size:13.5px;color:var(--ink-2);margin-bottom:13px}
.gate-acts{display:flex;gap:9px}
.gate-acts .btn{padding:8px 14px;font-size:13.5px}

.run-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-top:1px solid var(--line-soft);background:var(--raised);
  font:400 12px/1 var(--mono);color:var(--ink-3);min-height:39px;
}
.run-foot .foot-l{display:flex;align-items:center;gap:8px}
.run-foot .foot-l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--agent);flex:none}
.run-foot.is-you .foot-l::before{background:var(--human)}
.run-foot.is-done .foot-l::before{background:var(--ok)}
.replay{
  background:none;border:0;padding:4px 6px;margin:-4px -6px;cursor:pointer;
  font:400 12px/1 var(--mono);color:var(--ink-3);border-radius:4px;
}
.replay:hover{color:var(--ink)}
.show-note{margin-top:13px;font-size:13px;color:var(--ink-3)}

/* ---------- bands ---------- */
.band{padding:clamp(56px,7vw,92px) 0;border-top:1px solid var(--line-soft)}
.band-tint{background:linear-gradient(180deg,#12131a,#0f1014)}
.band-in{max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.band h2{font-size:clamp(25px,3vw,36px);max-width:22ch}
.band-lede{margin-top:15px;color:var(--ink-2);font-size:17px;max-width:64ch}
.band-end{border-top:1px solid var(--line)}

/* loop — a sequence, so it is numbered */
.loop{list-style:none;counter-reset:s;margin:44px 0 0;padding:0;display:grid;gap:0}
.loop li{
  counter-increment:s;position:relative;
  padding:22px 0 22px 62px;border-top:1px solid var(--line-soft);
}
.loop li:last-child{border-bottom:1px solid var(--line-soft)}
.loop li::before{
  content:counter(s);position:absolute;left:0;top:24px;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);
  font:500 12px/24px var(--mono);color:var(--ink-3);text-align:center;
}
.loop li::after{
  content:"";position:absolute;left:13px;top:50px;bottom:-1px;width:1px;background:var(--line-soft);
}
.loop li:last-child::after{display:none}
.loop h3{font-size:18px;margin-bottom:7px}
.loop p{color:var(--ink-2);font-size:15.5px;max-width:70ch}

/* switch widget */
.switch{margin-top:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;max-width:760px}
.switch-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-soft);background:var(--raised)}
.tab{
  flex:1;padding:13px 10px;background:none;border:0;border-bottom:2px solid transparent;
  font:500 14.5px/1 var(--sans);color:var(--ink-3);cursor:pointer;transition:color .14s ease,border-color .14s ease;
}
.tab:hover{color:var(--ink-2)}
.tab.is-on{color:var(--ink);border-bottom-color:var(--human)}
.switch-body{padding:22px}
.switch-line{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.switch-line b{color:var(--ink);font-weight:600}
.chip{
  display:inline-block;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--raised);
  font-size:11.5px;color:var(--ink-3);vertical-align:1px;
}
.carry{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.carry li{
  display:grid;grid-template-columns:22px 1fr auto;gap:11px;align-items:baseline;
  padding:11px 13px;background:var(--surface);font-size:14.5px;color:var(--ink-2);
  animation:slip .26s ease both;
}
.carry .sign{font:500 13px/1.4 var(--mono)}
.carry li[data-in="1"] .sign{color:var(--ok)}
.carry li[data-in="0"] .sign{color:var(--ink-3)}
.carry li[data-in="0"]{color:var(--ink-3)}
.carry .size{font:400 12px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap}
.switch-cost{margin-top:14px;font:400 13px/1.5 var(--mono);color:var(--ink-3)}

/* parts */
.parts{margin:44px 0 0;display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.parts>div{padding:20px 0;border-top:1px solid var(--line-soft)}
.parts dt{font-size:17px;font-weight:600;margin-bottom:7px}
.parts dd{margin:0;color:var(--ink-2);font-size:15px;max-width:52ch}

/* screenshot */
.shot{padding:0 0 clamp(56px,7vw,92px)}
.shot figure{max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.shot-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid var(--line-soft);background:var(--raised)}
.shot-bar span{width:9px;height:9px;border-radius:50%;background:#2f3441}
.shot-bar em{margin-left:7px;font:400 11.5px/1 var(--mono);color:var(--ink-3);font-style:normal}
.shot figcaption{margin-top:12px;font:400 12.5px/1.5 var(--mono);color:var(--ink-3)}

/* agents table */
.agents{width:100%;border-collapse:collapse;margin-top:40px;font-size:15px}
.agents th,.agents td{text-align:left;padding:17px 18px 17px 0;border-top:1px solid var(--line-soft);vertical-align:top}
.agents thead th{border-top:0;padding-top:0;font:400 12px/1 var(--mono);color:var(--ink-3);font-weight:400}
.agents tbody th{font-weight:600;white-space:nowrap;width:1%;padding-right:28px}
.agents td{color:var(--ink-2)}
.agents td:last-child{width:1%;white-space:nowrap;padding-right:0}
.agents-note{margin-top:22px;font-size:14.5px;color:var(--ink-3);max-width:64ch}

/* claims */
.claims{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.claims li{padding:20px 0;border-top:1px solid var(--line-soft);color:var(--ink-2);font-size:15px;max-width:52ch}
.claims b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px;font-size:15.5px}

/* end form */
.end-form{max-width:640px}

/* footer */
.foot{padding:34px 0 56px}
.foot-in{
  max-width:var(--col);margin:0 auto;padding:0 var(--gut);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.foot-brand{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-3)}
.foot-brand img{opacity:.75}
.foot-nav{display:flex;flex-wrap:wrap;gap:22px;font-size:14px}
.foot-nav a{color:var(--ink-3)}
.foot-nav a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(34px,7vw,48px)}
  .head-nav{display:none}
  .parts,.claims{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .run-feed{padding:12px;min-height:0}
  .run-feed li{grid-template-columns:62px 1fr;gap:9px;font-size:12.5px}
  .agents thead{display:none}
  .agents tbody th,.agents td{display:block;width:auto;white-space:normal;padding:0}
  .agents tbody tr{display:block;padding:18px 0;border-top:1px solid var(--line-soft)}
  .agents tbody th{padding-bottom:6px}
  .agents td:last-child{padding-top:10px}
  .loop li{padding-left:48px}
  .loop li::before{width:24px;height:24px;line-height:22px}
  .loop li::after{left:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}