/* smith's landing scroll. every colour, font and radius is a token from tokens.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--txt);font-family:var(--f-body);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
a{color:inherit}
.mono{font-family:var(--f-data)}
.dim{color:var(--dim)} .faint{color:var(--faint)}

/* ── the run strip: the page's progress bar ───────────────────────── */
.strip{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:var(--sp5);padding:10px max(16px,3vw);
  background:color-mix(in srgb,var(--void) 82%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.strip .brand{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.06em;text-decoration:none}
.nodes{display:flex;align-items:center;gap:0;margin:0 auto;font-family:var(--f-data);font-size:12px}
.node{display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line2);border-radius:var(--r-pill);color:var(--faint);
  transition:color .3s,border-color .3s,box-shadow .3s;white-space:nowrap}
.node i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .3s}
.wire{width:28px;height:1px;background:var(--line2);position:relative;overflow:hidden}
.wire::after{content:"";position:absolute;inset:0;background:var(--c,var(--dim));transform:scaleX(0);transform-origin:left;transition:transform .5s}
.wire.on::after{transform:scaleX(1)}
.node.done{color:var(--dim);border-color:var(--line2)} .node.done i{background:var(--c)}
.node.now{color:var(--c);border-color:var(--c);box-shadow:0 0 18px -8px var(--c)} .node.now i{background:var(--c);animation:pulse 1.4s infinite}
.node.bounce{color:var(--wait);border-color:var(--wait)}
@keyframes pulse{50%{opacity:.35}}
.strip .links{display:flex;gap:var(--sp5);font-family:var(--f-data);font-size:12.5px;color:var(--dim)}
.strip .links a{text-decoration:none} .strip .links a:hover{color:var(--txt)}
.n-plan{--c:var(--planner)} .n-work{--c:var(--worker)} .n-checks{--c:var(--dim)} .n-review{--c:var(--reviewer)} .n-gate{--c:var(--human)} .n-land{--c:var(--closer)}

/* ── shared bits from the desk ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-s);border:1px solid var(--line2);background:var(--glass);
  font-family:var(--f-data);font-size:13px;min-height:40px;color:var(--txt);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--dim)}
.btn.go{border-color:var(--ok);color:var(--ok)} .btn.back{border-color:var(--reviewer);color:var(--reviewer)} .btn.primary{border-color:var(--wait);color:var(--wait)}
.btn.quiet{color:var(--dim)}
.btn:focus-visible{outline:2px solid var(--worker);outline-offset:2px}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-data);font-size:11.5px;padding:0 7px;border:1px solid var(--line2);border-radius:var(--r-pill);color:var(--dim);white-space:nowrap;transition:color .3s,border-color .3s}
.pill.ok{color:var(--ok);border-color:var(--ok)} .pill.bad{color:var(--bad);border-color:var(--bad)} .pill.wait{color:var(--wait);border-color:var(--wait)}
.pill.planner{color:var(--planner);border-color:color-mix(in srgb,var(--planner) 55%,transparent)}
.pill.worker{color:var(--worker);border-color:color-mix(in srgb,var(--worker) 55%,transparent)}
.card{border:1px solid var(--line2);border-radius:var(--r-m);background:var(--panel);padding:var(--sp4) var(--sp5);display:flex;flex-direction:column;gap:var(--sp4);transition:border-color .4s,box-shadow .4s}
.card.waits{border-color:var(--wait);box-shadow:0 0 26px -14px var(--wait)}
.card-k{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;color:var(--dim);display:flex;justify-content:space-between;gap:var(--sp4)}
.card-k b{color:var(--wait);font-weight:500}
.card-t{font-family:var(--f-display);font-size:16px;font-weight:600;line-height:1.3}
.ring{flex:none;width:12px;height:12px;border:1.5px solid var(--wait);border-radius:50%;display:inline-block}
.mark{flex:none;width:12px;font-family:var(--f-data);font-size:12px;font-weight:700;text-align:center}
.s-ok{color:var(--ok)} .s-bad{color:var(--bad)}

/* ── page sections ────────────────────────────────────────────────── */
section{position:relative;padding:0 max(16px,6vw)}
.beat{min-height:100vh;display:grid;grid-template-columns:minmax(260px,420px) minmax(0,620px);gap:clamp(24px,5vw,80px);align-items:center;justify-content:center;padding-block:120px}
.say .no{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;color:var(--faint)}
.say h2{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.2vw,40px);line-height:1.1;margin:8px 0 14px;letter-spacing:.01em}
.say p{color:color-mix(in srgb,var(--txt) 82%,transparent);margin:0 0 10px;max-width:42ch}
.say .kb{font-family:var(--f-data);font-size:12px;color:var(--dim);text-decoration:none;border-bottom:1px dashed var(--line2)}
.say .kb:hover{color:var(--worker);border-color:var(--worker)}
.show{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.in .show{opacity:1;transform:none}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:22px;padding-top:80px;
  background:radial-gradient(ellipse 60% 40% at 50% 40%,color-mix(in srgb,var(--worker) 7%,transparent),transparent 70%),
  radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0) 0 0/22px 22px}
.hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(72px,14vw,180px);line-height:.9;margin:0;letter-spacing:.04em}
.hero .tag{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.4vw,30px);margin:0;color:var(--txt)}
.hero .tag em{font-style:normal;color:var(--human)}
.hero .sub{max-width:56ch;color:var(--dim);margin:0}
.hero .acts{display:flex;gap:var(--sp4);flex-wrap:wrap;justify-content:center}
.hero .fine{font-family:var(--f-data);font-size:11.5px;color:var(--faint)}
.scrollcue{margin-top:30px;font-family:var(--f-data);font-size:11px;color:var(--faint);animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* the finished ticket row (tickets page l · c · r) */
.rows{border-top:1px solid var(--line)}
.tk{display:grid;grid-template-columns:auto 64px minmax(0,1fr) auto;align-items:center;gap:var(--sp4);height:38px;border-bottom:1px solid var(--line);padding:0 var(--sp3);font-size:13.5px}
.tk .id{font-family:var(--f-data);font-size:12px;color:var(--dim)}
.tk .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk .r{display:flex;gap:6px;align-items:center;font-family:var(--f-data);font-size:11.5px;color:var(--faint)}
.ring.full{background:var(--ok);border-color:var(--ok)}

/* the checks */
.chk{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.chk code{font-family:var(--f-data);flex:1}
.chk .d{font-family:var(--f-data);font-size:11.5px;color:var(--faint);min-width:4em;text-align:right}
.chk .why{font-family:var(--f-data);font-size:11.5px;color:var(--bad)}
.loopnote{font-family:var(--f-data);font-size:11.5px;color:var(--wait);display:flex;gap:6px;align-items:center}

/* the gate, pinned */
.pin{height:320vh}
.pin .stick{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(260px,420px) minmax(0,640px);gap:clamp(24px,5vw,80px);align-items:center;justify-content:center;padding:70px max(16px,6vw) 20px}
.gate{gap:var(--sp3)}
.gstrip{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.glabel{display:flex;justify-content:space-between;font-family:var(--f-data);font-size:10.5px;color:var(--faint);padding:6px 0 2px}
.grow{display:flex;align-items:baseline;gap:var(--sp3);padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.grow .no{flex:none;min-width:1.5em;text-align:right;font-family:var(--f-data);font-size:11px;color:var(--faint)}
.grow .ring{margin-top:3px} .grow .mark{display:none}
.grow.met .ring{display:none} .grow.met .mark{display:inline}
.grow.met{animation:tick .5s}
@keyframes tick{0%{background:color-mix(in srgb,var(--ok) 12%,transparent)}100%{background:transparent}}
.acts2{display:flex;gap:var(--sp3);align-items:center;flex-wrap:wrap;padding-top:var(--sp3)}
.acts2 .btn[disabled]{opacity:.4;cursor:not-allowed}
.yourcall{font-family:var(--f-data);font-size:12px;color:var(--wait);opacity:0;transition:opacity .4s}
.gate.waits .yourcall{opacity:1}
.reason{display:none;flex-direction:column;gap:6px}
.reason textarea{background:var(--void);color:var(--txt);border:1px solid var(--reviewer);border-radius:var(--r-s);font-family:var(--f-body);font-size:13px;padding:8px 10px;min-height:64px;resize:vertical}
.reason .fine{font-family:var(--f-data);font-size:11px;color:var(--faint)}
.gate.backing .reason{display:flex}
.gate.backing .acts2{display:none}
.verdict{font-family:var(--f-data);font-size:12.5px;display:none}
.gate.decided .verdict{display:block}
.gate.decided .acts2{display:none}
.meter{height:2px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.meter b{display:block;height:100%;width:0;background:var(--human)}

/* land */
.git{font-family:var(--f-data);font-size:12.5px;display:flex;flex-direction:column;gap:0;position:relative;padding-left:22px}
.git::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line2)}
.git div{display:flex;gap:10px;align-items:baseline;padding:6px 0;position:relative}
.git div::before{content:"";position:absolute;left:-21px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:1.5px solid var(--dim)}
.git .new{color:var(--txt)} .git .new::before{background:var(--closer);border-color:var(--closer);box-shadow:0 0 12px var(--closer)}
.git .h{color:var(--faint)}
.git .new .h{color:var(--closer)}

/* the rest of the desk, as rows */
.wide{max-width:1080px;margin:0 auto;padding-block:120px}
.wide h2{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.2vw,40px);margin:0 0 18px}
.feat{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:var(--sp5);align-items:baseline;padding:14px var(--sp3);border-top:1px solid var(--line)}
.feat:last-child{border-bottom:1px solid var(--line)}
.feat .l{font-family:var(--f-display);font-weight:600;font-size:15px}
.feat .c{color:color-mix(in srgb,var(--txt) 82%,transparent);font-size:14px}
.feat .r a{font-family:var(--f-data);font-size:12px;color:var(--dim);text-decoration:none}
.feat:hover{background:var(--glass)}

/* docs + changelog */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.fold{font-family:var(--f-data);font-size:13px}
.fold div{padding:7px var(--sp3);border-top:1px solid var(--line);display:flex;gap:8px;color:var(--dim)}
.fold div.open{color:var(--txt)} .fold div.kid{padding-left:28px;font-family:var(--f-body);font-size:13.5px;color:color-mix(in srgb,var(--txt) 85%,transparent)}
.fold a{text-decoration:none} .fold a:hover{color:var(--txt)}
.cl{font-size:13px}
.cl div{display:grid;grid-template-columns:70px 64px 1fr;gap:12px;padding:7px var(--sp3);border-top:1px solid var(--line)}
.cl .v{font-family:var(--f-data);color:var(--closer);font-size:12px} .cl .dt{font-family:var(--f-data);color:var(--faint);font-size:12px}
footer .mw{display:inline-flex;align-items:center;gap:10px}
footer .mark{display:inline-flex;align-items:center}
footer .mark img{display:block;width:16px;height:16px;image-rendering:pixelated;opacity:.85}
footer{border-top:1px solid var(--line);padding:40px max(16px,6vw);display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-family:var(--f-data);font-size:12px;color:var(--faint)}

/* autopilot, or you can fafo: the hue-cycling edge, on while body.ap */
.ap-edge i{position:fixed;pointer-events:none;z-index:50;background:var(--planner);box-shadow:0 0 12px var(--planner);will-change:filter;animation:apedgehue 6s linear infinite;opacity:0;transition:opacity .6s}
.ap-edge i.t{top:0;left:0;right:0;height:3px} .ap-edge i.b{bottom:0;left:0;right:0;height:3px}
.ap-edge i.l{top:0;bottom:0;left:0;width:3px} .ap-edge i.r{top:0;bottom:0;right:0;width:3px}
body.ap .ap-edge i{opacity:1}
@keyframes apedgehue{to{filter:hue-rotate(360deg)}}
.fafo .say h2 em{font-style:normal;background:linear-gradient(90deg,var(--planner),var(--worker),var(--ok),var(--human),var(--reviewer),var(--planner));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fafoflow 6s linear infinite}
@keyframes fafoflow{to{background-position:300% 0}}
.power{display:flex;flex-direction:column;gap:10px}
.power input[type=range]{width:100%;accent-color:var(--planner)}
.stops{display:grid;grid-template-columns:repeat(5,1fr);font-family:var(--f-data);font-size:11px;color:var(--faint);text-align:center}
.stops span.on{color:var(--txt)} .stops span.f.on{color:var(--human)}
.willwont{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px;margin:0}
.willwont dt{font-family:var(--f-data);font-size:11.5px;color:var(--dim)} .willwont dd{margin:0}
.willwont dd.wont{color:var(--dim)}
.apq .row{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:10px;align-items:center;height:34px;border-top:1px solid var(--line);font-size:13px}
.apq .row .id{font-family:var(--f-data);font-size:12px;color:var(--dim)}
.apq .row .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apq .row .st{font-family:var(--f-data);font-size:11.5px;color:var(--faint);white-space:nowrap}
.apq .row .st.by{color:var(--planner)} .apq .row .st.stop{color:var(--bad)} .apq .row .st.wait{color:var(--wait)}
.apswitch{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* hero alert, the office, the lines */
.lnk{background:none;border:0;padding:0;color:var(--dim);font:inherit;text-decoration:underline dotted;cursor:pointer}
.lnk:hover{color:var(--txt)}
.alert{font-family:var(--f-data);font-size:12.5px;color:var(--wait);border:1px solid var(--wait);border-radius:var(--r-pill);padding:5px 14px;box-shadow:0 0 22px -10px var(--wait)}
.alert b{font-weight:500} .alert .lnk{color:var(--wait)}
.org{display:flex;flex-direction:column}
.orgrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto 92px;gap:12px;align-items:center;min-height:42px;border-top:1px solid var(--line);font-size:13px;padding:0 4px}
.orgrow.boss{grid-template-columns:96px minmax(0,1fr) 92px;background:var(--glass);outline:1px solid var(--dim);outline-offset:-1px;border-radius:var(--r-s)}
.orgrow .who{font-family:var(--f-data);font-size:12px;color:var(--c);display:flex;align-items:center;gap:6px}
.orgrow .who::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.orgrow .st{font-family:var(--f-data);font-size:11.5px;color:var(--faint);white-space:nowrap} .orgrow .st.wait{color:var(--wait)} .orgrow .st.ok{color:var(--ok)}
.ctx{display:flex;align-items:center;gap:6px;font-family:var(--f-data);font-size:11px;color:var(--faint)}
.ctx i{flex:1;height:4px;background:var(--line);border-radius:var(--r-pill);position:relative;overflow:hidden}
.ctx i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--dim);transition:width 1.2s}
.in .ctx i::after{width:var(--w)}
.orgwire{height:14px;margin-left:44px;border-left:1px dashed var(--line2)}
.lines{display:flex;flex-direction:column}
.line{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:46px;border-top:1px solid var(--line)}
.line:last-child{border-bottom:1px solid var(--line)}
.line .ln{font-family:var(--f-display);font-weight:600;font-size:14px}
.chain{display:flex;flex-wrap:wrap;gap:0;align-items:center}
.nd{font-family:var(--f-data);font-weight:400;font-size:11.5px;padding:1px 8px;border:1px solid var(--k);color:var(--k);border-radius:var(--r-pill);white-space:nowrap}
.nd+.nd{margin-left:12px;position:relative} .nd+.nd::before{content:"";position:absolute;left:-13px;top:50%;width:12px;height:1px;background:var(--line2)}
.nd.p{--k:var(--planner)} .nd.w{--k:var(--worker)} .nd.c{--k:var(--dim)} .nd.r{--k:var(--reviewer)} .nd.g{--k:var(--human)} .nd.l{--k:var(--closer)} .nd.x{--k:var(--eccentric)}
.line.mine .ln{color:var(--human)}
.straight .say h2{font-family:var(--f-body);font-weight:600;letter-spacing:0}
.straight .say .no{color:var(--dim)}

@media (max-width:860px){
  .beat,.pin .stick{grid-template-columns:1fr;align-content:center}
  .nodes .wire{width:10px} .node{padding:3px 6px} .strip .links{display:none}
  .two{grid-template-columns:1fr} .feat{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .show{opacity:1;transform:none}
}