/* neuronalysis.com - one stylesheet for the whole site. Brand layer (UPSTREAM.md).

   "Lab notebook": research-paper type over data tooling. STIX Two for titles,
   IBM Plex Sans for text, IBM Plex Mono for every number, key and timestamp.
   Cool paper ground, a dot grid behind the hero and the sign-in page. One
   accent (plot blue) for links, stages and a client's own rows; vermilion only
   for what is live or newest, the job veryagile gives its flame.

   Every selector veryagile's templates and static/js/app.js use is here, in the
   same order as veryagile's stylesheet, so a veryagile change to markup finds
   its rule by the same name. The layouts differ, not the DOM:
     - the floor is a log: .step .meta is display:contents, so the time takes
       the first column and app.js's streamed rows need no change;
     - the roster's chain and the shipped builds are numbered by CSS counters;
     - each .gate is labelled by ::before, in German under :lang(de). */
:root{
  --paper:#F6F6F2;
  --panel:#EDEDE7;
  --sheet:#FBFBF9;
  --ink:#111317;
  --ink-hi:#2A2D33;
  --dim:#4E535A;
  --faint:#80858C;
  --line:#DCDCD5;
  --line-hi:#C3C5BE;
  --c0:#2B5FB4;
  --c1:#B24A2A;
  --wash:#E4EAF5;
  --serif:"STIX Two Text",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --dots:radial-gradient(circle,rgba(17,19,23,.11) 1px,transparent 1.3px);
  --gut:clamp(16px,4vw,48px);
  --stack:clamp(56px,8vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* The hero's dot grid runs to the viewport's edges from inside a .wrap. */
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--c0);outline-offset:3px}
[hidden]{display:none !important}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.display{font-family:var(--serif);font-weight:500;letter-spacing:-0.015em;line-height:1.05}
.rule{border:0;border-top:1px solid var(--line)}
/* A fact still to supply (rebuild-plan.md, D6). Loud on purpose. */
.ph{color:var(--c1);border-bottom:1px dashed var(--c1)}

/* header */
.bar{position:sticky;top:0;z-index:20;background:rgba(246,246,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:stretch;justify-content:space-between;height:60px;gap:24px}
.mark{align-self:center;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-0.01em;color:var(--ink)}
.mark .glyph{flex:none}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--dim)}
.nav > a,.pages > a{align-self:stretch;display:flex;align-items:center}
.nav a:hover,.nav a.on{color:var(--ink)}
.pages a.on{box-shadow:inset 0 -2px 0 var(--c0)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-family:inherit;font-weight:500;font-size:14px;
  padding:13px 20px;border-radius:2px;line-height:1;white-space:nowrap;border:1px solid var(--ink);cursor:pointer;text-align:center}
.btn:hover{background:var(--ink-hi)}
.btn:disabled{opacity:.6;cursor:default}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-hi)}
.btn-ghost:hover{background:var(--panel)}
/* The signed-in pages' links (templates/app.html). Wide: in the bar, the
   current one underlined in the accent. Narrow: a panel under the bar that the
   menu button opens. */
.pages{display:contents}
.burger{display:none;align-self:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .18s,opacity .18s}
.bar.open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.bar.open .burger i:nth-child(2){opacity:0}
.bar.open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:720px){
  .bar .wrap{gap:16px}
  .nav{gap:16px}
  .burger{display:flex}
  .pages{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(246,246,242,.97);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);padding:4px var(--gut) 18px;font-size:15px}
  .bar.open .pages{display:flex}
  .pages a{display:block;padding:13px 0;border-top:1px solid var(--line)}
  .pages a.on{box-shadow:none;font-weight:500}
  .pages a:first-child{border-top:0}
  .pages .acct{padding-top:14px;border-top:1px solid var(--line);margin-top:2px}
}
/* the language switch: the current language plain, the other a link */
.lang{white-space:nowrap;font-family:var(--mono);font-size:12px}
.lang b{font-weight:500;color:var(--ink)}
.lang i{font-style:normal;color:var(--line-hi);margin:0 6px}
.lang a{color:var(--faint)}
.lang a:hover{color:var(--ink)}

/* hero: the claim on the left, Table 1 on the right, over a dot grid */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,64px);
  align-items:end;padding-top:calc(var(--stack) * 1.1);padding-bottom:var(--stack)}
.hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-color:var(--paper);background-image:var(--dots);background-size:22px 22px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.hero h1{font-size:clamp(40px,6.2vw,74px);line-height:1.03;letter-spacing:-0.02em;max-width:15ch;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--c0)}
.lede{font-size:clamp(16px,1.8vw,19px);color:var(--dim);max-width:54ch;margin-bottom:34px;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.figures{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line-hi);padding:18px 22px 6px}
.figures .cap{font-family:var(--mono);font-size:12px;color:var(--faint);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.fig{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.fig:last-child{border-bottom:0}
.fig b{font-family:var(--mono);font-weight:500;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.02em;line-height:1;white-space:nowrap}
.fig small{font-size:14px;color:var(--dim)}
@media(max-width:860px){.hero{grid-template-columns:1fr}}

/* sections: a label in the accent, a serif title, an ink rule under both */
.sec{padding-top:var(--stack);padding-bottom:var(--stack)}
/* One section's bottom and the next one's top would double the gap. */
.sec + .sec{padding-top:calc(var(--stack) * .35)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px 48px;align-items:end;
  padding-bottom:18px;border-bottom:1px solid var(--ink)}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
.sec-head p{font-size:14px;color:var(--dim);max-width:46ch}
.sec-head .aside{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sec-no,.sec-head .sec-no,.end .sec-no{font-family:var(--mono);font-size:13px;color:var(--c0);margin-bottom:10px;max-width:none}
@media(max-width:760px){.sec-head{grid-template-columns:1fr}}

/* a row of work: the projects page's spaces, and the home page's builds */
.job{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;gap:clamp(16px,3vw,40px);
  align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.job h3{font-size:19px;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.job .client{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:6px}
.job p{font-size:15px;color:var(--dim);text-wrap:pretty}
.spec{font-size:13px;color:var(--faint);text-align:right;white-space:nowrap;line-height:1.9}
/* The home page's builds. #build, not #work: #work is the projects carousel,
   veryagile's shared markup (templates/_projects_carousel.html). */
#build{counter-reset:job}
#build .job{grid-template-columns:48px minmax(0,1fr) minmax(0,1.3fr) minmax(0,300px);counter-increment:job}
#build .job::before{content:counter(job,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--c0);padding-top:7px}
#build .job h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.2;letter-spacing:0}
#build .job .client{font-family:var(--sans);font-size:13px;color:var(--dim);margin-top:8px}
#build .spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-content:start;text-align:left;white-space:normal;
  font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink);padding-top:4px}
#build .spec .k{color:var(--faint)}
@media(max-width:860px){
  .job,#build .job{grid-template-columns:1fr;gap:12px}
  .spec{text-align:left}
}

/* the roster's chain, as numbered pipeline stages */
.chain{counter-reset:stage;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:28px}
.hand{counter-increment:stage;position:relative;background:var(--sheet);padding:18px 22px 24px;
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px;align-content:start}
.hand::before{content:counter(stage,decimal-leading-zero);grid-column:1 / -1;margin-bottom:16px;
  font-family:var(--mono);font-size:12px;line-height:18px;color:var(--faint);
  background:linear-gradient(var(--line-hi),var(--line-hi)) no-repeat 28px 50% / calc(100% - 52px) 1px}
.hand::after{content:"\2192";position:absolute;top:18px;right:22px;font-family:var(--mono);font-size:12px;line-height:18px;color:var(--faint)}
.hand:last-child::after{content:none}
.hand h4{font-size:16px;font-weight:600;line-height:1.3}
.hand .role{font-family:var(--mono);font-size:12px;color:var(--c0);margin-top:2px}
.hand .does{font-size:13px;color:var(--dim);margin-top:8px;line-height:1.5}
.hand.key h4::after{content:"";display:inline-block;width:6px;height:6px;background:var(--c0);margin-left:8px;vertical-align:middle}
.hand.empty{display:block;grid-column:1 / -1;color:var(--faint);font-size:14px}
.hand.empty::before,.hand.empty::after{content:none}

/* a note under a section, labelled in the accent */
.gate{margin-top:28px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding-top:14px;border-top:1px solid var(--line-hi)}
.gate::before{content:"Note";font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--c0);padding-top:3px}
:lang(de) .gate::before{content:"Hinweis"}
.gate p{font-size:14px;color:var(--dim);max-width:72ch}
.gate strong{color:var(--ink);font-weight:600}

/* contact */
.end{background:var(--panel);border-top:1px solid var(--ink)}
.end .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px 64px;align-items:start;
  padding-top:var(--stack);padding-bottom:var(--stack)}
.end h2{font-size:clamp(30px,4vw,44px);line-height:1.08;margin-bottom:16px}
.end p{color:var(--dim);max-width:46ch}
@media(max-width:860px){.end .wrap{grid-template-columns:1fr}}
.form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.form input,.form textarea,input.field,textarea.field,select.field{
  background:var(--sheet);border:1px solid var(--line-hi);color:var(--ink);
  font:inherit;font-size:15px;padding:12px 14px;border-radius:2px;width:100%}
/* Only the inline contact form lays its fields out in a row; a stacked
   .fields label is a column, where a flex-basis would become height. */
.form input,.form textarea,.form .field{flex:1 1 240px}
.form textarea,textarea.field{flex-basis:100%;min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select.field:focus{border-color:var(--c0);outline:none}
input:disabled{color:var(--faint);background:var(--panel)}
/* The button keeps .btn's own size; inheriting the form's font made it 16px. */
.form button{cursor:pointer}
.note{font-size:13px;color:var(--faint);margin-top:14px;min-height:1.2em}
.note.bad{color:var(--c1)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:24px;padding-bottom:24px;font-family:var(--mono);font-size:12px;color:var(--faint)}
footer a{color:var(--dim)}
footer a:hover{color:var(--ink)}

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);animation:rise .6s cubic-bezier(.2,.7,.3,1) forwards}
  .reveal:nth-child(2){animation-delay:.08s}
  .reveal:nth-child(3){animation-delay:.16s}
  .reveal:nth-child(4){animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---- shared bits: chips, avatars, the live line ---------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--dim);
  border:1px solid var(--line-hi);border-radius:2px;padding:5px 8px;line-height:1;white-space:nowrap;background:var(--sheet)}
.chip i{width:6px;height:6px;background:var(--c0);display:inline-block}
a.chip:hover{color:var(--ink);border-color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--c1);display:inline-block}
.live.stale i{background:var(--faint)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--wash);color:var(--c0);
  font-family:var(--mono);font-size:11px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;
  flex:none;letter-spacing:0;overflow:hidden;box-shadow:0 0 0 1px var(--line-hi)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar.lg{width:40px;height:40px;font-size:13px}
/* A key agent wears the accent as a ring. */
.avatar.key{box-shadow:0 0 0 2px var(--sheet),0 0 0 3.5px var(--c0)}
.avatars{display:flex;align-items:center}
.avatars .avatar{border:2px solid var(--paper)}
.avatars .avatar+.avatar{margin-left:-6px}
.avatars .count{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:14px}

/* ---- auth cards ---------------------------------------------------------- */
.card{max-width:400px;margin:clamp(48px,10vh,96px) auto;padding:0 var(--gut);
  display:flex;flex-direction:column;gap:14px}
.card h1{font-size:clamp(28px,5vw,34px)}
.card h1 em{font-style:normal;color:var(--c0)}
.card .lede{font-size:15px;margin-bottom:10px}
.card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)}
.card label small{font-size:12px;color:var(--faint)}
.card .btn{text-align:center;margin-top:6px;padding:14px 20px}
.card .btn+.btn-ghost{margin-top:0}
.links{font-size:13px;color:var(--faint);display:flex;flex-direction:column;gap:6px;margin-top:6px}
.links a,.linklike{color:var(--dim);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px;
  background:none;border:0;padding:0;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.links a:hover,.linklike:hover{color:var(--ink)}
.error{font-size:13px;color:var(--c1)}
.card strong{color:var(--ink);font-weight:600}
.card p{font-size:15px;color:var(--dim)}
.card .gate{margin-top:4px;grid-template-columns:1fr;gap:6px}
/* the sign-in page: no bar, no footer; the mark is the heading, on the dot grid */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--gut);
  background-image:var(--dots);background-size:22px 22px}
.auth-min{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:28px;
  background:var(--paper);padding:36px 10px;box-shadow:0 0 0 28px var(--paper)}
.auth-min .mark{font-size:28px;letter-spacing:-0.02em;line-height:1;gap:12px}
.auth-min .mark .glyph{width:30px;height:30px}
.auth-min form{width:100%}
.auth-min .fields{gap:12px;max-width:none}
.joined{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line-hi);border-radius:2px;overflow:hidden}
.joined:focus-within{border-color:var(--c0)}
.joined .field{border:0;border-radius:0;background:transparent}
.joined .field+.field{border-top:1px solid var(--line-hi)}
.joined .field:focus{border-color:var(--line-hi)}
.auth-min .btn{margin-top:0;text-align:center;padding:14px 20px}
.auth-min .error,.auth-min .ok,.auth-min #resend-row{text-align:center}
.links-row{display:flex;justify-content:center;gap:8px;font-size:13px;color:var(--faint)}
.links-row i{font-style:normal;color:var(--line-hi)}
.links-row a{color:var(--faint)}
.links-row a:hover{color:var(--ink)}

/* ---- signed-in pages ------------------------------------------------------ */
.acct{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:14px}
.head{padding-top:clamp(48px,6vw,72px)}
.head h1{font-size:clamp(34px,4.6vw,54px);max-width:18ch;margin-bottom:14px}
.head h1 em{font-style:normal;color:var(--c0)}
.head p{font-size:17px;color:var(--dim);max-width:62ch}
.head .meta{margin-top:18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sec.tight{padding-top:40px}

/* The roster table. veryagile's fifth column is empty, so it takes no space. */
.thead,.row{display:grid;grid-template-columns:40px 220px minmax(0,1fr) 250px;gap:24px;align-items:center}
.thead .r,.row .last{display:none}
.thead{font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:10px;border-bottom:1px solid var(--ink)}
.row{padding:18px 0;border-bottom:1px solid var(--line)}
.row h4{font-size:15px;font-weight:600}
.row .role{font-family:var(--mono);font-size:12px;color:var(--c0)}
.row .does{font-size:13.5px;color:var(--dim);line-height:1.5}
.row .spaces{display:flex;gap:6px;flex-wrap:wrap}
.chip.own{color:var(--ink);border-color:var(--c0);background:var(--wash)}
.job.mine .client{color:var(--c0);font-weight:500}
@media(max-width:860px){
  .thead{display:none}
  .row{grid-template-columns:40px 1fr;gap:10px 16px}
  .row .does,.row .spaces{grid-column:2}
}

.block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;padding:36px 0;border-top:1px solid var(--line)}
.block:first-child{border-top-color:var(--ink)}
.block:last-of-type{border-bottom:1px solid var(--line)}
.block h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2}
.block .why{font-size:13.5px;color:var(--faint);margin-top:8px;line-height:1.55;max-width:34ch}
.block .why code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.fields{display:flex;flex-direction:column;gap:14px;max-width:460px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)}
.fields .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.block{grid-template-columns:1fr;gap:20px}}

.th,.tok{display:grid;grid-template-columns:minmax(0,1fr) 110px 180px 80px;gap:16px;font-size:13.5px;align-items:center}
.th{font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:8px;border-bottom:1px solid var(--ink)}
.tok{padding:12px 0;border-bottom:1px solid var(--line)}
.tok .m{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.tok .act{text-align:right}
.tok .act button{background:none;border:0;color:var(--dim);text-decoration:underline;text-decoration-color:var(--line-hi);
  text-underline-offset:3px;font:inherit;font-size:13px;cursor:pointer}
.tok .act button:hover{color:var(--ink)}
/* On a phone the last-sign-in / last-used column goes, so a row never scrolls. */
@media(max-width:600px){
  .th,.tok{grid-template-columns:minmax(0,1fr) auto auto}
  .th > :nth-child(3),.tok > :nth-child(3){display:none}
}
.secret{background:var(--ink);color:#E9EAE4;padding:14px 16px;border-radius:2px;
  font-family:var(--mono);font-size:13px;white-space:pre-wrap;word-break:break-all;margin-top:14px}
.empty{color:var(--faint);font-size:14px;padding:24px 0;border-bottom:1px solid var(--line)}
.ok{font-size:13px;color:var(--dim)}

/* ---- the console ------------------------------------------------------------ */
.cons .thead,.cons .row{grid-template-columns:minmax(0,1fr) 140px minmax(0,1.3fr) minmax(0,1fr)}
.cons .row{align-items:start;padding:20px 0}
.cons .row h4{font-size:15px;font-weight:600}
.cons .row .key{font-family:var(--mono);font-size:13px;color:var(--c0);margin-top:2px}
.cons .row .key.off{color:var(--faint)}
.cons .row .m{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:4px}
.cons .links-cell{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cons .chips{display:flex;gap:6px;flex-wrap:wrap}
.chip button{background:none;border:0;color:var(--faint);font:inherit;font-size:14px;line-height:1;
  padding:0 0 0 2px;cursor:pointer}
.chip button:hover{color:var(--ink)}
.cons .form{max-width:420px;gap:8px}
.cons .form select{flex:1 1 160px;background:var(--sheet);border:1px solid var(--line-hi);color:var(--ink);
  font:inherit;font-size:14px;padding:9px 12px;border-radius:2px}
.cons .form .btn{padding:10px 16px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--dim);user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:38px;height:20px;border-radius:2px;background:var(--line-hi);position:relative;
  flex:none;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:1px;
  background:var(--sheet);transition:transform .15s}
.switch input:checked+i{background:var(--c0)}
.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:2px solid var(--c0);outline-offset:3px}
.switch input:disabled+i{opacity:.5}
@media(max-width:860px){
  .cons .row{grid-template-columns:1fr;gap:12px}
  .cons .row>*{grid-column:1}
}

/* --- the studio floor, as a log ----------------------------------------------
   veryagile's rows, unchanged: avatar, the who-what-which line, .meta holding
   the time and the change, then the title. .meta is display:contents, so the
   time becomes the first column of the row's grid and the change drops to the
   line under who-what-which. The column header above the rows is the only
   markup the home page adds here. */
.floor-cols,.step{display:grid;grid-template-columns:104px 28px minmax(0,1fr);column-gap:16px}
.floor-cols{padding:12px 0 10px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.step{row-gap:3px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.step .avatar{grid-column:2;grid-row:1 / span 3;margin-top:1px}
.step .meta{display:contents}
.step .at{grid-column:1;grid-row:1;padding-top:2px;font-family:var(--mono);font-size:13px;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* The newest row, and the only thing that marks it: its time in vermilion. */
.step.new .at{color:var(--c1)}
/* Who, what, which task, on one line. When the width runs out the name is cut
   first - an ellipsis on a name costs less than one on a verb or a key. */
.step .step-line{grid-column:3;display:flex;align-items:baseline;gap:0 6px;min-width:0;
  white-space:nowrap;font-size:15px;line-height:1.4}
.step .who{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.step .who a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.step .who a:hover,.step .who a:focus-visible{text-decoration-color:currentColor}
.step .act{flex:none;color:var(--ink);font-weight:500}
.step .key{flex:none;font-family:var(--mono);font-size:14px;color:var(--c0);
  text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px}
.step .key:hover,.step .key:focus-visible{text-decoration-color:currentColor}
.step .change{grid-column:3;min-width:0;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
.step .what{grid-column:3;min-width:0;font-size:14px;line-height:1.45;color:var(--dim);overflow-wrap:anywhere}
.floor .idle{padding:44px 0;border-bottom:1px solid var(--line)}
.floor .idle p{font-size:15px;color:var(--dim);max-width:46ch}
.floor .idle strong{color:var(--ink);font-weight:500}
@media(prefers-reduced-motion:no-preference){
  .step.new{animation:rise .6s cubic-bezier(.2,.7,.3,1)}
}
/* On a phone the log gives up its time column. At 390px the clock beside
   "Marcel commented on WORK-429" cut the name to "Mar..." on veryagile, so the
   time steps down under the first line - which keeps the whole width for who,
   what and which task - and shares that line with the change. */
@media(max-width:720px){
  .floor-cols{display:none}
  .step{grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:2px}
  .step .avatar{grid-column:1}
  .step .step-line,.step .what{grid-column:2}
  .step .meta{display:block;grid-column:2;grid-row:2;min-width:0;font-size:12px;line-height:1.5;color:var(--faint);overflow-wrap:anywhere}
  .step .meta .at{padding-top:0;font-size:12px}
  .step .meta .change{font-size:12px}
  .step .step-line{font-size:14.5px}
  .step .what{font-size:13.5px}
  /* A run's steps follow the text into column two. `.floor` first, so this wins
     over the run rules further down without a block of its own. */
  .floor .step .run-steps{grid-column:2}
}

/* A run: its steps as one row, open while it is going on (veryagile's
   floor.entries). A thread down the log's text column with a dot per step - the
   accent when done, vermilion when it failed - and a vermilion dot on the
   summary while the run is live, vermilion being what this sheet keeps for live. */
.step .run-steps{grid-column:3;margin-top:6px}
.run-steps summary{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--faint);
  cursor:pointer;list-style:none;user-select:none}
.run-steps summary::-webkit-details-marker{display:none}
.run-steps summary::before{content:"";border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s}
.run-steps[open] summary::before{transform:rotate(90deg)}
.run-steps summary:hover{color:var(--ink)}
.step.run.live .run-steps summary{color:var(--dim)}
.step.run.live .run-steps summary::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--c1)}
.run-steps ol{list-style:none;margin:10px 0 2px 3px;padding-left:16px;border-left:1px solid var(--line-hi);
  display:flex;flex-direction:column;gap:4px}
.run-steps li{position:relative;display:flex;gap:12px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--ink-hi)}
.run-steps li::before{content:"";position:absolute;left:-20px;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--line-hi);box-shadow:0 0 0 2px var(--paper)}
.run-steps li.done::before{background:var(--c0)}
.run-steps li.failed::before{background:var(--c1)}
/* Out of the log's time column: a step's time belongs to its step. */
.step .run-steps li .at{grid-column:auto;grid-row:auto;padding-top:0;font-size:12px;color:var(--faint)}
.run-steps li .st{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.run-steps li.failed .st{color:var(--c1)}
@media(prefers-reduced-motion:no-preference){
  .step.run.live .run-steps summary::after{animation:beat 1.6s ease-in-out infinite}
  @keyframes beat{50%{opacity:.25}}
}

/* ---- projects: the home page's carousel, and a project's own page -----------
   veryagile's markup (templates/_projects_carousel.html, project.html) in this
   notebook's hand: figures on paper in a hairline frame, keys and dates in mono,
   the accent for keys and the current tab. The carousel is a scroll-snap track
   from the wrap's content edge to the screen's right edge; app.js adds the
   arrows, the counter and the bar. */
.car-intro{display:flex;flex-direction:column}
.car-intro p{font-size:14px;color:var(--dim);max-width:46ch;margin-top:10px}
.car-ctl{display:flex;align-items:center;gap:8px;justify-self:end}
.car-count{font-family:var(--mono);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;margin-right:6px}
.car-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--sheet);
  border:1px solid var(--line-hi);border-radius:2px;color:var(--ink);cursor:pointer}
.car-btn:hover{border-color:var(--ink)}
.car-btn:disabled{color:var(--faint);border-color:var(--line);background:transparent;cursor:default}
.car-track{--edge:max(var(--gut),calc((100% - 1200px) / 2 + var(--gut)));
  display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:28px var(--gut) 4px var(--edge);scroll-padding-left:var(--edge);scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--c0);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){.car-track{scroll-behavior:smooth}}
.pcard{flex:0 0 min(420px,80vw);scroll-snap-align:start;display:flex;flex-direction:column}
.shot{display:block;aspect-ratio:16/10;background:var(--sheet);border:1px solid var(--line-hi);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.pcard:hover .shot{border-color:var(--ink)}
.shot.none{display:flex;align-items:center;justify-content:center;background-image:var(--dots);background-size:22px 22px}
.shot.none span{font-family:var(--mono);font-size:28px;letter-spacing:.04em;color:var(--faint);background:var(--sheet);padding:4px 10px}
.pcard-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;min-height:32px}
.pcard-key{font-family:var(--mono);font-size:12.5px;color:var(--c0)}
.pcard.mine .pcard-key{font-weight:600}
.pcard-body{flex:1;padding-bottom:18px}
.pcard h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.2;margin-top:4px}
.pcard p{font-size:15px;color:var(--dim);margin-top:8px;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.pcard-open{display:inline-flex;align-items:center;gap:8px;min-height:28px;font-size:14px;font-weight:500;color:var(--ink)}
.pcard-open svg{color:var(--c0)}
.pcard-open:hover{color:var(--c0)}
.pcard-foot>span{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.car-foot{display:flex;align-items:center;gap:24px;margin-top:32px}
.car-bar{flex:1;max-width:560px;height:1px;background:var(--line-hi);position:relative}
.car-bar i{position:absolute;top:-1px;left:0;height:3px;width:0;background:var(--c0)}
.car-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--dim);margin-left:auto}
.car-all:hover{color:var(--ink)}
@media(max-width:760px){.car-btn{display:none}.car-track{gap:18px}}

.crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-bottom:18px}
.crumb a{color:var(--c0);padding:10px 0;margin:-10px 0}
.crumb a:hover{color:var(--ink)}
/* "In Kollaboration mit ...": a project both studios' consoles show. */
.chip.collab{color:var(--ink);border-color:var(--c0);background:var(--wash)}
.cover{margin:40px 0 0;padding:10px;background:var(--sheet);border:1px solid var(--line-hi)}
.cover img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.tabs-bar{position:sticky;top:60px;z-index:10;margin-top:48px;background:rgba(246,246,242,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ink)}
.tabs-row{display:flex;align-items:stretch;justify-content:space-between;gap:24px}
.tabs{display:flex;gap:32px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:10px;min-height:52px;font-size:15px;font-weight:500;color:var(--dim);
  white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.tabs a small{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--c0)}
.tabs a.on small{color:var(--c0)}
.tabs-row .out{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.tabs-row .out:hover{color:var(--ink)}
@media(max-width:720px){.tabs{gap:24px}.tabs-row .out{display:none}}

.proj-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.proj-aside{display:flex;flex-direction:column;gap:28px}
.lbl{font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.proj-aside .v{font-family:var(--mono);font-size:14px;color:var(--c0)}
.seat{display:flex;gap:12px;align-items:center}
.seat+.seat{margin-top:12px}
.seat b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.seat small{display:block;font-family:var(--mono);font-size:12px;color:var(--c0);line-height:1.4}
.proj-aside .more{display:inline-block;margin-top:12px;font-size:13px;color:var(--dim);
  text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px}
.proj-aside .more:hover{color:var(--ink)}
@media(max-width:760px){
  .proj-body{grid-template-columns:1fr;gap:28px}
  .proj-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;
    padding-bottom:24px;border-bottom:1px solid var(--line)}
  .proj-aside .seated{grid-column:1 / -1}
}

/* A wiki page as written, sanitised at sync time: this sheet's prose, not the
   wiki's look. Only the page's own blocks (`>`), so a stack row's h4 is a label. */
.wiki{min-width:0}
.wiki>*+*{margin-top:14px}
.wiki>h1,.wiki>h2{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin-top:40px}
.wiki>h3,.wiki>h4,.wiki>h5,.wiki>h6{font-size:16px;font-weight:600;line-height:1.4;margin-top:28px}
.wiki>:first-child{margin-top:0}
.wiki>h1+*,.wiki>h2+*,.wiki>h3+*,.wiki>h4+*{margin-top:10px}
.wiki p,.wiki li{font-size:15.5px;color:var(--ink-hi);line-height:1.7;max-width:66ch}
.wiki strong{font-weight:600;color:var(--ink)}
.wiki a{color:var(--c0);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px}
.wiki a:hover{text-decoration-color:currentColor}
.wiki ul{list-style:none}
.wiki ul>li{position:relative;padding-left:20px}
.wiki ul>li::before{content:"\2013";position:absolute;left:0;color:var(--faint)}
.wiki ol{padding-left:22px}
.wiki li+li{margin-top:6px}
.wiki img{display:block;max-width:100%;height:auto;border:1px solid var(--line-hi);background:var(--sheet)}
.wiki code{font-family:var(--mono);font-size:13px;background:var(--panel);padding:1px 5px;border-radius:2px;color:var(--ink)}
.wiki pre{background:var(--sheet);border:1px solid var(--line-hi);padding:14px 16px;overflow-x:auto}
.wiki pre code{background:none;padding:0;line-height:1.6}
.wiki pre.mermaid{text-align:center;font-size:13px;color:var(--dim);white-space:pre-wrap}
.wiki blockquote{border-left:2px solid var(--c0);padding-left:16px}
.wiki table{display:block;overflow-x:auto;border-collapse:collapse;font-size:14px}
.wiki th,.wiki td{border-top:1px solid var(--line);padding:9px 16px 9px 0;text-align:left;vertical-align:top}
.wiki th{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--faint);text-transform:uppercase;
  letter-spacing:.08em;border-top:0;border-bottom:1px solid var(--ink)}
.wiki hr{border:0;border-top:1px solid var(--line);margin-top:32px}
.wiki .gate{margin-top:44px}

/* The Tech stack tab: its first table, drawn as the stack. */
.stack{margin-top:32px}
.stack-head,.srow{display:grid;grid-template-columns:170px minmax(0,1.1fr) minmax(0,1.3fr);gap:32px}
.stack-head{font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:10px;border-bottom:1px solid var(--ink)}
.srow{padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.srow h4{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.3}
.srow .t{display:flex;flex-wrap:wrap;gap:6px}
.srow p{font-size:14px;color:var(--dim);line-height:1.6;max-width:none}
.tech{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--sheet);
  border:1px solid var(--line-hi);border-radius:2px;padding:5px 8px;line-height:1;white-space:nowrap}
@media(max-width:760px){.stack-head{display:none}.srow{grid-template-columns:1fr;gap:10px}}

/* The console's project-page column (templates/console.html). */
.cons .pages-cell{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cons .st{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chip.lit{color:var(--ink);border-color:var(--c0);background:var(--wash)}
.cons .m-link{font-size:13px;color:var(--c0);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px}
.cons .pg{display:flex;flex-wrap:wrap;gap:6px 14px}
.cons .pg span{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
.cons .pg span.no{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line-hi)}
.cons .pg span.has svg{color:var(--c0)}

/* ---- this site's own pages (app/site_pages.py) -------------------------------
   /services explains the consulting to a manager; /method, /architecture and
   /governance go deeper for their specialists. The same notebook: ink rules
   under section heads, mono for keys and labels, the accent for what the page
   recommends, vermilion for what stays with a person. */
/* A stranger's bar: on a phone, "In depth" gives way (it is one tap away). */
@media(max-width:560px){.nav a.wide{display:none}}
/* "Was wir tun" is three words; in the bar it stays one line. */
.nav > a{white-space:nowrap}
/* On a phone the layer-2 tabs drop the audience under each title. */
@media(max-width:720px){.depth-tabs .tabs a small{display:none}}
.links-row.newhere{margin-top:-8px}
.links-row.newhere a{color:var(--c0)}

/* the manager's hero: "In short" where the home page has Table 1 */
.inshort{background:var(--sheet);border:1px solid var(--line-hi);padding:18px 22px 6px}
.inshort .cap{font-family:var(--mono);font-size:12px;color:var(--faint);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.inshort dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.inshort dl div:last-child{border-bottom:0}
.inshort dt{font-family:var(--mono);font-size:12px;color:var(--faint);padding-top:3px}
.jump{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding-top:14px;padding-bottom:14px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;white-space:nowrap}
.jump::-webkit-scrollbar{display:none}
.jump a{color:var(--faint)}
.jump a:hover{color:var(--c0)}

/* a text column beside an exhibit */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);margin-top:32px;align-items:start}
.two .txt p{font-size:15px;color:var(--dim);max-width:48ch;margin-bottom:14px}
.two .txt .lead2{font-family:var(--serif);font-size:clamp(21px,2.2vw,25px);line-height:1.35;color:var(--ink);max-width:30ch}
@media(max-width:820px){.two{grid-template-columns:1fr}}
/* an exhibit: a sheet with a mono caption over an ink rule */
.walk,.tree{background:var(--sheet);border:1px solid var(--line-hi);padding:16px 22px 18px}
.walk .cap,.tree .cap{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;color:var(--faint);
  padding-bottom:10px;border-bottom:1px solid var(--ink)}
.walk table{width:100%;border-collapse:collapse;font-size:14.5px}
.walk th{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--faint);text-align:left;padding:10px 10px 8px 0;border-bottom:1px solid var(--line)}
.walk td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.walk tr:last-child td{border-bottom:0}
.walk td.n{font-family:var(--mono);font-size:12px;color:var(--c0);width:24px}
.by{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:2px 7px;border:1px solid var(--line-hi);border-radius:2px;color:var(--dim);white-space:nowrap}
.by.sw{background:var(--wash);border-color:#C7D4EC;color:#1D3E78}
.walk .foot2{font-size:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ink)}
@media(max-width:520px){.walk th:nth-child(3),.walk td:nth-child(3){display:none}}
/* the way down a layer: who it is for, then the link */
.deeper{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:32px;padding-top:14px;
  border-top:1px dashed var(--line-hi);font-size:14px;color:var(--dim)}
.deeper b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.deeper a{color:var(--c0);font-weight:500}
.deeper a:hover{color:var(--ink)}

.cando{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(28px,5vw,64px);margin-top:32px}
.cando h3{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--ink)}
.cando .yes h3{color:var(--c0)}
.cando .no h3{color:var(--c1)}
.cando ul{list-style:none}
.cando li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line);font-size:15px}
.cando li::before{position:absolute;left:2px;font-family:var(--mono)}
.cando .yes li::before{content:"+";color:var(--c0)}
.cando .no li::before{content:"\2013";color:var(--c1)}
@media(max-width:700px){.cando{grid-template-columns:1fr}}

/* the three things we do: a sequence, so numbered */
.do3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--ink);counter-reset:do}
.do3>div{counter-increment:do;padding:18px 24px 20px;border-right:1px solid var(--line)}
.do3>div:first-child{padding-left:0}
.do3>div:last-child{padding-right:0;border-right:0}
.do3 span{font-family:var(--mono);font-size:12.5px;color:var(--c0)}
.do3 span::before{content:counter(do) " \00B7  "}
.do3 h3{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2;margin:6px 0 8px}
.do3 p{font-size:14.5px;color:var(--dim)}
@media(max-width:760px){.do3{grid-template-columns:1fr}.do3>div{padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}}
.getlist{margin-top:24px;background:var(--wash);padding:18px 22px;font-size:15px}
.getlist b{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c0);margin-bottom:8px}
.getlist ul{padding-left:18px;margin-bottom:8px}
.getlist p{color:var(--dim);font-size:14px}

/* the four stages; the first is the way in */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--ink);counter-reset:st}
.stage{counter-increment:st;display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px;border-right:1px solid var(--line)}
.stage:first-child{padding-left:0}
.stage:last-child{padding-right:0;border-right:0}
.stage.first{box-shadow:inset 0 3px 0 var(--c0)}
.stage .n{font-family:var(--mono);font-size:12.5px;color:var(--c0)}
.stage .n::before{content:counter(st,decimal-leading-zero) "  "}
.stage h3{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.15}
.stage p{font-size:14px;color:var(--dim)}
.terms{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-family:var(--mono);font-size:12px}
.terms dt{color:var(--faint)}
@media(max-width:900px){
  .stages{grid-template-columns:1fr 1fr}
  .stage:nth-child(2){padding-right:0;border-right:0}
  .stage:nth-child(3){padding-left:0}
  .stage:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .stages{grid-template-columns:1fr}
  .stage{padding-left:0;padding-right:0;border-right:0}
  .stage+.stage{border-top:1px solid var(--line)}
}

.safe{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,64px);margin-top:12px}
.safe>div{padding:18px 0;border-bottom:1px solid var(--line)}
.safe h3,.facts h3{font-size:16.5px;font-weight:600;line-height:1.35;margin-bottom:4px}
.safe p,.facts p{font-size:14.5px;color:var(--dim)}
@media(max-width:700px){.safe{grid-template-columns:1fr}}

.faq{margin-top:12px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:17px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(19px,2vw,22px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--mono);font-size:16px;color:var(--c0)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--c0)}
.faq p{font-size:15px;color:var(--dim);max-width:64ch;padding-bottom:18px}

/* the home page's pointer to /services, after the builds */
.teaser{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  margin-top:36px;padding:22px 24px;background:var(--wash)}
.teaser h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2}
.teaser p{font-size:15px;color:var(--dim);margin-top:4px;max-width:56ch}

/* ---- layer 2: the head says who the page is for ---------------------------- */
.depth-head .crumb span{color:var(--line-hi)}
.forwho{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--sheet);
  border:1px solid var(--line-hi);border-radius:2px;padding:4px 9px;margin-bottom:18px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,48px);margin-top:12px}
.facts>div{padding:18px 0;border-bottom:1px solid var(--line)}
.facts.two-col{grid-template-columns:1fr 1fr}
.facts .k{display:block;font-family:var(--mono);font-size:12px;color:var(--c0);margin-bottom:4px}
.facts .ph{font-family:var(--mono);font-size:13px}
@media(max-width:820px){.facts,.facts.two-col{grid-template-columns:1fr}}

/* a role taken apart; the chip says the step it may start at */
.tree .role-name{font-family:var(--serif);font-size:21px;margin:10px 0 2px}
.tree .bundle{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c0);margin:14px 0 4px}
.tree .task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 0 8px 14px;
  border-top:1px solid var(--line);font-size:14px;position:relative}
.tree .task::before{content:"";position:absolute;left:0;top:50%;width:8px;border-top:1px solid var(--line-hi)}
.lv{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border:1px solid var(--line-hi);border-radius:2px;white-space:nowrap;color:var(--dim)}
.lv.l1{background:var(--panel)}
.lv.l2{background:#E9EEF7;border-color:#C7D4EC;color:#24467F}
.lv.l3{background:#D5E0F3;border-color:#A9BFE6;color:#1D3E78}
.lv.hu{border-style:dashed;border-color:var(--c1);color:var(--c1);background:transparent}

/* the scorecard */
.score-wrap{overflow-x:auto;margin-top:28px}
.score{width:100%;min-width:780px;border-collapse:collapse;font-size:14px}
.score th{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--faint);text-align:center;vertical-align:bottom;
  line-height:1.3;padding:8px 6px;border-bottom:1px solid var(--ink)}
.score th:first-child,.score td:first-child{text-align:left;padding-left:0}
.score td{text-align:center;padding:11px 6px;border-bottom:1px solid var(--line)}
.score td:last-child,.score th:last-child{text-align:right;padding-right:0}
.pips{display:inline-flex;gap:2px}
.pips i{display:block;width:7px;height:11px;background:var(--line)}
.pips i.on{background:var(--c0)}
.pips.against i.on{background:var(--c1)}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.legend .for::before,.legend .against::before{content:"";display:inline-block;width:7px;height:11px;margin-right:7px;vertical-align:-1px;background:var(--c0)}
.legend .against::before{background:var(--c1)}

/* cost of a mistake x checking the result */
.mx-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);margin-top:32px;align-items:start}
.mx{display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto 28px}
.mx .ylab{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;color:var(--faint)}
.mx .xlab{grid-column:2;display:flex;justify-content:space-between;padding-top:8px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1.35;border:1px solid var(--ink)}
.q{position:relative;padding:12px 14px;border:1px solid var(--line);background:var(--sheet);min-width:0}
.q h3{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.q small{display:block;font-size:12.5px;color:var(--dim);line-height:1.35;margin-top:3px}
.q.first{background:var(--wash)}
.q.first h3{color:var(--c0)}
.q.never h3{color:var(--c1)}
.dot{position:absolute;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-hi);white-space:nowrap}
.dot::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--c0)}
.dot.h::before{background:transparent;border:1.5px solid var(--c1)}
.crit-cap{font-family:var(--mono);font-size:12px;color:var(--faint);margin-bottom:10px}
.crit{list-style:none;border-top:1px solid var(--ink)}
.crit li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.crit li span{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap}
.crit li.ax{font-weight:600}
.crit li.ax span{color:var(--c0);font-weight:400}
@media(max-width:860px){.mx-wrap{grid-template-columns:1fr}}
@media(max-width:520px){.dot span,.q small{display:none}}

/* the autonomy steps: bar height is how much the agent does alone */
.ladder{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;margin-top:36px;counter-reset:lv -1}
.ladder li{counter-increment:lv;padding:0 16px;border-left:1px solid var(--line)}
.ladder li:first-child{padding-left:0;border-left:0}
.ladder li>i{display:block;margin-bottom:14px;background:var(--wash);border-top:2px solid var(--c0)}
.ladder li:nth-child(1)>i{height:22px;border-top-style:dashed;border-top-color:var(--line-hi);
  background:repeating-linear-gradient(135deg,var(--panel) 0 6px,var(--sheet) 6px 12px)}
.ladder li:nth-child(2)>i{height:44px}
.ladder li:nth-child(3)>i{height:70px;background:#D5E0F3}
.ladder li:nth-child(4)>i{height:96px;background:#B9CCEC}
.ladder li:nth-child(5)>i{height:124px;background:var(--c0)}
.ladder .n{font-family:var(--mono);font-size:12px;color:var(--c0)}
.ladder .n::before{content:counter(lv) " \00B7  "}
.ladder h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.2;margin:4px 0 8px}
.ladder dl{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:13px}
.ladder dt{font-family:var(--mono);font-size:11px;color:var(--faint);padding-top:2px}
.earned{display:flex;align-items:center;gap:12px;margin-top:24px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.earned::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-hi),var(--c0))}
@media(max-width:820px){
  .ladder{grid-template-columns:1fr}
  .ladder li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;padding:14px 0;border-left:0;border-top:1px solid var(--line)}
  .ladder li:first-child{border-top:0}
  .ladder li>i{grid-row:1 / span 3;align-self:stretch;height:auto !important;min-height:60px;margin:0}
  .ladder li:nth-child(1)>i{width:14px}
  .ladder li:nth-child(2)>i{width:24px}
  .ladder li:nth-child(3)>i{width:34px}
  .ladder li:nth-child(4)>i{width:45px}
  .ladder li:nth-child(5)>i{width:56px}
}

/* who answers for what */
.raci-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);margin-top:32px;align-items:start}
.raci-wrap .score-wrap{margin-top:0}
.raci-wrap .gate{margin-top:0}
.raci{width:100%;min-width:480px;border-collapse:collapse;font-size:14px}
.raci th{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--faint);text-align:center;padding:8px 6px;border-bottom:1px solid var(--ink)}
.raci td{text-align:center;padding:10px 6px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.raci th:first-child,.raci td:first-child{text-align:left;padding-left:0}
.raci td:first-child{font-family:var(--sans);font-size:14px;color:var(--ink)}
.raci th.agent,.raci .R{color:var(--c0)}
.raci .R{font-weight:500}
.raci .A{color:var(--ink);font-weight:500;background:var(--wash)}
.fw{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.fw span{font-family:var(--mono);font-size:12px;background:var(--sheet);border:1px solid var(--line-hi);border-radius:2px;padding:4px 9px}
@media(max-width:860px){.raci-wrap{grid-template-columns:1fr}}

/* how an agent is connected */
.arch{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.25fr) 36px minmax(0,1fr);margin-top:32px}
.arch .col,.arch .core{display:flex;flex-direction:column;gap:8px}
.arch .core{padding:12px;background:var(--wash);border:1px solid var(--c0)}
.arch .h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.arch .core .h{color:var(--c0)}
.arch .box{background:var(--sheet);border:1px solid var(--line-hi);padding:10px 12px;font-size:14px}
.arch .box small{display:block;font-size:12.5px;color:var(--dim);line-height:1.4;margin-top:2px}
.arch .box.human{border:1px dashed var(--c1)}
.arch .box.human b{color:var(--c1);font-weight:600}
.arch .pipe{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;color:var(--faint)}
.archlog{margin-top:12px;padding:10px 12px;background:var(--panel);border:1px solid var(--line-hi);font-family:var(--mono);font-size:12px;color:var(--dim)}
@media(max-width:820px){.arch{grid-template-columns:1fr}.arch .pipe{height:30px;transform:rotate(90deg)}}