/* Night 13's styles, as the homepage has them: the fonts, then Night 3's and Night 4's sheets. Shared by every page. */

@font-face{font-family:Bricolage;src:url(fonts/bricolage-500.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-100-449.woff) format('woff');font-weight:100 449;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-450-549.woff) format('woff');font-weight:450 549;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-550-900.woff) format('woff');font-weight:550 900;font-display:swap}

/* Zenday. One field of particles runs through each page and makes each section's picture; small pieces of the real
   product sit inside the pictures. One display serif for the promises, Inter for everything you read or use. */
:root{
  --paper:#f4f4f2;--ink:#17181c;--copy:#3e3c46;--muted:#6c6777;--rule:#e1dfe5;--rule-2:#d3d0d9;
  --violet:#6a4bc0;--violet-dot:#8562ec;--lav:#b9a6f5;--wash:#efeaf9;--jade-ink:#1f7a64;
  --night:#141519;--night-copy:#c6c3cd;--night-muted:#8f8a99;--night-rule:rgba(244,244,242,.12);
  --serif:Newsreader,'Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* one scale, from a 390px phone to a 1440px laptop, capped above so big screens don't inflate it:
     page promise 38-64, section heading 30-44, serif sub-heading 21-24, lead 17-18, name 16, body 16, small 14, label 13.5 */
  --pad:clamp(20px,calc(3.6px + 4.2vw),72px);--max:1200px;--box:calc(var(--max) + 2 * var(--pad));
  --display:clamp(38px,calc(28.3px + 2.48vw),68px);   /* the home page's promise */
  --display-2:clamp(36px,calc(28.6px + 1.9vw),60px);  /* an audience page's promise */
  --title:clamp(30px,calc(24.8px + 1.33vw),48px);     /* section headings */
  --sub:clamp(21px,calc(19.9px + .29vw),26px);        /* audience and feature headings set in the serif */
  --lead:clamp(17px,calc(16.6px + .1vw),18.5px);      /* the sentence under a heading */
  --name:16px;--body:16px;--small:14px;--label:13.5px;
  /* the spacing scale (a 4px base, roughly doubling): tight inside a group, wider between groups, widest between sections */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --sec:clamp(96px,calc(30px + 11.5vw),216px);        /* between sections: about 200px on a laptop, 96px on a phone */
  --band:clamp(88px,calc(46px + 6.5vw),160px);        /* inside a coloured band */
  --gap:clamp(48px,calc(26px + 4.3vw),96px);          /* from a heading to what it introduces */
  --bar:34px;                                          /* the announcement above the navigation */
  --p-ink:#15171c;--p-ink2:#646a73;--p-ink3:#9aa0a8;--p-line:#ebebed;--p-faint:#f3f3f5;--p-in:#17804b;--p-warn:#b26a00;--p-warn-bg:#fdf3e4;--p-zen:#6b55d0;--p-zen-bg:#f1eefc;--p-act:#1c6aac;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--body)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--paper)}
main{position:relative;z-index:1;overflow-x:clip}
a{color:inherit}
p,ul,ol,figure,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--violet-dot);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-64px;z-index:50;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:300;font-synthesis:none}
h1{font-size:var(--display);line-height:1.04;letter-spacing:-.022em}
h2{font-size:var(--title);line-height:1.1;letter-spacing:-.017em}
h3{font:600 var(--name)/1.35 var(--sans);letter-spacing:-.012em}
.serif{font-family:var(--serif);font-weight:300;font-synthesis:none}
.label{margin:0 0 var(--s4);font:500 var(--label)/1.3 var(--sans);color:var(--violet)}
.lead{font-size:var(--lead);line-height:1.58;color:var(--copy);text-wrap:pretty}
.note{font-size:var(--small);line-height:1.5;color:var(--muted)}
.nw{white-space:nowrap}
.ln{display:block;text-wrap:balance}
.wrap{max-width:var(--box);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-top:var(--sec)}
.ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic.f{fill:currentColor;stroke:none}

/* the field: under the words, over the page; the bands it glows in are painted under it */
canvas.flow{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.backdrop{position:absolute;left:0;right:0;top:0;height:0;z-index:-1;pointer-events:none}
.backdrop.night{background:var(--night)}
.backdrop.tint{background:var(--wash)}
.flow-on [data-backdrop]{background:transparent!important}

/* an announcement above the navigation */
.announce{position:relative;z-index:2;background:var(--ink);color:#d9d6e0;font:500 13px/1.35 var(--sans);text-align:center}
.announce p{min-height:var(--bar);padding:8px var(--pad);text-wrap:balance}
.announce a{margin-left:8px}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:28px;height:64px;padding:0 max(var(--pad),calc(50% - var(--max) / 2));background:var(--paper);transition:box-shadow .2s}
.nav.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.wordmark{font:600 24px/1 var(--sans);letter-spacing:-1.4px;text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{font-size:14px;text-decoration:none;white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.motion{appearance:none;border:0;background:none;padding:8px 0;font:500 12.5px/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.motion:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:11px 16px;border-radius:9px;background:var(--ink);color:#fff;font:500 14.5px/1.2 var(--sans);text-decoration:none;white-space:nowrap;transition:background .18s}
.btn:hover{background:#000}
.btn.light{background:#f4f4f2;color:#17181c}
.btn.light:hover{background:#fff}
.nav .btn{min-height:36px;padding:8px 13px;gap:16px;font-size:13px;border-radius:8px}
.link{display:inline-block;font:500 14.5px/1.4 var(--sans);text-decoration:none}
.link .nw>span{display:inline-block;margin-left:2px}
.link:hover{text-decoration:underline;text-underline-offset:5px}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}

/* home hero: the promise in the middle of the screen, inside an orbit of particles */
.hero{position:relative;display:flex;flex-direction:column;min-height:clamp(560px,min(calc(100svh - 64px - var(--bar)),calc(52vw + 260px)),940px);padding:clamp(32px,5vh,64px) var(--pad) clamp(20px,3vh,30px);text-align:center}
.hero .orbit{position:absolute;inset:0;pointer-events:none}
.hero .orbit-m{display:none}
.hero .copy{position:relative;margin:auto;max-width:var(--max)}
.hero .label{margin-bottom:clamp(14px,2vh,20px)}
.hero h1{margin:0 auto}
.hero .lead{max-width:32em;margin:clamp(18px,2.6vh,24px) auto 0}
.hero .actions{justify-content:center;margin-top:clamp(24px,3.2vh,32px)}
.hero .fine{max-width:42em;margin:clamp(14px,2vh,18px) auto 0;font-size:13.5px;color:var(--muted)}
.hero-foot{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 32px;margin-top:clamp(32px,4.5vh,48px)}
.caption{font-size:13px;color:var(--muted)}
.audience{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.audience a{font:600 13px/1.3 var(--sans);text-decoration:none}
.audience a:hover{text-decoration:underline;text-underline-offset:4px}

/* page hero for an audience: the promise across the page, then the sentence beside its picture */
.phero{padding-top:clamp(36px,6vh,80px)}
.phero h1{font-size:var(--display-2);max-width:16em}
.phero .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px clamp(40px,5vw,80px);align-items:start;margin-top:clamp(24px,2.6vw,40px)}
.phero .lead{max-width:31em}
.phero .actions{margin-top:clamp(22px,2.4vw,30px)}
.phero .note{margin-top:18px;max-width:32em}

/* a section heading: the promise on the left, the sentence that explains it on the right */
.shead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(var(--s6),5vw,var(--s9));align-items:end}
.shead .label{grid-column:1/-1}
.shead .lead{max-width:28em;margin-bottom:.2em}
.shead .side{display:grid;gap:24px;justify-items:start;margin-bottom:.3em}
.shead .side .lead{margin:0}

/* the dark bands */
.band-night{position:relative;margin-top:calc(var(--sec) * .72);padding-block:var(--band);background:var(--night);color:var(--paper)}
.band-night h2,.band-night h3{color:var(--paper)}
.band-night .label{color:var(--lav)}
.band-night .lead{color:var(--night-copy)}
.band-night .note{color:var(--night-muted)}
.band-night .flist{border-top-color:var(--night-rule)}
.band-night .flist li{border-bottom-color:var(--night-rule)}
.band-night .flist p,.band-night .commit p{color:var(--night-copy)}
.band-night .link{color:var(--paper)}
.band-night+.sec,.band-tint+.sec{padding-top:calc(var(--sec) * .72)}
.band-tint{position:relative;margin-top:calc(var(--sec) * .72);padding-block:var(--band);background:var(--wash)}

/* the jobs, each drawn by the field */
.jobs{list-style:none;padding:0;margin-top:var(--gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--night-rule)}
.jobs li{border-bottom:1px solid var(--night-rule);min-width:0}
.jobs li:not(:nth-child(3n+1)){border-left:1px solid var(--night-rule)}
.jobs a{display:block;height:100%;padding:32px 32px 34px;text-decoration:none}
.jobs li:nth-child(3n+1) a{padding-left:0}
.jobs li:nth-child(3n) a{padding-right:0}
.pic{position:relative;display:block}
.pic .glyph{position:absolute;left:0;bottom:0}
.flow-on .pic .glyph{display:none}
.jobs .pic{width:min(100%,244px);aspect-ratio:1.7;margin-bottom:26px}
.jt{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.jobs p{margin-top:5px;color:var(--night-copy);font-size:14.5px;line-height:1.55;max-width:24em}
.jobs .arr{flex:none;font-size:14px;color:var(--night-muted);transition:color .2s,transform .2s}
.jobs a:hover .arr{color:var(--lav);transform:translateY(2px)}
.jobs a:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.jobs+.note{margin-top:20px}

/* a module: what it does on one side, the picture the field makes on the other */
.mod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8) clamp(var(--s7),6vw,var(--s9));align-items:center;margin-top:var(--gap)}
.mod.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* three documents side by side need the wider share */
.mod.pic-wide{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);column-gap:clamp(var(--s7),5vw,72px)}
.mod.rev.pic-wide{grid-template-columns:minmax(0,7.8fr) minmax(0,4.2fr)}
.mod.even{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mod.even.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.mod>*{min-width:0}
.flist{list-style:none;padding:0;border-top:1px solid var(--rule-2)}
.flist li{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.flist p{margin-top:var(--s2);color:var(--copy);font-size:16px;line-height:1.6}
/* each feature's mark: a few of the field's particles settled into a small sign of what it does */
.flist li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;align-content:start}
.flist li>h3,.flist li>p{grid-column:2}
.pm{grid-row:1/3;align-self:start;width:26px;height:26px;margin-top:-2px}
.pm svg{display:block;width:100%;height:100%;overflow:visible}
.pm .u{fill:rgba(20,18,32,.13)}
.pm .h{fill:url(#pmg);opacity:.17}
.pm .l{fill:url(#pmg)}
.band-night .pm .u{fill:rgba(255,255,255,.15)}
.band-night .pm .h,.band-night .pm .l{fill:url(#pmgn)}
.pm .d{transition:transform .95s cubic-bezier(.2,.7,.2,1) var(--d),opacity .6s ease var(--d)}
.flist.pm-pre .pm .d{transform:translate(var(--x),var(--y));opacity:0}
@media (prefers-reduced-motion:reduce){.pm .d{transition:none}}
.mod .link,.more .link{display:inline-block;margin-top:var(--s5);line-height:1.45}
.stage{position:relative;margin:0}
.stage[data-flow="sort"]{height:clamp(380px,30vw,440px)}
.stage[data-flow="number"]{height:clamp(460px,34vw,480px)}
.ftag{position:absolute;left:0;top:0;transform:translate(0,-50%);font:500 13px/1.35 var(--sans);color:var(--muted);white-space:nowrap}
.cap{margin-top:14px;font-size:12.5px;color:var(--muted)}
.band-night .cap{color:var(--night-muted)}
.more{margin-top:clamp(24px,2.6vw,36px)}

/* small pieces of the product, sitting in the pictures: placed by the field, dressed like every other card */
.piece{position:absolute;z-index:2}
.piece:not(.chip){--pt:20px;--px:22px;--pb:20px;display:flex;flex-direction:column;padding:var(--pt) var(--px) var(--pb)}
.card{width:340px}
.chip{display:flex;align-items:center;gap:12px;height:54px;padding:0 16px 0 18px;border-radius:16px!important;transform:translate(0,-50%);white-space:nowrap}
.chip .cv{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.chip .cm{margin-left:auto;font-weight:500}

/* the pieces arrive with the particles and leave with them */
.flow-on .stage .ftag,.flow-on .stage .piece{opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.flow-on .stage .piece:not(.chip){transform:translateY(12px)}
.flow-on .stage .chip{transform:translate(14px,-50%)}
.flow-on .stage.on .ftag,.flow-on .stage.on .piece{opacity:1}
.flow-on .stage.on .piece:not(.chip){transform:none}
.flow-on .stage.on .chip{transform:translate(0,-50%)}
.flow-on .stage.on [data-t="a1"]{transition-delay:.12s}
.flow-on .stage.on [data-t="a2"]{transition-delay:.24s}
.flow-on .stage.on [data-t="a3"]{transition-delay:.42s}
.flow-on .stage.on .piece:not(.chip){transition-delay:.25s}
.flow-on .stage.on .piece.later{transition-delay:.5s}

/* pictures made of several documents or panels */
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);align-items:stretch}
.wide .pic,.pic.wide{width:100%}

/* audiences: two columns under one heading */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8) clamp(var(--s7),7vw,128px);margin-top:var(--gap)}
.aud{padding-top:24px;border-top:1px solid var(--ink)}
.aud .pic{width:min(100%,360px);margin:var(--s1) 0 var(--s6)}
.aud .mini{min-height:274px}
.aud h3{font:300 var(--sub)/1.18 var(--serif);letter-spacing:-.012em}
.aud .aud-lead{margin-top:var(--s4);max-width:30em;color:var(--copy);font-size:var(--lead);line-height:1.58}
.aud .link{margin-top:var(--s5)}
.aud .note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule)}
/* the home page's two doors, one for each kind of client: no shared heading, each door carries its own */
.doors .who{margin-top:0;grid-template-rows:repeat(5,auto)}
.doors .aud{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
.doors .aud .label{margin:0 0 var(--s4)}
.doors .aud h2{margin:0;font:300 clamp(26px,calc(15px + 1.5vw),38px)/1.14 var(--serif);font-synthesis:none;letter-spacing:-.016em;text-wrap:balance}
.doors .aud .aud-lead{margin-top:var(--s5)}
.doors .aud .link{margin-top:var(--s5);justify-self:start}
.doors .aud .pic{margin:var(--s7) 0 0}

/* controls: the checks, then the two commitments */
.commit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) clamp(var(--s7),6vw,var(--s9));margin-top:var(--gap)}
.commit>div{padding-top:22px;border-top:1px solid var(--night-rule)}
.commit h3{font:300 var(--sub)/1.18 var(--serif);letter-spacing:-.012em}
.commit p{margin-top:10px;max-width:32em;font-size:15px;line-height:1.58}
.commit .link{margin-top:20px}

/* your stack: records flow through the agents into your ledger */
.pipe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:clamp(260px,20vw,300px);margin-top:var(--gap)}
.pipe .col{display:grid;gap:22px;position:relative;z-index:1}
.pipe .col.src{justify-items:end;text-align:right;padding-right:clamp(40px,5vw,80px)}
.pipe .col.dst{justify-items:start;padding-left:clamp(40px,5vw,80px)}
.pipe .col.mid{justify-items:center;text-align:center}
.hub{position:relative;display:grid;gap:7px;justify-items:center;padding:20px 28px;border-radius:14px;background:rgba(244,244,242,.86);box-shadow:0 0 0 1px var(--rule)}
.pipe .cap2{font:600 13px/1.3 var(--sans);color:var(--muted);margin-bottom:-4px}
.pipe .it{font:500 15px/1.3 var(--sans);color:var(--ink)}
.pipe .mid .cap2{color:var(--violet);margin-bottom:4px}
.pipe .mid .it{font:500 16.5px/1.35 var(--sans)}

/* your stack: a line for each kind of system and a station for each system. The lines run into the agents and on into
   the ledger; the particles draw the lines and the activity on them, the words are real text. Wide, the lines run
   across and bend into the agents; narrower, they run down the columns */
.net{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;margin-top:var(--gap)}
.net .lines{display:grid;gap:var(--s7);padding-right:clamp(88px,9vw,148px)}
.net .cat{margin:0 0 var(--s4);font:500 var(--label)/1.3 var(--sans);color:var(--violet)}
.net ul{list-style:none;margin:0;padding:0}
.net .line ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--s4)}
.net .st{position:relative;display:grid;justify-items:start;align-content:start;row-gap:var(--s3);min-width:0}
.net i{display:block;width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--ink);transition:background-color .35s ease,box-shadow .35s ease}
.net .st>.nm{font:500 14px/1.3 var(--sans);color:var(--ink);transition:color .3s ease}
/* the stop with activity just now: its dot becomes a small clear-glass badge with its logo, on the line, and the
   activity streams out of it; its name turns violet */
.net .st>.lo{position:absolute;left:-11px;top:-11px;z-index:2;display:grid;place-items:center;width:31px;height:31px;padding:0;border-radius:9px;container-type:normal;pointer-events:none;
  opacity:0;transform:scale(.85);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.net .st>.lo img{display:block;width:21px;height:21px;border-radius:5px}
.net .st.live>.lo{opacity:1;transform:none}
.net .st.live>.nm{color:var(--violet)}
.net .st.live i{background:var(--violet-dot);box-shadow:0 0 0 1.5px var(--violet-dot),0 0 0 6px rgba(133,98,236,.16)}
.net .hub{position:relative;z-index:1;container-type:normal;margin:0;padding:15px 24px;border-radius:999px;font:600 14px/1.2 var(--sans);color:var(--violet);white-space:nowrap}
.net .ledgers{padding-left:clamp(56px,6vw,96px)}
.net .ledgers ul{display:grid;gap:var(--s4)}
.net .lg{display:grid;grid-template-columns:9px auto;align-items:start;column-gap:var(--s3)}
.net .lg i{margin-top:5px}
.net .lg>span{font:500 15px/1.3 var(--sans);color:var(--ink)}
.net .lg small{display:block;margin-top:2px;font:400 12.5px/1.3 var(--sans);color:var(--muted)}
html:not(.flow-on) .net .line ul{background:linear-gradient(var(--rule-2),var(--rule-2)) 0 4px/100% 1px no-repeat}
@media (prefers-reduced-motion:reduce){.net i,.net .st>span{transition:none}}
@media (max-width:1100px){
  .net{grid-template-columns:minmax(0,1fr)}
  .net .lines{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);padding:0 0 clamp(72px,9vw,96px)}
  .net .line ul{grid-template-columns:minmax(0,1fr);row-gap:var(--s3)}
  .net .st{grid-template-columns:9px minmax(0,1fr);column-gap:var(--s3);row-gap:0}
  .net .st i{margin-top:4.6px}
  .net .st>.lo{left:-11px;top:-6.4px}
  .net .cat{padding-left:21px}
  .net .hub{justify-self:center}
  .net .ledgers{padding:clamp(56px,7vw,80px) 0 0}
  .net .ledgers ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s5)}
  html:not(.flow-on) .net .line ul{background:linear-gradient(var(--rule-2),var(--rule-2)) 4px 0/1px 100% no-repeat}
}
@media (max-width:600px){
  .net .lines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .net .ledgers ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- the stack, three other ways (for review) ---- */
.opt-tag{display:inline-block;margin:0 0 var(--s6);padding:5px 11px;border-radius:999px;background:var(--wash);font:600 12.5px/1.2 var(--sans);color:var(--violet)}
/* a system as its own logo in a small clear-glass tile; the one with activity just now lifts and shows its name */
.tile{position:relative;list-style:none;flex:none}
.tile .tg{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:12px;container-type:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tile .tg img{display:block;width:26px;height:26px;border-radius:6px}
.tile .tn{position:absolute;left:50%;top:calc(100% + 6px);z-index:3;transform:translate(-50%,4px);padding:3px 7px;border-radius:6px;background:rgba(244,244,242,.94);box-shadow:0 0 0 .5px rgba(30,24,70,.12);
  white-space:nowrap;font:500 12.5px/1.2 var(--sans);color:var(--violet);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.tile.live .tg{transform:translateY(-3px) scale(1.08)}
.tile.live .tn{opacity:1;transform:translate(-50%,0)}
.lay .cat,.orb .cat,.swi .cat,.lay .bar .cat{margin:0 0 var(--s3);font:500 var(--label)/1.3 var(--sans);color:var(--violet)}
.lay ul,.orb ul,.swi ul{list-style:none;margin:0;padding:0}
.lay .mid,.swi .mid{margin:0;container-type:normal;border-radius:18px}
.lay .mid b,.swi .mid b{font:600 15px/1.2 var(--sans);color:var(--violet)}

/* A: three layers. The systems on top, the agents in the middle, your ledger underneath */
.lay{margin-top:var(--gap)}
.lay .srcs{display:flex;justify-content:space-between;gap:var(--s5)}
.lay .grp ul{display:flex;gap:8px}
.lay .tile .tg{width:40px;height:40px}
.lay .tile .tg img{width:24px;height:24px}
.lay .mid{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px var(--s3);margin-top:clamp(104px,10vw,148px);padding:18px 24px}
.lay .mid span{font:400 14px/1.3 var(--sans);color:var(--muted)}
.lay .bar{margin-top:clamp(96px,9vw,136px);padding:18px 24px 20px;border-radius:18px;container-type:normal}
.lay .bar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lay .bar li{padding:2px 18px;border-left:1px solid var(--rule)}
.lay .bar li:first-child{padding-left:0;border-left:0}
.lay .bar li>span{display:block;font:500 17px/1.3 var(--sans);color:var(--ink)}
.lay .bar li>small{display:block;font:400 12.5px/1.3 var(--sans);color:var(--muted)}

/* B: one orbit. Every system on a ring around your ledger */
.orb{position:relative;margin-top:var(--gap);aspect-ratio:2.15}
.orb .ring{position:absolute;inset:0;z-index:3}
.orb .tile{position:absolute;transform:translate(-50%,-50%)}
.orb .cat{position:absolute;margin:0;transform:translate(-50%,-50%);white-space:nowrap}
.orb .tn-u .tn{top:auto;bottom:calc(100% + 6px);transform:translate(-50%,-4px)}
.orb .tn-u.live .tn{transform:translate(-50%,0)}
.orb .tn-r .tn,.orb .tn-l .tn{top:50%;transform:translate(0,-50%)}
.orb .tn-r .tn{left:calc(100% + 8px)}
.orb .tn-l .tn{left:auto;right:calc(100% + 8px)}
.orb .tn-r.live .tn,.orb .tn-l.live .tn{transform:translate(0,-50%)}
.orb .core{position:absolute;left:50%;top:50%;z-index:2;width:min(320px,40%);padding:20px 24px 18px;border-radius:20px;container-type:normal;transform:translate(-50%,-50%)}
.orb .core .cap{margin:0 0 12px;font:600 13px/1.3 var(--sans);color:var(--violet)}
.orb .core li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--rule);font:500 16px/1.3 var(--sans);color:var(--ink)}
.orb .core li:first-child{border-top:0;padding-top:0}
.orb .core small{font:400 12.5px/1.3 var(--sans);color:var(--muted);text-align:right}

/* C: pick your ledger. Your ledgers on one side, your systems on the other */
.swi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(180px,.6fr) minmax(0,1fr);align-items:center;margin-top:var(--gap)}
.swi .mid{justify-self:center;padding:14px 22px;border-radius:999px;white-space:nowrap}
.swi .pick ul{display:grid;gap:6px}
.swi .pick button{all:unset;box-sizing:border-box;display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:12px 18px;border-radius:14px;cursor:pointer;
  font:300 clamp(24px,calc(13px + 1.25vw),34px)/1.15 var(--serif);font-synthesis:none;letter-spacing:-.012em;color:#9a96a3;transition:color .3s ease,background-color .3s ease,box-shadow .3s ease}
.swi .pick button small{font:400 12.5px/1.3 var(--sans);letter-spacing:0;color:var(--muted);text-align:right}
.swi .pick button:hover{color:var(--ink)}
.swi .pick button[aria-checked="true"]{color:var(--ink);background:linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,255,255,.35));box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(30,24,70,.12),0 16px 32px -20px rgba(48,30,120,.35)}
.swi .pick button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.swi .srcs{display:grid;gap:var(--s6)}
.swi .grp ul{display:flex;flex-wrap:wrap;gap:10px}
@media (prefers-reduced-motion:reduce){.tile .tg,.tile .tn,.swi .pick button{transition:none}}
@media (max-width:1100px){
  .lay .srcs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .lay .bar ul{grid-template-columns:1fr 1fr;gap:var(--s3) 0}
  .lay .bar li:nth-child(3){padding-left:0;border-left:0}
  .swi{grid-template-columns:minmax(0,1fr)}
  .swi .srcs{order:1;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .swi .mid{order:2;margin:clamp(72px,12vw,104px) 0}
  .swi .pick{order:3}
  .swi .pick ul{grid-template-columns:1fr 1fr}
  .swi .pick{display:flex;flex-direction:column}
  .swi .pick .cat{order:2;margin:var(--s4) 0 0;text-align:center}
}
@media (max-width:700px){
  .orb{aspect-ratio:.92}
  .orb .cat{display:none}
  .orb .tile .tg{width:34px;height:34px;border-radius:10px}
  .orb .tile .tg img{width:20px;height:20px;border-radius:5px}
  .orb .core{width:54%;padding:12px 14px 10px;border-radius:16px}
  .orb .core .cap{margin-bottom:6px;font-size:11.5px}
  .orb .core li{padding:5px 0;font-size:13px}
  .orb .core small{display:none}
}
@media (max-width:600px){
  .lay .srcs,.swi .srcs{grid-template-columns:minmax(0,1fr)}
  .lay .grp ul,.swi .grp ul{flex-wrap:wrap;gap:8px}
  .tile .tg{width:40px;height:40px}
  .tile .tg img{width:24px;height:24px}
  .swi .pick button{padding:10px 12px;font-size:22px}
  .swi .pick button small{display:none}
}

/* 1: the stack as one paragraph of type */
.sent{margin-top:var(--gap)}
.sent p{max-width:24em;margin:0;font:300 clamp(26px,calc(12px + 2.1vw),44px)/1.3 var(--serif);font-synthesis:none;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty}
.sent p+p{margin-top:.22em}
.sent .cw{color:#a29eab}
.sent .sy{white-space:nowrap}
.sent .sy img{display:inline-block;width:.72em;height:.72em;margin:0 .22em 0 .06em;border-radius:.2em;vertical-align:-.04em;box-shadow:0 0 0 1px rgba(20,18,32,.06)}
.sent .fin{margin-top:.9em}
.sent .ld{color:var(--violet)}

/* 2: the stack mapped to your chart of accounts */
.coa{margin-top:var(--gap)}
.coa .sheet{padding:0 0 6px;border-radius:22px;overflow:hidden;container-type:normal}
.coa .tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--rule)}
.coa .tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 16px 13px;border-radius:10px 10px 0 0;font:500 14px/1 var(--sans);color:var(--muted);transition:color .25s ease,background-color .25s ease,box-shadow .25s ease}
.coa .tabs button:hover{color:var(--ink)}
.coa .tabs button[aria-checked="true"]{color:var(--ink);background:rgba(255,255,255,.75);box-shadow:inset 0 -2px 0 var(--violet)}
.coa .tabs button:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.coa .sh-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:26px 30px 14px}
.coa .sh-head .t{margin:0;font:300 clamp(22px,calc(14px + .8vw),28px)/1.2 var(--serif);font-synthesis:none;letter-spacing:-.012em}
.coa .sh-head .n{margin:0;font:400 12.5px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.coa .cols,.coa .row{display:grid;grid-template-columns:minmax(200px,.36fr) 1fr;gap:16px;padding:0 30px}
.coa .cols{padding-top:8px;padding-bottom:10px;border-bottom:1px solid var(--rule);font:500 12px/1 var(--sans);color:var(--muted)}
.coa .row{align-items:center;padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.coa .row:last-child{border-bottom:0}
.coa .acct{display:flex;align-items:baseline;gap:16px;margin:0;font:500 16px/1.3 var(--sans);color:var(--ink)}
.coa .acct b{font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted)}
.coa .feeds{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.coa .feeds li{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:0 0 0 .5px rgba(30,24,70,.14);font:500 13.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.lg2{display:block;flex:none}
.lg2 img{display:block;width:22px;height:22px;border-radius:6px}

/* 3: build your stack */
.bld{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:var(--gap)}
.bld .hint{margin:0 0 var(--s6);font:400 var(--lead)/1.5 var(--sans);color:var(--copy)}
.bld .bgrp+.bgrp{margin-top:var(--s6)}
.bld .cat{margin:0 0 var(--s3);font:500 var(--label)/1.3 var(--sans);color:var(--violet)}
.bld ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.bld button[aria-pressed]{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;
  font:500 14px/1 var(--sans);color:var(--copy);background:rgba(255,255,255,.42);box-shadow:0 0 0 1px var(--rule-2);transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.bld button[aria-pressed]:hover{color:var(--ink);box-shadow:0 0 0 1px #b9b5c2}
.bld button[aria-pressed] .lg2{opacity:.55;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease}
.bld button[aria-pressed="true"]{color:var(--ink);background:#fff;box-shadow:0 0 0 1.5px var(--violet),0 8px 18px -12px rgba(48,30,120,.45)}
.bld button[aria-pressed="true"] .lg2{opacity:1;filter:none}
.bld button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.bld .out{position:sticky;top:104px;padding:28px 30px 30px;border-radius:22px;container-type:normal}
.bld .out .cap{margin:0 0 14px;font:600 13px/1.3 var(--sans);color:var(--violet)}
.bld .say{min-height:6.6em;margin:0;font:300 clamp(22px,calc(12px + 1vw),29px)/1.32 var(--serif);font-synthesis:none;letter-spacing:-.01em;color:var(--ink)}
.bld .ledp{margin-top:22px}
.bld .ledp ul{gap:6px}
.bld .ledp [role="radio"]{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 13px;border-radius:999px;font:500 13.5px/1 var(--sans);color:var(--copy);box-shadow:0 0 0 1px var(--rule-2);transition:background-color .2s ease,color .2s ease}
.bld .ledp [role="radio"][aria-checked="true"]{color:#fff;background:var(--ink);box-shadow:none}
.bld .ledp [role="radio"]:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.bld .out .btn{margin-top:26px}
.bld .out .btn,.bld .ledp [role="radio"]{text-shadow:none}
@media (prefers-reduced-motion:reduce){.coa .tabs button,.bld button,.bld .lg2{transition:none}}
@media (max-width:900px){
  .bld{grid-template-columns:minmax(0,1fr)}
  .bld .out{position:static}
  .coa .cols,.coa .row{grid-template-columns:minmax(0,1fr);gap:12px}
  .coa .cols span:last-child{display:none}
}
@media (max-width:600px){
  .coa .tabs{padding:8px 8px 0;gap:0}
  .coa .tabs button{padding:10px 9px 12px;font-size:13px}
  .coa .sh-head{flex-direction:column;gap:6px;padding:22px 20px 12px}
  .coa .cols,.coa .row{padding-left:20px;padding-right:20px}
  .bld .out{padding:22px 20px 24px}
}

/* the stack as words (home): a line for each kind of system, then where it all ends up. The system with activity just
   now comes alive; its activity falls into the ledger word it lands in */
.wds{margin-top:var(--gap);text-align:center}
.wds .sys p{margin:0 auto;max-width:44em;font:300 clamp(20px,calc(11px + 1.3vw),31px)/1.6 var(--serif);font-synthesis:none;letter-spacing:-.008em;color:#77737f;text-wrap:balance}
.wds .cw{color:#a6a2ae}
.wds .sy{white-space:nowrap;transition:color .45s ease}
.wds .sy img{display:inline-block;width:.78em;height:.78em;margin:0 .24em 0 .08em;border-radius:.2em;vertical-align:-.08em;filter:grayscale(1);opacity:.42;transition:filter .45s ease,opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.wds .sy.live,.wds .sy:hover{color:var(--ink)}
.wds .sy.live img,.wds .sy:hover img{filter:none;opacity:1;transform:scale(1.18)}
html:not(.flow-on) .wds .sy img{filter:none;opacity:1}
/* the ledger line is first set in particles; the type takes over once they have gathered */
.flow-on .wds-words .fin{opacity:0;transition:opacity .35s ease}
.flow-on .wds-words.settled .fin{opacity:1;transition:opacity .9s ease}
/* set block by block: each block of the sentence shows as its particles land */
.flow-on .wds-typeset .sys p,.flow-on .wds-typeset .fin{opacity:0;transition:opacity .3s ease}
.flow-on .wds-typeset .sys p.set,.flow-on .wds-typeset .fin.set{opacity:1;transition:opacity .7s ease}
/* each system's mark, drawn in particles between the list and the ledger line */
.wds .mk{width:clamp(92px,8.6vw,128px);aspect-ratio:1;margin:clamp(40px,4.4vw,64px) auto 0}
.wds .mk+.fin{margin-top:clamp(34px,3.8vw,54px)}
.wds .fin{margin:clamp(72px,7vw,112px) auto 0;max-width:26em;font:300 clamp(27px,calc(12px + 2vw),42px)/1.22 var(--serif);font-synthesis:none;letter-spacing:-.016em;color:var(--ink);text-wrap:balance}
.wds .ld{white-space:nowrap;transition:color .5s ease}
.wds .ld.recv{color:var(--violet)}
@media (prefers-reduced-motion:reduce){.wds .sy,.wds .sy img,.wds .ld{transition:none}.wds .sy img{filter:none;opacity:1}.flow-on .wds .fin,.flow-on .wds-typeset .sys p{opacity:1;transition:none}}
@media (max-width:600px){.wds .sys p+p{margin-top:var(--s3)}.wds .sys p{line-height:1.5}}

/* the stack as a rolodex: a drum of cards for each kind of system and one for the ledger, each turning a card at a
   time from left to right. The card in front is lit and made of the clear glass, so the field's light shows through
   it; the cards turning away dim. Without the field the drums are plain lists */
.rolo{--ch:66px;--rh:330px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.14fr);column-gap:clamp(14px,1.7vw,26px);margin-top:var(--gap)}
.rd-out{padding-left:clamp(8px,2.2vw,36px)}
.rd-cat{display:grid;gap:3px;margin:0;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.rd-cat b{font:300 clamp(21px,calc(17px + .45vw),26px)/1.1 var(--serif);font-synthesis:none;letter-spacing:-.014em;color:var(--ink)}
.rd-cat span{font-size:13px;line-height:1.35;color:var(--muted)}
.rd{list-style:none;margin:14px 0 0;padding:0}
.rc{display:flex;align-items:center;gap:13px;min-width:0;height:var(--ch);padding:0 16px;border-radius:17px;font:600 16.5px/1.2 var(--sans);letter-spacing:-.016em;color:var(--muted);white-space:nowrap}
.rc+.rc{margin-top:6px}
.rc img{flex:none;width:32px;height:32px;border-radius:8px;filter:grayscale(1);opacity:.5;transition:filter .5s ease,opacity .5s ease}
.rc.ld{font:300 23px/1.1 var(--serif);font-synthesis:none;letter-spacing:-.012em}
.rc .zm{flex:none;width:11px;height:11px;border-radius:3px;background:var(--violet-dot)}
.rc[aria-hidden="true"]{display:none}
.rolo:not(.rolo-on) .rc{color:var(--ink)}
.rolo:not(.rolo-on) .rc img{filter:none;opacity:1}
.rolo-on .rd{position:relative;height:var(--rh);margin-top:6px;perspective:560px;perspective-origin:50% 50%}
.rolo-on .rc,.rolo-on .rc[aria-hidden="true"]{display:flex;position:absolute;left:0;right:0;top:50%;margin:calc(var(--ch) / -2) 0 0;will-change:transform,opacity;
  background:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 .5px rgba(255,255,255,.6),0 0 0 .5px rgba(30,24,70,.07)}
.rolo-on .rc.front{color:var(--ink);text-shadow:0 0 10px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.9);
  background:linear-gradient(155deg,rgba(255,255,255,.36),rgba(255,255,255,.07) 50%,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(9px) saturate(1.9);backdrop-filter:blur(9px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.98),inset 0 -1.5px 0 rgba(255,255,255,.45),inset 1.5px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.28),
    inset 0 0 22px rgba(255,255,255,.3),0 0 0 .5px rgba(30,24,70,.1),0 24px 44px -24px rgba(48,30,120,.36),0 3px 10px -5px rgba(48,30,120,.16)}
.rc.front img{filter:none;opacity:1}
@media (max-width:1100px){
  .rolo{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(36px,5vw,52px)}
  .rd-out{grid-column:1/-1;padding-left:0}
}
@media (max-width:600px){
  .rolo{--ch:52px;--rh:206px;column-gap:12px;row-gap:28px}
  .rc{gap:10px;padding:0 12px;font-size:14.5px;border-radius:14px}
  .rc img{width:26px;height:26px;border-radius:7px}
  .rc.ld{font-size:20px}
}
@media (max-width:420px){
  .rc{white-space:normal;font-size:13.5px;line-height:1.12}
}

/* free catch-up: a calendar of the last twelve months, caught up month by month; three steps */
.year-stage .pic.cal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s7) clamp(20px,2.6vw,40px);width:100%;aspect-ratio:auto}
.cal .mo{display:block;min-width:0}
.cal .mo b{display:flex;align-items:center;gap:6px;height:14px;font:500 13px/1 var(--sans);color:var(--muted);transition:color .4s ease}
.cal .mo i{display:block;aspect-ratio:7/5.4;margin-top:var(--s3)}
.cal .ck{width:14px;height:14px;fill:none;stroke:var(--jade-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.cal .mo.done b{color:var(--ink)}
.cal .mo.done .ck{opacity:1;transform:none}
html:not(.flow-on) .cal .mo i{background:radial-gradient(circle,var(--lav) 0 30%,transparent 33%) 0 0/calc(100% / 7) calc(100% / 6)}
html:not(.flow-on) .cal .ck{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cal .mo b,.cal .ck{transition:none}}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,3vw,44px);margin-top:clamp(36px,3.6vw,52px)}
.steps li{padding-top:16px;border-top:1px solid var(--rule-2);font-size:15.5px;line-height:1.5;color:var(--ink)}
.steps b{display:block;margin-bottom:6px;font:600 13px/1.3 var(--sans);color:var(--violet);font-variant-numeric:tabular-nums}

/* go deeper: one featured page, then an index of the others */
.deeper{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,5.5vw,88px);align-items:start;margin-top:var(--gap)}
.feature{display:block;position:relative;padding:24px 0 26px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);text-decoration:none}
.feature .label{margin:0 0 10px}
.feature h3{font:300 var(--sub)/1.18 var(--serif);letter-spacing:-.012em}
.feature p{margin-top:8px;color:var(--copy);font-size:15px;line-height:1.58}
.feature .go{position:absolute;right:0;top:24px;font-size:16px;color:var(--muted);transition:color .2s,transform .2s}
.feature:hover .go{color:var(--violet);transform:translate(2px,-2px)}
.feature:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.index{list-style:none;padding:0;border-top:1px solid var(--ink)}
.index a{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--rule);font:500 15.5px/1.4 var(--sans);letter-spacing:-.008em;text-decoration:none}
.index a span{color:var(--muted);transition:color .2s,transform .2s}
.index a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.index a:hover span{color:var(--violet);transform:translate(2px,-2px)}

/* questions */
.qa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px clamp(40px,5.5vw,88px)}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding:var(--s5) 2px;cursor:pointer;list-style:none;font:500 16px/1.45 var(--sans);letter-spacing:-.008em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 22px/1 var(--sans);color:var(--violet);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px var(--s5);max-width:34em;color:var(--copy);font-size:16px;line-height:1.62}

/* the closing band and the footer */
.end{position:relative;z-index:1;margin-top:calc(var(--sec) * .72);background:var(--night);color:#f4f4f2}
.end-cta{padding-block:clamp(88px,calc(66px + 5.6vw),148px) clamp(72px,calc(56px + 4.2vw),112px);text-align:center}
.end-cta h2{max-width:14em;margin:0 auto;color:#f4f4f2}
.end-cta .label{color:#b9a6f5}
.end-cta .lead{max-width:30em;margin:18px auto 0;color:#cfccd5;text-wrap:balance}
.end-cta .actions{justify-content:center;margin-top:28px}
.end-cta .link{color:#f4f4f2}
.site-foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:36px 32px;padding-block:48px 36px;border-top:1px solid rgba(244,244,242,.12)}
.site-foot .wordmark{color:#f4f4f2;font-size:22px}
.site-foot .tag-line{margin-top:12px;color:#a9a5b1;font-size:14px;max-width:18em}
.site-foot h3{margin:0 0 12px;font:600 12.5px/1.3 var(--sans);color:#a9a5b1}
.site-foot ul{list-style:none;padding:0;display:grid;gap:9px}
.site-foot a{font-size:14px;text-decoration:none;color:#f4f4f2}
.site-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{display:flex;justify-content:space-between;gap:16px;padding-bottom:36px;color:#8d8996;font-size:12.5px}

@media (max-width:1180px){
  .nav nav{display:none}.nav .motion{margin-left:auto}
}
@media (max-width:1100px){
  .mod,.mod.rev,.mod.even,.mod.even.rev,.mod.pic-wide,.mod.rev.pic-wide{grid-template-columns:1fr;align-items:start}
  .mod .stage{order:-1}
  .mod .flist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,48px);border-top:0}
  .mod .flist li{border-top:1px solid var(--rule-2);border-bottom:0}
  .band-night .mod .flist li{border-top-color:var(--night-rule)}
  .deeper,.qa{grid-template-columns:1fr}
  .site-foot{grid-template-columns:repeat(4,minmax(0,1fr))}.site-foot .brand{grid-column:1/-1}
  .phero .grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .shead{grid-template-columns:1fr}
  .shead .lead,.shead .side{margin-top:20px}
  .jobs{grid-template-columns:1fr 1fr}
  .jobs li:not(:nth-child(3n+1)){border-left:0}
  .jobs li:nth-child(even){border-left:1px solid var(--night-rule)}
  .jobs li a,.jobs li:nth-child(3n+1) a,.jobs li:nth-child(3n) a{padding:28px 24px 30px}
  .jobs li:nth-child(odd) a{padding-left:0}
  .jobs li:nth-child(even) a{padding-right:0}
  .who,.steps,.commit{grid-template-columns:1fr}
  .doors .who{grid-template-rows:none}
  .doors .aud{display:block;grid-row:auto}
  .pipe{grid-template-columns:1fr;gap:40px;min-height:0;justify-items:center}
  .pipe .col,.pipe .col.src,.pipe .col.dst,.pipe .col.mid{justify-items:center;text-align:center;padding:0;gap:10px}
  .pipe .col+.col::before{content:"";position:absolute;left:50%;top:-34px;height:26px;border-left:2px dotted var(--violet-dot)}
  .pipe .mid .it{font-size:var(--body)}
  .site-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
  .hero{padding-top:clamp(24px,4vh,36px)}
  .hero .copy{margin:0 auto}
  .hero .orbit-m{display:block;height:clamp(180px,56vw,236px);margin:14px auto 0;max-width:420px}
  .hero-foot{margin-top:18px}
}
@media (max-width:600px){
  :root{--bar:52px}
  .nav{gap:16px;height:60px}.wordmark{font-size:22px}.nav .btn{gap:12px;padding:8px 11px}
  .jobs{grid-template-columns:1fr}
  .jobs li:nth-child(even){border-left:0}
  .jobs li a,.jobs li:nth-child(odd) a,.jobs li:nth-child(even) a{padding:26px 0 28px}
  .jobs .pic{width:min(100%,220px);margin-bottom:20px}
  .mod .flist{grid-template-columns:1fr}
  .stage[data-flow="sort"]{height:440px}
  .stage[data-flow="number"]{height:472px}
  .chip{gap:10px;padding:0 14px 0 16px}
  .chip .u-tag b{display:none}
  .card{width:min(340px,100%)}
  .docs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .docs .pic:first-child{grid-column:1/-1}
  .year-stage .pic.cal{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s4)}
  .end-cta{text-align:left}.end-cta h2,.end-cta .lead{margin-left:0}.end-cta .actions{justify-content:flex-start}
  .legal{flex-direction:column}
}
@media (max-width:680px){
  .docs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .docs .pic:first-child{grid-column:1/-1}
}
@media (max-width:374px){
  .motion .mt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .chip{gap:8px;padding:0 12px}
  .chip .u-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flow-on .stage .ftag,.flow-on .stage .piece{transition:none}
}

/* the pictures' own furniture */
.chart-stage{padding-top:104px}
.chart-stage .pic{aspect-ratio:2.25}
.legend{display:flex;gap:20px;margin-top:14px;font:500 12.5px/1.3 var(--sans);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw.rev{background:#7350d8}
.sw.inc{background:#13896b}
.chart-stage .qcard{right:0;top:0;width:332px}
.seal-stage{min-height:clamp(320px,26vw,400px);display:flex;align-items:center}
.seal-stage .pic{width:min(56%,360px);aspect-ratio:1}
.seal-stage .ecard{right:0;top:50%;width:352px;translate:0 -50%}
.year-stage{margin-top:var(--gap)}
.year-stage .pic{aspect-ratio:4.4}
.qstage .pic,.bstage .pic{aspect-ratio:1.55}
.hstage{position:relative}
.hstage .pic{width:100%}
.xcard{width:390px;translate:0 -50%}
.qstage,.bstage{display:flex;align-items:center;min-height:340px}
.capcard{width:min(336px,52%);translate:0 -50%}
@media (max-width:1100px){
  .seal-stage{min-height:0;flex-direction:column;align-items:flex-start}
}
@media (min-width:601px) and (max-width:1100px){
  .year-stage .pic.cal{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage[data-flow="number"]{height:480px}
}
@media (max-width:760px){
  .stage .piece:not(.chip):not([data-t]){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:18px 0 0 auto;width:min(380px,100%);translate:none}
  .qstage,.bstage{display:block;min-height:0}
  .stage .pic[style]{width:100%!important;margin-left:0!important}
  .chart-stage{padding-top:0}
  .seal-stage .pic{width:min(80%,340px)}
}

/* L1 to L6: the steps drawn by the field, the level names under them */
.ladder-stage{margin-top:var(--gap)}
.ladder-stage .pic{aspect-ratio:4.4}
.levels{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px;margin-top:16px}
.levels li{padding-top:12px;border-top:1px solid var(--rule-2);font:500 15px/1.4 var(--sans);color:var(--ink)}
.levels b{display:block;margin-bottom:3px;font:600 12.5px/1.2 var(--sans);color:var(--violet);font-variant-numeric:tabular-nums}
.ladder-cap{margin-top:20px}
@media (max-width:699px){
  .ladder-stage .pic{aspect-ratio:2.3}
  .levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
}

/* the agents: eight jobs, each picture settling into a card of its work */
.agents{list-style:none;padding:0;margin-top:var(--gap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s9) var(--s5)}
.agents li{min-width:0}
.agents a{display:block;height:100%;text-decoration:none}
.agents .pic{width:100%;margin-bottom:24px}
.agents .mini{min-height:268px}
.agents p{margin-top:6px;color:var(--night-copy);font-size:14.5px;line-height:1.55}
.agents .arr{flex:none;font-size:14px;color:var(--night-muted);transition:color .2s,transform .2s}
.agents a:hover .arr{color:var(--lav);transform:translateY(2px)}
.agents a:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.agents+.note{margin-top:48px}

/* the product, close up, in the reviewed clear glass (option 1), on the light sections and the dark bands. Each card is a
   small screen of one piece of work (the bank line and its posting, the match, the entry, the brief as it reads), never
   a number on a tile. Cards grow with their content and never clip it; cards that sit side by side share one height. */
.ui,.piece{
  --c-ink:#0e0f14;--c-m:#6b6876;--c-m2:#4d4a57;--c-rule:rgba(20,18,32,.08);--c-ok:#0d8659;--c-you:#5f45d1;--c-wait:#a2620a;--c-down:#bf416b;
  --c-track:rgba(20,18,32,.07);--c-fill:#6a4fd8;--c-barc:rgba(106,79,216,.16);--c-barl:#6a4fd8;--c-qbg:rgba(106,79,216,.1);
  --c-btn:rgba(255,255,255,.5);--c-btns:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(255,255,255,.8),0 1px 3px rgba(20,16,50,.08);
  isolation:isolate;container-type:inline-size;color:var(--c-ink);border-radius:24px;
  text-shadow:0 0 10px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.9);
  background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 50%,rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(3px) saturate(1.8);backdrop-filter:blur(3px) saturate(1.8);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.98),inset 0 -1.5px 0 rgba(255,255,255,.45),inset 1.5px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.28),
    inset 0 0 26px rgba(255,255,255,.34),0 0 0 .5px rgba(30,24,70,.1),0 26px 50px -26px rgba(48,30,120,.34),0 3px 10px -5px rgba(48,30,120,.16);
  font:450 14px/1.45 var(--sans);letter-spacing:-.006em;text-align:left}
.band-night .ui,.band-night .piece{
  --c-ink:#f5f4fa;--c-m:rgba(245,244,250,.6);--c-m2:rgba(245,244,250,.78);--c-rule:rgba(255,255,255,.14);--c-ok:#6ee0b4;--c-you:#c2b4ff;--c-wait:#f2b35b;--c-down:#ff9dbb;
  --c-track:rgba(255,255,255,.12);--c-fill:linear-gradient(90deg,#c9bcff,#9d86ff);--c-barc:rgba(255,255,255,.18);--c-barl:linear-gradient(180deg,#c9bcff,#8d74ff);
  --c-qbg:rgba(255,255,255,.1);--c-btn:rgba(255,255,255,.1);--c-btns:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.14);
  border-radius:24px;text-shadow:0 1px 12px rgba(0,0,0,.45);
  background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 52%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(3px) saturate(1.6) brightness(1.1);backdrop-filter:blur(3px) saturate(1.6) brightness(1.1);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.14),inset 1.5px 0 0 rgba(255,255,255,.16),inset -1px 0 0 rgba(255,255,255,.1),
    inset 0 0 26px rgba(255,255,255,.06),0 0 0 .5px rgba(0,0,0,.5),0 28px 56px -26px rgba(0,0,0,.7)}
/* the clear glass's sheen: brighter on the paper, quieter in the dark */
.ui::before,.ui::after,.piece::before,.piece::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.ui::before,.piece::before{background:radial-gradient(85% 60% at 10% -6%,rgba(255,255,255,.6),rgba(255,255,255,0) 58%)}
.ui::after,.piece::after{background:radial-gradient(60% 40% at 96% 104%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%)}
.band-night .ui::before,.band-night .piece::before{background:radial-gradient(85% 60% at 10% -6%,rgba(255,255,255,.16),rgba(255,255,255,0) 58%)}
.band-night .ui::after,.band-night .piece::after{background:radial-gradient(60% 40% at 96% 104%,rgba(255,255,255,.08),rgba(255,255,255,0) 70%)}
.ui>*,.piece>*{position:relative;z-index:1}
.mini{display:flex;flex-direction:column}
.pic>.mini{position:relative;width:100%}
.ui{--pt:24px;--px:26px;--pb:22px;padding:var(--pt) var(--px) var(--pb)}
.ui>*,.piece>*{flex:none}
.ui .ic,.piece .ic{width:14px;height:14px;color:currentColor}
.u-n{font-variant-numeric:tabular-nums}
/* the top line */
.u-l{display:flex;align-items:baseline;gap:12px;white-space:nowrap;font-weight:500;font-size:13.5px;line-height:1.3;letter-spacing:-.006em;color:var(--c-m2)}
.u-l>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.u-r{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:450;font-size:13px;color:var(--c-m);white-space:nowrap}
.u-up{display:inline-flex;align-items:center;gap:2px;font-style:normal;font-weight:600;font-size:13px;color:var(--c-ok)}
.ui .u-up .ic{width:12px;height:12px;stroke-width:2.2}
/* spare height goes above the footer */
.u-sp{flex:1 0 20px}
.u-f{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--c-rule);white-space:nowrap}
.u-st{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;line-height:1.2;white-space:nowrap}
.u-st::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:currentColor}
.u-st.ok{color:var(--c-ok)}.u-st.you{color:var(--c-you)}.u-st.wait{color:var(--c-wait)}.u-st.run{color:var(--c-m)}
.u-btns{display:flex;gap:8px}
.u-btn{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:10px;font-weight:550;font-size:13px;white-space:nowrap;color:var(--c-ink);background:var(--c-btn);box-shadow:var(--c-btns)}
.u-btn.dark{background:var(--c-ink);color:#fff;box-shadow:none;text-shadow:none}
.band-night .u-btn.dark{color:#101116;text-shadow:none}
.u-tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;background:var(--c-track);color:var(--c-m2);font-weight:500;font-size:13px;white-space:nowrap}
.u-tag b{font-weight:500;color:var(--c-m)}
.u-ck{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;color:var(--c-ok);background:color-mix(in srgb,var(--c-ok) 14%,transparent)}
.ui .u-ck .ic,.piece .u-ck .ic{width:11px;height:11px;stroke-width:2.3}
.u-ring{width:18px;height:18px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c-m) 60%,transparent)}
.u-ring.you{box-shadow:inset 0 0 0 1.5px var(--c-you);background:color-mix(in srgb,var(--c-you) 12%,transparent)}
.flow-on [data-settle] .mini{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.flow-on [data-settle].settled .mini{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.flow-on [data-settle].settled li:nth-child(2) .mini{transition-delay:.06s}
.flow-on [data-settle].settled li:nth-child(3) .mini{transition-delay:.12s}
.flow-on [data-settle].settled li:nth-child(4) .mini{transition-delay:.18s}
.flow-on [data-settle].settled li:nth-child(5) .mini{transition-delay:.1s}
.flow-on [data-settle].settled li:nth-child(6) .mini{transition-delay:.16s}
.flow-on [data-settle].settled li:nth-child(7) .mini{transition-delay:.22s}
.flow-on [data-settle].settled li:nth-child(8) .mini{transition-delay:.28s}
.flow-on [data-settle].settled .docs>.pic:nth-child(2) .mini{transition-delay:.1s}
.flow-on [data-settle].settled .docs>.pic:nth-child(3) .mini{transition-delay:.2s}
.flow-on [data-settle].settled .aud+.aud .mini{transition-delay:.12s}

/* lists, documents and the larger views */
.u-row{display:flex;align-items:center;gap:10px;min-height:38px;white-space:nowrap}
.u-row+.u-row{border-top:1px solid var(--c-rule)}
.u-l+.u-row{margin-top:14px;border-top:1px solid var(--c-rule)}
.u-row>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.u-d{width:7px;height:7px;flex:none;border-radius:50%;background:var(--c-ok)}
.u-d.you{background:var(--c-you)}.u-d.wait{background:var(--c-wait)}.u-d.idle{background:var(--c-m);opacity:.4}
.u-n.mut{color:var(--c-m)}
.u-tot{display:flex;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--c-rule);color:var(--c-m2);white-space:nowrap}
.u-tot .u-n{font-weight:600;color:var(--c-ink)}
.u-kv{display:grid;gap:9px;margin-top:16px}
.u-kv>span{display:flex;justify-content:space-between;gap:12px;color:var(--c-m2);white-space:nowrap}
.u-kv b{font-weight:500;color:var(--c-ink);font-variant-numeric:tabular-nums}
.ui.doc{--pt:20px;--px:20px;--pb:18px}
.u-row.ck{gap:10px;min-height:36px}
.u-row.cl{min-height:42px}
.u-row.cl .u-n{color:var(--c-m2)}
.u-row.ev{gap:10px;min-height:40px}
.u-row.ev .u-r{font-size:12.5px}
.u-row.xq{gap:12px;padding:10px 0}
.u-row.xq>span:first-of-type{display:grid;white-space:nowrap}
.u-row.xq b{overflow:hidden;text-overflow:ellipsis;font-weight:550}
.u-row.xq em{overflow:hidden;text-overflow:ellipsis;font-style:normal;font-size:12.5px;color:var(--c-m)}
.u-row.xq .u-btn{height:30px;padding:0 11px;font-size:12.5px}
.u-say{margin-top:14px;font-size:15px;line-height:1.45}
.u-say+.u-btns{margin-top:16px}
/* small focused screens: a title bar, then the work itself */
.ui.scr{--pt:16px;--px:20px;--pb:18px;font-size:13px}
.s-hd{display:flex;align-items:baseline;gap:10px;margin:calc(-1 * var(--pt)) calc(-1 * var(--px)) 16px;padding:13px var(--px) 12px;border-bottom:1px solid var(--c-rule);white-space:nowrap}
.s-hd b{flex:none;font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--c-ink)}
.s-hd span{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--c-m)}
.s-cap{display:block;margin-bottom:8px;font-weight:600;font-size:10.5px;letter-spacing:.01em;color:var(--c-m)}
.s-raw{display:flex;align-items:baseline;gap:10px;white-space:nowrap;font:500 11.5px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.01em;color:var(--c-m)}
.s-raw>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.s-to{position:relative;width:1.5px;height:18px;margin:7px 0 8px 6px;background:linear-gradient(180deg,var(--c-rule),var(--c-you))}
.s-to::after{content:"";position:absolute;left:-3px;bottom:-2px;width:7.5px;height:7.5px;border-radius:50%;background:var(--c-you);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-you) 18%,transparent)}
.s-tx{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.s-tx b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:15px;letter-spacing:-.01em}
.s-tx .u-n{font-weight:600;font-size:15px}
.s-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.s-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;background:var(--c-track);box-shadow:inset 0 0 0 1px var(--c-rule);font-weight:500;font-size:12.5px;color:var(--c-m2);white-space:nowrap}
.s-chip em{font-style:normal;color:var(--c-m)}
.s-chip.ok{color:var(--c-ok);background:color-mix(in srgb,var(--c-ok) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-ok) 20%,transparent)}
.ui .s-chip .ic{width:13px;height:13px}
.s-done{display:flex;align-items:center;gap:8px;padding-top:13px;border-top:1px solid var(--c-rule);font-weight:550;white-space:nowrap}
.s-done>span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis}
.s-done .u-r{font-weight:450;font-size:12.5px}
.s-from{display:flex;align-items:center;gap:8px;font-size:14.5px;white-space:nowrap}
.s-from b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;letter-spacing:-.01em}
.s-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--c-you)}
.s-subj{margin:4px 0 0 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-m2)}
.s-subj+.s-chips{margin-left:15px}
.s-mh{display:grid;grid-template-columns:1fr 46px 1fr;margin-bottom:2px;font-size:11.5px;color:var(--c-m)}
.s-mh span:last-child{grid-column:3;text-align:right}
.s-mr{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;min-height:31px;white-space:nowrap}
.s-mr>span:last-child{text-align:right}
.s-mr+.s-mr{border-top:1px solid var(--c-rule)}
.s-link{position:relative;display:grid;place-items:center;height:18px}
.s-link::before,.s-link::after{content:"";position:absolute;top:50%;height:1px;background:color-mix(in srgb,var(--c-ok) 50%,transparent)}
.s-link::before{left:2px;right:calc(50% + 11px)}.s-link::after{right:2px;left:calc(50% + 11px)}
.s-link .u-ck{width:17px;height:17px}
.s-jr{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px;gap:8px;align-items:center;min-height:32px;white-space:nowrap}
.s-jr+.s-jr{border-top:1px solid var(--c-rule)}
.s-jr>span:first-child{overflow:hidden;text-overflow:ellipsis}
.s-jr>span:not(:first-child){text-align:right}
.s-jr.s-jh{min-height:22px;font-size:11.5px;color:var(--c-m)}
.s-jr em{font-style:normal;color:var(--c-m)}
.s-close{display:flex;align-items:center;gap:18px;margin-top:4px}
.s-ring{position:relative;display:grid;place-items:center;width:78px;height:78px;flex:none}
.s-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.s-ring circle{fill:none;stroke-width:3.2}
.s-ring .t{stroke:var(--c-track)}
.s-ring .f{stroke:var(--c-you);stroke-linecap:round}
.s-ring b{font:300 25px/1 var(--serif);font-synthesis:none;letter-spacing:-.02em}
.s-ring b i{margin-left:1px;font:500 11px/1 var(--sans);font-style:normal;letter-spacing:0;color:var(--c-m)}
.s-tasks{display:grid;gap:8px;min-width:0}
.s-tasks>span{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.s-tasks .u-ck,.s-tasks .u-ring{width:16px;height:16px}
.s-tasks .you{font-weight:600;color:var(--c-you)}
.s-tasks .idle{color:var(--c-m)}
.s-st{display:grid}
.s-st>span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:31px;white-space:nowrap;color:var(--c-m2)}
.s-st>span+span{border-top:1px solid var(--c-rule)}
.s-st .u-n{color:var(--c-ink)}
.s-net{display:flex;align-items:baseline;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--c-ink) 35%,transparent);white-space:nowrap}
.s-net>span:first-child{font-weight:600}
.s-net b{margin-left:auto;font:300 26px/1 var(--serif);font-synthesis:none;letter-spacing:-.02em}
.s-act{margin-top:14px}
.s-sp+.s-act,.u-sp+.s-act{margin-top:0}
.s-ev{display:flex;align-items:flex-start;gap:16px;margin-top:2px}
.s-rcpt{display:flex;flex-direction:column;gap:5px;width:64px;flex:none;padding:10px 8px 16px;background:#fbfbf8;color:#2b2a30;font:700 7.5px/1 var(--sans);letter-spacing:.1em;text-shadow:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),93.75% 100%,87.5% calc(100% - 5px),81.25% 100%,75% calc(100% - 5px),68.75% 100%,62.5% calc(100% - 5px),56.25% 100%,50% calc(100% - 5px),43.75% 100%,37.5% calc(100% - 5px),31.25% 100%,25% calc(100% - 5px),18.75% 100%,12.5% calc(100% - 5px),6.25% 100%,0 calc(100% - 5px))}
.s-rcpt i{display:block;height:3px;border-radius:2px;background:#dddce2}
.s-rcpt i.s{width:58%}
.s-rcpt em{align-self:flex-end;margin-top:5px;font:650 9px/1 var(--sans);font-style:normal;letter-spacing:0}
.s-ok3{display:grid;gap:10px;min-width:0;padding-top:3px}
.s-ok3>span{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:500}
.ui .s-ok3 .ic,.piece .s-ok3 .ic{width:17px;height:17px;flex:none;padding:3px;border-radius:50%;color:var(--c-ok);background:color-mix(in srgb,var(--c-ok) 14%,transparent);stroke-width:2.4}
.s-ev.big .s-ok3{gap:12px}
.s-ev.big .s-ok3>span{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:9px;row-gap:1px;align-items:center}
.s-ev.big .s-ok3 em{grid-column:2;overflow:hidden;text-overflow:ellipsis;font-style:normal;font-weight:450;font-size:12px;color:var(--c-m)}
.s-q{font-size:13.5px;line-height:1.4}
.s-q b{display:block;margin-bottom:2px;font-weight:600;font-size:12px;color:var(--c-you)}
.s-ringrow{display:flex;align-items:center;gap:12px;margin-top:14px}
.s-ringrow .s-ring{width:48px;height:48px}
.s-ringrow .s-ring b{font-size:16px}
.s-ringrow .s-ring b i{display:none}
.s-ringrow>span:last-child{color:var(--c-m2)}
.s-ringrow+.u-row{margin-top:10px}
/* the hero's small screens */
.hm .s-raw{font-size:10px}
.hm .s-to{height:12px;margin:5px 0 7px 5px}
.hm .s-chip{height:22px;padding:0 8px;font-size:11px}
.hm .s-tx b,.hm .s-tx .u-n{font-size:13px}
.hm .s-tx+.s-chip{margin-top:9px}
.hm .s-mh{font-size:10px;grid-template-columns:1fr 38px 1fr}
.hm .s-mr{min-height:26px;font-size:12.5px;grid-template-columns:1fr 38px 1fr}
.hm .s-ev{gap:10px}
.hm .s-rcpt{width:40px;gap:3px;padding:6px 5px 10px;font-size:5.5px}
.hm .s-rcpt i{height:2px}
.hm .s-rcpt em{font-size:7px;margin-top:2px}
.hm .s-ok3{gap:5px;padding-top:0}
.hm .s-ok3>span{gap:5px;font-size:11px}
.ui.hm .s-ok3 .ic{width:13px;height:13px;padding:2px}
/* the brief, written: the month in sentences, the figures inside them */
.u-note{margin-top:14px;font-size:14px;line-height:1.55;color:var(--c-m2);text-wrap:pretty}
.u-note b{font-weight:600;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ui.scr .u-note{margin-top:0;font-size:13.5px;line-height:1.5}
/* a question, next to the receipt it is about */
.s-qx{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--c-rule)}
.s-qx .s-rcpt{width:46px;gap:3px;padding:7px 6px 11px;font-size:5.5px}
.s-qx .s-rcpt i{height:2px}
.s-qx .s-rcpt em{margin-top:2px;font-size:7px}
.s-qx .s-q{min-width:0}
/* the sign-off on a firm's brief */
.u-sig{display:flex;align-items:center;gap:9px;padding-top:14px;border-top:1px solid var(--c-rule);white-space:nowrap}
.u-mono{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#15161c;color:#f4f4f2;font:600 10px/1 var(--sans);letter-spacing:.06em;text-shadow:none}
.u-sig>span:last-child{display:grid;min-width:0;line-height:1.3}
.u-sig b{overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13px}
.u-sig em{overflow:hidden;text-overflow:ellipsis;font-style:normal;font-size:12px;color:var(--c-m)}
/* a prepaid schedule: the months already booked, this month's entry, the months to come */
.s-pp{display:grid;gap:3px;margin-top:14px}
.s-pp b{font-weight:600;letter-spacing:-.01em}
.s-pp>span{font-size:12.5px;color:var(--c-m)}
.s-cells{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin-top:16px}
.s-cells i{height:22px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--c-rule)}
.s-cells i.on{background:color-mix(in srgb,var(--c-you) 28%,transparent);box-shadow:none}
.s-cells i.now{background:var(--c-barl)}
.s-cellm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin-top:6px;font-size:9.5px;line-height:1;color:var(--c-m);text-align:center}
.s-ppm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin-top:12px;font-size:12.5px;color:var(--c-m2);white-space:nowrap}
@container (max-width:150px){
  .s-pp .u-w,.s-cellm{display:none}
  .s-cells i{height:18px}
  .u-tot{font-size:13px}
}
@container (max-width:210px){
  .u-sig b{font-size:12.5px}
}
@container (max-width:250px){
  .s-jr em{display:none}
  .s-close{gap:14px}
  .s-ring{width:66px;height:66px}
}

/* ---- the agents at work: each screen is a crop of the tool doing that job, laid out for it ---- */
.ui,.piece{--c-pop:rgba(255,255,255,.58);--c-pops:inset 0 0 0 1px rgba(255,255,255,.95),0 6px 16px -8px rgba(48,30,120,.22);
  --c-frm:rgba(20,18,32,.16);--c-field:rgba(255,255,255,.62);--c-fieldb:rgba(20,18,32,.13);--c-paper:#fbfbf8}
.band-night .ui,.band-night .piece{--c-pop:rgba(255,255,255,.07);--c-pops:inset 0 0 0 1px rgba(255,255,255,.13),0 8px 20px -10px rgba(0,0,0,.6);
  --c-frm:rgba(255,255,255,.2);--c-field:rgba(255,255,255,.06);--c-fieldb:rgba(255,255,255,.16)}
/* the people and the agent in the screens */
.a-av{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:hsl(var(--h,250) 42% 50%);color:#fff;font:650 11px/1 var(--sans);text-shadow:none}
.band-night .a-av{background:hsl(var(--h,250) 34% 44%)}
.a-av.q{background:none;box-shadow:inset 0 0 0 1.5px var(--c-rule)}
.a-z{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:linear-gradient(150deg,#a08bff,#5f45d1);color:#fff;font:700 10px/1 var(--sans);text-shadow:none}
.a-you{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:9px;background:color-mix(in srgb,var(--c-you) 15%,transparent);color:var(--c-you);font:600 10.5px/1 var(--sans);font-style:normal;text-shadow:none}
.a-spin{display:block;width:14px;height:14px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--c-you) 22%,transparent);
  background:conic-gradient(var(--c-you) 0 25%,transparent 25%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.7px),#000 calc(100% - 1.6px));mask:radial-gradient(closest-side,transparent calc(100% - 1.7px),#000 calc(100% - 1.6px))}
.a-live{display:inline-flex;align-items:center;gap:6px}
.a-live i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--c-ok);box-shadow:0 0 0 calc(var(--pl,.5) * 5px) color-mix(in srgb,var(--c-ok) calc((1 - var(--pl,.5)) * 30%),transparent)}
.a-acct{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--c-track);box-shadow:inset 0 0 0 1px var(--c-rule);font-weight:500;font-size:11.5px;color:var(--c-m2);white-space:nowrap}
.a-att{display:inline-flex;align-items:center;gap:3px;min-width:0;font-size:11.5px;color:var(--c-m);white-space:nowrap}
.a-att span{overflow:hidden;text-overflow:ellipsis}
.ui .a-att .ic{width:12px;height:12px;flex:none}
.a-m{display:grid;min-width:0}
.a-m>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-m>span{font-size:11.5px;color:var(--c-m)}
/* status marks that change in place: done, running, waiting, stopped */
.a-sx{display:grid;width:16px;height:16px;flex:none}
.a-sx>*{grid-area:1/1;width:16px;height:16px}
.a-sx>.a-spin,.a-sx>.u-ring,.a-sx>.a-bang{opacity:0}
.a-bang{display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c-wait) 18%,transparent);color:var(--c-wait);font:800 10.5px/1 var(--sans);font-style:normal;text-shadow:none}
.a-ck.no .a-sx>.u-ck{opacity:0}
.a-ck.no .a-sx>.a-bang{opacity:1}

/* the bank feed: lines arrive, the agent codes them */
.a-feed{--rh:52px;position:relative;display:block;min-height:calc(var(--rh) * 3 + 14px);margin:-17px calc(-1 * var(--px)) calc(5px - var(--pb));overflow:hidden;
  -webkit-mask:linear-gradient(#000 calc(100% - 34px),transparent);mask:linear-gradient(#000 calc(100% - 34px),transparent)}
.ui>.a-feed{flex:1 0 auto}
.a-row{position:absolute;left:0;right:0;top:0;height:var(--rh);border-top:1px solid var(--c-rule);transform:translateY(calc(var(--i,0) * var(--rh)));
  background:color-mix(in srgb,var(--c-you) calc(var(--nw,0) * 9%),transparent)}
.a-l{position:absolute;inset:0 var(--px);display:grid;grid-template-columns:24px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:4px;align-content:center;white-space:nowrap}
.a-l.raw{opacity:0}
.a-l>.a-av{grid-row:1/3;align-self:center}
.a-l>b,.a-d{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a-l>b{font-weight:600;font-size:13.5px;line-height:1.25;letter-spacing:-.01em}
.a-d{font:500 11px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.01em;color:var(--c-m2)}
.a-amt{font-weight:600;font-size:13px;line-height:1.25;text-align:right}
.a-s{grid-column:2/4;display:flex;align-items:center;gap:6px;min-width:0;height:20px}
.a-s>.u-ck,.a-s>.u-ring,.a-s>.a-spin{margin-left:auto;width:16px;height:16px}
.a-cd{font-weight:550;font-size:11.5px;text-shadow:none;color:transparent;background:linear-gradient(90deg,var(--c-m) 0 38%,var(--c-you) 50%,var(--c-m) 62% 100%) calc(var(--sh,0) * -200% + 100%) 0/300% 100%;-webkit-background-clip:text;background-clip:text}
.a-ask{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:550;font-size:11.5px;color:var(--c-you)}

/* the inbox: an invoice read off its PDF */
.a-mh{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;align-items:center;white-space:nowrap}
.a-mh .a-av{width:28px;height:28px;font-size:12px}
.a-mh b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.a-mh .a-m>span{font-size:12px;color:var(--c-m2)}
.a-time{align-self:start;font-size:11.5px;color:var(--c-m)}
.a-ex{display:flex;align-items:center;gap:12px;margin-top:14px}
.a-pdf{position:relative;display:block;width:60px;height:78px;flex:none;border-radius:3px;background:var(--c-paper);box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.06);text-shadow:none;overflow:hidden}
.a-pdf b{position:absolute;left:7px;top:7px;font:750 5.5px/1 var(--sans);letter-spacing:.14em;color:#2b2a30}
.a-pdf i{position:absolute;height:2.5px;border-radius:2px;background:#dddce3}
.a-pdf i.a-rg{height:auto;border-radius:2px;background:rgba(116,92,255,.13);box-shadow:0 0 0 1.25px #7a62ff}
.a-pdf i.a-sc{left:0;right:0;top:0;width:auto;height:2px;border-radius:0;background:linear-gradient(90deg,transparent,#7a62ff 30%,#7a62ff 70%,transparent);box-shadow:0 0 6px 1px rgba(122,98,255,.6);opacity:0}
.a-fl{display:grid;flex:1;gap:5px;min-width:0}
.a-fl>span{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:8px;align-items:baseline;white-space:nowrap}
.a-fl em{font-style:normal;font-size:11px;color:var(--c-m)}
.a-fl b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:550;font-size:12.5px}

/* reconciliation: the bank's line and the book's entry, matched */
.a-rh{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.a-rh b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.a-rh span{margin-left:auto;font-size:12px;color:var(--c-m)}
.a-cols{display:flex;justify-content:space-between;margin-top:10px;padding-bottom:6px;border-bottom:1px solid var(--c-rule);font-size:11px;color:var(--c-m)}
.a-pair{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);align-items:center;min-height:42px;white-space:nowrap}
.a-pair+.a-pair{border-top:1px solid var(--c-rule)}
.a-pair>span:first-child,.a-pair>span:last-child{display:grid;gap:1px;min-width:0}
.a-pair>span:last-child{text-align:right;opacity:var(--bk,1)}
.a-pair em{overflow:hidden;text-overflow:ellipsis;font-style:normal;font-size:10.5px;color:var(--c-m)}
.a-pair>span:first-child em{font:500 9.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.01em}
.a-pair b{font-weight:600;font-size:13px}
.a-ln{position:relative;display:grid;place-items:center;height:18px}
.a-ln::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:color-mix(in srgb,var(--c-ok) 55%,transparent);transform-origin:left;transform:scaleX(var(--d,1))}
.a-ln .u-ck{position:relative;width:16px;height:16px;transform:scale(var(--k,1));opacity:var(--k,1)}
.a-diff{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--c-rule);white-space:nowrap}
.a-diff>span:first-child{color:var(--c-m2)}
.a-diff b{font-weight:600}
.a-diff .u-st{margin-left:auto;font-size:12.5px;opacity:var(--rk,1)}

/* the journal agent's schedule: the month, the day's entries, one open */
.a-mo{display:flex;align-items:center;white-space:nowrap}
.a-mo b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.a-mo span{margin-left:auto;letter-spacing:.4em;color:var(--c-m)}
.a-wk,.a-dy{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.a-wk{margin-top:10px;font-size:10.5px;color:var(--c-m)}
.a-dy{margin-top:2px}
.a-dy span{position:relative;display:grid;place-items:center;height:27px;font-size:12px;color:var(--c-m2);font-variant-numeric:tabular-nums}
.a-dy span.o{color:var(--c-m);opacity:.6}
.a-dy span.on{color:#fff;font-weight:600;text-shadow:none}
.a-dy span.on::before{content:"";position:absolute;left:50%;top:50%;width:25px;height:25px;margin:-12.5px 0 0 -12.5px;border-radius:50%;background:var(--c-barl);z-index:-1}
.a-dy span i{position:absolute;left:50%;bottom:-3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c-you);box-shadow:-6px 0 0 var(--c-you),6px 0 0 var(--c-you)}
.a-dy span i.h{bottom:1px;background:none;box-shadow:inset 0 0 0 1.2px var(--c-you)}
.a-pop{position:relative;display:grid;gap:5px;margin-top:12px;padding:10px 12px 9px;border-radius:12px;background:var(--c-pop);box-shadow:var(--c-pops)}
.a-pop::before{content:"";position:absolute;left:calc(35.71% - 5px);top:-5px;width:10px;height:10px;border-radius:2px 0 0 0;background:inherit;box-shadow:inset 1px 1px 0 rgba(255,255,255,.6);transform:rotate(45deg);
  -webkit-backdrop-filter:inherit;backdrop-filter:inherit}
.band-night .a-pop::before{box-shadow:inset 1px 1px 0 rgba(255,255,255,.13)}
.a-ph{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.a-ph b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:12.5px}
.a-ph span{margin-left:auto;font-size:11px;color:var(--c-m)}
.a-jl{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:6px;align-items:baseline;font-size:12px;white-space:nowrap}
.a-jl em{font-style:normal;font-size:11px;color:var(--c-m)}
.a-jl span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--c-m2)}
.a-jl b{font-weight:550}
.a-pf{display:flex;align-items:center;gap:6px;margin-top:2px;padding-top:7px;border-top:1px solid var(--c-rule);font-size:11px;color:var(--c-m);white-space:nowrap}
.ui .a-pf .ic{width:12px;height:12px;flex:none}
.a-pf .u-st{margin-left:auto;font-size:11.5px}

/* the close: tasks, whose they are, and the day of the close */
.a-ch{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.a-ch b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.a-ch span{margin-left:auto;font-size:12px;color:var(--c-m)}
.a-d5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:10px 0 6px}
.a-d5 i{position:relative;height:4px;border-radius:2px;background:var(--c-track);overflow:hidden}
.a-d5 i.on{background:var(--c-fill)}
.a-d5 i.now::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--f,1) * 100%);border-radius:2px;background:var(--c-fill)}
.a-tk{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:9px;align-items:center;min-height:30px;white-space:nowrap}
.a-tk+.a-tk{border-top:1px solid var(--c-rule)}
.a-tk>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a-tk>.u-ck,.a-tk>.u-ring{width:16px;height:16px}
.a-tk.you>span{font-weight:600;color:var(--c-you)}
.a-tk.idle>span{color:var(--c-m)}
.a-lk{display:grid;place-items:center;width:16px;height:16px;color:var(--c-m)}
.ui .a-lk .ic{width:13px;height:13px}
.a-tk>.u-ring.you{transform:scale(var(--pu,1));box-shadow:inset 0 0 0 1.5px var(--c-you),0 0 0 calc((var(--pu,1) - 1) * 40px) color-mix(in srgb,var(--c-you) 18%,transparent)}

/* the P&L, kept current */
.a-tabs{display:flex;align-items:center;gap:2px;white-space:nowrap}
.a-tabs>span{padding:4px 8px;border-radius:7px;font-weight:500;font-size:12px;color:var(--c-m)}
.a-tabs>span.on{background:var(--c-track);box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-ink)}
.a-tabs>.a-live{margin-left:auto;padding:0;font-size:11.5px}
.a-pl{display:grid;margin-top:10px}
.a-pl>span{display:grid;grid-template-columns:minmax(0,1fr) 58px 58px;column-gap:12px;align-items:center;min-height:27px;white-space:nowrap;border-top:1px solid var(--c-rule);
  background:color-mix(in srgb,var(--c-you) calc(var(--fl,0) * 12%),transparent)}
.a-pl>span>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--c-m2)}
.a-pl>span>span+span{text-align:right}
.a-pl .a-plh{min-height:20px;border-top:0;font-size:10.5px;color:var(--c-m)}
.a-pl .a-pv{color:var(--c-m)}
.a-pl .a-ni{border-top:1px solid color-mix(in srgb,var(--c-ink) 32%,transparent);font-weight:600}
.a-pl .a-ni>span:first-child{color:var(--c-ink)}
.a-upd{font-size:11px;color:var(--c-m)}

/* the 1099: a form, its boxes filled in */
.a-fh{display:flex;align-items:center;gap:8px;white-space:nowrap}
.a-fh b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.a-fh>span:not(.u-st){font-size:12px;color:var(--c-m)}
.a-fh .u-st{margin-left:auto;font-size:12px}
.a-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:12px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--c-frm);overflow:hidden}
.a-form>span{display:grid;align-content:start;gap:4px;min-height:56px;padding:7px 9px 8px}
.a-form>span:nth-child(odd){box-shadow:1px 0 0 var(--c-frm)}
.a-form>span:nth-child(n+3){border-top:1px solid var(--c-frm)}
.a-form em{font-style:normal;font-size:9.5px;line-height:1.25;color:var(--c-m)}
.a-form b{font-weight:600;font-size:12.5px;line-height:1.25}
.a-ff{display:flex;align-items:center;gap:8px;white-space:nowrap}
.a-ff>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--c-m)}
.a-ff .u-btn{margin-left:auto;height:28px;padding:0 11px;font-size:12px}

/* the audit agent: the checks an entry runs before it posts */
.a-eh{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:1px;white-space:nowrap}
.a-eh>b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.a-eh>span{grid-column:1/3;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--c-m)}
.a-cks{display:grid;margin-top:10px;border-top:1px solid var(--c-rule)}
.a-ck{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:9px;align-items:center;min-height:28px;white-space:nowrap}
.a-ck>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a-ck>em{font-style:normal;font-size:11px;color:var(--c-m)}
.a-ck.no>span{font-weight:550;color:var(--c-wait)}
.s-done.wait{color:var(--c-wait)}
.s-done.wait .u-ck{color:var(--c-wait);background:color-mix(in srgb,var(--c-wait) 16%,transparent)}
.s-done.wait .u-ck .ic{display:none}
.s-done.wait .u-ck::after{content:"!";font:800 10.5px/1 var(--sans)}

/* the pieces on the section pictures */
.a-rr{display:grid;font-size:13px}
.a-rr>span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:29px;padding-top:5px;white-space:nowrap;color:var(--c-m2)}
.a-rr>span>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.a-rr .u-n{color:var(--c-ink)}
.a-rr .ind>span:first-child{padding-left:12px;color:var(--c-m)}
.a-rr .sub .u-n{padding-top:4px;box-shadow:0 -1px 0 color-mix(in srgb,var(--c-ink) 45%,transparent)}
.a-rr .tot{font-weight:600;color:var(--c-ink)}
.a-rr .tot .u-n{padding-bottom:2px;border-bottom:3px double color-mix(in srgb,var(--c-ink) 55%,transparent)}
.a-sign{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--c-rule);font-size:12.5px;color:var(--c-m2);white-space:nowrap}
.a-sign>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis}
.a-sign .a-m b{font-weight:550;color:var(--c-ink)}
.a-msg{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:10px;align-items:center}
.a-msg .a-z{width:26px;height:26px;font-size:13px}
.a-msg b{font-weight:600;font-size:13.5px}
.a-msg+.u-say{margin-top:12px}
.a-file{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 10px;border-radius:10px;background:var(--c-pop);box-shadow:var(--c-pops)}
.a-file .s-rcpt,.a-evd .s-rcpt{width:30px;gap:2px;padding:5px 4px 8px;font-size:4px}
.a-file .s-rcpt i,.a-evd .s-rcpt i{height:1.5px}
.a-file .s-rcpt em,.a-evd .s-rcpt em{margin-top:1px;font-size:5px}
.a-file .a-m b{font-weight:550;font-size:12.5px}
.a-file+.u-btns{margin-top:14px}
.a-evd{display:grid;margin-top:12px;border-top:1px solid var(--c-rule)}
.a-evd>span{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:52px;white-space:nowrap}
.a-evd>span+span{border-top:1px solid var(--c-rule)}
.a-evd .a-m b{font-weight:550;font-size:12.5px}
.a-evd .a-mono{font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.a-bank{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--c-track);box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-m2)}
.ui .a-bank .ic,.piece .a-bank .ic{width:15px;height:15px}
.a-match{display:inline-flex;align-items:center;gap:4px;font-weight:550;font-size:11.5px;color:var(--c-ok)}
.ui .a-match .ic,.piece .a-match .ic{width:12px;height:12px;stroke-width:2.3}
.a-set{display:flex;align-items:center;gap:12px;min-height:46px;white-space:nowrap}
.a-set+.a-set{border-top:1px solid var(--c-rule)}
.u-l+.a-set{margin-top:10px;border-top:1px solid var(--c-rule)}
.a-set>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.a-in{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;background:var(--c-field);box-shadow:inset 0 0 0 1px var(--c-fieldb);font-size:12.5px;color:var(--c-ink)}
.a-in i{font-style:normal;font-size:11.5px;color:var(--c-m)}
.a-sel{gap:4px;padding-right:7px}
.ui .a-sel .ic,.piece .a-sel .ic{width:13px;height:13px;color:var(--c-m)}
/* a narrow screen keeps its job, with fewer words */
@container (max-width:250px){
  .a-att span,.a-tabs>span:nth-child(2){display:none}
  .a-fl>span{grid-template-columns:44px minmax(0,1fr)}
  .a-pl>span{grid-template-columns:minmax(0,1fr) 54px 52px;column-gap:9px}
  .a-pair{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
  .a-ex{gap:10px}
}
@container (max-width:300px){
  .a-evd .a-match span,.a-in i{display:none}
  .a-set>span:first-child{white-space:normal;line-height:1.3}
}

/* the larger views: a firm's clients, a business's month */
.ui.big{--pt:28px;--px:30px;--pb:26px;border-radius:24px}
.u-pt{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.u-pt b{min-width:0;overflow:hidden;text-overflow:ellipsis;font:300 27px/1.1 var(--serif);font-synthesis:none;letter-spacing:-.015em;color:var(--c-ink)}
.u-row.pf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) 34px minmax(0,1.1fr);gap:16px;min-height:48px}
.u-row.u-cols{min-height:34px;margin-top:22px;font-size:12.5px;color:var(--c-m)}
.u-prog{height:5px;border-radius:3px;background:var(--c-track);overflow:hidden}
.u-prog i{display:block;height:100%;border-radius:3px;background:var(--c-fill)}
.u-stc{display:flex;min-width:0}
.u-ask{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--c-rule)}
.u-qi{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;color:var(--c-you);background:var(--c-qbg)}
.ui .u-qi .ic{width:16px;height:16px}
.u-q{flex:1;min-width:0;line-height:1.4}
.u-q b{display:block;font-weight:600;font-size:12.5px;line-height:1.3;color:var(--c-you)}
.ui.big .u-note{margin-top:18px;max-width:34em;font-size:clamp(15px,2.9cqw,17px)}
.u-brg{--ph:clamp(76px,17cqw,112px);--g:clamp(8px,2.4cqw,16px);margin-top:26px}
.u-cap{display:block;font-weight:500;font-size:12.5px;line-height:1.3;color:var(--c-m2)}
.u-bridge{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);height:calc(var(--ph) + 24px);margin-top:4px;border-bottom:1px solid var(--c-rule)}
.u-bridge>span{position:relative;min-width:0}
.u-bridge i{position:absolute;left:20%;right:20%;bottom:calc(var(--b) * var(--ph) / 100);height:calc(var(--h) * var(--ph) / 100);border-radius:4px}
.u-bridge .tot i{border-radius:6px 6px 0 0;background:var(--c-barc)}
.u-bridge .now i{background:var(--c-barl)}
.u-bridge .up i{background:color-mix(in srgb,var(--c-ok) 66%,transparent)}
.u-bridge .dn i{background:color-mix(in srgb,var(--c-down) 56%,transparent)}
.u-bridge i::after{content:"";position:absolute;left:100%;width:calc(var(--g) + 66.67%);border-top:1px dashed color-mix(in srgb,var(--c-m) 60%,transparent)}
.u-bridge .tot i::after,.u-bridge .up i::after{top:0}
.u-bridge .dn i::after{bottom:-1px}
.u-bridge>span:last-child i::after{display:none}
.u-bridge em{position:absolute;left:-8px;right:-8px;bottom:calc((var(--b) + var(--h)) * var(--ph) / 100 + 6px);font-style:normal;font-weight:600;font-size:12px;line-height:1;text-align:center;white-space:nowrap;color:var(--c-ink)}
.u-bridge .up em{color:var(--c-ok)}
.u-bridge .dn em{color:var(--c-down)}
.u-brl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:8px;font-size:12px;line-height:1.25;color:var(--c-m);text-align:center}
.u-brl>span{min-width:0}
.u-brl b{font-weight:inherit}
.u-brl i{display:none;font-style:normal}
.u-firm{margin:-20px -20px 18px;padding:13px 20px;border-radius:24px 24px 0 0;background:#15161c;color:#f4f4f2;text-shadow:none;font:600 10.5px/1.2 var(--sans);letter-spacing:.16em}
/* a card says less when it is narrow, never less clearly */
@container (max-width:460px){
  .u-pg{display:none}
  .u-row.pf{grid-template-columns:minmax(0,1fr) 34px minmax(0,auto);gap:12px}
  .u-row.pf:nth-child(n+7){display:none}
  .u-ask{flex-wrap:wrap}
  .u-ask .u-btns{width:100%;padding-left:42px}
  .u-pt{flex-wrap:wrap;row-gap:4px}
  .u-pt .u-r{margin-left:0;width:100%}
  .u-brl b{display:none}
  .u-brl i{display:inline}
}
@container (max-width:300px){
  .u-row.pf{grid-template-columns:minmax(0,1fr) auto}
  .u-row.pf>:nth-child(3){display:none}
  .u-ask .u-btns{padding-left:0}
  .u-bridge em{font-size:11px}
  .u-brl{font-size:11px}
  .u-row.xq{flex-wrap:wrap;row-gap:8px}
  .u-row.xq>span:first-of-type{flex:1 1 100%}
}
@container (max-width:290px){
  .u-row.ev .u-r{display:none}
}
@container (max-width:278px){
  .chip .u-tag b{display:none}
}
@container (max-width:200px){
  .s-ringrow .u-w{display:none}
}
@container (max-width:180px){
  .u-row,.u-row.ck{gap:7px;font-size:13px}
  .u-ck,.u-ring{width:16px;height:16px}
  .u-l,.u-st{font-size:12.5px}
}
@container (max-width:160px){
  .u-l .u-r,.u-st .u-w{display:none}
}
@media (max-width:600px){
  .ui.big{--pt:22px;--px:22px;--pb:20px}
}
@media (max-width:374px){
  .docs .pic+.pic .ui.doc{--px:14px}
  .ui.big{--pt:20px;--px:18px;--pb:18px}
}
@media (max-width:340px){
  .docs{grid-template-columns:1fr}
  .docs .pic:first-child{grid-column:auto}
}
.docs .pic{display:flex}
.docs .mini{flex:1}
.docs .ui{min-width:0}
/* the hero's small cards: the same card, smaller */
.hm{--pt:12px;--px:14px;--pb:12px;position:absolute;left:0;top:0;width:170px;aspect-ratio:1.515;padding:12px 14px;border-radius:16px;opacity:0;transform:scale(.96);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.hm.show{opacity:1;transform:none}
.hm .u-l{font-size:11.5px}
.hm .u-sp{flex-basis:6px}
.hm .u-f{margin-top:8px;padding-top:0;border-top:0}
.hm .u-st{font-size:11.5px}
@media (prefers-reduced-transparency:reduce){
  .ui,.piece{background:#fbfbfc;-webkit-backdrop-filter:none;backdrop-filter:none}
  .band-night .ui,.band-night .piece{background:#25262e}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ui,.piece{background:rgba(251,251,252,.94)}
  .band-night .ui,.band-night .piece{background:rgba(37,38,46,.95)}
}

/* a statement on its own, a wide product moment, one large quote */
.statement{padding-top:var(--sec)}
.statement p{max-width:17em;margin:0 auto;font:300 clamp(30px,calc(22px + 1.9vw),52px)/1.14 var(--serif);font-synthesis:none;letter-spacing:-.02em;text-align:center;color:var(--ink);text-wrap:balance}
.shead.center{grid-template-columns:1fr;justify-items:center;text-align:center}
.shead.center .lead{max-width:32em;margin:var(--s5) auto 0}
.moment .stage[data-flow="sort"]{margin-top:var(--gap)}
.flist.titles li{padding:var(--s4) 0;align-items:center}
.flist.titles li>.pm{grid-row:1;margin-top:0}
.bigquote figure{margin:0 auto;text-align:center}
.bigquote blockquote{max-width:21em;margin:0 auto;font:300 clamp(26px,calc(19px + 1.4vw),40px)/1.28 var(--serif);font-synthesis:none;letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.bigquote figcaption{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s6);font-size:14px;color:var(--muted)}
.bigquote figcaption b{font-weight:600;color:var(--ink)}
.stack-note{margin-top:var(--s5)}

/* placeholder proof, until real customers replace it */
.ph{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:5px;background:#f6ecc9;color:#7a5b00;font:600 10.5px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.label .ph{margin-left:8px}
.logos{padding-top:clamp(36px,4.4vw,56px)}
.lg-head{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 10px;font:500 13px/1.3 var(--sans);color:var(--muted);text-align:center}
.lg-row{list-style:none;padding:0;margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px clamp(24px,2.7vw,44px)}
.lg{display:inline-flex;align-items:center;gap:7px;color:#8d8997;white-space:nowrap}
.lg-a{font:600 12.5px/1 var(--sans);letter-spacing:.17em}
.lg-b{font:700 19px/1 Bricolage,var(--sans);letter-spacing:-.035em}
.lg-c{font:300 22px/1 var(--serif);letter-spacing:-.012em}
.lg-d{font:650 16px/1 var(--sans);letter-spacing:-.025em}
.lg-d i{width:13px;height:13px;border-radius:50%;border:2.5px solid currentColor}
.lg-e{font:600 18px/1 Bricolage,var(--sans);letter-spacing:-.025em}
.lg-e span{color:#b7b3c0}
.lg-f{font:500 12px/1 var(--sans);letter-spacing:.13em}
.lg-f i{width:9px;height:9px;background:currentColor;transform:rotate(45deg)}
.lg-g{font:500 17px/1 var(--sans);letter-spacing:-.045em}

/* customer stories */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) clamp(var(--s6),4vw,var(--s8));margin-top:var(--gap)}
.quotes.q2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qt{margin:0;padding-top:22px;border-top:1px solid var(--ink);display:flex;flex-direction:column}
.qn{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.qn b{font:300 clamp(34px,calc(27px + 1.3vw),46px)/1 var(--serif);letter-spacing:-.022em;color:var(--ink)}
.qn span{font-size:13.5px;color:var(--muted)}
.qt blockquote{margin:18px 0 0;font:300 clamp(18px,calc(16.6px + .32vw),21px)/1.42 var(--serif);letter-spacing:-.006em;color:var(--ink);text-wrap:pretty}
.qt figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:auto;padding-top:20px;font-size:13.5px;color:var(--muted)}
.qt figcaption b{font-weight:600;color:var(--ink)}

.shead.wide{grid-template-columns:1fr}
.shead.wide .side{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:22px 48px;margin-top:22px}
.shead.wide .side .lead{max-width:36em}

/* the agents and the stories on smaller screens */
@media (max-width:1179px){
  .agents{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s5)}
}
@media (max-width:900px){
  .quotes,.quotes.q2{grid-template-columns:1fr;gap:36px}
}
@media (max-width:600px){
  .agents{grid-template-columns:1fr;gap:var(--s7)}
  .lg-row{gap:16px 26px}
}


/* ===== Direction B, Night =====
   The books at night: a deep, warm violet-black where the agents' work glows (amber while it is raw, lilac as it is
   worked, mint where it is proven). Instrument Serif for the promises, centred and very large; Inter for the rest. No
   bands and no glass: the product is printed paper, the one warm light surface on the page. */
:root{
  --paper:#efecf4;--ink:#efecf4;--copy:#aaa5b6;--muted:#857f91;--rule:#26232d;--rule-2:#34303d;
  --violet:#c7b6ff;--violet-dot:#a68cff;--lav:#c7b6ff;--wash:#17151d;--jade-ink:#6fe3b8;
  --night:#100f14;--night-copy:#aaa5b6;--night-muted:#857f91;--night-rule:rgba(239,236,244,.1);
  --serif:'Zd Instrument','Instrument Serif',Newsreader,Georgia,serif;
  --display:clamp(58px,calc(22px + 7.6vw),150px);
  --title:clamp(44px,calc(20px + 4.6vw),108px);
  --sub:clamp(26px,calc(20px + .9vw),36px);
  --lead:clamp(17px,calc(16.3px + .2vw),19px);
  --sec:clamp(120px,calc(48px + 13vw),260px);
}
:root{color-scheme:dark}
html{background:#100f14}
body{background:#100f14;color:var(--ink)}
body::before{background:#100f14}
.announce{background:#1b1922;color:#bdb7c9}
.nav{background:#100f14}
.nav.is-scrolled{box-shadow:0 1px 0 #24212b}
.btn,.btn.light{background:#efecf4;color:#100f14}
.btn:hover,.btn.light:hover{background:#fff}
h1,h2{font-family:var(--serif);font-weight:400;font-synthesis:none;color:var(--ink)}
h1{line-height:.92;letter-spacing:-.018em}
h2{line-height:.95;letter-spacing:-.014em}

/* every section is set for the dark, without the band's own spacing or colour */
.band-night{margin-top:0;padding-block:0;background:transparent}
.sec.band-night{padding-top:var(--sec)}
.statement.band-night{padding-top:var(--sec)}
.hero.band-night{padding-block:clamp(32px,5vh,64px) clamp(20px,3vh,30px)}

/* the promise, centred and very large, inside its orbit */
.hero h1{max-width:9em}
.hero .lead{max-width:27em;color:var(--copy)}
.caption{color:var(--muted)}

/* a statement: centred, in the serif, larger than anywhere else on a quiet screen */
.statement p{max-width:13.5em;font:400 clamp(40px,calc(18px + 4.2vw),92px)/.98 var(--serif);letter-spacing:-.012em;color:var(--ink)}

/* section heads: centred, the explanation under the promise */
.shead,.shead.wide{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:clamp(20px,2vw,28px)}
.shead .lead{max-width:30em;margin:0}
.shead .side{justify-items:center}

/* the product on printed paper: warm, matte, the brightest surface on the page */
.ui,.piece,.band-night .ui,.band-night .piece{
  --c-ink:#141318;--c-m:#6c6777;--c-m2:#4d4a57;--c-rule:rgba(20,18,32,.1);--c-ok:#0d8659;--c-you:#5f45d1;--c-wait:#a2620a;--c-down:#bf416b;
  --c-track:rgba(20,18,32,.08);--c-fill:#6a4fd8;--c-barc:rgba(106,79,216,.16);--c-barl:#6a4fd8;--c-qbg:rgba(106,79,216,.1);
  --c-btn:#ebe7df;--c-btns:inset 0 0 0 1px rgba(20,18,32,.1);
  color:var(--c-ink);text-shadow:none;background:#f3efe7;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 44px 90px -40px rgba(0,0,0,.95),0 0 80px -24px rgba(199,182,255,.16)}
.ui::before,.ui::after,.piece::before,.piece::after,.band-night .ui::before,.band-night .ui::after,.band-night .piece::before,.band-night .piece::after{display:none}
.band-night .u-btn.dark{color:#fff}

/* the controls */
.flist.titles h3{font:400 clamp(22px,calc(16px + .9vw),30px)/1.15 var(--serif);letter-spacing:-.01em}

/* the doors: two columns under a hairline, the promises in the serif */
.aud{border-top:1px solid rgba(239,236,244,.22)}
.doors .aud h2{font:400 clamp(32px,calc(16px + 2.2vw),54px)/1 var(--serif);letter-spacing:-.012em}
.doors .aud .label{color:var(--muted)}
.doors .aud .aud-lead{color:var(--copy)}

/* the stack, centred, in the dark */
.wds .sys p{color:#9b96a7}
.wds .cw{color:#6c6778}
.wds .sy.live,.wds .sy:hover{color:#fff}
.wds .fin{max-width:15em;font:400 clamp(34px,calc(12px + 3.4vw),70px)/1 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.wds .ld.recv{color:#c7b6ff}

/* the rolodex: dark glass, the card in front lit from behind by the field */
.rd-cat{border-bottom-color:rgba(239,236,244,.14)}
.rd-cat b{font:400 clamp(24px,calc(18px + .6vw),30px)/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.rd-cat span{color:var(--muted)}
.rolo-on .rc,.rolo-on .rc[aria-hidden="true"]{color:#8f8a9c;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.rolo-on .rc.front{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.9)}
.rc img{opacity:.35}
.rc.ld{font:400 24px/1 var(--serif);letter-spacing:-.01em}

/* the catch-up */
.steps li{border-top-color:var(--rule-2);color:var(--ink)}
.steps b{color:var(--violet)}
.cal .mo b{color:var(--muted)}
.cal .mo.done b{color:var(--ink)}

/* the close */
.end{background:transparent}
.end-cta h2{font-size:var(--title);max-width:10em}
.site-foot{border-top-color:rgba(239,236,244,.1)}

/* ===== The Night version of the home page =====
   The draft's full page in the Night look. Two things on top of the Night direction:
   the product in smoked glass, and the sections the direction page left out. */

/* --- the product in smoked glass: option 3 of the glass cards, the first board (smoked glass on a light section).
   Near-black glass at 78%, blurred hard, so what sits behind a card (the ring, the seal, the sheet and the card the
   particles draw) comes through as a dim, soft glow and the card itself reads by its edge light. --- */
.ui,.piece,.band-night .ui,.band-night .piece{
  --c-ink:#f5f4fa;--c-m:rgba(245,244,250,.56);--c-m2:rgba(245,244,250,.76);--c-rule:rgba(255,255,255,.1);
  --c-ok:#66e3b4;--c-you:#bda9ff;--c-wait:#f2b35b;--c-down:#ff9dbb;
  --c-track:rgba(255,255,255,.1);--c-fill:linear-gradient(90deg,#9f8aff,#d2c6ff);--c-barc:rgba(189,169,255,.22);--c-barl:linear-gradient(180deg,#d2c6ff,#9f8aff);
  --c-qbg:rgba(189,169,255,.14);--c-btn:rgba(255,255,255,.08);--c-btns:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08);
  --c-pop:rgba(255,255,255,.06);--c-pops:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 20px -10px rgba(0,0,0,.6);
  color:var(--c-ink);text-shadow:none;border-radius:20px;
  background:linear-gradient(180deg,rgba(28,28,38,.76),rgba(14,14,20,.82));
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -28px rgba(0,0,0,.7),0 3px 8px -3px rgba(0,0,0,.4)}
/* the small cards in the orbit keep a smaller corner */
.band-night .ui.hm{border-radius:16px}
/* one quiet sheen across the top of the pane, nothing else on the glass */
.ui::before,.piece::before,.band-night .ui::before,.band-night .piece::before{display:block;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%)}
.ui::after,.piece::after,.band-night .ui::after,.band-night .piece::after{display:none}
/* the status lights glow on the dark glass */
.u-st::before{box-shadow:0 0 10px currentColor}
.u-d{box-shadow:0 0 9px var(--c-ok)}
.u-d.you{box-shadow:0 0 9px var(--c-you)}
.u-d.wait{box-shadow:0 0 9px var(--c-wait)}
.u-d.idle{box-shadow:none}
.band-night .u-btn.dark{color:#141318}

/* --- the sections only the full page has, set like the rest of the Night look --- */
/* the customer story in the serif, between the statement and the section titles in size */
.bigquote blockquote{max-width:19em;font:400 clamp(28px,calc(16px + 2.3vw),52px)/1.12 var(--serif);letter-spacing:-.012em}
.bigquote figcaption{margin-top:clamp(24px,2.4vw,32px)}



@font-face{font-family:'Zd Display';src:url(fonts/zd-display-500.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Zd Display';src:url(fonts/zd-display-400.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}

/* =====================================================================================================
   Version 41: the product screens, in smoked glass
   Option 3 of the glass study: dark glass that lets the page show through, blurred, with a soft top light. Each
   screen shows one job at the size that job needs. Each plays one short motion of the job being done when it comes
   into view (and again when you pick its agent); the finished state is the markup, so without motion it simply stands.
   ===================================================================================================== */

/* ---- the glass ---- */
.g{--gt:#f5f4fa;--gm:rgba(245,244,250,.66);--gm2:rgba(245,244,250,.84);--gr:rgba(255,255,255,.09);--gin:rgba(255,255,255,.055);
  --gok:#6be6b8;--gyou:#c4b2ff;--gwarn:#ffcb76;--gvi:#d7ccff;
  position:relative;isolation:isolate;color:var(--gt);border-radius:20px;font:400 13.5px/1.45 var(--sans);letter-spacing:-.006em;text-align:left;
  background:linear-gradient(180deg,rgba(30,29,42,.84),rgba(14,14,21,.9));-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -28px rgba(14,10,36,.6),0 3px 8px -3px rgba(14,10,36,.3)}
.g::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,0) 42%)}
.g>*{position:relative;z-index:1}
.g.dk{background:linear-gradient(180deg,rgba(86,86,112,.56),rgba(30,30,42,.66) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.09),0 30px 60px -28px rgba(0,0,0,.8)}
.g b{font-weight:600}
.g-tab,.g-amt,.g-num{font-variant-numeric:tabular-nums}
.g-h{display:flex;align-items:center;gap:11px;padding:16px 18px 0}
.g-h>.pm7{--s:26px;flex:none}
.g-ht{display:grid;gap:1px;min-width:0}
.g-ht b{overflow:hidden;font-size:14px;line-height:1.3;letter-spacing:-.012em;white-space:nowrap;text-overflow:ellipsis}
.g-ht em{overflow:hidden;font-style:normal;font-size:12.5px;line-height:1.3;color:var(--gm);white-space:nowrap;text-overflow:ellipsis}
.g-h>.g-st,.g-h>.g-chip,.g-h>.g-live,.g-h>.g-m,.g-h>.ct-cap,.g-h>.g-seg{margin-left:auto}
.g-m{font-size:12.5px;color:var(--gm)}
.g-k{margin:0;font-size:12.5px;color:var(--gm)}
.g-ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-ck{color:var(--gok);stroke-width:2.3}
.g-amt{font-size:14px;line-height:1;white-space:nowrap}
.g-st{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--sans);white-space:nowrap}
.g-st::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.g-st.ok{color:var(--gok)}.g-st.you{color:var(--gyou)}.g-st.warn{color:var(--gwarn)}
.g-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:8px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font:500 12px/1 var(--sans);color:var(--gm2);white-space:nowrap}
.g-chip .g-ic{width:13px;height:13px}
.g-chip.vi{background:rgba(159,138,255,.17);box-shadow:inset 0 0 0 1px rgba(189,169,255,.16);color:var(--gvi)}
.g-chip.ok{background:rgba(107,230,184,.12);color:var(--gok)}
.g-chip.you{background:rgba(189,169,255,.15);color:var(--gyou)}
.g-mk{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(159,138,255,.17);color:var(--gvi)}
.g-mk .g-ic{width:15px;height:15px}
/* the plane is a filled glyph, the rest are drawn */
.g-ic use[href="#ci-plane"],.g-chip svg use[href="#ci-plane"]{fill:currentColor;stroke:none}
.g-logo{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;overflow:hidden;background:#fff}
.g-logo img{width:20px;height:20px}
.g-av{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;font:600 12px/1 var(--sans);font-style:normal;color:#fff;
  background:radial-gradient(120% 120% at 22% 8%,var(--b) 0%,var(--a) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.g-av.sm{width:20px;height:20px;font-size:9.5px}
.g-av.sq{border-radius:6px}
.g-live{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--sans);color:var(--gok)}
.g-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(107,230,184,.6);animation:g-live 2.4s ease-out 3}
.g-pulse{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:g-ping 2s ease-out 2}
.g-btns{display:flex;flex-wrap:wrap;gap:8px}
.g-btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:9px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08);font:550 12.5px/1 var(--sans);color:var(--gt);white-space:nowrap}
.g-btn.pri{background:#f5f4fa;color:#14131a;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.g-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.g-bar>.gx{display:block;width:var(--w,100%);height:100%;border-radius:3px;background:linear-gradient(90deg,#9f8aff,#cdbfff);transform-origin:left}
.g-bar.ok>.gx{background:linear-gradient(90deg,#3fcf98,#8ff0c9)}
.g-up{display:inline-flex;align-items:center;gap:3px;font:600 12px/1 var(--sans);font-style:normal;color:var(--gok)}
.g-up .g-ic{width:11px;height:11px;stroke-width:2.4}
.g-num{display:flex;align-items:baseline;gap:9px;font:500 40px/1 var(--sans);letter-spacing:-.045em}
.g-num small{font:450 13.5px/1 var(--sans);letter-spacing:0;color:var(--gm)}
.g-note{display:flex;align-items:flex-start;gap:9px;margin:0;padding:12px 18px 16px;border-top:1px solid var(--gr);font-size:13px;line-height:1.45;color:var(--gm2)}
.g-note .g-ic{margin-top:2px}
.g-foot{display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px 18px 15px;border-top:1px solid var(--gr);font-size:13px;color:var(--gm2)}
.g-foot b{color:var(--gt)}
.g-seg{display:inline-flex;padding:3px;border-radius:9px;background:rgba(255,255,255,.07);font:500 12px/1 var(--sans);color:var(--gm)}
.g-seg span{padding:6px 9px;border-radius:7px}
.g-seg .on{background:rgba(255,255,255,.12);color:var(--gt)}
/* the particle icons sit on the glass in their light colours */
.g .pm7.dk .u{fill:rgba(255,255,255,.13)}

/* ---- motion: one short sequence per screen; the finished screen is the default ---- */
@keyframes g-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes g-fade{from{opacity:0}to{opacity:1}}
@keyframes g-out{from{opacity:1}to{opacity:0}}
@keyframes g-pop{0%{opacity:0;transform:scale(.55)}65%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes g-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes g-rise{from{transform:scaleY(0)}to{transform:none}}
@keyframes g-hit{0%{background-color:rgba(107,230,184,0)}40%{background-color:rgba(107,230,184,.38)}100%{background-color:rgba(107,230,184,.16)}}
@keyframes g-live{0%{box-shadow:0 0 0 0 rgba(107,230,184,.55)}80%,100%{box-shadow:0 0 0 7px rgba(107,230,184,0)}}
@keyframes g-ping{0%{box-shadow:0 0 0 0 rgba(196,178,255,.6)}80%,100%{box-shadow:0 0 0 7px rgba(196,178,255,0)}}
@keyframes g-spin{to{transform:rotate(360deg)}}
@keyframes g-ring{from{stroke-dashoffset:169.6}}
@keyframes g-sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.gs.pre .ma{opacity:0}
.gs.on .ma{animation:g-in .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.gs.on .g-st.ma{animation-name:g-pop;animation-duration:.5s}
.gs.on .g-bar>.gx{animation:g-grow 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--bd,.35s)}

/* ---- 1. the first screen: three screens, three sizes ---- */
.v7-stage .g{position:absolute}
.v8-hero .v7-c1{width:262px;top:136px}
.v8-hero .v7-c2{width:452px;top:84px}
.v8-hero .v7-c3{width:296px;top:136px}
/* the entry proven */
.hp-tx{display:flex;align-items:center;gap:11px;margin:14px 18px 0;padding:10px 12px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hp-tx .g-amt{margin-left:auto;font-size:15px}
.hp-ev{display:grid;grid-template-columns:76px 34px minmax(0,1fr);align-items:center;margin:12px 18px 0}
.hp-doc{position:relative;display:grid;align-content:start;gap:4px;height:102px;padding:10px 9px 0;color:#15141a}
.hp-doc>*{position:relative}
.hp-doc .v8-paper{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.hp-doc .v8-paper path{fill:#fbfaff;stroke:rgba(255,255,255,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.hp-rh{font:700 7px/1 var(--sans);letter-spacing:.16em;text-align:center;color:#15141a}
.hp-doc>i{display:block;height:2.5px;border-radius:2px;background:#e2e1ea}
.hp-doc>i.s{width:60%}
.hp-tot{display:grid;justify-items:start;gap:3px;margin-top:4px;padding-top:5px;border-top:1px dashed #d4d3dd}
.hp-tot em{font:500 7.5px/1 var(--sans);font-style:normal;color:#5d5c68}
.hp-tot b{margin-left:-3px;padding:2px 4px;border-radius:4px;font:600 11px/1 var(--sans);color:#15141a;background:rgba(107,230,184,.32)}
.hp-eq{display:grid;place-items:center;justify-self:center;width:24px;height:24px;border-radius:50%;background:rgba(107,230,184,.14);color:var(--gok);font:600 14px/1 var(--sans);box-shadow:inset 0 0 0 1px rgba(107,230,184,.25)}
.hp-bank{display:grid;gap:5px;padding:12px 13px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hp-bank em{font-style:normal;font-size:12px;color:var(--gm)}
.hp-desc{overflow:hidden;font-size:11.5px;letter-spacing:.05em;color:var(--gm2);white-space:nowrap;text-overflow:ellipsis}
.hp-v{justify-self:start;margin-left:-4px;padding:3px 5px;border-radius:6px;font-size:16px;line-height:1;background:rgba(107,230,184,.16)}
.gs.on .hp-hit{animation:g-hit .9s ease-out both;animation-delay:.7s}
.gs.pre .hp-hit{background-color:rgba(107,230,184,0)}
.gs.on .hp-eq.ma{animation-name:g-pop}
.hp-ck{display:grid;gap:3px;margin:12px 0 0;padding:10px 18px 16px;border-top:1px solid var(--gr);list-style:none}
.hp-ck li{display:flex;align-items:center;gap:9px;min-height:27px;font-size:13px;color:var(--gm2)}
.hp-ck .g-chip{height:22px;padding:0 8px;font-size:11.5px}
.gs.on .hp-ck li .g-ck{animation:g-pop .45s both;animation-delay:calc(var(--d) + .05s)}
/* the bank, reconciled */
.hr-n{margin:18px 18px 0}
.hr-bar{margin:14px 18px 0}
.hx-rec .g-bar{--bd:.25s}
.hr-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px 16px}
/* the question */
.hx-q .g-h{padding-bottom:2px}
.hq-c{gap:7px}
.hq-tx{display:flex;align-items:center;gap:11px;margin:14px 18px 0;padding:10px 12px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hq-tx .g-amt{margin-left:auto}
.hq-r{display:grid;gap:3px;flex:none;width:30px;padding:5px 5px 7px;border-radius:4px;background:#fbfaff;font-style:normal;box-shadow:0 3px 6px -2px rgba(0,0,0,.4)}
.hq-r b{font:700 4.6px/1 var(--sans);letter-spacing:.06em;color:#15141a}
.hq-r i{display:block;height:2px;border-radius:1px;background:#e2e1ea}
.hq-r i.s{width:60%}
.hq-q{margin:14px 18px 0;font:500 16px/1.35 var(--sans);letter-spacing:-.012em}
.hx-q .g-btns{margin:12px 18px 0}
.hq-n{margin:12px 18px 0;padding:11px 0 16px;border-top:1px solid var(--gr);font-size:12.5px;color:var(--gm)}
.hx-q .hq-c{margin-left:0}
.hq-b{position:relative}
.g .hq-cur{left:70px;top:13px;bottom:auto;z-index:2;color:#f5f4fa;stroke:#14131a}
@keyframes hq-cur{0%{opacity:0;transform:translate(84px,58px)}25%{opacity:1}72%{transform:none}84%{transform:scale(.86)}100%{transform:none}}
@keyframes hq-press{0%,100%{transform:none}50%{transform:scale(.94)}}
.gs.pre .hq-cur{opacity:0}
.gs.on .hq-cur{animation:hq-cur 1.05s cubic-bezier(.3,.6,.2,1) both .55s}
.gs.on .hq-yes{animation:hq-press .24s ease both 1.36s}

/* ---- 3. the agents: one focused screen each ---- */
.v7-acc-bg{background:radial-gradient(60% 60% at 70% 105%,rgba(255,206,184,.6) 0%,rgba(255,206,184,0) 70%),
  radial-gradient(1.4px 1.4px at 50% 50%,rgba(90,63,214,.22) 99%,transparent 100%) 0 0/12px 12px,linear-gradient(180deg,#f3efff 0%,#ebe4fc 100%)}
.v7-ap .g.ag{width:min(var(--sw,460px),100%)}
.ag-bk{--sw:470px}.ag-ib{--sw:540px}.ag-rc{--sw:520px}.ag-jn{--sw:440px}.ag-cl{--sw:420px}.ag-rp{--sw:500px}.ag-tx{--sw:452px}.ag-au{--sw:540px}
/* the card feed */
.bf-list{margin:12px 0 0}
.bf{display:grid;grid-template-columns:minmax(0,1fr) auto 76px;align-items:center;gap:12px;min-height:54px;margin:0 18px;border-top:1px solid var(--gr)}
.bf .g-amt{justify-self:end}
.bf-who{position:relative;display:grid;min-width:0}
.bf-raw{position:absolute;left:0;top:50%;transform:translateY(-50%);overflow:hidden;max-width:100%;font-size:11.5px;letter-spacing:.06em;color:var(--gm2);white-space:nowrap;text-overflow:ellipsis;opacity:0}
.bf-v{display:grid;gap:1px;min-width:0}
.bf-v b{font-size:13.5px}
.bf-v em{font-style:normal;font-size:12px;color:var(--gm)}
.gs.on .bf{animation:g-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
.gs.pre .bf{opacity:0}
.gs.pre .bf-raw{opacity:1}
.gs.pre .bf-v,.gs.pre .bf-tag{opacity:0}
.gs.on .bf-raw{animation:g-out .3s ease both;animation-delay:calc(var(--d) + .55s)}
.gs.on .bf-v{animation:g-in .4s ease both;animation-delay:calc(var(--d) + .7s)}
.gs.on .bf-tag{animation:g-pop .45s both;animation-delay:calc(var(--d) + .82s)}
/* the inbox */
.ib-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;padding:14px 18px 18px}
.ib-mail{display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ib-from{display:flex;align-items:center;gap:10px;min-width:0}
.ib-mail p{margin:0;font-size:12.5px;line-height:1.5;color:var(--gm2)}
.ib-att{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,203,118,.12);color:var(--gwarn);font:500 12px/1 var(--sans)}
.ib-att em{margin-left:auto;font-style:normal;color:rgba(255,203,118,.75)}
.ib-bill{display:grid;align-content:start}
.ib-cap{margin:0 0 4px;font:600 12px/1.3 var(--sans);color:var(--gm)}
.ib-f{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;border-top:1px solid var(--gr);font-size:12.5px}
.ib-f>span{color:var(--gm)}
.ib-f b{font-size:13px;font-variant-numeric:tabular-nums}
.ib-f .g-chip{height:22px;font-size:11.5px}
/* the reconciliation */
.rc-hd{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:0 10px;margin:14px 18px 6px;font:600 12px/1 var(--sans);color:var(--gm)}
.rc-hd span:last-child{padding-left:2px}
.rc-p{display:grid;grid-template-columns:minmax(0,1fr) auto 34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;margin:0 18px;border-top:1px solid var(--gr);font-size:12.5px}
.rc-b{display:grid;gap:2px;min-width:0}
.rc-b em{font-style:normal;font-size:11.5px;color:var(--gm)}
.rc-b b{overflow:hidden;font-size:11.5px;letter-spacing:.05em;white-space:nowrap;text-overflow:ellipsis}
.rc-l{overflow:hidden;color:var(--gm2);white-space:nowrap;text-overflow:ellipsis}
.rc-a{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-k{display:grid;place-items:center;width:26px;height:26px;justify-self:center;border-radius:50%;background:rgba(107,230,184,.14);color:var(--gok);box-shadow:inset 0 0 0 1px rgba(107,230,184,.25)}
.rc-k .g-ic{width:13px;height:13px;stroke-width:2.4}
.gs.on .rc-p{animation:g-in .45s ease both;animation-delay:var(--d)}
.gs.pre .rc-p{opacity:0}
.gs.on .rc-k{animation:g-pop .45s both;animation-delay:calc(var(--d) + .3s)}
.rc-f{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px;padding:14px 18px 17px;border-top:1px solid var(--gr);font-size:13px;color:var(--gm)}
.rc-f b{font:500 26px/1 var(--sans);letter-spacing:-.03em;color:var(--gok)}
/* the journal */
.jn-tl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;margin:16px 18px 0}
.jn-tl i{display:grid;justify-items:center;gap:7px;font-style:normal}
.jn-tl i::before{content:"";width:100%;height:30px;border-radius:7px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.jn-tl i.on::before{background:linear-gradient(180deg,rgba(159,138,255,.75),rgba(159,138,255,.45))}
.jn-tl i.now::before{background:linear-gradient(180deg,#d6cbff,#9f8aff);box-shadow:0 0 0 3px rgba(189,169,255,.25)}
.jn-tl b{font:500 11px/1 var(--sans);color:var(--gm)}
.jn-tl i.now b{color:var(--gt)}
.gs.on .jn-tl i::before{animation:g-pop .4s both;animation-delay:var(--d)}
.jn-je{margin:16px 18px 14px;padding:4px 14px 6px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.jn-jh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
.jn-l{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:38px;border-top:1px solid var(--gr);font-size:13px}
.jn-l span{color:var(--gm)}
.jn-l i{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
/* the close */
.cl-top{display:flex;align-items:center;gap:16px;margin:16px 18px 10px}
.cl-ring{flex:none;width:64px;height:64px;transform:rotate(-90deg)}
.cl-ring circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7}
.cl-ring circle.v{stroke:#b6a5ff;stroke-linecap:round;stroke-dasharray:169.6;stroke-dashoffset:16.4}
.gs.on .cl-ring circle.v{animation:g-ring 1.6s cubic-bezier(.3,.7,.2,1) both;animation-delay:.15s}
.cl-sum{display:grid;gap:3px}
.cl-sum b{font:500 30px/1 var(--sans);letter-spacing:-.04em}
.cl-sum small{font:450 14px/1 var(--sans);letter-spacing:0;color:var(--gm)}
.cl-sum em{font-style:normal;font-size:12.5px;color:var(--gm)}
.cl-list{padding:0 0 8px}
.cl-t{display:flex;align-items:center;gap:10px;min-height:42px;margin:0 18px;border-top:1px solid var(--gr);font-size:13px}
.cl-s{display:grid;place-items:center;flex:none;width:16px}
.cl-n{flex:1;min-width:0}
.cl-t em{font-style:normal;font-size:12px;color:var(--gm)}
.cl-t.you{color:var(--gyou)}
.cl-t.you em{font-weight:600;color:var(--gyou)}
.cl-spin{display:block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,203,118,.25);border-top-color:var(--gwarn);animation:g-spin 1s linear 4}
/* the profit and loss */
.rp-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:22px;margin:16px 18px 6px}
.rp-k{display:grid;gap:6px}
.rp-k em{font-style:normal;font-size:12.5px;color:var(--gm)}
.rp-k b{font:500 34px/1 var(--sans);letter-spacing:-.04em}
.rp-ch{display:grid;gap:7px}
.rp-bars{display:flex;align-items:flex-end;gap:7px;height:70px}
.rp-bars i{flex:1;height:calc(var(--v) * 100%);border-radius:5px 5px 2px 2px;background:rgba(189,169,255,.22);transform-origin:bottom}
.rp-bars i.now{background:linear-gradient(180deg,#d2c6ff,#9f8aff)}
.gs.on .rp-bars i{animation:g-rise .7s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d)}
.rp-ax{display:flex;gap:7px;font:500 10.5px/1 var(--sans);color:var(--gm)}
.rp-ax i{flex:1;font-style:normal;text-align:center}
.rp-r{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;align-items:center;gap:12px;min-height:40px;margin:0 18px;border-top:1px solid var(--gr);font-size:13px}
.rp-r>span{color:var(--gm2)}
.rp-r b{font-variant-numeric:tabular-nums}
.rp-r i{font-style:normal;font-size:12px;font-weight:600;text-align:right;color:var(--gm)}
.rp-r i.up{color:var(--gok)}
.rp-note{margin:4px 0 0;padding:12px 18px 16px;border-top:1px solid var(--gr);font:300 17px/1.4 var(--serif);font-synthesis:none;letter-spacing:-.01em;color:var(--gt)}
/* the sales tax */
.tx-hd,.tx-r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:12px;margin:0 18px}
.tx-hd{margin-top:16px;padding-bottom:8px;font:600 12px/1 var(--sans);color:var(--gm)}
.tx-hd span:nth-child(2),.tx-r span:nth-child(2){text-align:right}
.tx-r{min-height:44px;border-top:1px solid var(--gr);font-size:13px}
.tx-r>span:nth-child(2){color:var(--gm2);font-variant-numeric:tabular-nums}
.tx-r b{min-width:78px;text-align:right;font-variant-numeric:tabular-nums}
.tx-st{display:flex;align-items:center;gap:10px}
.tx-st i{display:grid;place-items:center;width:28px;height:22px;border-radius:6px;background:rgba(255,255,255,.08);font:600 11px/1 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--gm2)}
.tx-tot{display:flex;align-items:baseline;justify-content:space-between;margin:2px 18px 0;padding:13px 0;border-top:1px solid var(--gr);font-size:13px;color:var(--gm)}
.tx-tot b{font:500 24px/1 var(--sans);letter-spacing:-.03em;color:var(--gt)}
.tx-act{display:flex;align-items:center;gap:12px;padding:12px 18px 17px;border-top:1px solid var(--gr)}
.tx-act .g-m{font-size:12px;line-height:1.4}
/* the independent check */
.au-cols{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch;gap:0;margin:14px 18px 14px}
.au-c{display:flex;flex-direction:column;gap:6px;padding:13px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.au-who{margin:0;font:600 12.5px/1.3 var(--sans)}
.au-rd{margin:0 0 4px;font-size:12px;line-height:1.45;color:var(--gm)}
.au-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--gr)}
.au-out b{font-size:14px;font-variant-numeric:tabular-nums}
.au-eq{display:grid;place-items:center;align-self:center;justify-self:center;width:26px;height:26px;border-radius:50%;background:rgba(107,230,184,.14);color:var(--gok);font:600 15px/1 var(--sans);box-shadow:inset 0 0 0 1px rgba(107,230,184,.25)}
.gs.on .au-eq.ma{animation-name:g-pop}

/* ---- 3b. the free catch-up: the audit in smoked glass, the year as a field of points ---- */
.g.cu{width:min(480px,100%)}
.cu-sw{margin:14px 18px 0;padding:14px 14px 12px;border-radius:13px;background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cu-dots{display:grid;grid-template-columns:repeat(37,minmax(0,1fr));gap:3px}
.cu-dots i{display:block;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.2)}
.cu-dots i.f{background:var(--gwarn);box-shadow:0 0 6px rgba(255,203,118,.75)}
.gs.on .cu-dots{-webkit-mask:linear-gradient(90deg,#000 45%,transparent 55%) 100% 0/230% 100% no-repeat;mask:linear-gradient(90deg,#000 45%,transparent 55%) 100% 0/230% 100% no-repeat;animation:g-sweep 1.3s cubic-bezier(.4,.1,.3,1) both .1s}
.gs.on .cu-dots i.f{animation:g-pop .5s both 1.25s}
.cu-lg{display:flex;align-items:center;gap:8px;margin:11px 0 0;font-size:12px;line-height:1.4;color:var(--gm)}
.cu-lg i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gwarn);box-shadow:0 0 6px rgba(255,203,118,.75)}
.g.cu .v9-sum{margin:12px 18px 0}
.g.cu .v9-sum>span{background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.g.cu .v9-sum em{color:var(--gm)}
.g.cu .v9-ch{margin:16px 18px 6px;color:var(--gm)}
.g.cu .v9-ch b{color:var(--gt)}
.g.cu .v9-fs{margin:0 18px 10px;border-top-color:var(--gr)}
.g.cu .v9-f{border-bottom-color:var(--gr);color:var(--gt)}
.g.cu .v9-f b{background:rgba(255,203,118,.14);color:var(--gwarn)}
.g.cu .v9-f:hover span{color:var(--gvi)}
.g.cu .v9-chev{stroke:var(--gm)}
.g.cu .v9-fd{border-bottom-color:var(--gr)}
.g.cu .v9-ex{background:var(--gin);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.g.cu .v9-exh b{letter-spacing:.05em;color:var(--gm2)}
.g.cu .v9-exh em{color:var(--gm)}
.g.cu .v9-was{background:rgba(255,255,255,.06);color:var(--gm2);text-decoration-color:rgba(245,244,250,.5)}
.g.cu .v9-to{color:var(--gm)}
.g.cu .v9-why{color:var(--gm2)}
.g.cu .v9-chip{background:rgba(107,230,184,.13);color:var(--gok)}
.g.cu .v9-chip.none{background:rgba(255,203,118,.13);color:var(--gwarn)}
.g.cu .v9-fd:not([hidden]){animation:g-in .35s ease both}
.g.cu .v9-f:focus-visible{outline-color:var(--gvi)}

/* ---- 5. control, on the night panel ---- */
.v7-panel-night{min-height:540px}
.g.ct-l{width:min(390px,84%);transform:translateX(-11%)}
.ct-cap{font-size:12.5px;color:var(--gm)}
.ct-cap b{color:var(--gt)}
.ct-rows{padding:10px 0 10px}
.ct-r{display:flex;align-items:center;gap:11px;min-height:40px;margin:0 18px;border-top:1px solid var(--gr);font-size:13px;color:var(--gm)}
.ct-r>span{flex:1}
.ct-b{display:inline-grid;place-items:center;flex:none;width:30px;height:22px;border-radius:7px;background:rgba(255,255,255,.08);font:600 11px/1 var(--sans);font-style:normal;color:var(--gm2)}
.ct-r.done{color:var(--gt)}
.ct-r.done .ct-b{background:linear-gradient(180deg,#b6a5ff,#8e74ff);color:#14131a}
.ct-r.earn{color:var(--gt)}
.ct-r.earn .ct-b{background:rgba(189,169,255,.16);color:var(--gyou);box-shadow:inset 0 0 0 1px rgba(189,169,255,.5)}
.ct-e{display:inline-flex;align-items:center;gap:9px}
.ct-e .g-bar{width:64px}
.ct-e .gx{--w:64%}
.ct-e em{font-style:normal;font-size:12px;font-weight:600;color:var(--gyou)}
.ct-r.earn .g-bar{--bd:1.1s}
.ct-lk{color:var(--gm);opacity:.8}
.g.ct-a{align-self:flex-end;width:min(250px,48%);margin:-22px 1% 0 0;padding:16px 18px 18px}
.ct-n{display:block;margin:6px 0 4px;font:500 28px/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.g.ct-a .g-m{display:block;margin:0 0 14px;line-height:1.45}

/* ---- 7. the owner's brief ---- */
.g.ob{width:min(470px,100%)}
.ob-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 18px 0}
.ob-k>span{display:grid;justify-items:start;align-content:start;gap:7px}
.ob-k em{font-style:normal;font-size:12.5px;color:var(--gm)}
.ob-s{font-style:normal;font-size:12px;color:var(--gm)}
.ob-k b{font:500 24px/1 var(--sans);letter-spacing:-.04em}
.ob-ch{display:grid;gap:7px;margin:18px 18px 0}
.ob-bars{display:flex;align-items:flex-end;gap:6px;height:76px}
.ob-bars i{flex:1;height:calc(var(--v) * 100%);border-radius:5px 5px 2px 2px;background:rgba(189,169,255,.2);transform-origin:bottom}
.ob-bars i.now{background:linear-gradient(180deg,#d2c6ff,#9f8aff)}
.gs.on .ob-bars i{animation:g-rise .7s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d)}
.ob-ax{display:flex;gap:6px;font:500 10.5px/1 var(--sans);color:var(--gm)}
.ob-ax i{flex:1;font-style:normal;text-align:center}
.ob-t{margin:16px 18px 0;padding-top:13px;border-top:1px solid var(--gr);font-size:13px;line-height:1.5;color:var(--gm2)}
.ob-q{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 12px;margin:14px 18px 0;padding:13px;border-radius:13px;background:rgba(189,169,255,.09);box-shadow:inset 0 0 0 1px rgba(189,169,255,.16)}
.ob-qi{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(189,169,255,.16);color:var(--gyou)}
.ob-qi .g-ic{width:16px;height:16px}
.ob-q p{margin:0;font-size:13px;line-height:1.45}
.ob-q p b{display:block;font-size:12.5px;color:var(--gyou)}
.ob-q .g-btns{grid-column:2}
.ob-f{margin:14px 0 0;padding:12px 18px 15px;border-top:1px solid var(--gr);font-size:12.5px;color:var(--gm)}

/* ---- the firm's clients ---- */
.g.fc{width:min(440px,100%);margin-left:auto}
.fc .g-h{padding-bottom:6px}
.fc-list{padding:6px 0 0}
.fc-r{display:grid;grid-template-columns:20px minmax(0,1fr) 72px auto;align-items:center;gap:11px;min-height:44px;margin:0 18px;border-top:1px solid var(--gr);font-size:13px}
.fc-r .g-st{justify-self:end;font-size:12px}
.fc-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fc-f{margin:2px 0 0;padding:12px 18px 15px;border-top:1px solid var(--gr);font-size:12.5px;color:var(--gm)}
.fc-f b{color:var(--gt)}

/* ---- when motion is off, nothing waits ---- */
@media (prefers-reduced-motion:reduce){
  .g-live::before,.g-pulse,.cl-spin{animation:none}
}

/* ---- narrower screens ---- */
@media (max-width:1180px){
  .v8-hero .v7-c1{width:250px}
  .v8-hero .v7-c2{width:420px}
  .v8-hero .v7-c3{width:276px}
}
@media (max-width:1060px){
  .v7-stage .g{position:relative;left:auto;right:auto;top:auto;transform:none}
  .v8-hero .v7-c2,.v8-hero .v7-c3{width:min(400px,52%)}
  .v8-hero .v7-c3{width:min(300px,44%)}
  .g.ct-l{transform:none}
}
@media (max-width:700px){
  .v8-hero .v7-c2,.v8-hero .v7-c3{width:100%;max-width:400px}
  .ib-split{grid-template-columns:1fr}
  .rc-p{grid-template-columns:minmax(0,1fr) 26px auto;gap:8px}
  .rc-p .rc-l,.rc-p .rc-a:last-child{display:none}
  .rc-hd{grid-template-columns:minmax(0,1fr) auto}
  .rc-hd span:nth-child(n+2){display:none}
  .rp-top{grid-template-columns:1fr}
  .au-cols{grid-template-columns:1fr;gap:10px}
  .au-eq{transform:rotate(90deg)}
  .g.ct-l{width:100%}
  .g.ct-a{width:auto;margin:-18px 0 0 22%;align-self:stretch}
  .ob-k b{font-size:20px}
  .fc-r{grid-template-columns:20px minmax(0,1fr) auto}
  .fc-r .fc-b{display:none}
  .cu-dots{gap:2px}
}

/* the audit's list, from version 40 */
.v9-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 16px}
.v9-sum>span{display:grid;gap:4px;min-width:0;padding:10px 11px 9px;border-radius:12px;background:#f6f5fa}
.v9-sum b{font:600 19px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.v9-sum em{font-style:normal;font-size:11.5px;line-height:1.25;color:var(--ink-3)}
.v9-ch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:16px 16px 6px;font-size:12px;color:var(--ink-3)}
.v9-ch b{font:600 13px/1.3 var(--sans);color:var(--ink)}
.v9-fs{margin:0 16px 12px;border-top:1px solid var(--row)}
.v5 .v9-fh{margin:0;font:inherit;letter-spacing:0}
.v9-f{display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:11px;width:100%;min-height:46px;padding:0 2px 0 0;border:0;border-bottom:1px solid var(--row);background:none;color:var(--ink);font:500 13.5px/1.3 var(--sans);text-align:left;cursor:pointer}
.v9-f b{display:inline-grid;place-items:center;height:24px;border-radius:7px;background:var(--violet-wash);color:var(--violet);font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums}
.v9-f:hover span{color:var(--violet)}
.v9-f:focus-visible{outline-offset:-2px}
.v9-chev{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.v9-f[aria-expanded="true"] .v9-chev{transform:rotate(180deg)}
.v9-fd{padding:12px 0 14px;border-bottom:1px solid var(--row)}
.v9-fd[hidden]{display:none}
.v9-ex{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:#f6f5fa}
.v9-exh{display:grid;gap:3px;min-width:0}
.v9-exh b{overflow:hidden;font:600 12px/1.2 var(--sans);letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis}
.v9-exh em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.v9-amt{margin-left:auto;font:600 13.5px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.v9-mv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.v9-was{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:#f1f0f5;color:var(--ink-3);font:500 12px/1 var(--sans);text-decoration:line-through;text-decoration-color:rgba(140,139,151,.75)}
.v9-to{font-size:12px;color:var(--ink-3)}
.v9-mv .sc-cat{height:24px;padding:0 8px 0 6px;font-size:12px}
.v9-mv .sc-cat svg{width:13px;height:13px}
.v9-why{display:flex;align-items:flex-start;gap:9px;margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.v9-chip{flex:none;display:inline-flex;align-items:center;height:20px;margin-top:-1px;padding:0 7px;border-radius:6px;background:var(--green-wash);color:var(--green);font:600 11px/1 var(--sans)}
.v9-chip.none{background:#fdf0e1;color:var(--amber)}

/* ===== Night 2 =====
   Night, with two changes. Type and space after vercel.com: every display line in one grotesque (Inter Display), set
   tight at a medium weight instead of the light condensed serif, smaller and calmer, with one even rhythm between
   sections. And the agents section rebuilt around one focus: the agent you pick, its screen, and the field gathered
   round it. The hero's two key words are set in the field's particles. */

/* ---- type ---- */
:root{
  --serif:'Zd Display',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:clamp(44px,calc(14px + 5.3vw),88px);     /* the promise */
  --title:clamp(32px,calc(16px + 2.6vw),54px);       /* a section's claim */
  --statement:clamp(27px,calc(15px + 1.9vw),42px);   /* a quiet screen's one sentence */
  --sub:clamp(21px,calc(16px + .55vw),26px);         /* a heading inside a section */
  --lead:clamp(17px,calc(16px + .2vw),19px);
  --label:14px;
  --copy:#aaa6b4;--muted:#8a8597;
  /* space: one rhythm. A section opens 160px under the last one, its claim sits 20px over the sentence that explains
     it, and the work starts 72px under that */
  --sec:clamp(104px,calc(40px + 8.4vw),160px);
  --gap:clamp(48px,calc(26px + 3.3vw),72px);
}
h1,h2{font-family:var(--serif);font-weight:500;font-synthesis:none;font-feature-settings:'ss01' 0}
h1{font-size:var(--display);line-height:1;letter-spacing:-.05em}
h2{font-size:var(--title);line-height:1.05;letter-spacing:-.042em}
.label{font:500 var(--label)/1.3 var(--sans);letter-spacing:-.005em}
.lead{line-height:1.55;letter-spacing:-.006em}
.shead,.shead.wide{row-gap:20px}
.shead .lead{max-width:32em}

/* the statement, the quote and the headings inside sections: the same face, sized to their place */
.statement p{max-width:20em;font:500 var(--statement)/1.16 var(--serif);letter-spacing:-.034em}
.bigquote blockquote{max-width:23em;font:400 clamp(25px,calc(15px + 1.6vw),38px)/1.24 var(--serif);letter-spacing:-.028em}
.bigquote figcaption{margin-top:28px}
.doors .aud h2{font:500 clamp(25px,calc(15px + 1.2vw),33px)/1.14 var(--serif);letter-spacing:-.032em}
.flist.titles h3{font:500 clamp(19px,calc(16px + .35vw),22px)/1.25 var(--serif);letter-spacing:-.022em}
.wds .fin{max-width:17em;font:500 clamp(28px,calc(14px + 2vw),44px)/1.08 var(--serif);letter-spacing:-.04em}
.rd-cat b{font:500 clamp(19px,calc(16px + .3vw),22px)/1.1 var(--serif);letter-spacing:-.022em}
.rc.ld{font:500 17px/1 var(--serif);letter-spacing:-.02em}
.end-cta h2{font-size:var(--title);max-width:13em}
.qa h2{font-size:var(--title)}

/* ---- the header and the buttons: quieter, one size of control ---- */
.nav nav a{color:#b9b5c3;transition:color .15s}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:#fff;text-decoration:none}
.nav .motion{color:#8a8597}
.btn{min-height:40px;padding:0 16px;gap:10px;border-radius:8px;font:500 15px/1 var(--sans);letter-spacing:-.006em}
.nav .btn{min-height:32px;padding:0 12px;border-radius:7px;font-size:14px}
.link{font:500 15px/1.4 var(--sans)}

/* ---- the first screen ---- */
.hero h1{max-width:9.4em}
.hero .lead{max-width:30em;margin-top:clamp(20px,2.8vh,28px)}
.hero .actions{margin-top:clamp(28px,3.8vh,40px)}
/* the two words the orbit flies into: set in its particles while the field runs, and in its colours as type when it
   does not (or once it has moved on down the page). The type shows faintly under the particles as they arrive */
@property --pwa{syntax:'<number>';inherits:false;initial-value:1}
.hero h1 .pw{--pwa:1;padding-bottom:.1em;margin-bottom:-.1em;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,rgb(198 182 255 / var(--pwa)) 0%,rgb(255 158 212 / var(--pwa)) 55%,rgb(255 190 140 / var(--pwa)) 100%);
  -webkit-background-clip:text;background-clip:text;transition:--pwa .8s ease}
.flow-on .hero .orbit.on~.copy h1 .pw{--pwa:.2}

/* ---- the agents: one focus ---- */
/* the list of agents on the left, the one you pick on the right, inside the field gathered round it */
.ag2-box{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:clamp(32px,4vw,64px);margin-top:var(--gap)}
.ag2-list{display:grid;gap:2px;align-content:center}
.ag2-t{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:center;
  min-height:52px;padding:10px 14px;border-radius:12px;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s}
.ag2-t .pm7{--s:28px;grid-row:span 2;opacity:.4;filter:saturate(.1);transition:opacity .25s,filter .25s}
.ag2-n{font:500 16px/1.35 var(--sans);letter-spacing:-.012em}
.ag2-d{grid-column:2;display:none;margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--copy)}
.ag2-t:hover{color:var(--ink)}
.ag2-t:hover .pm7{opacity:.75;filter:saturate(.6)}
.ag2-t[aria-selected="true"]{color:var(--ink);background:rgba(239,236,244,.045);box-shadow:inset 0 0 0 1px rgba(239,236,244,.07)}
.ag2-t[aria-selected="true"] .pm7{opacity:1;filter:none}
.ag2-t[aria-selected="true"] .ag2-d{display:block}
.ag2-t:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* the stage holds no frame of its own: the field draws the focus round the screen */
.ag2-stage{position:relative;display:grid;place-items:center;min-height:clamp(500px,40vw,580px);padding:56px 40px}
.ag2-p{grid-area:1/1;display:grid;justify-items:center;width:100%}
.ag2-p[hidden]{display:none}
.ag2-p .g.ag{width:min(var(--sw,460px),100%)}
/* a screen fades in where it will stand (it does not move, so the field can measure it at once) */
.ag2-p .g.ag{animation:ag2-in .4s ease both}
@keyframes ag2-in{from{opacity:0}to{opacity:1}}
.ag2-desc{display:none}
.ag2 .pm7 .h{opacity:.2}

@media (max-width:980px){
  .ag2-box{grid-template-columns:1fr;gap:20px}
  /* the agents become a row you scroll, the screen under it */
  .ag2-list{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)}
  .ag2-list::-webkit-scrollbar{display:none}
  .ag2-t{flex:none;grid-template-columns:20px auto;column-gap:9px;min-height:40px;padding:0 15px 0 11px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(239,236,244,.12);scroll-snap-align:start}
  .ag2-t .pm7{--s:20px;grid-row:auto}
  .ag2-n{font-size:14.5px;white-space:nowrap}
  .ag2-t[aria-selected="true"] .ag2-d{display:none}
  .ag2-t[aria-selected="true"]{background:rgba(239,236,244,.1);box-shadow:inset 0 0 0 1px rgba(239,236,244,.18)}
  .ag2-desc{display:block;margin:0;max-width:34em;font-size:16px;line-height:1.5;color:var(--copy)}
  .ag2-stage{min-height:0;padding:44px 0 36px}
}
@media (max-width:600px){
  .ag2-stage{padding:36px 0 28px}
}

/* ---- the particle icons (the same 7x7 pictures as the draft) ---- */
.pm7{--s:28px;display:inline-grid;flex:none;width:var(--s);height:var(--s);font-style:normal}
.pm7 svg{display:block;width:100%;height:100%;overflow:visible}
.pm7 .u{fill:rgba(255,255,255,.14)}
.pm7 .h,.pm7 .l{fill:url(#pm7n)}
.pm7 .h{opacity:.22}
.pm7 .d{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * .11s + var(--d)),opacity .55s ease calc(var(--i,0) * .11s + var(--d))}
.pm-pre .pm7 .d,.pm7.pm-pre .d{transform:translate(var(--x),var(--y));opacity:0}
.pm7.pm-now .d{transition:none}
@media (prefers-reduced-motion:reduce){.pm7 .d{transition:none}.ag2-p .g.ag{animation:none}}

/* ---- phones ---- */
@media (max-width:600px){
  h1{letter-spacing:-.045em}
  .hero h1{max-width:8.6em}
}

/* ===== Night 3 =====
   Every section after the agents shows one thing: a screen of the work in smoked glass, the field gathered round it.
   The words sit beside or above it, never under the particles. */

/* the hero's two words: the particles carry them; the type underneath is only a faint guide */
.flow-on .hero .orbit.on~.copy h1 .pw{--pwa:.5}

/* a section's screen, centred in its own space */
.n3-stage{position:relative;display:grid;place-items:center;min-height:clamp(440px,36vw,540px);margin:var(--gap) 0 0;padding:56px 0}
.n3-stage>*{grid-area:1/1}
.mod .n3-stage{margin:0;min-height:clamp(420px,34vw,500px)}
.n3-stage .hx-proof{width:min(460px,100%)}
.n3-stage .g.ev{width:min(440px,100%)}
.n3-stage .g.cu{width:min(480px,100%)}

/* the entry and its evidence */
.ev .g-h .g-amt{margin-left:auto;font-size:16px}
.ev-cap{margin:16px 18px 4px;font:600 12px/1.3 var(--sans);color:var(--gm)}
.ev-r{display:flex;align-items:center;gap:11px;min-height:54px;margin:0 18px;border-top:1px solid var(--gr)}
.ev-r .g-chip{margin-left:auto}
.ev-r .g-chip .g-ic{stroke-width:2.4}
.ev-r .hq-r{width:30px}
.g-ht b.ev-mono{font-size:12px;letter-spacing:.05em}
.ev-ck{list-style:none;margin:0;padding:0 18px}
.ev-ck li{display:flex;align-items:center;gap:9px;min-height:30px;font-size:13px;color:var(--gm2)}
.ev-f{display:flex;align-items:center;gap:11px;margin-top:10px;padding:13px 18px 16px;border-top:1px solid var(--gr)}
.ev-f>.pm7{--s:22px}
.ev-f .g-st{margin-left:auto}
.gs.on .ev-ck li .g-ck{animation:g-pop .45s both;animation-delay:calc(var(--d) + .05s)}

/* autonomy: the levels, and the work above your cap tucked under them */
.n3-ladder{display:flex;flex-direction:column;width:min(420px,100%)}
.n3-ladder .g.ct-l{width:100%;transform:none}
.n3-ladder .g.ct-a{align-self:flex-end;width:min(260px,66%);margin:-26px -36px 0 0}

/* the doors: each audience over its own screen */
.doors .aud .n3-scr{margin-top:56px}
.n3-who .g.fc,.n3-who .g.ob{width:min(460px,100%);margin:0}

/* the free catch-up: the three steps beside the audit you get */
.n3-cu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,5vw,80px);margin-top:var(--gap)}
.n3-cu .n3-stage{margin:0;min-height:0;padding:48px 0}
.n3-steps{grid-template-columns:1fr;gap:0;margin-top:0}
.n3-steps li{padding:22px 0 24px;font-size:17px;line-height:1.45}
.n3-steps li:last-child{border-bottom:1px solid var(--rule-2)}
.n3-steps b{margin-bottom:8px}
.v9-fh{margin:0;font:inherit;letter-spacing:0}
.g.cu .v9-f{color:var(--gt)}

@media (max-width:980px){
  .n3-cu{grid-template-columns:1fr;gap:12px}
  .n3-ladder .g.ct-a{margin-right:-12px}
}
@media (max-width:700px){
  .n3-stage{min-height:0;padding:40px 0 32px}
  .mod .n3-stage{min-height:0}
  .n3-ladder .g.ct-a{width:auto;margin:-18px 0 0 18%;align-self:stretch}
  .doors .aud .n3-scr{margin-top:40px}
}



/* =====================================================================================================
   Version 42: the product screens, as the product shows them
   Plain app views, one job each: a transactions list, a bill read from an email, a reconciliation, a journal entry,
   the close checklist, the profit and loss, a sales tax return, the checks on an entry. Solid panels, readable type,
   hairlines, colour only for status. Each plays one short, real change when it comes into view (a status flips, a value
   fills in, a number settles); the finished screen is the markup, so without motion it simply stands finished.
   Dark by default; .zs.lt (or .zs-lt on an ancestor) turns a screen light.
   ===================================================================================================== */
.zs{--zs-bg:#16161d;--zs-bg2:#1d1d26;--zs-line:rgba(255,255,255,.075);--zs-edge:rgba(255,255,255,.12);
  --zs-tx:#f1f0f6;--zs-tx2:#a9a7b8;--zs-tx3:#9290a3;--zs-acc:#ab9fff;--zs-acc-bg:rgba(171,159,255,.13);--zs-btn:#5b42d9;
  --zs-ok:#63d698;--zs-ok-bg:rgba(99,214,152,.12);--zs-you:#f3b462;--zs-you-bg:rgba(243,180,98,.13);--zs-bar:rgba(255,255,255,.1);
  --zs-sh:0 1px 2px rgba(0,0,0,.3),0 28px 60px -28px rgba(0,0,0,.7);
  container:zs/inline-size;position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--zw,560px);max-width:100%;
  overflow:hidden;border:1px solid var(--zs-edge);border-radius:14px;background:var(--zs-bg);box-shadow:var(--zs-sh);
  color:var(--zs-tx);font:400 14px/1.4 var(--sans,Inter,system-ui,sans-serif);letter-spacing:-.005em;text-align:left;-webkit-font-smoothing:antialiased}
.zs.lt,.zs-lt .zs{--zs-bg:#fff;--zs-bg2:#f6f6f9;--zs-line:#ececf1;--zs-edge:#e1e0e8;--zs-tx:#17161e;--zs-tx2:#5c5a69;--zs-tx3:#686676;
  --zs-acc:#5b42d9;--zs-acc-bg:#efecfd;--zs-ok:#0e7542;--zs-ok-bg:#e5f5ec;--zs-you:#925606;--zs-you-bg:#fcf0dc;--zs-bar:#e9e8ef;
  --zs-sh:0 1px 2px rgba(23,18,48,.06),0 28px 60px -30px rgba(23,18,48,.3)}
.zs *,.zs *::before,.zs *::after{box-sizing:border-box}
.zs :where(p,ul,ol,dl,dd,figure){margin:0;padding:0}
.zs :where(ul,ol){list-style:none}
/* figures line up; words keep their own spacing */
.zs :where(.zs-r,.zs-amt,.zs-kpis b,.zs-big b,.zs-in,.zs-pc em,.zs-row>b,[data-to]){font-variant-numeric:tabular-nums}
.zs b{font-weight:600}
.zs em{font-style:normal}

/* ---- the panel's head: title, what it is about, and its state ---- */
.zs-hd{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 20px}
.zs-ti{display:grid;gap:3px;flex:1;min-width:0}
.zs-ti>b{overflow:hidden;font-size:15px;line-height:1.25;letter-spacing:-.014em;white-space:nowrap;text-overflow:ellipsis}
.zs-ti>span{overflow:hidden;font-size:13px;line-height:1.3;color:var(--zs-tx2);white-space:nowrap;text-overflow:ellipsis}
.zs-hd>:not(.zs-ti){flex:none}
.zs-amt{font-size:15px;font-weight:600}
.zs-amt.big{font-size:20px;font-weight:500;letter-spacing:-.02em}
.zs-logo{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,12,40,.08)}
.zs-logo img{width:22px;height:22px;object-fit:contain}

/* ---- tables ---- */
.zs-th,.zs-tr{display:grid;grid-template-columns:var(--zc);align-items:center;column-gap:16px;padding:0 20px}
.zs-th{min-height:36px;border-block:1px solid var(--zs-line);background:var(--zs-bg2);font-size:12.5px;font-weight:500;color:var(--zs-tx3)}
.zs-tb>.zs-tr{min-height:54px;padding-block:8px;border-bottom:1px solid var(--zs-line)}
.zs-tb>.zs-tr:last-child{border-bottom:0}
.zs-tr.tot{min-height:48px;font-weight:600}
.zs-tb>.zs-tr.tot{border-top:1px solid var(--zs-edge)}
.zs-r{justify-self:end;text-align:right}
.zs-c2{display:grid;gap:2px;min-width:0}
.zs-c2>b{overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.zs-c2>span{overflow:hidden;font-size:12.5px;line-height:1.35;color:var(--zs-tx2);white-space:nowrap;text-overflow:ellipsis}
.zs-c1{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}
.zs-raw{letter-spacing:.03em}
.zs-dim{color:var(--zs-tx2)}
.zs-none{color:var(--zs-tx3)}
.zs-up{color:var(--zs-ok)}

/* ---- statuses, buttons, controls ---- */
.zs-pill{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 9px;border-radius:7px;background:var(--zs-bg2);
  color:var(--zs-tx2);font:500 12.5px/1 var(--sans,Inter,sans-serif);letter-spacing:-.003em;white-space:nowrap}
.zs-pill.ok{background:var(--zs-ok-bg);color:var(--zs-ok)}
.zs-pill.you{background:var(--zs-you-bg);color:var(--zs-you)}
.zs-pill.run{background:var(--zs-acc-bg);color:var(--zs-acc)}
.zs-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border:1px solid var(--zs-edge);border-radius:9px;
  background:var(--zs-bg);color:var(--zs-tx);font:500 13.5px/1 var(--sans,Inter,sans-serif);white-space:nowrap}
.zs-btn.pri{border-color:transparent;background:var(--zs-btn);color:#fff}
.zs-btns{display:flex;flex-wrap:wrap;gap:8px}
.zs-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--zs-bg2)}
.zs-seg>span{padding:6px 10px;border-radius:7px;font-size:12.5px;font-weight:500;line-height:1;color:var(--zs-tx2);white-space:nowrap}
.zs-seg>.on{background:var(--zs-bg);color:var(--zs-tx);box-shadow:0 1px 2px rgba(0,0,0,.22),inset 0 0 0 1px var(--zs-line)}
.zs-seg em{margin-left:5px;color:var(--zs-you)}
.zs-tg{position:relative;display:inline-block;flex:none;width:34px;height:20px;border-radius:10px;background:var(--zs-bar)}
.zs-tg::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.zs-tg.on{background:var(--zs-btn)}
.zs-tg.on::after{left:17px}
.zs-bar{display:block;height:6px;overflow:hidden;border-radius:3px;background:var(--zs-bar)}
.zs-bar>i{display:block;width:var(--w,100%);height:100%;border-radius:inherit;background:var(--zs-acc)}
.zs-bar.ok>i{background:var(--zs-ok)}
.zs-i{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zs-ck{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--zs-ok-bg);color:var(--zs-ok)}
.zs-ck .zs-i{width:13px;height:13px;stroke-width:2.2}
.zs-ck.pend{background:none;box-shadow:inset 0 0 0 1.5px var(--zs-bar)}
.zs-ag{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;background:var(--zs-acc-bg);color:var(--zs-acc)}
.zs-ag svg{width:15px;height:15px;fill:currentColor}
.zs-av{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--a,#6b4fe6);color:#fff;font:600 12px/1 var(--sans,Inter,sans-serif)}

/* ---- the foot: who did the work, and what it comes to ---- */
.zs-ft{display:flex;align-items:center;gap:10px;min-height:50px;margin-top:auto;padding:12px 20px;border-top:1px solid var(--zs-line);font-size:13px;line-height:1.4;color:var(--zs-tx2)}
.zs-ft b{font-weight:500;color:var(--zs-tx)}
.zs-ft>.zs-sw,.zs-ft>.zs-pill,.zs-ft>.zs-btns{margin-left:auto}
.zs-ft>span:not(.zs-ag):not(.zs-sw):not(.zs-pill):not(.zs-ck){flex:1;min-width:0}

/* ---- fields read from a document, and figures that sum a screen up ---- */
.zs-kv{padding:2px 20px 6px}
.zs-kv>div{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:16px;min-height:46px;border-top:1px solid var(--zs-line)}
.zs-kv>div:first-child{border-top:0}
.zs-kv dt{font-size:13px;color:var(--zs-tx2)}
.zs-kv dd{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.zs-kv dd .zs-i{color:var(--zs-tx2)}
.zs-kpis{display:grid;grid-template-columns:repeat(var(--zk,3),minmax(0,1fr));border-top:1px solid var(--zs-line)}
.zs-kpis>div{display:grid;align-content:start;gap:7px;min-width:0;padding:14px 20px 16px}
.zs-kpis>div+div{border-left:1px solid var(--zs-line)}
.zs-kpis span{font-size:12.5px;color:var(--zs-tx2)}
.zs-kpis b{font-size:22px;font-weight:500;line-height:1.05;letter-spacing:-.025em}
.zs-kpis b.ok{color:var(--zs-ok)}
.zs-kpis em{font-size:12.5px;color:var(--zs-tx2)}
.zs-kpis em.zs-up{color:var(--zs-ok)}
.zs-sub{padding:16px 20px 8px;font-size:12.5px;font-weight:500;color:var(--zs-tx3)}

/* ---- before, then after: a status that changes in place ---- */
.zs-sw{display:inline-grid;align-items:center;justify-items:start;min-width:0;max-width:100%}
.zs-sw.r{justify-items:end}
.zs-sw>*{grid-area:1/1;min-width:0;max-width:100%}
.zs-sw>.a{visibility:hidden}

/* ---- motion: one short, real change per screen; the finished screen is the default ---- */
@keyframes zs-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes zs-hide{from{visibility:visible;opacity:1}to{visibility:hidden;opacity:0}}
@keyframes zs-show{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes zs-w{from{width:var(--w0,0%)}to{width:var(--w,100%)}}
@keyframes zs-breathe{0%,100%{opacity:1}50%{opacity:.5}}
.gs.pre .zm{opacity:0}
.gs.on .zm{animation:zs-in .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.gs.pre .zs-sw>.a{visibility:visible}
.gs.pre .zs-sw>.b{visibility:hidden}
.gs.on .zs-sw>.a{visibility:visible;animation:zs-hide .16s ease both;animation-delay:var(--d,1s)}
.gs.on .zs-sw>.b{animation:zs-show .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,1s) + .1s)}
.gs.on .zs-sw>.a>.zs-pill.run{animation:zs-breathe 1s ease-in-out infinite}
@keyframes zs-okc{from{color:var(--zs-tx)}to{color:var(--zs-ok)}}
.gs.on .zs-kpis b.ok[data-to]{animation:zs-okc .3s ease both;animation-delay:calc(var(--okd,1.95s))}
.gs.pre .zs-kpis b.ok[data-to]{color:var(--zs-tx)}
.gs.pre .zs-bar>i{width:var(--w0,0%)}
.gs.on .zs-bar>i{animation:zs-w 1s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--bd,.25s)}

/* ===== the screens ===== */
/* Transactions: each bank line becomes a vendor and an account, and posts */
.zs-bk .zs-th,.zs-bk .zs-tr{--zc:minmax(0,1fr) 128px 86px 94px}
.zs-bk .zs-th>:last-child,.zs-bk .zs-tr>:last-child{justify-self:start}
/* A bill, read from an email */
.zs-src{display:flex;align-items:center;gap:12px;margin:0 20px;padding:12px 14px;border-radius:10px;background:var(--zs-bg2)}
.zs-src>.zs-i{width:18px;height:18px;color:var(--zs-tx2)}
.zs-src .zs-c2{flex:1}
.zs-att{display:inline-flex;align-items:center;gap:6px;flex:none;height:28px;padding:0 10px;border-radius:7px;background:var(--zs-bg);box-shadow:inset 0 0 0 1px var(--zs-line);font-size:12.5px;font-weight:500;color:var(--zs-tx)}
.zs-att .zs-i{width:14px;height:14px;color:var(--zs-tx2)}
.zs-ib .zs-kv{margin-top:8px}
/* The reconciliation */
.zs-rc .zs-th,.zs-rc .zs-tr{--zc:52px minmax(0,1fr) minmax(0,1.05fr) 96px}
.zs-rc .zs-kpis{border-top:0;border-bottom:1px solid var(--zs-line)}
.zs-mt{display:flex;align-items:center;gap:8px;min-width:0}
.zs-mt>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.zs-mt .zs-ck{width:18px;height:18px}
.zs-mt .zs-ck .zs-i{width:12px;height:12px}
.zs-mt.no{color:var(--zs-you)}
/* The checks on an entry */
.zs-cks{padding:4px 20px 8px}
.zs-cks>li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:46px;border-top:1px solid var(--zs-line)}
.zs-cks>li:first-child{border-top:0}
.zs-cks em{font-size:13px;color:var(--zs-tx2);text-align:right;white-space:nowrap}
/* A journal entry */
.zs-jn .zs-th,.zs-jn .zs-tr{--zc:minmax(0,1fr) 104px 104px}
.zs-sched{display:grid;grid-template-columns:minmax(0,1fr) 168px;align-items:center;gap:20px;padding:14px 20px;border-top:1px solid var(--zs-line)}
.zs-prog{display:grid;gap:8px}
.zs-prog>span{font-size:13px;color:var(--zs-tx2)}
.zs-prog>span b{font-weight:600;color:var(--zs-tx)}
/* The close */
.zs-cl .zs-th,.zs-cl .zs-tr{--zc:minmax(0,1fr) 150px 92px}
.zs-cl .zs-th>:last-child,.zs-cl .zs-tr>:last-child{justify-self:start}
.zs-big{display:grid;gap:10px;padding:2px 20px 18px}
.zs-big>span{font-size:13.5px;color:var(--zs-tx2)}
.zs-big>span b{margin-right:4px;font-size:28px;font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--zs-tx)}
/* The profit and loss */
.zs-rp .zs-th,.zs-rp .zs-tr{--zc:minmax(0,1fr) 112px 92px}
.zs-note{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--zs-line);font-size:13.5px;color:var(--zs-tx)}
/* The sales tax return */
.zs-tx .zs-th,.zs-tx .zs-tr{--zc:minmax(0,1fr) 124px 104px}
.zs-act{display:flex;align-items:center;gap:14px;padding:14px 20px 16px;border-top:1px solid var(--zs-line);font-size:13px;color:var(--zs-tx2)}
/* An entry and its evidence */
.zs-ev .zs-th,.zs-ev .zs-tr{--zc:28px minmax(0,1fr) auto}
.zs-ev .zs-tr>.zs-i{width:18px;height:18px;color:var(--zs-tx2)}
.zs-ev .zs-cks{padding-top:0}
/* The first screen's reconciliation, in brief */
.zs-rec .zs-big{padding-top:6px}
.zs-rec .zs-big>b{font-size:40px;font-weight:500;line-height:1;letter-spacing:-.04em}
/* A question that needs you */
.zs-q{display:grid;gap:6px;padding:4px 20px 16px}
.zs-q>b{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.zs-q>span{font-size:13px;color:var(--zs-tx2)}
.zs-ask .zs-ft>.zs-sw{margin-left:0}
.zs-ask .zs-btns{padding:0 20px 18px}
.zs-meta{font-size:13px;color:var(--zs-tx2)}
/* The catch-up audit */
.zs-cu .zs-th,.zs-cu .zs-tr{--zc:minmax(0,1fr) 64px 20px}
.zs-cu .zs-kpis{border-top:0;border-bottom:1px solid var(--zs-line)}
.zs-fx{display:grid;gap:10px;margin:0 20px 14px;padding:14px 16px;border-radius:10px;background:var(--zs-bg2)}
.zs-fx-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.zs-fx-h b{font-weight:500}
.zs-fx-h span{font-size:13px;color:var(--zs-tx2)}
.zs-fx-c{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.zs-fx-c s{color:var(--zs-tx2);text-decoration-color:var(--zs-tx3)}
.zs-fx-c .zs-i{width:14px;height:14px;color:var(--zs-tx3)}
.zs-fx p{font-size:13px;line-height:1.5;color:var(--zs-tx2)}
.zs-chev{width:14px;height:14px;justify-self:end;color:var(--zs-tx3)}
.zs-tr.open .zs-chev{transform:rotate(180deg)}
/* An agent's permissions, and the work above its limit */
.zs-lim{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 20px 6px;padding:12px 14px;border-radius:10px;background:var(--zs-bg2);font-size:13.5px}
.zs-lim>span:first-child{color:var(--zs-tx2)}
.zs-in{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;background:var(--zs-bg);box-shadow:inset 0 0 0 1px var(--zs-edge);font-weight:500}
.zs-perm .zs-tr{--zc:minmax(0,1fr) auto}
.zs-perm .zs-tb>.zs-tr{min-height:50px}
.zs-perm .zs-tr.off>span:first-child{color:var(--zs-tx2)}
.zs-lk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--zs-tx3)}
.zs-earn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--zs-acc)}
.zs-earn .zs-bar{width:72px}
.zs-appr .zs-row{display:flex;align-items:center;gap:12px;padding:0 20px 16px}
.zs-appr .zs-row .zs-c2{flex:1}
.zs-appr .zs-row>b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.zs-appr .zs-btns{padding:0 20px 18px}
/* The owner's brief */
.zs-brief .zs-kpis{border-top:0}
.zs-chart{display:grid;gap:8px;padding:6px 20px 16px}
.zs-bars{display:flex;align-items:flex-end;gap:6px;height:84px}
.zs-bars>i{flex:1;height:calc(var(--v) * 100%);border-radius:3px 3px 1px 1px;background:var(--zs-bar);transform-origin:bottom}
.zs-bars>i.now{background:var(--zs-acc)}
.zs-ax{display:flex;gap:6px;font-size:11.5px;color:var(--zs-tx3)}
.zs-ax>i{flex:1;font-style:normal;text-align:center}
.zs-brief .zs-tr{--zc:minmax(0,1fr) auto}
@keyframes zs-rise{from{transform:scaleY(0)}to{transform:none}}
.gs.on .zs-bars>i{animation:zs-rise .6s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d)}
/* The firm's clients */
.zs-firm .zs-th,.zs-firm .zs-tr{--zc:minmax(0,1fr) 120px 104px}
.zs-firm .zs-th>:last-child,.zs-firm .zs-tr>:last-child{justify-self:start}
.zs-cli{display:flex;align-items:center;gap:12px;min-width:0}
.zs-cli>span{overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.zs-pc{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:10px;font-size:12.5px;color:var(--zs-tx2)}
.zs-pc>em{text-align:right}
/* The month's close, as it runs (the first screen of direction A) */
.zs-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--zs-ok)}
.zs-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.zs-panel .zs-big{padding-bottom:16px}
.zs-panel .zs-qb{display:grid;gap:10px;margin:0 20px 18px;padding:14px 16px;border-radius:10px;background:var(--zs-bg2)}
.zs-qb>span:first-child{font-size:12.5px;font-weight:500;color:var(--zs-you)}
.zs-qb>b{font-size:15px;font-weight:500;line-height:1.35}
.zs-qb>em{font-size:12.5px;color:var(--zs-tx2)}

/* ---- narrow screens: the panels drop what is least needed ---- */
@container zs (max-width:470px){
  .zs-hd{min-height:60px;padding:12px 16px}
  .zs-th,.zs-tr{column-gap:12px;padding:0 16px}
  .zs-ft,.zs-note,.zs-act,.zs-sched{padding-inline:16px}
  .zs-kv,.zs-cks,.zs-chart,.zs-big,.zs-q{padding-inline:16px}
  .zs-src,.zs-fx,.zs-lim,.zs-qb{margin-inline:16px}
  .zs-kv>div{grid-template-columns:104px minmax(0,1fr)}
  .zs-kpis>div{padding:12px 16px 14px}
  .zs-kpis b{font-size:19px}
  .zs-bk .zs-th,.zs-bk .zs-tr{--zc:minmax(0,1fr) 78px 86px}
  .zs-bk .zs-th>:nth-child(2),.zs-bk .zs-tr>:nth-child(2){display:none}
  .zs-rc .zs-th,.zs-rc .zs-tr{--zc:minmax(0,1fr) auto;grid-template-areas:"b a" "m m";row-gap:4px}
  .zs-rc .zs-th>:first-child,.zs-rc .zs-tr>:first-child,.zs-rc .zs-th>:nth-child(3){display:none}
  .zs-rc .zs-tr>:nth-child(2),.zs-rc .zs-th>:nth-child(2){grid-area:b}
  .zs-rc .zs-tr>:nth-child(3){grid-area:m;font-size:13px;color:var(--zs-tx2)}
  .zs-rc .zs-tr>:nth-child(4),.zs-rc .zs-th>:nth-child(4){grid-area:a}
  .zs-rc .zs-tb>.zs-tr{padding-block:10px}
  .zs-opt{display:none}
  .zs-fx-h{flex-direction:column;gap:2px}
  .zs-kv dd{white-space:normal;line-height:1.35;padding-block:6px}
  .zs-cl .zs-th,.zs-cl .zs-tr{--zc:minmax(0,1fr) 92px}
  .zs-cl .zs-th>:nth-child(2),.zs-cl .zs-tr>:nth-child(2){display:none}
  .zs-firm .zs-th,.zs-firm .zs-tr{--zc:minmax(0,1fr) 104px}
  .zs-firm .zs-th>:nth-child(2),.zs-firm .zs-tr>:nth-child(2){display:none}
  .zs-jn .zs-th,.zs-jn .zs-tr{--zc:minmax(0,1fr) 88px 88px}
  .zs-rp .zs-th,.zs-rp .zs-tr{--zc:minmax(0,1fr) 92px 72px}
  .zs-tx .zs-th,.zs-tx .zs-tr{--zc:minmax(0,1fr) 104px 88px}
  .zs-sched{grid-template-columns:1fr;gap:12px}
  .zs-cks em{display:none}
  .zs-src .zs-att{display:none}
}
@container zs (max-width:380px){
  .zs-kpis>div{padding:12px 12px 14px 16px}
  .zs-kpis>div+div{padding-left:12px}
  .zs-kpis b{font-size:17px}
  .zs-kpis span,.zs-kpis em{font-size:12px}
  .zs-tx .zs-th,.zs-tx .zs-tr{--zc:minmax(0,1fr) 92px}
  .zs-tx .zs-th>:nth-child(2),.zs-tx .zs-tr>:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){.gs.on .zs-sw>.a>.zs-pill.run{animation:none}}

/* =====================================================================================================
   Version 43: the product, at the fidelity of a real app
   Built on the version 42 kit (its tokens, tables, pills and motion contract) and taken further: list and detail side by
   side, merchant marks, account chips with their icons, receipt and invoice thumbnails, a double check when both models
   agree, the agent's mark on its work. One story runs through every screen: Ridge Coffee Co., September 2026.
   ===================================================================================================== */
.zk{--zk-raise:#1b1b23;--zk-well:#111116;--zk-chip:rgba(255,255,255,.055);--zk-chip-edge:rgba(255,255,255,.07);
  --zs-bg:#16161c;--zs-bg2:#1b1b22;--zs-line:rgba(255,255,255,.065);--zs-edge:rgba(255,255,255,.11);
  background:linear-gradient(180deg,#18181f 0%,#141419 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 34px 70px -34px rgba(0,0,0,.85);font-size:13px}
.zk :where(h4,h5){margin:0;font:inherit}

/* ---- the window's bar: where you are in the app, and what you can do here ---- */
.zk-bar{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 16px;border-bottom:1px solid var(--zs-line);background:rgba(255,255,255,.012)}
.zk-crumb{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--zs-tx3);white-space:nowrap}
.zk-crumb b{overflow:hidden;font-weight:500;color:var(--zs-tx);text-overflow:ellipsis}
.zk-crumb .zs-i{width:12px;height:12px;flex:none}
.zk-co{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;background:#2a2833;color:#e4e1ea;font:600 10.5px/1 var(--sans,Inter,sans-serif)}
.zk-bar>.zk-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.zk-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--zs-tx2);white-space:nowrap}
.zk-live i{width:6px;height:6px;border-radius:50%;background:var(--zs-ok);box-shadow:0 0 0 3px rgba(99,214,152,.14)}
.zk-agent{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--zs-tx2);white-space:nowrap}
.zk-agent .zs-ag{width:20px;height:20px;border-radius:6px}
.zk-agent .zs-ag svg{width:13px;height:13px}

/* ---- heads inside a window ---- */
.zk-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px}
.zk-hd .zs-ti{gap:4px}
.zk-hd .zs-ti>b{font-size:15.5px;letter-spacing:-.016em}
.zk-hd .zs-ti>span{font-size:12.5px}
.zk-hd>.zk-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.zk-big{font-size:22px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums}

/* ---- chips: an account with its icon, a document, a tag ---- */
.zk-chip{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:100%;height:24px;padding:0 8px;border-radius:7px;background:var(--zk-chip);
  box-shadow:inset 0 0 0 1px var(--zk-chip-edge);font-size:12px;font-weight:500;color:#dcd9e4;white-space:nowrap}
.zk-chip .zs-i{width:12px;height:12px;flex:none;color:var(--zs-tx2)}
.zk-chip>span{overflow:hidden;text-overflow:ellipsis}
.zk-chip.you{background:var(--zs-you-bg);box-shadow:none;color:var(--zs-you)}
.zk-chip.you .zs-i{color:var(--zs-you)}
.zk-chip.ok{background:var(--zs-ok-bg);box-shadow:none;color:var(--zs-ok)}
.zk-chip.ok .zs-i{color:var(--zs-ok)}
.zk-chip.run{background:var(--zs-acc-bg);box-shadow:none;color:var(--zs-acc)}
.zk-chip.ghost{background:none;box-shadow:none;padding:0;color:var(--zs-tx3)}

/* a merchant's mark: its initial on a quiet tile */
.zk-mk{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:#24232c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  color:#e2dfe9;font:600 11.5px/1 var(--sans,Inter,sans-serif)}
.zk-mk.sm{width:24px;height:24px;border-radius:7px;font-size:10.5px}
.zk-mk.logo{background:#fff}
.zk-mk.logo img{width:17px;height:17px;object-fit:contain}

/* checked once by the agent, twice when the second model agrees */
.zk-v{display:inline-grid;place-items:center;flex:none;width:22px;height:18px;color:var(--zs-tx3)}
.zk-v svg{width:18px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zk-v.ok{color:var(--zs-ok)}
.zk-v.you{color:var(--zs-you)}

/* ---- lists: a row is a thing, not a spreadsheet line ---- */
.zk-list>.zk-row{display:grid;grid-template-columns:var(--zr);align-items:center;column-gap:12px;min-height:52px;padding:8px 16px;border-top:1px solid var(--zs-line)}
.zk-list>.zk-row:first-child{border-top:0}
.zk-row .zs-c2>b{font-weight:500}
.zs-c2>.zk-chip,.zs-c2>.zs-sw,.zs-c2>span>.zk-chip,.zs-c2>span>.zs-sw{justify-self:start}
.zk-amt{display:grid;justify-items:end;gap:4px}
.zk-amt>b{font-weight:500;font-variant-numeric:tabular-nums}
.zk-t{align-self:start;margin-top:1px;font-size:11.5px;font-style:normal;color:var(--zs-tx3);white-space:nowrap}
.zk-row .zs-r b{font-weight:500}
.zk-row.sel{position:relative;background:rgba(171,159,255,.075)}
.zk-row.sel::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--zs-acc)}
.zk-row.dim{color:var(--zs-tx2)}
.zk-cap{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 16px;border-top:1px solid var(--zs-line);border-bottom:1px solid var(--zs-line);
  background:rgba(255,255,255,.015);font-size:11.5px;font-weight:500;color:var(--zs-tx3)}
.zk-cap>.zs-r,.zk-cap>.zk-r{margin-left:auto}

/* ---- list and detail, side by side ---- */
.zk-split{display:grid;grid-template-columns:var(--zsp,minmax(0,1fr) 256px);min-height:0}
.zk-split>.zk-pane{min-width:0}
.zk-split>.zk-pane+.zk-pane{border-left:1px solid var(--zs-line);background:rgba(0,0,0,.14)}
.zk-det{display:grid;align-content:start;gap:12px;padding:16px}
.zk-dtop{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px}
.zk-dtop h4{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.zk-dtop .zk-big{display:block;margin-top:8px;font-size:21px}
.zk-sub{display:block;margin-top:5px;font-size:12px;color:var(--zs-tx2)}
.zk-kv{display:grid;gap:0}
.zk-kv>div{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;min-height:34px;border-top:1px solid var(--zs-line);font-size:12.5px}
.zk-kv>div:first-child{border-top:0}
.zk-kv dt{color:var(--zs-tx2)}
.zk-kv dd{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.zk-cks{display:grid;gap:8px;margin:0;padding:12px;border-radius:10px;background:var(--zk-well);list-style:none}
.zk-cks li{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:9px;font-size:12.5px;color:#d8d5df}
.zk-cks .zs-ck{width:18px;height:18px}
.zk-cks .zs-ck .zs-i{width:12px;height:12px}

/* ---- documents in miniature ---- */
.zk-rcp{position:relative;display:grid;align-content:start;gap:4px;flex:none;width:62px;height:84px;padding:8px 7px;background:#f3f2ee;color:#2c2b31;
  clip-path:polygon(0 0,100% 0,100% 92%,93.75% 100%,87.5% 92%,81.25% 100%,75% 92%,68.75% 100%,62.5% 92%,56.25% 100%,50% 92%,43.75% 100%,37.5% 92%,31.25% 100%,25% 92%,18.75% 100%,12.5% 92%,6.25% 100%,0 92%);
  font:700 6.5px/1 var(--sans,Inter,sans-serif);letter-spacing:.14em;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.zk-rcp i{display:block;height:2.5px;border-radius:1px;background:#d2d0ca}
.zk-rcp i.s{width:60%}
.zk-rcp em{justify-self:end;margin-top:6px;padding:2px 3px;border-radius:2px;background:#dff3e8;color:#1b6b43;font:700 7px/1 var(--sans,Inter,sans-serif);letter-spacing:0;font-variant-numeric:tabular-nums}
.zk-pdf{position:relative;display:grid;align-content:start;gap:4px;flex:none;width:64px;height:84px;padding:9px 7px;border-radius:3px;background:#f6f5f2;color:#2c2b31;
  font:700 6px/1 var(--sans,Inter,sans-serif);letter-spacing:.12em;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.zk-pdf i{display:block;height:2.5px;border-radius:1px;background:#d8d6d0}
.zk-pdf i.s{width:55%}
.zk-pdf u{display:grid;grid-template-columns:1fr auto;margin-top:5px;padding-top:4px;border-top:1px solid #d8d6d0;text-decoration:none;font:700 6.5px/1 var(--sans,Inter,sans-serif);letter-spacing:0}
.zk-doc{display:flex;gap:12px;align-items:flex-start}
.zk-doc>.zk-kv{flex:1;min-width:0}

/* ---- the footer: who did this ---- */
.zk-ft{display:flex;align-items:center;gap:10px;min-height:46px;margin-top:auto;padding:10px 16px;border-top:1px solid var(--zs-line);font-size:12.5px;color:var(--zs-tx2)}
.zk-ft b{font-weight:500;color:var(--zs-tx)}
.zk-ft>.zk-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.zk-ft .zs-ag{width:20px;height:20px;border-radius:6px}
.zk-ft .zs-ag svg{width:13px;height:13px}

/* ---- a row arriving, as the agent works ---- */
@keyframes zk-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes zk-flash{0%{background:rgba(171,159,255,.16)}100%{background:transparent}}
.gs.pre .zk-new{opacity:0}
.gs.on .zk-new{animation:zk-arrive .5s cubic-bezier(.2,.7,.2,1) both,zk-flash 1.6s ease .5s both;animation-delay:var(--d,.1s),calc(var(--d,.1s) + .4s)}

/* ---- the reconciliation: bank and books, matched pairs ---- */
.zk-pair{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;column-gap:8px;min-height:50px;padding:6px 16px;border-top:1px solid var(--zs-line)}
.zk-pair>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;min-width:0}
.zk-pair>div>b{overflow:hidden;font-size:12px;font-weight:500;letter-spacing:.03em;white-space:nowrap;text-overflow:ellipsis}
.zk-pair>div>span{grid-column:1;overflow:hidden;font-size:11.5px;color:var(--zs-tx2);white-space:nowrap;text-overflow:ellipsis}
.zk-pair>div>em{grid-row:1;grid-column:2;font-size:12.5px;font-variant-numeric:tabular-nums}
.zk-pair .zk-eq{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--zs-ok-bg);color:var(--zs-ok)}
.zk-pair .zk-eq.no{background:var(--zs-you-bg);color:var(--zs-you)}
.zk-pair .zk-eq .zs-i{width:12px;height:12px;stroke-width:2.2}
.zk-sides{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);column-gap:8px;min-height:30px;align-items:center;padding:0 16px;border-top:1px solid var(--zs-line);
  background:rgba(255,255,255,.015);font-size:11.5px;font-weight:500;color:var(--zs-tx3)}
.zk-sides>span:last-child{grid-column:3}

/* ---- the schedule: a year of entries ---- */
.zk-year{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;padding:4px 18px 16px}
.zk-year>span{display:grid;justify-items:center;gap:6px;font-size:10.5px;color:var(--zs-tx3)}
.zk-year>span>i{display:block;width:100%;height:20px;border-radius:5px;background:rgba(171,159,255,.42)}
.zk-year>span.next>i{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.zk-year>span.now>i{background:var(--zs-acc);box-shadow:0 0 0 3px rgba(171,159,255,.18)}
.zk-year>span.now{color:var(--zs-tx)}
@keyframes zk-fill{from{transform:scaleY(.15);opacity:.3}to{transform:none;opacity:1}}
.gs.on .zk-year>span.now>i{animation:zk-fill .6s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d,1s);transform-origin:bottom}
.gs.pre .zk-year>span.now>i{opacity:.3}

/* ---- the close: grouped tasks, each with its agent ---- */
.zk-grp{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 16px;border-top:1px solid var(--zs-line);background:rgba(255,255,255,.015);font-size:11.5px;font-weight:500;color:var(--zs-tx3)}
.zk-grp em{margin-left:auto;font-variant-numeric:tabular-nums}
.zk-task{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:0 16px;border-top:1px solid var(--zs-line);font-size:12.5px}
.zk-task .zs-ck{width:18px;height:18px}
.zk-task .zs-ck .zs-i{width:12px;height:12px}
.zk-task>span:nth-child(2){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.zk-task .zk-who{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--zs-tx3);white-space:nowrap}
.zk-task .zk-who .zs-ag{width:18px;height:18px;border-radius:5px}
.zk-task .zk-who .zs-ag svg{width:12px;height:12px}
.zk-ring{position:relative;display:grid;place-items:center;flex:none;width:52px;height:52px}
.zk-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.zk-ring circle{fill:none;stroke-width:4.5}
.zk-ring .t{stroke:rgba(255,255,255,.08)}
.zk-ring .p{stroke:var(--zs-ok);stroke-linecap:round;stroke-dasharray:var(--c) 999;transition:none}
.zk-ring b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
@keyframes zk-ring{from{stroke-dasharray:var(--c0) 999}to{stroke-dasharray:var(--c) 999}}
.gs.on .zk-ring .p{animation:zk-ring 1s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--d,1.2s)}
.gs.pre .zk-ring .p{stroke-dasharray:var(--c0) 999}

/* ---- the question an agent asks ---- */
.zk-q{display:grid;gap:10px;margin:0 12px 12px;padding:14px;border-radius:12px;background:var(--zk-raise);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.zk-q>b{font-size:13.5px;font-weight:500;line-height:1.4;letter-spacing:-.008em}
.zk-q>span{font-size:12px;color:var(--zs-tx2)}
.zk-q .zs-btns{gap:6px}
.zk-q .zs-btn{height:30px;padding:0 12px;font-size:12.5px}

/* ---- statements: a line, its month, and the trend behind it ---- */
.zk-st>.zk-row{--zr:minmax(0,1fr) 64px 72px 58px;min-height:42px}
.zk-spark{display:block;width:64px;height:20px;overflow:visible}
.zk-spark polyline{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.zk-row.tot .zk-spark polyline{stroke:var(--zs-acc)}
.zk-row.tot{font-weight:600;background:rgba(255,255,255,.02)}
.zk-delta{font-size:12px;font-variant-numeric:tabular-nums;color:var(--zs-tx2)}
.zk-delta.up{color:var(--zs-ok)}
.zk-why{display:grid;gap:8px;margin:2px 12px 12px;padding:12px 14px;border-radius:12px;background:var(--zk-raise);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.zk-why>b{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500}
.zk-why ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.zk-why li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;font-size:12px;color:var(--zs-tx2)}
.zk-why li em{font-variant-numeric:tabular-nums;color:var(--zs-tx)}
.zk-why li em.up{color:var(--zs-ok)}

/* ---- two models, one entry ---- */
.zk-vs{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 22px;align-items:center;column-gap:10px;min-height:38px;padding:0 16px;border-top:1px solid var(--zs-line);font-size:12.5px}
.zk-vs>span:first-child{color:var(--zs-tx2)}
.zk-vs>span:nth-child(2),.zk-vs>span:nth-child(3){overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.zk-vs.hd{min-height:42px;font-size:11.5px;font-weight:500;color:var(--zs-tx3);background:rgba(255,255,255,.015)}
.zk-vs.hd>span{display:flex;align-items:center;gap:6px;font-weight:500!important;color:var(--zs-tx2)}
.zk-vs.hd .zs-ag{width:18px;height:18px;border-radius:5px}
.zk-vs.hd .zs-ag svg{width:12px;height:12px}
.zk-vs .zs-ck{width:18px;height:18px}
.zk-vs .zs-ck .zs-i{width:12px;height:12px}

/* ---- the brief, as the owner reads it ---- */
.zk-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--zs-line)}
.zk-kpi>div{display:grid;align-content:start;gap:6px;padding:14px 16px}
.zk-kpi>div+div{border-left:1px solid var(--zs-line)}
.zk-kpi span{font-size:12px;color:var(--zs-tx2)}
.zk-kpi b{font-size:21px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.zk-kpi em{font-size:12px;color:var(--zs-tx2)}
.zk-kpi em.up{color:var(--zs-ok)}

/* ---- what each model reads, and what it concludes ---- */
.zs-rd{margin:0;padding:0 18px;list-style:none}
.zs-rd>li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:42px;border-top:1px solid var(--zs-line);font-size:13px}
.zs-rd>li:first-child{border-top:0}
.zs-rd>li>.zs-i{width:15px;height:15px;color:var(--zs-tx2)}
.zs-rd>li>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.zs-rd>li>em{font-size:12px;color:var(--zs-tx2);white-space:nowrap}
.zs-rd>li.off{color:var(--zs-tx3)}
.zs-rd>li.off>em,.zs-rd>li.off>.zs-i{color:var(--zs-tx3)}
.zs-out{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px;margin:2px 18px 18px;padding:14px 16px;border-radius:10px;background:var(--zk-well);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.zs-out b{font-size:16px;font-weight:500;letter-spacing:-.016em}
.zs-out b+b{font-variant-numeric:tabular-nums}
.zs-out span{grid-column:1/-1;font-size:12px;color:var(--zs-tx2)}
.zkw-appr .zs-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zkw-appr .zs-row>b{font-size:17px;font-weight:500;letter-spacing:-.016em;font-variant-numeric:tabular-nums}

/* ---- buttons that read as product, not page ---- */
.zk .zs-btn{height:30px;padding:0 12px;border-radius:8px;font-size:12.5px}
.zk .zs-btn.pri{background:var(--zs-btn)}

/* ---- narrow: a split becomes list over detail ---- */
@container zs (max-width:500px){
  .zk-split{grid-template-columns:1fr}
  .zk-split>.zk-pane+.zk-pane{border-left:0;border-top:1px solid var(--zs-line)}
  .zk-hide-n{display:none!important}
  .zk-bar .zk-crumb .zk-hide-n+*{display:none}
}
@container zs (max-width:400px){
  .zk-hd{flex-wrap:wrap}
  .zk-pair>div>span{display:none}
  .zk-vs{grid-template-columns:58px minmax(0,1fr) minmax(0,1fr) 20px;column-gap:8px}
  .zk-st>.zk-row{--zr:minmax(0,1fr) 70px 54px}
  .zk-st .zk-spark,.zk-st .zk-sp{display:none}
}
@media (prefers-reduced-motion:reduce){.gs.on .zk-new,.gs.on .zk-year>span.now>i,.gs.on .zk-ring .p{animation:none}}

/* =====================================================================================================
   Version 44: the product as frosted glass
   The version 43 windows, made transparent in the way the founder pointed to (joindime.io): white glass over a soft
   ground of colour, white type at three strengths, solid white for what is done, a warm tint only for what needs you,
   and nothing else coloured. Loaded after ui42.css and ui43.css; the markup is the same.
   ===================================================================================================== */
.zk{--zs-bg:transparent;--zs-bg2:rgba(255,255,255,.07);--zs-line:rgba(255,255,255,.12);--zs-edge:rgba(255,255,255,.16);
  --zs-tx:#fff;--zs-tx2:rgba(255,255,255,.8);--zs-tx3:rgba(255,255,255,.64);
  --zs-acc:#fff;--zs-acc-bg:rgba(255,255,255,.16);--zs-btn:#fff;
  --zs-ok:#b9f5d4;--zs-ok-bg:rgba(185,245,212,.16);--zs-you:#ffdcae;--zs-you-bg:rgba(255,205,150,.2);--zs-bar:rgba(255,255,255,.18);
  --zk-raise:rgba(255,255,255,.1);--zk-well:rgba(12,8,30,.16);--zk-chip:rgba(255,255,255,.14);--zk-chip-edge:rgba(255,255,255,.04);
  border:0;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff}
/* the window's bar and its parts */
.zk .zk-bar{border-bottom-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.zk .zk-co{background:rgba(255,255,255,.18);color:#fff}
.zk .zk-live i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.zk .zk-cap,.zk .zk-grp,.zk .zk-sides,.zk .zk-vs.hd,.zk .zs-th{background:rgba(255,255,255,.035)}
.zk .zk-split>.zk-pane+.zk-pane{background:rgba(255,255,255,.035)}
/* statuses: done is solid white; in progress is glass; what needs you is warm */
.zk .zs-pill{background:rgba(255,255,255,.12);color:#fff}
.zk .zs-pill.ok{background:#fff;color:#151320}
.zk .zs-pill.run{background:rgba(255,255,255,.14);color:#fff}
.zk .zs-pill.you{background:var(--zs-you-bg);color:var(--zs-you)}
.zk .zk-chip{background:var(--zk-chip);box-shadow:inset 0 0 0 1px var(--zk-chip-edge);color:#fff}
.zk .zk-chip .zs-i{color:rgba(255,255,255,.75)}
.zk .zk-chip.ok{background:#fff;box-shadow:none;color:#151320}
.zk .zk-chip.ok .zs-i{color:#151320}
.zk .zk-chip.run{background:rgba(255,255,255,.16);color:#fff}
.zk .zk-mk{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff}
.zk .zk-mk.logo{background:#fff}
.zk .zs-ag{background:rgba(255,255,255,.14);color:#fff}
.zk .zk-row.sel{background:rgba(255,255,255,.09)}
.zk .zk-row.sel::before{background:#fff}
.zk .zs-ck{background:rgba(255,255,255,.95);color:#151320}
.zk .zs-ck.pend{background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.zk .zk-v.ok{color:#fff}
/* controls */
.zk .zs-btn{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff}
.zk .zs-btn.pri{border-color:transparent;background:#fff;color:#151320}
.zk .zs-seg{background:rgba(255,255,255,.08)}
.zk .zs-seg>.on{background:rgba(255,255,255,.2);box-shadow:none;color:#fff}
.zk .zs-tg{background:rgba(255,255,255,.18)}
.zk .zs-tg.on{background:#fff}
.zk .zs-tg::after{background:#fff}
.zk .zs-tg.on::after{background:#151320}
.zk .zs-bar>i,.zk .zs-bar.ok>i{background:#fff}
.zk .zs-in,.zk .zs-lim{background:rgba(255,255,255,.08)}
.zk .zs-in{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.zk .zs-kpis b.ok{color:var(--zs-ok)}
/* charts and schedules in white */
.zk .zk-spark polyline{stroke:rgba(255,255,255,.45)}
.zk .zk-row.tot .zk-spark polyline{stroke:#fff}
.zk .zk-ring .t{stroke:rgba(255,255,255,.14)}
.zk .zk-ring .p{stroke:#fff}
.zk .zk-year>span>i{background:rgba(255,255,255,.34)}
.zk .zk-year>span.next>i{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.zk .zk-year>span.now>i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.zk .zs-bars>i{background:rgba(255,255,255,.22)}
.zk .zs-bars>i.now{background:#fff}
.zk .zk-delta.up,.zk .zs-up,.zk .zk-why li em.up,.zk .zk-kpi em.up{color:var(--zs-ok)}
.zk .zs-fx{background:rgba(255,255,255,.07)}
.zk .zs-out{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.zk .zk-cks{background:rgba(10,8,22,.2)}
.zk .zk-q,.zk .zk-why{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.zk .zk-eq{background:#fff!important;color:#151320!important}
.zk .zk-eq.no{background:var(--zs-you-bg)!important;color:var(--zs-you)!important}

/* ---- the ground under the glass: a panel of deep colour that fades toward light, as the reference does, in the ring's
   colours (violet, rose, dusk, night); a little grain so the glass has something to blur ---- */
.zstage{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:center;gap:16px;overflow:hidden;
  box-sizing:border-box;width:min(var(--sw,640px),100%);padding:var(--sp,36px 32px);border-radius:24px;
  background:linear-gradient(180deg,var(--g0,#1c1540) 0%,var(--g1,#f1eefb) var(--gs,420%))}
.zstage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.zstage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 85% 0%,var(--gh,rgba(150,120,255,.35)),transparent 70%)}
.zstage>.zk{width:min(var(--zw,560px),100%)}
.zv-violet{--g0:#1b1442;--g1:#efeafc;--gh:rgba(146,116,255,.38)}
.zv-rose{--g0:#2a1235;--g1:#f9edf3;--gh:rgba(255,118,182,.3)}
.zv-dusk{--g0:#24152a;--g1:#faefe4;--gh:rgba(255,170,110,.28)}
.zv-night{--g0:#0e1733;--g1:#edf1fb;--gh:rgba(120,140,255,.3)}
/* ---- v44 refinements: quieter rules; verified is a solid white disc with a dark tick, waiting is a dashed ring ---- */
.zk{--zs-line:rgba(255,255,255,.09)}
.zk .zk-v{width:20px;height:20px}
.zk .zk-v svg{width:16px;height:16px;stroke-width:1.5}
.zk .zk-v svg circle{stroke:rgba(255,255,255,.5)}
.zk .zk-v.ok svg circle{fill:#fff;stroke:#fff}
.zk .zk-v.ok svg path{stroke:#151320;stroke-width:1.8}
.zk .zk-v.you svg circle{stroke:var(--zs-you)}
.zk .zk-amt{display:inline-flex;align-items:center;gap:8px}
.zk .zk-c1{overflow:hidden;font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.zk .zk-who2{display:inline-flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.zk .zk-who2 .zs-ag{width:18px;height:18px;border-radius:5px}
.zk .zk-who2 .zs-ag svg{width:12px;height:12px}
.zk .zs-earn{color:#fff}
.zk .zs-earn .zs-bar{width:64px}
/* the receipt both models read: paper, at a size you can read */
.zk-paper{display:grid;gap:12px;box-sizing:border-box;width:100%;padding:18px 18px 26px;background:#fbfaf6;color:#1f1d29;font-size:12px;line-height:1.3;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),96.88% 100%,93.75% calc(100% - 6px),90.62% 100%,87.50% calc(100% - 6px),84.38% 100%,81.25% calc(100% - 6px),78.12% 100%,75.00% calc(100% - 6px),71.88% 100%,68.75% calc(100% - 6px),65.62% 100%,62.50% calc(100% - 6px),59.38% 100%,56.25% calc(100% - 6px),53.12% 100%,50.00% calc(100% - 6px),46.88% 100%,43.75% calc(100% - 6px),40.62% 100%,37.50% calc(100% - 6px),34.38% 100%,31.25% calc(100% - 6px),28.12% 100%,25.00% calc(100% - 6px),21.88% 100%,18.75% calc(100% - 6px),15.62% 100%,12.50% calc(100% - 6px),9.38% 100%,6.25% calc(100% - 6px),3.12% 100%,0.00% calc(100% - 6px))}
.zk-paper .zp-b{font-size:13px;font-weight:700;letter-spacing:.06em}
.zk-paper .zp-t{margin-top:-8px;color:#6d6a78}
.zk-paper dl{display:grid;gap:7px;margin:0;padding-top:12px;border-top:1px dashed #cfccd6}
.zk-paper dl>div{display:flex;justify-content:space-between;gap:12px}
.zk-paper dt{color:#6d6a78}
.zk-paper dd{margin:0;font-variant-numeric:tabular-nums}
.zk-paper .zp-tot{display:flex;align-items:baseline;justify-content:space-between;padding-top:11px;border-top:1px dashed #cfccd6;font-weight:600}
.zk-paper .zp-tot b{font-size:16px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.zk-paper .zp-f{color:#6d6a78}
/* narrow windows (a phone): names keep their room, figures keep their size, questions wrap rather than cut off */
@container zs (max-width:420px){
  .zkw-firm .zk-row{--zr:24px minmax(0,1fr) 40px auto!important;column-gap:10px}
  .zkw-firm .zs-pc{grid-template-columns:auto!important;justify-content:end}
  .zkw-firm .zs-pc>.zs-bar{display:none}
  .zk-kpi>div{padding:12px 12px}
  .zk-kpi b{font-size:18px}
  .zkw-brief .zk-row .zs-c2>b,.zkw-perm .zs-c2>span{white-space:normal}
  .zk .zs-earn .zs-bar{width:44px}
}
@container zs (max-width:340px){
  .zk-bar .zk-crumb>span:not(.zk-co),.zk-bar .zk-crumb>svg{display:none}
  .zk-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zk-kpi>div:nth-child(3){display:none}
  .zkw-tx .zk-row{--zr:minmax(0,1fr) 50px 76px!important}
  .zkw-tx .zk-cap{grid-template-columns:minmax(0,1fr) 50px 76px!important}
  .zkw-tx .zk-row>span:nth-child(2),.zkw-tx .zk-cap>span:nth-child(2){display:none}
}
@media (prefers-reduced-transparency:reduce){
  .zk{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(40,30,70,.92)}
}


/* ===== Night 4 =====
   Night 3, with three changes. The agents are a team you meet one by one: a lineup of their marks, then the one you
   pick at work, with what it reads, what it checks, what it may do alone and who it hands to. Each section makes one
   point from the messaging doc. And the ring's light is used as type wherever the agents' work is the point: the
   payoff of a claim, and the agent you pick. Never body copy, buttons, labels or figures. */

/* ---- the ring's light, as type ---- */
.rl{color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(100deg,#c9baff 0%,#ff9fd5 52%,#ffbf8e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.1em;margin-bottom:-.1em}
@media (forced-colors:active){.rl{color:CanvasText;-webkit-text-fill-color:CanvasText;background:none}}

/* a section's claim and its payoff: two sentences, two lines */
.n4 .shead h2 .ln+.ln{margin-top:.04em}
.n4 .shead.center h2{max-width:none}
.n4 .shead.center .lead{max-width:36em}
.n4 .shead:not(.center) .lead{max-width:30em}

/* ---- the agents: the lineup ---- */
.n4-roster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:var(--gap)}
.n4-mk{all:unset;box-sizing:border-box;position:relative;display:grid;justify-items:center;align-content:start;gap:4px;
  padding:20px 6px 18px;border-radius:18px;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s}
.n4-mk .n4-em{width:52px;height:52px;margin-bottom:14px}
.n4-mk b{font:500 15px/1.25 var(--sans);letter-spacing:-.01em;color:#a9a4b5;transition:color .2s}
.n4-mk span{font-size:13px;line-height:1.35;color:#858090;transition:color .2s}
.n4-mk:hover b{color:var(--ink)}
.n4-mk[aria-selected="true"]{background:radial-gradient(62% 56% at 50% 30%,rgba(170,142,255,.13),rgba(170,142,255,0) 100%)}
.n4-mk[aria-selected="true"] b{color:var(--ink)}
.n4-mk[aria-selected="true"] span{color:#a9a4b5}
.n4-mk:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}

/* a mark in points: dim until picked, then lit in the ring's colours; when picked its points gather from the dark */
.n4-em{display:block;overflow:visible}
.n4-em .u{fill:rgba(239,236,244,.11)}
.n4-em .l{fill:rgba(239,236,244,.48);transition:fill .35s}
.n4-em .h{fill:url(#n4g);opacity:0;transition:opacity .35s}
.n4-mk:hover .n4-em .l{fill:rgba(239,236,244,.75)}
.n4-mk[aria-selected="true"] .n4-em .l,.n4-em.lit .l{fill:url(#n4g)}
.n4-mk[aria-selected="true"] .n4-em .h,.n4-em.lit .h{opacity:.26}
.n4-mk[aria-selected="true"] .n4-em,.n4-em.lit{filter:drop-shadow(0 0 9px rgba(186,160,255,.38))}
.n4-em .d{transition:transform 1s cubic-bezier(.16,.8,.24,1) var(--d),opacity .45s ease var(--d)}
.n4-em.pre .d{transform:translate(var(--x),var(--y));opacity:0}
.n4-em.now .d{transition:none}

/* ---- the agents: the one you pick, at work ---- */
.n4-stage{position:relative;display:grid;margin-top:8px}
.n4-p{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(40px,5.5vw,96px);min-height:540px}
.n4-p[hidden]{display:none}
.n4-tx h3{margin:0;font:500 clamp(30px,calc(14px + 2vw),42px)/1.08 var(--serif);letter-spacing:-.036em;font-synthesis:none}
.n4-tx .job{margin:18px 0 0;max-width:22em;font-size:var(--lead);line-height:1.5;color:var(--ink)}
.n4-fig{display:grid;gap:8px;margin:28px 0 0}
.n4-fig b{font:500 clamp(36px,calc(18px + 2vw),48px)/1 var(--serif);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;font-synthesis:none}
.n4-fig span{max-width:26em;font-size:14.5px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.n4-dl{margin:30px 0 0;padding:0}
.n4-dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:13px 0;border-top:1px solid var(--rule)}
.n4-dl>div:last-child{border-bottom:1px solid var(--rule)}
.n4-dl dt{font-size:14px;line-height:1.5;color:var(--muted)}
.n4-dl dd{margin:0;font-size:15px;line-height:1.5;color:#d9d5e1;text-wrap:pretty}
.n4-go{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(239,236,244,.32);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s}
.n4-go:hover{text-decoration-color:var(--ink)}
.n4-go:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
.n4-scr{display:grid;place-items:center;margin:0;padding:44px 0}
.n4-scr .zs{width:min(var(--zw,560px),100%)}
/* as an agent wakes, its text settles in and a light passes over its name */
.n4-p:not([hidden]) .n4-tx{animation:n4-in .45s ease both}
@keyframes n4-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.n4-tx h3 .rl{background-image:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 62%),linear-gradient(100deg,#c9baff 0%,#ff9fd5 52%,#ffbf8e 100%);
  background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat}
.n4-tx h3.go .rl{animation:n4-sheen 1.15s cubic-bezier(.33,.6,.3,1) .12s both}
@keyframes n4-sheen{from{background-position:130% 0,0 0}to{background-position:-35% 0,0 0}}

/* ---- the difference: a month of lines, one point each ---- */
.n4-diff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:clamp(28px,4vw,64px);row-gap:0;align-items:start;margin-top:var(--gap)}
.n4-way{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.n4-way figure{margin:0;padding:26px 24px;border-radius:20px}
.n4-way.z figure{background:rgba(239,236,244,.03);box-shadow:inset 0 0 0 1px rgba(239,236,244,.075)}
.n4-way svg{display:block;width:100%;height:auto;overflow:visible}
.n4-way .n4-by{display:block;margin:30px 0 12px;font:500 14px/1.3 var(--sans);color:var(--muted)}
.n4-way.z .n4-by{color:var(--ink)}
.n4-way h3{margin:0;font:500 clamp(20px,calc(15px + .5vw),23px)/1.25 var(--serif);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.n4-way p{margin:12px 0 0;max-width:25em;font-size:15.5px;line-height:1.58;color:var(--copy);text-wrap:pretty}
.n4-pts .o{fill:rgba(239,236,244,.13)}
.n4-pts .s{fill:#efecf4}
.n4-pts .sr{fill:none;stroke:rgba(239,236,244,.5);stroke-width:1}
.n4-pts .q{fill:none;stroke:rgba(239,236,244,.36);stroke-width:1.1}
.n4-pts .a{fill:rgba(239,236,244,.42)}
.n4-pts .z{fill:url(#n4gd)}
.n4-pts .zr{fill:none;stroke:url(#n4gd);stroke-width:1;opacity:.5}
.n4-pts .zz{transition:opacity .55s ease var(--d)}
.n4-diff.pre .zz{opacity:.1}

/* ---- the proof: two models, one receipt ---- */
.n4-tm{display:grid;grid-template-columns:minmax(0,1fr) 176px minmax(0,1fr);align-items:center;gap:20px;margin:var(--gap) 0 0;padding:44px 0}
.n4-tm>.zs{width:100%;max-width:420px}
.n4-tm>.zs:first-child{justify-self:end}
.n4-vd{display:grid;justify-items:center;gap:12px;text-align:center}
.n4-vd .n4-em{width:60px;height:60px;margin-bottom:6px}
.n4-vd b{font:500 16px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.n4-vd>span{max-width:12em;font-size:13.5px;line-height:1.45;color:var(--muted)}
.zs-rd{padding:0 20px}
.zs-rd>li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;border-top:1px solid var(--zs-line);font-size:13.5px}
.zs-rd>li:first-child{border-top:0}
.zs-rd>li>.zs-i{width:16px;height:16px;color:var(--zs-tx2)}
.zs-rd>li>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.zs-rd>li>em{font-size:12.5px;color:var(--zs-tx2);white-space:nowrap}
.zs-rd>li.off{color:var(--zs-tx3)}
.zs-rd>li.off>em{color:var(--zs-tx3)}
.zs-out{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px;margin:2px 20px 20px;padding:14px 16px;border-radius:10px;background:var(--zs-bg2)}
.zs-out b{font-size:17px;font-weight:500;letter-spacing:-.016em}
.zs-out b+b{font-variant-numeric:tabular-nums}
.zs-out span{grid-column:1/-1;font-size:12.5px;color:var(--zs-tx2)}
/* the guarantee: a seal in points, and the promise that backs every number */
.n4-gt{display:grid;justify-items:center;gap:0;margin:clamp(64px,7vw,112px) auto 0;padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--rule);text-align:center}
.n4-gt .n4-seal{width:76px;height:76px;margin-bottom:28px}
.n4-gt h3{margin:0;font:500 var(--title)/1.05 var(--serif);letter-spacing:-.042em;font-synthesis:none}
.n4-gt p{margin:22px auto 0;max-width:31em;font-size:var(--lead);line-height:1.55;color:var(--copy);text-wrap:balance}

/* ---- autonomy: earned, lost, capped ---- */
/* its head sits on the left edge the list below it starts from, the explanation beside it */
.n4 .shead.n4-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);justify-items:start;align-items:end;column-gap:clamp(40px,5vw,96px);text-align:left}
.n4 .shead.n4-split .lead{margin:0 0 .4em;max-width:30em}
.n4-au{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(40px,5vw,96px);margin-top:clamp(40px,4vw,64px)}
.n4-three{margin:0;padding:0;list-style:none}
.n4-three li{padding:22px 0 24px;border-top:1px solid var(--rule)}
.n4-three li:last-child{border-bottom:1px solid var(--rule)}
.n4-three h3{margin:0;font:500 clamp(19px,calc(15px + .4vw),22px)/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.n4-three p{margin:8px 0 0;max-width:27em;font-size:15.5px;line-height:1.58;color:var(--copy);text-wrap:pretty}
.n4-au-st{position:relative;display:grid;justify-items:start;margin:0;padding:8px 0 48px}
.n4-au-st .zs-perm{width:min(430px,100%)}
.n4-au-st .zs-appr{justify-self:start;width:min(330px,80%);margin:18px 0 0 clamp(24px,7vw,100px)}
.n4-three{order:2}
.n4-au-st{order:1}

/* ---- the doors: each with three plain promises ---- */
.n4-doors .who{grid-template-rows:repeat(6,auto);row-gap:0}
.n4-doors .aud{grid-row:span 6}
.n4-doors .aud h2{font:500 clamp(25px,calc(15px + 1.2vw),33px)/1.14 var(--serif);letter-spacing:-.032em}
.n4-bul{display:grid;align-content:start;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.n4-bul li{display:flex;gap:12px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.n4-bul li::before{content:"";flex:none;width:6px;height:6px;margin-top:.6em;border-radius:50%;background:linear-gradient(135deg,#c9baff,#ff9fd5)}
.n4-doors .n3-scr .zs{width:min(var(--zw,480px),100%)}
/* client marks in one quiet tone: colour stays with status */
.n4-doors .zs-av{background:#2b2933;color:#dcd8e4}

/* ---- the catch-up: who does each step, and how long it takes ---- */
.n4-steps{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none;counter-reset:n4}
.n4-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:22px 0 24px;border-top:1px solid var(--rule-2)}
.n4-steps li:last-child{border-bottom:1px solid var(--rule-2)}
.n4-steps li>b{grid-row:span 3;font:600 13px/1.6 var(--sans);color:var(--violet);font-variant-numeric:tabular-nums}
.n4-steps .n4-by{font-size:13.5px;line-height:1.4;color:var(--muted)}
.n4-steps h3{margin:6px 0 0;font:500 19px/1.3 var(--serif);letter-spacing:-.018em;color:var(--ink)}
.n4-steps p{margin:6px 0 0;max-width:30em;font-size:15px;line-height:1.55;color:var(--copy);text-wrap:pretty}
.n4-cu-h .btn{margin-top:32px}
.n4-cu .zs-cu{width:min(520px,100%)}

/* ---- the first screen: the doors for firms and businesses live in the bar when the bar has room for them ---- */
@media (min-width:1181px){.n4 .hero-foot .audience{display:none}}
/* on a phone the pause control is its mark alone; its name stays for screen readers */
@media (max-width:600px){.nav .motion .mt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* the stack's logos in one tone, so no brand colour fights the ring's */
.n4 .rolo img{filter:grayscale(1) brightness(1.25) contrast(1.05);opacity:.9}

/* ---- the close ---- */
.end-cta h2{max-width:15em}
.end-cta .fine{margin:18px 0 0;font-size:13px;color:#8d8996}
.end-cta .actions{gap:24px;align-items:center}
.end-cta .actions .link{margin-top:0}

/* ---- narrower screens ---- */
@media (max-width:1100px){
  .n4-tm{grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);gap:12px}
}
@media (max-width:980px){
  /* the lineup becomes a row you scroll; the agent's words, then its screen */
  .n4-roster{display:flex;gap:2px;overflow-x:auto;margin:var(--gap) calc(-1 * var(--pad)) 0;padding:0 var(--pad) 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)}
  .n4-roster::-webkit-scrollbar{display:none}
  .n4-mk{flex:none;width:112px;scroll-snap-align:start}
  .n4-p{grid-template-columns:1fr;gap:0;min-height:0}
  .n4-tx{max-width:40em}
  .n4-scr{padding:44px 0 4px}
  .n4-diff{grid-template-columns:1fr;grid-template-rows:none;row-gap:56px;max-width:560px}
  .n4-way{grid-row:auto;grid-template-rows:none}
  .n4-way .n4-by{margin-top:24px}
  .n4-tm{grid-template-columns:1fr;justify-items:center;gap:28px;padding:36px 0}
  .n4-tm>.zs,.n4-tm>.zs:first-child{justify-self:center}
  .n4-pl{grid-template-columns:1fr;gap:36px}
  .n4-au{grid-template-columns:1fr;gap:12px}
  .n4-three,.n4-au-st{order:0}
  .n4-au-st{padding-top:40px}
  .n4 .shead.n4-split{grid-template-columns:1fr;row-gap:20px}
  .n4 .shead.n4-split .lead{margin:0}
}
@media (max-width:600px){
  .n4-mk{width:98px;padding:16px 4px 14px}
  .n4-mk .n4-em{width:44px;height:44px;margin-bottom:12px}
  .n4-mk b{font-size:14px}
  .n4-mk span{font-size:12.5px}
  .n4-dl>div{grid-template-columns:88px minmax(0,1fr);gap:14px}
  .n4-way figure{padding:20px 18px}
  .n4-au-st .zs-appr{width:min(300px,88%);margin:-26px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .n4-em .d,.n4-pts .zz{transition:none}
  .n4-p:not([hidden]) .n4-tx,.n4-tx h3.go .rl{animation:none}
}

/* ===== Night 5 =====
   Night 4's page with the product as frosted glass (ws/ui44.css), each window on a panel of deep colour as the founder
   pointed to (joindime.io), and the field's halo gathering round each panel. These rules place the panels and the
   windows on them; nothing else on the page changes. */

/* the agents: one panel beside the agent's words, the same height for every agent so the page doesn't jump */
.n4-scr{padding:40px 0}
.n4-scr .zstage{--sw:100%;--sp:clamp(28px,3.2vw,44px) clamp(18px,2.6vw,36px);min-height:var(--n5-ph,620px)}
.n4-scr .zk{width:min(var(--zw,568px),100%)}

/* the proof: the receipt between the two models, on one panel */
.n5-pff{margin:var(--gap) 0 0;padding:44px 0}
.n5-pf{--sw:100%;--sp:clamp(36px,4.4vw,60px) clamp(20px,3.2vw,48px);grid-template-columns:minmax(0,1fr) minmax(184px,216px) minmax(0,1fr);align-items:center;gap:clamp(16px,2.6vw,36px)}
.n5-pf>.zk{width:100%;max-width:380px}
.n5-pf>.zk:first-child{justify-self:end}
.n5-pf>.zk:last-child{justify-self:start}
.n5-mid{display:grid;justify-items:center;gap:22px;width:100%}
.n5-rc{width:100%;filter:drop-shadow(0 22px 30px rgba(8,4,30,.42))}
.n5-vd{gap:12px}
.n5-vd .n4-em{width:46px;height:46px;margin:0}
.n5-say{margin:0}
.n5-pl{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:16px;font:500 13px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.n5-pl.run{background:rgba(255,255,255,.16);color:#fff}
.n5-pl.ok{background:#fff;color:#151320}
.n5-pl .zs-i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gs.on .zs-sw>.a>.n5-pl.run{animation:zs-breathe 1s ease-in-out infinite}

/* autonomy: the agent's ladder, and an approval it is waiting on, staggered on one panel */
.n4-au-st{padding:40px 0}
.n5-au{--sw:100%;--sp:clamp(30px,3.6vw,48px) clamp(18px,3vw,40px);justify-items:stretch;gap:18px}
.n5-au .zkw-perm{justify-self:start;width:min(440px,100%)}
.n5-au .zkw-appr{justify-self:end;width:min(320px,88%)}

/* the doors: each audience's screen on its own panel */
.n4-doors .n3-scr{display:grid}
.n4-doors .n3-scr .zstage{--sw:100%;--sp:clamp(26px,3vw,40px) clamp(16px,2.4vw,30px);height:100%}
.n4-doors .n3-scr .zk{width:min(var(--zw,500px),100%)}

/* the catch-up */
.n4-cu .n3-stage{padding:40px 0}
.n4-cu .n3-stage .zstage{--sw:600px}
.n4-cu .zkw-cu{width:min(520px,100%)}

/* the hero's small screens, as the same frosted glass: the particles of the ring blur behind them */
.n4 .hero .ui.hm{--c-ink:#fff;--c-m:rgba(255,255,255,.64);--c-m2:rgba(255,255,255,.8);--c-rule:rgba(255,255,255,.12);--c-track:rgba(255,255,255,.14);
  border-radius:14px;text-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 48px -24px rgba(0,0,0,.6)}
.n4 .hero .ui.hm::before,.n4 .hero .ui.hm::after{display:none}
.n4 .hero .hm .s-cap{font-weight:500;letter-spacing:0}
.n4 .hero .hm .s-raw{font:500 10.5px/1.35 var(--sans);letter-spacing:.04em}
.n4 .hero .hm .s-chip{box-shadow:none;color:#fff}
.n4 .hero .hm .s-chip.ok{background:#fff;color:#151320}
.n4 .hero .hm .u-ck,.n4 .hero .ui.hm .s-ok3 .ic{background:#fff;color:#151320}
.n4 .hero .hm .s-link::before,.n4 .hero .hm .s-link::after{background:rgba(255,255,255,.4)}
.n4 .hero .hm .s-to{background:linear-gradient(180deg,rgba(255,255,255,.18),#fff)}
.n4 .hero .hm .s-to::after{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}

@media (max-width:980px){
  .n4-scr .zstage{min-height:0}
}
@media (max-width:900px){
  /* the proof stacks: the receipt first, then each model, then their verdict */
  .n5-pf{grid-template-columns:minmax(0,1fr);justify-items:center}
  .n5-mid{display:contents}
  .n5-rc{order:-1;width:min(232px,100%)}
  .n5-pf>.zk,.n5-pf>.zk:first-child,.n5-pf>.zk:last-child{justify-self:center;max-width:440px}
  .n5-vd{order:9}
}
@media (max-width:600px){
  .zstage{--sp:24px 12px;border-radius:20px}
  .n4-scr .zstage,.n4-doors .n3-scr .zstage,.n5-au,.n5-pf{--sp:24px 12px}
  .n4-cu .n3-stage .zstage{--sw:100%;--sp:24px 12px}
  .n5-au .zkw-appr{width:min(300px,92%)}
}

/* ===== Night 6 =====
   Night 5 with the agents as a month board, and a light mode (further down). */

/* ---- the month board ----
   Each agent is a row you can pick: its mark, its name and when it works, then one point for every day from Sep 1 to the
   close on Oct 5. Lit points are the days it works, sized by how much it does. The row you pick lights in the ring's
   colours across the month, violet on the 1st to amber at the close. */
.n6-ag{--n6-cols:26px 176px minmax(0,1fr);--n6-gap:16px;--n6-sep:15px;
  --n6-off:rgba(239,236,244,.13);--n6-dot:rgba(239,236,244,.44);--n6-dot-h:rgba(239,236,244,.66);
  --n6-name:#aaa5b6;--n6-sel:rgba(255,255,255,.05);--n6-hover:rgba(255,255,255,.028);--n6-glow:rgba(201,178,255,.34)}
.n6-board{margin-top:var(--gap)}
.n6-hd,.n6-row{display:grid;grid-template-columns:var(--n6-cols);align-items:center;column-gap:var(--n6-gap);padding:0 20px}
.n6-hd{min-height:34px;font-size:12px;line-height:1.2;color:var(--muted)}
.n6-key{grid-column:1/3}
.n6-sc,.n6-tr{display:grid;grid-template-columns:repeat(30,minmax(0,1fr)) var(--n6-sep) repeat(5,minmax(0,1fr));align-items:center}
.n6-sc em{grid-column:var(--c);justify-self:center;font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
.n6-rows{display:grid;gap:2px}
.n6-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:var(--n6-cols);align-items:center;column-gap:var(--n6-gap);
  min-height:58px;padding:0 20px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s}
.n6-row:hover{background:var(--n6-hover)}
.n6-row[aria-selected="true"]{background:var(--n6-sel)}
.n6-row:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.n6-row .n4-em{width:26px;height:26px}
.n6-nm{display:grid;gap:3px;min-width:0}
.n6-nm b{overflow:hidden;font:500 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--n6-name);white-space:nowrap;text-overflow:ellipsis;transition:color .2s}
.n6-nm span{overflow:hidden;font-size:12.5px;line-height:1.25;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.n6-row:hover .n6-nm b,.n6-row[aria-selected="true"] .n6-nm b{color:var(--ink)}
/* the days: a faint point for each, a lit one for each day of work */
.n6-tr{height:30px}
.n6-tr>i{display:block;justify-self:center;width:3px;height:3px;border-radius:50%;background:var(--n6-off);
  transition:transform .75s cubic-bezier(.16,.8,.24,1) calc(var(--i) * 15ms + var(--r) * 26ms),opacity .45s ease calc(var(--i) * 15ms),background-color .3s}
.n6-tr>i.on{background:var(--n6-dot)}
.n6-tr>i.s1{width:6px;height:6px}
.n6-tr>i.s2{width:8px;height:8px}
.n6-tr>i.s3{width:10px;height:10px}
.n6-tr>u{justify-self:center;width:1px;height:100%;background:var(--rule)}
.n6-row:hover .n6-tr>i.on{background:var(--n6-dot-h)}
.n6-row[aria-selected="true"] .n6-tr>i.on{background:var(--cd)}
.n6-row[aria-selected="true"] .n6-tr{filter:drop-shadow(0 0 7px var(--n6-glow))}
/* the board's first view: the month fills in from the 1st; picking an agent: its points gather into their days */
.n6-board.pre .n6-tr>i{transform:scale(0)}
.n6-row.pre .n6-tr>i.on{transform:translate(var(--x),var(--y)) scale(.35);opacity:0}
.n6-row.pre .n4-em .d{transform:translate(var(--x),var(--y));opacity:0}
.n6-row.now .n6-tr>i,.n6-row.now .n4-em .d{transition:none}
.n6-row .n4-em .l{fill:var(--n6-dot)}
.n6-row:hover .n4-em .l{fill:var(--n6-dot-h)}
.n6-row[aria-selected="true"] .n4-em .l{fill:url(#n4g)}
.n6-row[aria-selected="true"] .n4-em .h{opacity:.24}
.n6-row[aria-selected="true"] .n4-em{filter:drop-shadow(0 0 7px var(--n6-glow))}
/* the agent you pick sits close under the board */
.n6-ag .n4-stage{margin-top:clamp(28px,4vw,52px)}

@media (max-width:1100px){
  .n6-ag{--n6-cols:24px 150px minmax(0,1fr);--n6-gap:14px;--n6-sep:11px}
  .n6-hd,.n6-row{padding:0 14px}
  .n6-tr>i.s1{width:5px;height:5px}.n6-tr>i.s2{width:7px;height:7px}.n6-tr>i.s3{width:8px;height:8px}
}
@media (max-width:700px){
  .n6-ag{--n6-cols:94px minmax(0,1fr);--n6-gap:10px;--n6-sep:7px}
  .n6-hd,.n6-row{padding:0 10px}
  .n6-row{min-height:52px;border-radius:12px}
  .n6-row .n4-em{display:none}
  .n6-key{grid-column:1}
  .n6-sc em[style="--c:15"],.n6-sc em[style="--c:30"]{display:none}
  .n6-sc em[style="--c:1"]{justify-self:start}
  .n6-sc em[style="--c:36"]{justify-self:end}
  .n6-nm b{font-size:13.5px}
  .n6-nm span{font-size:11px}
  .n6-tr>i{width:2px;height:2px}
  .n6-tr>i.s1{width:3.5px;height:3.5px}.n6-tr>i.s2{width:4.5px;height:4.5px}.n6-tr>i.s3{width:6px;height:6px}
}
@media (prefers-reduced-motion:reduce){
  .n6-tr>i,.n6-row .n4-em .d{transition:none}
}

/* ---- the look switch: a sun and a moon in a small track; the disc sits under the look you are in ---- */
:root{--zt-track:rgba(239,236,244,.09);--zt-knob:#2d2a37;--zt-knob-sh:inset 0 1px 0 rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.4);--zt-on:#f4f2f8;--zt-off:#8a8597}
:root.zl{--zt-track:rgba(22,20,30,.07);--zt-knob:#fff;--zt-knob-sh:0 1px 2px rgba(22,20,30,.14),0 2px 8px -2px rgba(40,28,90,.22);--zt-on:#16141e;--zt-off:#8a8597}
.zt{appearance:none;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;flex:none;
  width:58px;height:30px;margin:0;padding:0 3px;border:0;border-radius:15px;background:var(--zt-track);cursor:pointer;-webkit-tap-highlight-color:transparent}
.zt-k{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--zt-knob);box-shadow:var(--zt-knob-sh);
  transform:translateX(28px);transition:transform .5s cubic-bezier(.34,1.36,.44,1),background-color .3s}
.zl .zt-k{transform:none}
.zt svg{position:relative;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:color .3s,transform .5s cubic-bezier(.34,1.36,.44,1)}
.zt-s{color:var(--zt-off)}
.zt-m{color:var(--zt-on);fill:currentColor!important;stroke:none!important}
.zl .zt-s{color:var(--zt-on);transform:rotate(90deg)}
.zl .zt-m{color:var(--zt-off)}
.zt:hover .zt-s,.zt:hover .zt-m{color:var(--zt-on)}
.zt:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (max-width:420px){.zt{width:52px;height:28px}.zt-k{width:22px;height:22px}.zt-k{transform:translateX(24px)}.zl .zt-k{transform:none}}
/* the new look opens out from the switch (the script draws the circle); everything else holds still for it */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.zt-k,.zt svg{transition:none}}

/* ===== Night 6, the light look =====
   The same page on paper: a cool off-white with a breath of the ring's violet, ink that is nearly black, the ring's
   colours deepened so they hold on a light page, and the product still on its panels of deep colour, the way joindime.io
   shows it on white. Turned on by .zl on the root, which is set before anything is drawn (see the look script). */
:root.zl{color-scheme:light;
  --zp:#f7f6fa;--zp2:#efedf5;--zsurf:#ffffff;
  --paper:#16141e;--ink:#16141e;--copy:#4a4756;--muted:#666273;--rule:#e2e0e9;--rule-2:#d3d0db;
  --violet:#5a3fd5;--violet-dot:#6d4fe6;--lav:#5a3fd5;--wash:#efecf7;--jade-ink:#13795b;
  --night:#f7f6fa;--night-copy:#4a4756;--night-muted:#666273;--night-rule:rgba(22,20,30,.1);
  background:var(--zp)}
.zl body,.zl body::before{background:var(--zp);color:var(--ink)}
::selection{background:rgba(160,135,255,.35)}
.zl ::selection{background:rgba(106,74,224,.18)}

/* ---- the bar and the navigation ---- */
.zl .announce{background:var(--zp2);color:var(--copy)}
.zl .announce a{color:var(--ink)}
.zl .nav{background:var(--zp)}
.zl .nav.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.zl .nav .motion{color:var(--muted)}
.zl .btn,.zl .btn.light{background:#16141e;color:#fff}
.zl .btn:hover,.zl .btn.light:hover{background:#2e2a3a}

/* ---- the ring's light as type, deepened for paper ---- */
.zl .rl{background-image:linear-gradient(100deg,#6a4ae0 0%,#c9418f 52%,#d8661f 100%)}
.zl .n4-tx h3 .rl{background-image:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 62%),linear-gradient(100deg,#6a4ae0 0%,#c9418f 52%,#d8661f 100%)}
.zl .hero h1 .pw{background:linear-gradient(100deg,rgb(106 74 224 / var(--pwa)) 0%,rgb(201 65 143 / var(--pwa)) 55%,rgb(216 102 31 / var(--pwa)) 100%);
  -webkit-background-clip:text;background-clip:text}

/* ---- the first screen's small screens: frosted white over the ring ---- */
.zl .hero .ui.hm{--c-ink:#16141e;--c-m:#666273;--c-m2:#4a4756;--c-rule:rgba(22,20,30,.1);--c-track:rgba(22,20,30,.06);
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(22,20,30,.07),0 22px 44px -24px rgba(40,28,90,.3);color:#16141e}
.zl .hero .hm .s-chip{color:#16141e}
.zl .hero .hm .s-chip.ok{background:#16141e;color:#fff}
.zl .hero .hm .u-ck,.zl .hero .ui.hm .s-ok3 .ic{background:#16141e;color:#fff}
.zl .hero .hm .s-link::before,.zl .hero .hm .s-link::after{background:rgba(22,20,30,.28)}
.zl .hero .hm .s-to{background:linear-gradient(180deg,rgba(22,20,30,.14),#16141e)}
.zl .hero .hm .s-to::after{background:#16141e;box-shadow:0 0 0 3px rgba(22,20,30,.1)}

/* ---- marks in points ---- */
.zl .n4-em .h{fill:url(#n4gL)}
.zl .n4-em.lit .l{fill:url(#n4gL)}
.zl .n4-em.lit,.zl .n6-row[aria-selected="true"] .n4-em{filter:none}

/* ---- the month board on paper: the row you pick is a white card lifted off the page ---- */
.zl .n6-ag{--n6-off:rgba(22,20,30,.12);--n6-dot:rgba(22,20,30,.34);--n6-dot-h:rgba(22,20,30,.56);
  --n6-name:#4a4756;--n6-sel:#fff;--n6-hover:rgba(255,255,255,.6);--n6-glow:rgba(106,74,224,.16)}
.zl .n6-row[aria-selected="true"]{box-shadow:0 1px 2px rgba(22,20,30,.05),0 14px 34px -22px rgba(40,28,90,.3)}
.zl .n6-row[aria-selected="true"] .n6-tr>i.on{background:var(--cl)}
.zl .n6-row[aria-selected="true"] .n4-em .l{fill:url(#n4gL)}
.zl .n6-row[aria-selected="true"] .n6-tr{filter:none}

/* ---- the agent you pick ---- */
.zl .n4-dl dd{color:#2c2937}
.zl .n4-go{text-decoration-color:rgba(22,20,30,.3)}
.zl .n4-go:hover{text-decoration-color:var(--ink)}

/* ---- the difference: a month of lines, one point each ---- */
.zl .n4-way.z figure{background:#fff;box-shadow:inset 0 0 0 1px rgba(22,20,30,.06),0 22px 44px -30px rgba(40,28,90,.3)}
.zl .n4-pts .o{fill:rgba(22,20,30,.13)}
.zl .n4-pts .s{fill:#16141e}
.zl .n4-pts .sr{stroke:rgba(22,20,30,.42)}
.zl .n4-pts .q{stroke:rgba(22,20,30,.3)}
.zl .n4-pts .a{fill:rgba(22,20,30,.38)}
.zl .n4-pts .z{fill:url(#n4gdL)}
.zl .n4-pts .zr{stroke:url(#n4gdL)}

/* ---- the doors ---- */
.zl .aud{border-top-color:var(--rule)}
.zl .n4-bul li::before{background:linear-gradient(135deg,#6a4ae0,#c9418f)}

/* ---- the stack: the logos in one dark tone on white cards ---- */
.zl .rolo-on .rc,.zl .rolo-on .rc[aria-hidden="true"]{color:#666273;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(22,20,30,.07)}
.zl .rolo-on .rc.front{color:#16141e;background:#fff;box-shadow:0 1px 2px rgba(22,20,30,.06),0 26px 52px -30px rgba(40,28,90,.34)}
.zl .n4 .rolo img{filter:grayscale(1) brightness(.4) contrast(1.1);opacity:.88}

/* ---- the close and the foot ---- */
.zl .end-cta .fine{color:var(--muted)}
.zl .site-foot{border-top-color:var(--rule)}

/* ---- the close and the foot, set in ink ---- */
.zl .end-cta h2{color:var(--ink)}
.zl .end-cta .label{color:var(--violet)}
.zl .end-cta .lead{color:var(--copy)}
.zl .end-cta .link{color:var(--ink)}
.zl .site-foot .wordmark,.zl .wordmark{color:var(--ink)}
.zl .site-foot .tag-line,.zl .site-foot h3{color:var(--muted)}
.zl .site-foot a{color:var(--ink)}
.zl .nav nav a{color:#4a4756}
.zl .nav nav a:hover,.zl .nav nav a[aria-current="page"]{color:var(--ink)}
.zl .lg{color:#6f6b7a}
.zl .lg-e span{color:#8d8997}
.zl .legal{color:var(--muted)}

/* ===== Night 8: the agents as option B (the index), as on the first options page ===== */
/* ---- B. the index ---- */
.ix{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start;margin-top:var(--gap)}
.ix-list{border-top:1px solid var(--rule)}
.ix-it{border-bottom:1px solid var(--rule)}
.ix-h{margin:0}
.ix-b{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;
  padding:18px 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ix-b:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
.ix-b .n4-em{width:26px;height:26px}
.ix-b .n4-em .l{fill:var(--n6-dot,rgba(239,236,244,.44))}
.ix-it.on .ix-b .n4-em .l{fill:url(#n4g)}
.zl .ix-it.on .ix-b .n4-em .l{fill:url(#n4gL)}
.ix-nm{font:500 clamp(23px,calc(14px + 1vw),29px)/1.12 var(--serif);letter-spacing:-.03em;color:#9893a5;transition:color .2s,font-size .4s cubic-bezier(.2,.7,.2,1)}
.zl .ix-nm{color:#6f6b7a}
.ix-b:hover .ix-nm{color:var(--ink)}
.ix-it.on .ix-nm{font-size:clamp(30px,calc(15px + 1.7vw),40px);color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(100deg,#c9baff 0%,#ff9fd5 52%,#ffbf8e 100%);-webkit-background-clip:text;background-clip:text;padding-bottom:.08em;margin-bottom:-.08em}
.zl .ix-it.on .ix-nm{background-image:linear-gradient(100deg,#6a4ae0 0%,#c9418f 52%,#d8661f 100%)}
.ix-when{font-size:13.5px;color:var(--muted);white-space:nowrap}
.ix-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.ix-it.on .ix-p{grid-template-rows:1fr}
.ix-in{min-height:0;overflow:hidden}
.ix-in>div{padding:0 0 30px 44px}
.ix-p .job{margin:0;max-width:24em;font-size:var(--lead);line-height:1.5;color:var(--ink)}
.ix-p .n4-fig{margin-top:22px}
.ix-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:24px 0 0}
.ix-dl>div{padding:12px 0 0;border-top:1px solid var(--rule)}
.ix-dl>div:nth-child(n+3){margin-top:14px}
.ix-dl dt{font-size:13px;line-height:1.4;color:var(--muted)}
.ix-dl dd{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--copy);text-wrap:pretty}
.ix-st{position:sticky;top:96px}
.ix-scr{margin:0;padding:28px 0}
.ix-scr .zstage{--sw:100%;--sp:clamp(28px,3.2vw,44px) clamp(18px,2.6vw,36px);min-height:600px}
.ix-scr .zk,.ix-mob .zk{width:min(var(--zw,568px),100%)}
.ix-mob{display:none;margin:24px 0 0}
.ix-mob .zstage{--sw:100%;--sp:24px 12px}
@media (max-width:900px){
  .ix{grid-template-columns:1fr}
  .ix-st{display:none}
  .ix-mob{display:block}
  .ix-in>div{padding-left:0}
}
@media (max-width:600px){.ix-dl{grid-template-columns:1fr}.ix-dl>div:nth-child(n+2){margin-top:12px}}

/* option B's marks on paper */
.zl .ix-b .n4-em .l{fill:rgba(22,20,30,.3)}
.zl .ix-b:hover .n4-em .l{fill:rgba(22,20,30,.5)}
.ix-h{font:inherit;letter-spacing:normal}

/* ===== Night 9: option B, improved =====
   The same index: the large list of agents with their marks, the open one with its job, its number and its four facts,
   the product screen beside it. What changes: the open agent sits on a raised card, the screen moves level with it and
   eases in, the marks are larger and clearer, and the names and the facts read more easily. */

/* the rows reach a little past the column so the card has room; the rules between them stay on the column */
.ix{--ix-bleed:clamp(10px,1.6vw,22px)}
.ix-it{position:relative;margin-inline:calc(-1 * var(--ix-bleed));padding-inline:var(--ix-bleed);border-bottom:0;border-radius:22px;
  transition:background-color .35s ease,box-shadow .35s ease}
.ix-it::after{content:"";position:absolute;left:var(--ix-bleed);right:var(--ix-bleed);bottom:0;height:1px;background:var(--rule);transition:opacity .25s}
.ix-list{transition:border-color .25s}

/* the open agent, raised */
.ix-it.on{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.06),0 30px 60px -36px rgba(0,0,0,.7)}
.zl .ix-it.on{background:#fff;box-shadow:0 1px 2px rgba(22,20,30,.05),0 30px 60px -34px rgba(70,46,160,.36),inset 0 0 0 1px rgba(22,20,30,.045)}
.ix-it.on::after,.ix-it:has(+ .ix-it.on)::after{opacity:0}
.ix-list:has(> .ix-it.on:first-child){border-top-color:transparent}
/* a closed agent under the pointer shows a trace of the same card */
.ix-it:not(.on):hover{background:rgba(255,255,255,.03)}
.zl .ix-it:not(.on):hover{background:rgba(255,255,255,.66)}

/* the marks, larger and clearer */
.ix-b{grid-template-columns:34px minmax(0,1fr) auto;padding:19px 2px}
.ix-b .n4-em{width:32px;height:32px}
.ix-b .n4-em .l{fill:rgba(239,236,244,.62)}
.ix-b:hover .n4-em .l{fill:rgba(239,236,244,.9)}
.ix-it.on .ix-b .n4-em .l{fill:url(#n4g)}
.ix-it.on .ix-b .n4-em .h{opacity:.26}
.ix-it.on .ix-b .n4-em{filter:drop-shadow(0 0 8px rgba(186,160,255,.42))}
.zl .ix-b .n4-em .l{fill:rgba(22,20,30,.5)}
.zl .ix-b:hover .n4-em .l{fill:rgba(22,20,30,.74)}
.zl .ix-it.on .ix-b .n4-em .l{fill:url(#n4gL)}
.zl .ix-it.on .ix-b .n4-em{filter:none}

/* the names and the facts, easier to read */
.ix-nm{color:#aca7b9}
.zl .ix-nm{color:#55515f}
.ix-it.on .ix-when{color:var(--copy)}
.ix-in>div{padding:0 0 34px 50px}
.ix-dl dt{font-size:13.5px}
.ix-dl dd{font-size:15px}

/* the screen moves level with the agent you open, and eases in */
.ix-st{margin-top:var(--ix-y,0px);transition:margin-top .7s cubic-bezier(.2,.7,.2,1)}
.ix-scr:not([hidden]){animation:ix-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes ix-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .ix-st{margin-top:0}
  .ix-in>div{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .ix-it,.ix-it::after,.ix-st{transition:none}
  .ix-scr:not([hidden]){animation:none}
}

/* ===== Night 12: the scale of the reference sites =====
   Measured at 1440x900 on Oct 22, 2026 (computed styles, not guesses):
     joindime.io    h1 52  h2 40  h3 28  body 16  product UI 10-12  button 38 tall, 12px    (weight 500, tracking ~0, leading 1.2)
     getbasis.ai    h1 64  h2 42  h3 20  body 16-20                  button 43 tall, 16px
     rillet.com     h1 59  h2 37-52 h3 22 body 14-18                 button 29 tall, 15px
     linear.app     h1 64  h2 48  h3 20  body 13-15  UI 12-13        button 32 tall, 13px
     numeric.io     h1 84  h2 44  h3 18  body 16-18 (weight 300)     button 40 tall, 16px
     digits.com     h1 80  h2 40-56 h3 26 body 16-22 (weight 300)
     campfire.ai    h1 84  h2 48-64 h3 24 body 16-20
   The ones that read calm and clean (Dime, Basis, Linear, Rillet) set the promise at 52-64px and section claims at
   37-48px, in a medium weight with little negative tracking and open leading; supporting copy is 14-16px, and their
   product screens use 10-12px type. Night 11 was 68 / 42 at weight 500 with tight tracking (-.036em), 16-18px copy,
   and product panels up to 658px square: in range on paper, but denser and heavier than any of them.
   So Night 12 sets the scale between Dime and Basis, opens the tracking and leading, brings copy to 15-17px, narrows
   the column to 1120px, and shows the product windows at 90% in panels about 15% shorter.

   The scale at 1440px:  12.5  13  14  15 | 17 lead | 18 | 24 | 28 | 38 | 56 */
:root{
  --display:clamp(36px,calc(29.3px + 1.852vw),56px);   /* the promise */
  --title:clamp(28px,calc(24.7px + .926vw),38px);      /* a section's claim */
  --stmt:clamp(24px,calc(22.7px + .37vw),28px);        /* a statement or a big figure */
  --h3:clamp(21px,calc(20px + .278vw),24px);           /* a door's claim */
  --h4:clamp(17px,calc(16.7px + .093vw),18px);         /* a heading inside a section */
  --lead:clamp(16px,calc(15.7px + .093vw),17px);
  --t-body:15px; --t-s:14px; --t-label:13px; --t-xs:12.5px;
  /* space: a section opens --sec under the last; its claim sits --s-claim over its lead; the work starts --gap below */
  --sec:clamp(72px,calc(58.7px + 3.7vw),112px);
  --gap:clamp(32px,calc(26.7px + 1.481vw),48px);
  --s-claim:clamp(12px,calc(10.7px + .37vw),16px);
  --max:1120px;
  --uiz:1;
  --n5-ph:520px;
}
@media (min-width:1600px){
  :root{
    --max:clamp(1120px,calc(953px + 10.42vw),1220px);
    --display:clamp(56px,calc(46px + .625vw),62px);
    --title:clamp(38px,calc(31.3px + .417vw),42px);
    --stmt:clamp(28px,calc(24.7px + .208vw),30px);
    --h3:clamp(24px,calc(20.7px + .208vw),26px);
    --lead:clamp(17px,calc(15.3px + .104vw),18px);
    --sec:clamp(112px,calc(78.7px + 2.083vw),132px);
    --gap:clamp(48px,calc(31.3px + 1.042vw),58px);
  }
}
/* the product windows at 90% on a desktop, as the references show theirs; full size on a phone, where they fill the width */
@media (min-width:1000px){:root{--uiz:.9}}
@media (min-width:2200px){:root{--uiz:1}}
.zstage>*{zoom:var(--uiz)}
.ix-scr .zstage{min-height:500px}
.n3-stage{min-height:clamp(380px,30vw,460px)}

/* ---- the large type: a medium weight, tracking eased, leading opened ---- */
h1{font-size:var(--display);line-height:1.08;letter-spacing:-.024em}
h2,.qa h2,.end-cta h2{font-size:var(--title);line-height:1.14;letter-spacing:-.018em}
.n4-gt h3{font-size:var(--title);line-height:1.14;letter-spacing:-.018em}
.n4 .shead h2 .ln+.ln{margin-top:0}
.n4-doors .aud h2{font:500 var(--h3)/1.2 var(--serif);letter-spacing:-.014em;text-wrap:balance;max-width:16em}
.bigquote blockquote{font-size:var(--stmt);line-height:1.3;letter-spacing:-.014em}
.n4-fig b{font-size:var(--stmt);letter-spacing:-.02em}
.n4-way h3,.n4-three h3,.n4-steps h3,.rd-cat b{font-size:var(--h4);line-height:1.3;letter-spacing:-.01em}
.hero h1{max-width:none}

/* ---- the agents' index, to the same scale ---- */
.ix{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px)}
.ix-nm{font-size:clamp(18px,calc(15px + .42vw),20px);letter-spacing:-.016em}
.ix-it.on .ix-nm{font-size:clamp(22px,calc(17px + .56vw),25px);letter-spacing:-.018em}
.ix-b{grid-template-columns:24px minmax(0,1fr) auto;column-gap:12px;padding:13px 2px}
.ix-b .n4-em{width:24px;height:24px}
.ix-it{border-radius:18px}
.ix-in>div{padding:0 0 24px 36px}
.ix-p .job{font-size:var(--t-body)}
.ix-p .n4-fig{margin-top:16px}
.ix-dl{margin-top:16px;column-gap:24px}
.ix-dl>div{padding-top:10px}
.ix-dl>div:nth-child(n+3){margin-top:12px}
@media (max-width:900px){.ix{grid-template-columns:1fr}.ix-in>div{padding-left:0}}

/* ---- the reading type ---- */
.lead,.shead .lead,.n4-gt p,.aud .aud-lead{font-size:var(--lead);line-height:1.55;letter-spacing:-.006em}
.shead .lead{max-width:32em}
.shead.center .lead,.hero .lead{max-width:36em}
.shead .lead,.shead .side{margin-top:var(--s-claim)}
.shead.center .lead{margin:var(--s-claim) auto 0}
.n4-split .lead{margin:0 0 .3em}
.n4-way p,.n4-three p,.n4-bul li,.n4-steps p,.faq details p,.ix-p .job{line-height:1.6;letter-spacing:-.003em}
.n4-way p,.n4-three p,.n4-bul li,.n4-steps p,.faq details p{font-size:var(--t-body)}
.faq details p{max-width:38em}
.faq summary{font-size:var(--t-body);letter-spacing:-.004em}
.ix-dl dd,.n4-fig span,.link{font-size:var(--t-s)}
.ix-dl dt,.ix-when,.label,.n4-way .n4-by,.nav nav a,.site-foot .tag-line{font-size:var(--t-label)}
.caption,.end-cta .fine,.rd-cat span,.n4-steps .n4-by,.n4-steps li>b,.site-foot h3{font-size:var(--t-xs)}

/* lines that break well: headings and leads balance; paragraphs avoid a word alone on the last line */
h1,h2,h3,.lead,blockquote,summary,.n4-gt p{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.lead{text-wrap:balance}

/* ---- controls: the references' size ---- */
.btn{min-height:38px;padding:0 15px;font-size:14px;border-radius:8px}
.nav .btn{min-height:32px;padding:0 12px;font-size:13px}
.link{font-size:14px}

/* ---- space: one rhythm, tighter ---- */
.n4-split{column-gap:clamp(32px,5vw,96px)}
.n4-way h3,.n4-three h3{margin-top:10px}
.n4-way p,.n4-three p{margin-top:6px}
.n4-gt p{margin-top:var(--s-claim)}
.n4-doors .aud h2{margin-top:10px}
.aud .aud-lead{margin-top:12px}

/* ---- rendering: crisp text on dark grounds, figures that line up ---- */
body{-moz-osx-font-smoothing:grayscale}
.n4-fig b{font-variant-numeric:tabular-nums}
h1,h2,h3{font-kerning:normal}