:root{--bg:#ECE8EF;--burg:#6F62A0;--burg-lit:#6F62A0;--lav:#C4B8E6;--night:#1C1A24;--dusk:#4A4560;--ink:#1C1A24;--soft:#4A4560;--mute:#77718A;--line:rgba(28,26,36,.14);--scout:#6F62A0;--warden:#6F62A0;--runner:#1C1A24;--font:"Space Grotesk",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg) url(/img/paper.jpg?v=2) 0 0/512px 512px repeat;color:var(--ink);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.top{position:fixed;inset:0 0 auto;z-index:20;backdrop-filter:blur(12px);background:rgba(236,232,239,.85);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:64px}.brand{display:inline-flex;align-items:center;gap:10px;font:700 18px var(--font);letter-spacing:.22em;text-transform:uppercase}.brand img{width:34px;height:34px}
.top nav{display:flex;gap:22px;margin-right:auto}.top nav a{color:var(--soft);font-size:14.5px}.top nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--burg);color:#FFFFFF;border:0;font:600 14px var(--font)}

/* hero: the three agents float in the upper part, the copy sits under them */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 34px;
  background:transparent}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;opacity:0;transition:opacity .5s;will-change:transform}
.tag.on{opacity:1}
.tag b{font:700 15px var(--mono);letter-spacing:.16em;color:var(--c)}
.tag span{font:500 13px var(--font);color:var(--soft);letter-spacing:.02em}
.hero-copy{position:relative;z-index:3;text-align:center;width:min(1040px,calc(100% - 32px));margin:0 auto}
.kick{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.hero h1{font:700 clamp(28px,3.4vw,50px)/1.05 var(--font);letter-spacing:-.025em;margin:8px 0 16px}
.hero h1 em{font-style:normal;color:var(--burg-lit)}
.cli{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 6px 0 16px;border:0;border-radius:10px;background:var(--night);font:500 15px var(--mono)}
.cli .prompt{color:var(--lav);font-weight:700}.cli code{color:#FFFFFF;font:inherit}
.cli button{height:34px;padding:0 12px;border:0;border-radius:7px;background:var(--burg);color:#FFFFFF;font:700 12px var(--mono);letter-spacing:.08em;cursor:pointer}.cli button:hover{background:#5A4E86}
@media (max-width:720px){.kick{font-size:10px;letter-spacing:.1em}.hero h1{font-size:26px}.cli{font-size:13px;height:42px}.top nav{display:none}.top .wrap{gap:12px}.hero{padding-bottom:26px}.tag b{font-size:12px}.tag span{font-size:11px}}

/* ---------- sections (paper, black ink, burgundy accents, no gradients) ---------- */
.band{padding:96px 0;border-top:1px solid var(--line)}
.shead{margin-bottom:34px}.shead h2{font:700 clamp(30px,3.6vw,48px)/1.05 var(--font);letter-spacing:-.025em;margin:10px 0 0}.shead h2 em{font-style:normal;color:var(--burg)}
.lede{color:var(--soft);font-size:16.5px;max-width:52ch;margin:14px 0 0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.steps li{padding:22px 22px 0 0;border-right:1px solid var(--line);margin-right:22px}.steps li:last-child{border-right:0}
.steps .t{font:700 13px var(--mono);color:var(--burg);letter-spacing:.06em}.steps b{display:block;font:700 22px var(--font);margin:10px 0 8px}.steps p{margin:0;color:var(--soft);font-size:15px}
.tonight{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px}
.callbox{background:var(--night);color:#fff;border-radius:16px;padding:30px 32px}.callbox .kick{color:#B9B3B5}
.callline{display:flex;align-items:baseline;gap:22px;margin:12px 0 6px;flex-wrap:wrap}.callline b{font:700 clamp(64px,8vw,110px)/1 var(--font)}.callline .dir{font:700 clamp(28px,3.4vw,46px) var(--font);color:var(--lav)}
.callbox .mono{font:600 18px var(--mono);margin:0}.callbox .count{font:600 15px var(--mono);color:#B9B3B5;margin:22px 0 0}.callbox .count b{font-size:34px;color:#fff;margin-left:8px}
.callbox .graded{font:700 20px var(--mono);margin:20px 0 0}.callbox .graded.bad{color:var(--lav)}
.callbox .hash{font:500 12.5px var(--mono);color:#8F898B;margin:14px 0 0;overflow-wrap:anywhere}
.callbox .note{font-size:14.5px;color:#D9D4D5;margin:12px 0 0}.callbox .note span{font:700 11px var(--mono);letter-spacing:.12em;color:var(--lav);margin-right:8px;text-transform:uppercase}
.checks{display:flex;flex-direction:column}.checks table{width:100%;border-collapse:collapse;margin-top:10px}.checks td{padding:11px 4px;border-bottom:1px solid var(--line);font-size:15px}
td.n,th.n{text-align:right;font-family:var(--mono)}td.dim,.dim{color:var(--mute)}td.s{text-align:right;font:700 13px var(--mono)}td.s.bad{color:var(--burg)}td.s.dim{color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid var(--ink);margin-bottom:26px;background:rgba(255,255,255,.55)}
.stats>div{padding:20px 22px;border-left:1px solid var(--line)}.stats>div:first-child{border-left:0}.stats b{display:block;font:700 40px/1.1 var(--font)}.stats span{font:600 12px var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.table-wrap{overflow-x:auto}table.calls{width:100%;border-collapse:collapse;min-width:640px}table.calls th{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;padding:10px 8px;border-bottom:2px solid var(--ink)}
table.calls td{padding:13px 8px;border-bottom:1px solid var(--line);font-size:15px}
.pill{display:inline-block;padding:3px 8px;border-radius:5px;border:1px solid var(--ink);font:700 11px var(--mono);letter-spacing:.06em}.pill.ok{background:var(--night);color:#fff}.pill.bad{background:var(--burg);color:#fff;border-color:var(--burg)}.pill.dim{border-color:var(--line);color:var(--mute);font-weight:600}
.more{margin:18px 0 0}.more a{font:700 14px var(--mono);color:var(--burg)}
.cli-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:center}
.term{margin:0;background:var(--night);color:#fff;border-radius:14px;padding:26px 28px;font:500 14.5px/1.9 var(--mono);overflow-x:auto}.term .d{color:var(--lav)}.term .c{color:#8F898B}
.empty{padding:28px;border:1px dashed var(--line);border-radius:12px;color:var(--mute);text-align:center}
.foot{border-top:2px solid var(--ink);padding:34px 0 46px}.foot .wrap{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap}.foot p{flex:1;min-width:260px;margin:0;color:var(--mute);font-size:13.5px;max-width:70ch}.foot nav{display:flex;gap:18px}.foot nav a{font:600 14px var(--font)}
.page{padding:120px 0 80px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:20px 0}.steps li:nth-child(2){border-right:0}.tonight,.cli-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stats>div:nth-child(3){border-left:0}.stats>div:nth-child(n+3){border-top:1px solid var(--line)}.band{padding:70px 0}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{border-right:0;margin-right:0;padding-right:0}}
.bysym{margin-top:34px}.bysym>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}.bysym>div>div{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.55)}.bysym b{display:block;font:700 18px var(--font)}.bysym span{font:600 13px var(--mono);color:var(--mute)}
td.hashc{font:500 12px var(--mono);color:var(--mute)}
.docs section{max-width:820px;margin-bottom:40px}.docs h3{font:700 24px var(--font);margin:0 0 12px}.docs p,.docs li{color:var(--soft);font-size:16px}.docs li{margin:6px 0}.docs b{color:var(--ink)}
.cabar{position:fixed;top:64px;left:0;right:0;z-index:19;display:flex;justify-content:center;align-items:center;gap:10px;padding:7px 16px;background:var(--night);color:#fff;font:600 12.5px var(--mono)}.cabar code{overflow:hidden;text-overflow:ellipsis;min-width:0}.cabar button,.cabar a{padding:3px 9px;border:1px solid rgba(255,255,255,.4);border-radius:5px;background:transparent;color:#fff;font:700 11px var(--mono);cursor:pointer}
.studio .panel{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.6);padding:22px;margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.studio .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.studio label{font:600 12.5px var(--mono);color:var(--mute)}
.f{width:100%;min-width:0;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font:500 14.5px var(--font);color:var(--ink)}textarea.f{height:auto;padding:10px 12px;font:500 14px/1.5 var(--font)}
.row{display:flex;gap:8px}.row .f{flex:1}.wrapb{flex-wrap:wrap}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn{cursor:pointer}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}.kv div{display:flex;flex-direction:column}.kv span{font:600 11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}.kv b{font:600 15px var(--font)}
.msg{font:500 13px var(--mono);color:var(--soft);margin:0;overflow-wrap:anywhere}.tok{padding:10px 12px;border:1px dashed var(--line);border-radius:9px}.sw{display:flex;gap:8px;align-items:center}
.draft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:14px 0;border-top:1px solid var(--line)}.draft img{width:100%;border:1px solid var(--line);border-radius:8px}
@media (max-width:900px){.studio .grid2,.draft{grid-template-columns:1fr}}
[hidden]{display:none!important}

/* ---------- visuals under the hero ---------- */
.crewrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.crewcard{border:2px solid var(--ink);border-radius:18px;background:rgba(255,255,255,.55);padding:0 24px 26px;display:flex;flex-direction:column;overflow:hidden}
.crewcard figure{margin:0 -24px 18px;height:250px;display:flex;align-items:flex-end;justify-content:center;background:#E2DDE8;border-bottom:2px solid var(--ink)}
.crewcard figure img{height:232px;width:auto;transform:translateY(16px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.crewcard:hover figure img{transform:translateY(6px) rotate(-2deg)}
.crewcard .t{font:700 12.5px var(--mono);color:var(--burg);letter-spacing:.06em}.crewcard h3{font:700 26px var(--font);margin:8px 0 8px;letter-spacing:-.01em}.crewcard h3 em{font-style:normal;color:var(--burg)}.crewcard p{margin:0;color:var(--soft);font-size:15px}
.clock{margin-top:34px;padding:22px 0 0}
.clock-line{position:relative;height:6px;background:var(--ink);border-radius:3px}
.clock-line .now{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--burg);border:3px solid #ECE8EF;left:var(--p,0%);transition:left .6s}
.clock-line .now::after{content:attr(data-label);position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font:700 11px var(--mono);color:var(--burg);white-space:nowrap}
.clock-marks{position:relative;height:58px;margin-top:10px}
.clock-marks div{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.clock-marks div:first-child{transform:none;align-items:flex-start;text-align:left}.clock-marks div:last-child{transform:translateX(-100%);align-items:flex-end;text-align:right}
.clock-marks div::before{content:"";width:2px;height:12px;background:var(--ink);margin:-16px 0 6px}
.clock-marks b{font:700 13px var(--mono)}.clock-marks span{font:500 12px var(--font);color:var(--mute);white-space:nowrap}
.gapboard,.vsboard{margin-top:26px;border:2px solid var(--ink);border-radius:16px;padding:20px 22px;background:rgba(255,255,255,.55)}
.vsboard{margin:0 0 26px}
.gb-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.gb-key{font:600 12px var(--mono);color:var(--mute);display:flex;gap:6px;align-items:center}
.gb-key i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-left:8px}.gb-key i.up,.gb-key i.called{background:var(--ink)}.gb-key i.dn,.gb-key i.miss{background:var(--burg)}.gb-key i.pick{border:2px solid var(--burg);background:transparent}.gb-key i.opened{background:#B9B3B5}
.gaps{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}
.gap{display:grid;grid-template-rows:88px 88px auto;position:relative;border-radius:8px}
.gap.pick{outline:2px solid var(--burg);outline-offset:4px}
.gap .half{display:flex;justify-content:center}.gap .hi{align-items:flex-end;border-bottom:2px solid var(--ink)}.gap .lo{align-items:flex-start}
.gap .bar{display:block;width:62%;border-radius:4px 4px 0 0;background:var(--ink)}.gap .lo .bar{background:var(--burg);border-radius:0 0 4px 4px}
.gap .lab{display:flex;flex-direction:column;align-items:center;padding-top:6px}.gap .lab b{font:700 12.5px var(--font)}.gap .lab span{font:600 11.5px var(--mono);color:var(--soft)}
.vs{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:8px}
.vsc{display:grid;grid-template-rows:80px 80px auto}.vsc .half{display:flex;justify-content:center;gap:3px}.vsc .hi{align-items:flex-end;border-bottom:2px solid var(--ink)}.vsc .lo{align-items:flex-start}
.vsc .b{display:block;width:40%;background:var(--ink);border-radius:3px 3px 0 0}.vsc .b.o{background:#B9B3B5}.vsc .lo .b{border-radius:0 0 3px 3px}.vsc.wrong .b.o{background:var(--burg)}
.vsc .lab{font:600 10.5px var(--mono);color:var(--mute);text-align:center;padding-top:5px;white-space:nowrap;overflow:hidden}
.cli-bot{width:150px;height:auto;display:block;margin:-10px 0 6px -8px}
@media (max-width:900px){.crewrow{grid-template-columns:1fr}.crewcard{flex-direction:row;gap:18px;padding:0 20px 0 0;align-items:center}.crewcard figure{margin:0;height:auto;width:140px;flex:0 0 140px;align-self:stretch;border-bottom:0;border-right:2px solid var(--ink)}.crewcard figure img{height:150px;transform:translateY(10px)}.crewcard .ctext{padding:16px 0;display:flex;flex-direction:column;min-width:0}.crewcard h3{margin:4px 0;font-size:21px}.crewcard p{font-size:14px}
 .gaps{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:22px}.gap{grid-template-rows:64px 64px auto}.vs{grid-template-columns:repeat(8,minmax(0,1fr));row-gap:18px}.vsc{grid-template-rows:56px 56px auto}.clock-marks span{display:none}.clock-marks div:nth-child(2),.clock-marks div:nth-child(4){display:none}}
@media (max-width:560px){.crewcard p{display:none}}

.npm{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font:700 13px var(--mono);transition:background .2s,color .2s}
.npm svg{width:16px;height:16px;color:currentColor}.npm:hover{background:var(--ink);color:#fff}.npm:hover svg{color:#fff}
@media (max-width:720px){.npm span{display:none}.npm{padding:0 12px}}
.btn{white-space:nowrap}.btn .short{display:none}@media (max-width:720px){.top .btn .long{display:none}.top .btn .short{display:inline}}

/* ---------- the night world: rendered backgrounds (brand/bg) behind the hero and each section ---------- */
.hero{background:#2E2B36 url(/img/bg-hero.webp) center 62%/cover no-repeat}
.hero .tag b{color:#FFFFFF}.hero .tag span{color:#D9D4DD}
.hero .kick{color:#2B2830}
.band{position:relative;border-top:0;background:#24222B center/cover no-repeat;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;background:rgba(18,16,24,.42);z-index:-1}   /* one flat veil, so type reads on any part of the picture */
#how{background-image:url(/img/bg-how.webp)}#calls{background-image:url(/img/bg-tonight.webp)}#record{background-image:url(/img/bg-record.webp)}#cli{background-image:url(/img/bg-cli.webp)}
.band .shead .kick{color:#E6E1EA}.band .shead h2{color:#FFFFFF}.band .shead h2 em{color:#D6CCF2}.band .lede{color:#E6E1EA}
.band .more a{color:#FFFFFF}
/* everything that carries data sits on paper */
.band .crewcard,.band .gapboard,.band .vsboard,.band .stats{background:rgba(240,237,244,.95)}
.band .checks,.band .table-wrap{background:rgba(240,237,244,.95);border:2px solid var(--ink);border-radius:16px;padding:16px 20px}
.band .table-wrap{padding:6px 16px}
.band .clock{background:rgba(240,237,244,.95);border:2px solid var(--ink);border-radius:16px;padding:40px 30px 10px}
.band .empty{background:rgba(240,237,244,.95)}
@media (max-width:900px){.hero{background-image:url(/img/bg-hero-m.webp);background-position:center 70%}#how{background-image:url(/img/bg-how-m.webp)}#calls{background-image:url(/img/bg-tonight-m.webp)}#record{background-image:url(/img/bg-record-m.webp)}#cli{background-image:url(/img/bg-cli-m.webp)}}
.hero{background-position:center 100%}
.hero h1{color:#FFFFFF;text-shadow:0 2px 24px rgba(10,8,16,.55)}.hero h1 em{color:#D6CCF2}
.hero .kick{color:#F1EDF4;text-shadow:0 1px 10px rgba(10,8,16,.6)}
@media (max-width:900px){.hero{background-position:center 100%}}
.npm{width:40px;padding:0;justify-content:center}.npm svg{width:18px;height:18px}
#water{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}#water.on{opacity:1}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}#sky.on{opacity:1}
.hero{background-image:url(/img/bg-hero.webp?v=2)}@media (max-width:900px){.hero{background-image:url(/img/bg-hero-m.webp?v=2)}}