/* FlexPro Technologies, Direction B "Compile" - Crazy Websites concept */
:root{
  --ink:#0E1112; --panel:#161A1C; --panel2:#1B2023; --line:#262C2F; --text:#E8ECE6; --muted:#8A9490;
  --lime:#A4D400; --lime2:#D6F06A; --ochre:#E08A3C; --blue:#7FB4D9;
  --mono:'Martian Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --pad:clamp(20px,4.4vw,72px); --hh:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--lime);color:var(--ink);padding:8px 12px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* syntax classes = brand system */
.kw{color:var(--lime)}
.str{color:var(--ochre);font-style:normal}
.cm{font-family:var(--mono);font-variation-settings:'wdth' 88;font-size:12.5px;letter-spacing:.01em;color:var(--blue)}
.ok{color:var(--lime)}
.t-dim,.dim{color:var(--muted)}
.mono{font-family:var(--mono);font-variation-settings:'wdth' 88;font-size:.9em}
.k{display:block;font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}

/* links: syntax-highlight hover */
.lnk{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-variation-settings:'wdth' 88;font-size:13px;color:var(--text);text-decoration:none;margin-top:14px}
.lnk::before{content:'>';color:var(--muted);transition:color .2s,transform .2s}
.lnk span{background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 1px no-repeat;transition:background-size .3s,color .2s;padding-bottom:2px}
.lnk:hover span{color:var(--lime);background-size:100% 1px}
.lnk:hover::before{color:var(--ochre);transform:translateX(3px)}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:4px;font-family:var(--mono);font-variation-settings:'wdth' 92;font-weight:600;font-size:14px;text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime2)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* ===== header (editor tab bar) ===== */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:60;display:flex;align-items:stretch;gap:24px;padding:0 118px 0 var(--pad);background:rgba(14,17,18,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:34px;height:34px;flex:none}
.logo-type{display:flex;flex-direction:column;line-height:1}
.wm{font-family:var(--sans);font-weight:600;font-size:23px;letter-spacing:-.03em}
.wm b{font-weight:600;color:#C9CFCB}.wm i{font-style:normal;color:var(--lime)}
.logo-type small{font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:8.5px;letter-spacing:.22em;color:var(--muted);margin-top:4px;text-transform:uppercase}
.tabs{display:flex;align-items:stretch;margin-left:auto}
.tab{position:relative;display:flex;align-items:center;padding:0 20px;font-family:var(--mono);font-variation-settings:'wdth' 90;font-size:13px;color:var(--muted);text-decoration:none;border-left:1px solid var(--line);transition:color .2s,background .2s}
.tab:last-child{border-right:1px solid var(--line)}
.tab::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.tab:hover{color:var(--lime)}
.tab.on{color:var(--text);background:var(--panel)}
.tab.on::before{transform:none}
.call{display:flex;align-items:center;gap:10px;padding:0 26px;background:var(--lime);color:var(--ink);text-decoration:none;font-family:var(--mono);font-variation-settings:'wdth' 90;font-weight:600;font-size:13.5px;white-space:nowrap}
.call svg{width:16px;height:16px}
.call:hover{background:var(--lime2)}

main{padding-top:var(--hh)}

/* ===== on-load COMPILE intro (CSS-driven, not font-gated) ===== */
#boot{position:fixed;inset:0;z-index:80;pointer-events:none;animation:bootEnd 0s linear 2.1s forwards}
.boot-bands{position:absolute;inset:0;display:flex;flex-direction:column}
.boot-bands i{flex:1;background:var(--ink);transform-origin:left center;animation:band .42s cubic-bezier(.7,0,.2,1) both}
.boot-bands i:nth-child(odd){transform-origin:right center}
.boot-bands i:nth-child(1){animation-delay:1.3s}.boot-bands i:nth-child(2){animation-delay:1.34s}.boot-bands i:nth-child(3){animation-delay:1.38s}.boot-bands i:nth-child(4){animation-delay:1.42s}.boot-bands i:nth-child(5){animation-delay:1.46s}.boot-bands i:nth-child(6){animation-delay:1.5s}.boot-bands i:nth-child(7){animation-delay:1.54s}.boot-bands i:nth-child(8){animation-delay:1.58s}.boot-bands i:nth-child(9){animation-delay:1.62s}.boot-bands i:nth-child(10){animation-delay:1.66s}.boot-bands i:nth-child(11){animation-delay:1.7s}.boot-bands i:nth-child(12){animation-delay:1.74s}
@keyframes band{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes bootEnd{to{visibility:hidden}}
.boot-code{position:absolute;left:var(--pad);top:calc(var(--hh) + 14vh);font-family:var(--mono);font-size:clamp(18px,2.2vw,30px);line-height:1.9;animation:fadeOut .25s ease 1.22s both}
.bl{display:flex;align-items:center;white-space:nowrap}
.bl .n{display:inline-block;width:3.2ch;color:#3E474A;font-size:.6em}
.bt{display:inline-block;overflow:hidden;width:0;animation:typeIn .6s steps(14,end) .12s forwards}
@keyframes typeIn{to{width:14ch}}
.bcaret{display:inline-block;width:.55em;height:1.1em;background:var(--lime);margin-left:2px;animation:blink .5s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.b2,.b3,.b4,.b5{opacity:0;animation:lineIn .01s linear forwards;font-size:.62em}
.b2{animation-delay:.82s}.b3{animation-delay:.94s}.b4{animation-delay:1.04s}.b5{animation-delay:1.14s}
@keyframes lineIn{to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
html.noboot #boot,html.boot-skip #boot{display:none}
/* hero assembles out of the compile */
.page-index .rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.page-index .r1{animation-delay:1.42s}.page-index .r2{animation-delay:1.5s}.page-index .r3{animation-delay:1.58s}.page-index .r4{animation-delay:1.66s}.page-index .r5{animation-delay:1.76s}.page-index .r6{animation-delay:1.86s}
@keyframes rise{from{opacity:0;transform:translate3d(-28px,0,0);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
html.noboot .page-index .rise,html.boot-skip .rise{animation-delay:.05s!important;animation-duration:.5s}
.hero .hl{animation:reflow 1s cubic-bezier(.2,.8,.2,1) 1.45s both}
@keyframes reflow{from{font-variation-settings:'wdth' 112,'wght' 300;letter-spacing:.04em}to{font-variation-settings:'wdth' 84,'wght' 520;letter-spacing:-.035em}}

/* ===== hero ===== */
.hero{position:relative;min-height:calc(100svh - var(--hh));display:grid;grid-template-columns:52px minmax(0,1fr) minmax(280px,360px);grid-template-rows:1fr auto;column-gap:clamp(24px,4vw,64px);padding:0 var(--pad) 0 0;border-bottom:1px solid var(--line)}
html.cw-embedded .hero{min-height:780px}
.hero-gutter{grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;padding:28px 12px 0 0;border-right:1px solid var(--line);font-family:var(--mono);font-size:11px;line-height:2.3;color:#3A4245;overflow:hidden;margin-left:calc(var(--pad) - 52px)}
.hero-main{align-self:center;padding:56px 0 48px;max-width:1040px}
.hero .cm{margin-bottom:28px}
.hl{font-family:var(--mono);font-variation-settings:'wdth' 84,'wght' 520;font-size:clamp(36px,4.5vw,74px);line-height:1.06;letter-spacing:-.035em}
.hl span.rise{display:block}
.hl em{color:var(--ochre)}
.lede{margin-top:32px;max-width:620px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:#C3CAC5}
.cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.outline{align-self:center;border-left:1px solid var(--line);padding:6px 0 6px 28px;font-size:14px}
.ol-h{font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:18px}
.outline li{position:relative;padding:12px 0;border-top:1px solid var(--line);color:#C3CAC5;line-height:1.45}
.outline li:first-child{border-top:0}
.ol-k{display:block;font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:10.5px;letter-spacing:.06em;color:var(--lime);margin-bottom:4px}
.ol-k::before{content:'\25B8  '}
.outline b{font-family:var(--disp);font-size:24px;color:var(--text);margin-right:4px;font-weight:800}
.statusbar{grid-column:2/4;display:flex;gap:26px;align-items:center;height:30px;font-family:var(--mono);font-variation-settings:'wdth' 82;font-size:11px;color:var(--muted);border-top:1px solid var(--line);margin-right:calc(var(--pad) * -1);padding-right:var(--pad);overflow:hidden;white-space:nowrap}
.sb-on{color:var(--ink);background:var(--lime);padding:0 10px;height:100%;display:flex;align-items:center;margin-left:-1px}
.sb-r{margin-left:auto}

/* ===== intro (intensity 1: still) ===== */
.intro{padding:clamp(80px,12vw,180px) var(--pad);border-bottom:1px solid var(--line)}
.intro-h{font-family:var(--mono);font-variation-settings:'wdth' 100;font-size:14px;letter-spacing:.02em;color:var(--muted);margin:10px 0 48px}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:end}
.intro-big{font-family:var(--sans);font-weight:500;font-size:clamp(28px,3.2vw,50px);line-height:1.18;letter-spacing:-.02em}
.intro-side p{color:#B7BFBA;font-size:17px}
.intro-side p+p{margin-top:20px}

/* ===== line wipe ===== */
.wipe{position:absolute;left:0;right:0;top:0;height:64px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:2}
.wipe i{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left}
.wipe i:nth-child(3n+1){background:var(--lime);opacity:.55}
html.no-js .wipe i,.wipe.done i{transform:none}

/* ===== COMPILE band (the 5) ===== */
.compile{position:relative;background:var(--ink)}
.cmp-pin{height:calc(100vh - var(--hh));padding-top:0}
html.cw-embedded .cmp-pin{height:820px}
.cmp-stage{height:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:auto minmax(0,1fr) auto;gap:16px 20px;padding:28px var(--pad) 24px}
.cmp-head{grid-column:1/3;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.cmp-h{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;margin-top:6px}
.cmp-count{font-family:var(--disp);font-weight:800;font-size:clamp(56px,6.4vw,104px);line-height:.8;display:flex;align-items:baseline;gap:6px;color:var(--text)}
.cmp-count i{font-style:normal;color:var(--line)}
.cmp-count span:last-child{color:#3A4245}
#cmpN{color:var(--lime);min-width:1.1em;text-align:right}
.editor{grid-row:2/4;background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ed-tabs{display:flex;align-items:stretch;height:36px;border-bottom:1px solid var(--line);font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:11.5px;color:var(--muted)}
.ed-tab{display:flex;align-items:center;padding:0 16px;border-right:1px solid var(--line)}
.ed-tab.on{color:var(--text);background:var(--ink);box-shadow:inset 0 2px 0 var(--lime)}
.ed-path{margin-left:auto;display:flex;align-items:center;padding:0 14px;color:#4A5457}
.ed-body{flex:1;display:flex;min-height:0;font-family:var(--mono);font-variation-settings:'wdth' 84;font-size:clamp(12px,1.06vw,15px);line-height:1.85;padding-top:14px;overflow:hidden}
.ed-gut{width:48px;flex:none;text-align:right;padding-right:14px;color:#3A4245}
.ed-gut span,.ed-code .ln{display:block;height:1.85em;white-space:pre}
.ed-code{flex:1;min-width:0;padding-right:12px}
.ed-code .ln{overflow:hidden;text-overflow:clip}
.ed-code .fold{color:#5E686B}
.ed-code .prev{opacity:.5}
.ed-code .cm,.buildlog .cm{font-size:inherit;font-variation-settings:inherit;letter-spacing:0}
.ed-code .fold .kw{color:#6E8A2E}
.ed-code .fold .ok{color:var(--lime)}
.ed-code .pr{color:#C9CFCB}
.ed-code .id{color:var(--text)}
.ed-code .cur{background:rgba(164,212,0,.06);box-shadow:inset 2px 0 0 var(--lime)}
.ccaret{display:inline-block;width:.6em;height:1.2em;vertical-align:-.25em;background:var(--lime);animation:blink .9s steps(1) infinite}
.preview{background:#F2F4EF;color:#1D2326;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line)}
.pv-chrome{display:flex;align-items:center;gap:12px;height:34px;padding:0 12px;background:#E3E7E0;font-family:var(--mono);font-variation-settings:'wdth' 84;font-size:11px;color:#5A6468;flex:none}
.pv-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dots{display:flex;gap:5px}.dots i{width:8px;height:8px;border-radius:50%;background:#C3C9C1}
.pv-tag{margin-left:auto;border:1px solid #B9C0B6;border-radius:20px;padding:1px 9px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.pv-stage{position:relative;flex:1;min-height:0}
.pv{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.pv.on{opacity:1;visibility:visible;transition:opacity .25s}
.pv-el{opacity:0;transform:translateY(8px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1)}
.pv-el.on{opacity:1;transform:none}
.pv-h{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:12px;font-weight:600;color:#1D2326;display:flex;justify-content:space-between;align-items:center}
.pv-h small{font-weight:400;color:#7A8488;font-size:10.5px}
.bar{display:block;height:7px;border-radius:4px;background:#CBD1C8}
.bar.d{background:#9AA39D}.bar.l{background:var(--lime)}.bar.o{background:var(--ochre)}.bar.b{background:var(--blue)}
.pv-lbl{font-family:var(--mono);font-variation-settings:'wdth' 82;font-size:10px;color:#5A6468;letter-spacing:.04em}
.pv-box{background:#fff;border:1px solid #DDE2DA;border-radius:5px;padding:10px}
.pv-cols{display:grid;gap:8px;flex:1;min-height:0}
.pv-col{background:#E8ECE5;border-radius:5px;padding:8px;display:flex;flex-direction:column;gap:6px}
.pv-card{background:#fff;border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 0 #D5DBD2}
.pill{display:inline-block;font-family:var(--mono);font-size:9.5px;padding:2px 7px;border-radius:10px;background:#E3E7E0;color:#3D474A}
.pill.l{background:var(--lime);color:#1D2326}.pill.o{background:#F6D3B2;color:#7A4313}.pill.b{background:#D3E6F3;color:#21506F}
.pv-field{display:flex;flex-direction:column;gap:4px}
.pv-input{height:28px;border:1px solid #CFD5CC;border-radius:4px;background:#fff;display:flex;align-items:center;padding:0 8px}
.pv-btn{align-self:flex-start;background:#1D2326;color:#F2F4EF;font-family:var(--mono);font-size:10.5px;padding:7px 14px;border-radius:4px}
.pv-chart{flex:1;display:flex;align-items:flex-end;gap:8px;padding:10px 4px 0;border-bottom:1px solid #C3C9C1;min-height:0}
.pv-chart i{flex:1;background:#9AA39D;border-radius:3px 3px 0 0;transform-origin:bottom}
.pv-chart i:nth-child(3n){background:var(--lime)}
.pv-row{display:grid;grid-template-columns:1.2fr 1fr .8fr auto;gap:10px;align-items:center;background:#fff;border-radius:4px;padding:8px 10px}
.tick{width:14px;height:14px;border-radius:3px;background:var(--lime);position:relative}
.tick::after{content:'';position:absolute;left:4px;top:1.5px;width:4px;height:7px;border:solid #1D2326;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tick.n{background:#E3E7E0}.tick.n::after{display:none}
.meter{height:12px;background:#E3E7E0;border-radius:6px;overflow:hidden}.meter i{display:block;height:100%;background:var(--lime);border-radius:6px}
.lot{background:#fff;border-radius:5px;padding:10px;display:flex;flex-direction:column;gap:6px;border-top:3px solid #9AA39D}
.lot.l{border-top-color:var(--lime)}.lot.o{border-top-color:var(--ochre)}
.lot b{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1;color:#1D2326}
.steps{display:flex;gap:4px}.steps span{flex:1;font-family:var(--mono);font-size:9.5px;text-align:center;padding:5px 0;border-radius:3px;background:#E3E7E0;color:#5A6468}
.steps span.l{background:var(--lime);color:#1D2326}
.eartag{width:92px;height:110px;background:#F2C21B;border-radius:18px 18px 22px 22px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none}
.eartag::before{content:'';position:absolute;top:-16px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:#F2C21B;box-shadow:inset 0 0 0 10px #F2C21B,inset 0 0 0 30px #F2F4EF}
.eartag .bar{width:56px;background:#8A6D08}
.stamp{width:84px;height:84px;border-radius:50%;border:2px dashed var(--ochre);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;color:var(--ochre);transform:rotate(-12deg);text-align:center;line-height:1.3;flex:none}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.mod{background:#fff;border-radius:5px;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;min-height:0;border:1px solid #DDE2DA}
.mod b{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:11.5px}
.mod.hub{background:#1D2326;color:#F2F4EF;border-color:#1D2326}
.specdoc{background:#fff;border:1px solid #DDE2DA;border-radius:4px;padding:16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.spec-li{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:11.5px}
.spec-li em{font-style:normal;color:#7A8488;width:2.2em}
.buildlog{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:11px;line-height:1.75;color:#4A5457;overflow:hidden}
.bl-h{letter-spacing:.16em;font-size:10px;margin-bottom:4px;color:var(--muted)}
#buildLog{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
#buildLog li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#buildLog li.done{color:#AEB6B1}
#buildLog li.done b{color:var(--lime);font-weight:400}
#buildLog li.cur{color:var(--text)}
#buildLog li.cur b{color:var(--ochre);font-weight:400}
#buildLog b{font-weight:400}
.cmp-static{display:none;padding:0 var(--pad);gap:28px}
.cmp-foot{padding:22px var(--pad) 56px;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.cmp-foot .lnk{margin:0 0 0 12px}
/* static fallback (no JS / reduced motion / embedded) */
html.no-js .cmp-pin,html.cmp-static-mode .cmp-pin{display:none}
html.no-js .cmp-static,html.cmp-static-mode .cmp-static{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));padding-top:72px}
.cs-item{border:1px solid var(--line);border-radius:6px;padding:20px;background:var(--panel)}
.cs-proc{font-family:var(--mono);font-size:11px;color:var(--lime)}
.cs-item h3{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:15px;margin:8px 0 6px}
.cs-item p{font-size:14.5px;color:#B7BFBA}
.pv-slot{margin-top:16px;position:relative;height:250px;background:#F2F4EF;border-radius:5px;overflow:hidden}
.pv-slot:empty{display:none}
.pv-slot .pv{opacity:1;visibility:visible}
.pv-slot .pv-el{opacity:1;transform:none}

/* ===== ticker ===== */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);padding:22px 0;background:var(--ink)}
.tk-track{display:flex;width:max-content;will-change:transform}
.tk-run{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--mono);font-variation-settings:'wdth' 78;font-size:clamp(14px,1.3vw,18px);white-space:nowrap;color:#AEB6B1}
.tk-run b{color:var(--lime);font-weight:400}

/* ===== turnkey run cards (4) ===== */
.turnkey{position:relative;padding:clamp(80px,10vw,140px) var(--pad);border-bottom:1px solid var(--line)}
.tk-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 40px;margin-bottom:48px}
.tk-head .cm{width:100%}
.tk-head h2{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.035em;line-height:1.05}
.tk-head .lnk{margin:0 0 8px auto}
.run-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.run-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px;transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.run-card:hover{border-color:#3C4448;transform:translateY(-3px)}
.rc-h{display:flex;flex-direction:column;gap:6px}
.rc-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted)}
.rc-name{font-family:var(--disp);font-weight:800;font-size:clamp(46px,4.4vw,68px);line-height:.9;letter-spacing:.005em;color:var(--text);transition:color .2s}
.run-card:hover .rc-name{color:var(--lime)}
.rc-desc{margin-top:18px;color:#B7BFBA;font-size:15.5px;flex:1}
.run-btn{margin-top:24px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:4px;background:transparent;border:1px solid var(--lime);color:var(--lime);font-family:var(--mono);font-variation-settings:'wdth' 90;font-weight:600;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.run-btn:hover{background:var(--lime);color:var(--ink)}
.rb-ico{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.term{margin:16px 0 0;min-height:132px;background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:12px 14px;font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:11.5px;line-height:1.7;color:var(--text);white-space:pre-wrap;word-break:break-word}
.term .ok{color:var(--lime)}

/* ===== partners (2: still) ===== */
.partners{padding:clamp(72px,9vw,120px) var(--pad);border-bottom:1px solid var(--line)}
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);margin-top:36px}
.pt{border-top:1px solid var(--line);padding-top:28px}
.pt img{width:148px;height:auto}
.chip{display:inline-flex;background:#fff;border-radius:4px;padding:8px 12px}
.chip img{width:96px}
.pt h3{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;margin:24px 0 12px}
.pt p{color:#B7BFBA;font-size:15.5px;max-width:560px}

/* ===== contact (2: still, big numbers) ===== */
.contact{padding:clamp(80px,10vw,150px) var(--pad);border-bottom:1px solid var(--line)}
.contact h2{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:clamp(26px,3vw,46px);letter-spacing:-.035em;line-height:1.1;margin:10px 0 48px}
.cnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.cnums li{border-right:1px solid var(--line)}
.cnums li:last-child{border-right:0}
.cnums a{display:flex;flex-direction:column;padding:22px 18px 26px;text-decoration:none;transition:background .2s}
.cnums a:hover{background:var(--panel)}
.cn-pre{font-family:var(--mono);font-variation-settings:'wdth' 82;font-size:12px;color:var(--muted)}
.cn-end{font-family:var(--disp);font-weight:800;font-size:clamp(64px,8.4vw,150px);line-height:.85;margin-top:10px;transition:color .2s}
.cnums li:first-child .cn-end{color:var(--lime)}
.cnums a:hover .cn-end{color:var(--lime)}
.c-meta{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-top:56px;border-top:1px solid var(--line);padding-top:28px}
.c-meta p{color:#C3CAC5;font-size:15.5px}
.contact-mini{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.contact-mini h2{margin:0}

/* ===== sub-page head ===== */
.ph{position:relative;padding:clamp(56px,8vw,120px) var(--pad) clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.ph-h{font-family:var(--disp);font-weight:800;font-size:clamp(84px,15vw,240px);line-height:.82;letter-spacing:-.005em;text-transform:uppercase;margin-top:14px}
.ph-h span{display:inline-block;animation:typeClip .9s steps(12,end) .1s both}
@keyframes typeClip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ph-h::after{content:'';display:inline-block;width:.09em;height:.7em;margin-left:.06em;background:var(--lime);vertical-align:0;animation:blink 1s steps(1) infinite}
.ph-sub{margin-top:28px;max-width:640px;color:#B7BFBA}
.subtabs{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border:1px solid var(--line);border-radius:4px;width:max-content;max-width:100%}
.subtabs a{padding:12px 18px;font-family:var(--mono);font-variation-settings:'wdth' 88;font-size:12.5px;text-decoration:none;color:var(--muted);border-right:1px solid var(--line);transition:color .2s,background .2s}
.subtabs a:last-child{border-right:0}
.subtabs a:hover{color:var(--lime);background:var(--panel)}

/* solutions */
.cdev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line)}
.cdev h2,.itsup h2,.lscat h2,.maint h2,.office h2,.form-wrap h2{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.035em;line-height:1.05;margin:10px 0 28px}
.cdev-body{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:#D2D8D3}
.usp{margin:0;padding:28px 30px;background:var(--lime);color:var(--ink);border-radius:6px}
.usp p{font-family:var(--sans);font-weight:500;font-size:clamp(20px,1.8vw,27px);line-height:1.3;letter-spacing:-.015em}
.usp cite{display:block;margin-top:18px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.consider{margin-top:36px}
.consider ul{display:flex;flex-wrap:wrap;gap:8px}
.consider li span{display:inline-block;font-family:var(--mono);font-variation-settings:'wdth' 84;font-size:12.5px;border:1px solid var(--line);border-radius:30px;padding:9px 15px;color:#C9CFCB;transition:border-color .2s,color .2s}
.consider li span:hover{border-color:var(--ochre);color:var(--ochre)}
.itsup{padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line)}
.its-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.its-lead{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.3vw,34px);line-height:1.25;letter-spacing:-.02em}
.its-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:28px}
.its-card p{margin:20px 0 26px;color:#B7BFBA;font-size:15.5px}

/* download = package manager */
.dl{padding:clamp(48px,6vw,80px) var(--pad) 8px}
.dl-h{font-family:var(--mono);font-variation-settings:'wdth' 88;font-size:clamp(15px,1.4vw,19px);padding-bottom:16px;border-bottom:1px solid var(--line)}
.prompt{color:var(--lime);margin-right:.5em}
.pkg{display:grid;grid-template-columns:200px minmax(0,1fr) 210px 150px;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-14px);animation:pkgIn .5s cubic-bezier(.2,.8,.2,1) forwards}
.pkg:nth-child(1){animation-delay:.25s}.pkg:nth-child(2){animation-delay:.33s}.pkg:nth-child(3){animation-delay:.41s}.pkg:nth-child(4){animation-delay:.49s}
#biocontrol .pkg:nth-child(1){animation-delay:.6s}#biocontrol .pkg:nth-child(2){animation-delay:.68s}#biocontrol .pkg:nth-child(3){animation-delay:.76s}#biocontrol .pkg:nth-child(4){animation-delay:.84s}
@keyframes pkgIn{to{opacity:1;transform:none}}
.pk-cmd{font-family:var(--mono);font-variation-settings:'wdth' 84;font-size:13px}
.pk-label{font-size:15.5px;color:#D2D8D3}
.pk-file{font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.pk-dl{justify-self:end;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-variation-settings:'wdth' 88;font-size:12.5px;text-decoration:none;position:relative;overflow:hidden;transition:border-color .2s,color .2s}
.pk-dl::before{content:'\2193';color:var(--lime)}
.pk-dl::after{content:'';position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left;z-index:-1;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.pk-dl{z-index:0}
.pk-dl:hover{border-color:var(--lime);color:var(--ink)}
.pk-dl:hover::before{color:var(--ink)}
.pk-dl:hover::after{transform:none}
.pkg:hover .pk-cmd .kw{color:var(--ochre)}

/* profile */
.vmv{background:var(--lime);color:var(--ink);padding:clamp(72px,9vw,140px) var(--pad)}
.vmv-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:30px 0;border-top:1px solid rgba(14,17,18,.25)}
.vmv-row:first-child{border-top:0;padding-top:0}
.vmv-k{font-family:var(--mono);font-variation-settings:'wdth' 90;font-weight:600;font-size:13px;letter-spacing:.04em}
.vmv-row p{font-size:clamp(18px,1.5vw,22px);line-height:1.5;max-width:900px}
.vmv-row .vmv-big{font-family:var(--sans);font-weight:500;font-size:clamp(30px,4vw,62px);line-height:1.08;letter-spacing:-.03em}
.lscat{padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line)}
.lscat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.ls,.cats{background:var(--panel);border:1px solid var(--line);border-radius:6px}
.ls-cmd,.cat-cmd{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:12.5px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ls-list{padding:8px}
.ls-row{width:100%;display:grid;grid-template-columns:96px 130px minmax(0,1fr);gap:12px;text-align:left;background:none;border:0;padding:9px 10px;border-radius:3px;font-family:var(--mono);font-variation-settings:'wdth' 82;font-size:12.5px;color:#AEB6B1;cursor:pointer;transition:background .15s,color .15s}
.ls-perm{color:#4A5457}
.ls-who{color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-row:hover{background:var(--panel2);color:var(--text)}
.ls-row:hover .ls-name{color:var(--ochre)}
.ls-row.on{background:var(--lime);color:var(--ink)}
.ls-row.on .ls-perm,.ls-row.on .ls-who{color:rgba(14,17,18,.6)}
.cats{position:sticky;top:calc(var(--hh) + 24px);min-height:360px}
.cat{display:none;padding-bottom:28px}
.cat.on{display:block}
.cat h3{font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;line-height:1.3;padding:28px 24px 0}
.cat p{padding:16px 24px 0;color:#C3CAC5;font-size:16.5px}
.cat-kind{display:inline-block;margin:22px 24px 0;font-family:var(--mono);font-size:11px;color:var(--lime);border:1px solid var(--lime);border-radius:20px;padding:3px 10px}
.maint{padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line)}
.mt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.mt-list li{padding:24px 24px 26px 0;border-bottom:1px solid var(--line)}
.mt-list li:nth-child(odd){border-right:1px solid var(--line)}
.mt-list li:nth-child(even){padding-left:24px}
.mt-tag{font-family:var(--mono);font-size:10.5px;color:var(--blue);letter-spacing:.06em}
.mt-list p{margin-top:8px;font-size:16.5px;color:#D2D8D3}
.mt-foot{margin-top:28px;color:var(--muted)}
.mt-foot .lnk{margin:0 0 0 10px}
.office{padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line)}
.strips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,320px));gap:28px 24px}
.strips img{width:320px;max-width:100%;border-radius:3px;filter:grayscale(.25) contrast(1.05);transition:filter .3s}
.strips li:hover img{filter:none}
.strips span{display:block;margin-top:10px;font-family:var(--mono);font-variation-settings:'wdth' 80;font-size:11px;color:var(--muted)}

/* contact page */
.contact-page{padding-top:clamp(56px,7vw,100px)}
.form-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line)}
.fw-l p{color:#B7BFBA;max-width:420px}
.demo-form{display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:28px}
.demo-badge{align-self:flex-start;font-family:var(--mono);font-size:11px;color:var(--ochre);border:1px solid var(--ochre);border-radius:20px;padding:3px 10px}
.demo-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-variation-settings:'wdth' 86;font-size:12px;color:var(--muted)}
.demo-form input,.demo-form textarea{font:inherit;font-family:var(--sans);font-size:16px;color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:13px 14px;cursor:text}
.demo-form input:focus,.demo-form textarea:focus{outline:none;border-color:var(--lime)}
.demo-form .btn{align-self:flex-start}
.form-out{min-height:0}

/* footer */
.site-footer{padding:56px var(--pad) 28px;background:#0A0C0D}
.f-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:40px;align-items:start}
.f-addr{color:var(--muted);font-size:14px;max-width:340px}
.f-phones a,.f-nav a{display:block;font-family:var(--mono);font-variation-settings:'wdth' 84;font-size:12.5px;text-decoration:none;color:#C3CAC5;padding:3px 0;transition:color .2s}
.f-phones a:hover,.f-nav a:hover{color:var(--lime)}
.f-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-variation-settings:'wdth' 82;font-size:11px;color:#5E686B}
.cw-badge{color:var(--lime)}
.dock{display:none}

/* custom caret cursor */
.caret-cursor{position:fixed;left:0;top:0;width:2px;height:22px;margin:-11px 0 0 -1px;background:var(--lime);z-index:2147483600;pointer-events:none;opacity:0;transition:width .18s,height .18s,margin .18s,border-radius .18s,opacity .2s;mix-blend-mode:difference}
html.has-caret .caret-cursor{opacity:1}
html.has-caret .caret-cursor.blink{animation:blink 1s steps(1) infinite}
html.has-caret .caret-cursor.block{width:14px;height:24px;margin:-12px 0 0 -7px}
html.has-caret,html.has-caret a,html.has-caret button,html.has-caret label{cursor:none}
html.has-caret input,html.has-caret textarea{cursor:text}

/* === Crazy Websites PREVIEW watermark - REMOVE at go-live === */
.cw-preview-wm{position:fixed;inset:0;z-index:2147483646;pointer-events:none;background-repeat:repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MjAnIGhlaWdodD0nMjgwJz48dGV4dCB4PScyNCcgeT0nMTYwJyBmb250LWZhbWlseT0nQXJpYWwnIGZvbnQtc2l6ZT0nMjQnIGZvbnQtd2VpZ2h0PSc3MDAnIGZpbGw9JyM4YThhOGEnIGZpbGwtb3BhY2l0eT0nMC4yMCcgdHJhbnNmb3JtPSdyb3RhdGUoLTI4IDIxMCAxNDApJz5QUkVWSUVXICAgY3Jhenl3ZWJzaXRlcy5jby56YTwvdGV4dD48L3N2Zz4=")}
.cw-preview-ribbon{position:fixed;top:30px;right:-72px;z-index:2147483647;pointer-events:none;transform:rotate(45deg);background:#FFE500;color:#0B0B0F;font-family:'Martian Mono',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:8px 84px;box-shadow:0 3px 14px rgba(0,0,0,.4)}

/* ===== responsive ===== */
@media (max-width:1180px){
  .hero{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto auto}
  .outline{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:24px 0 40px}
  .statusbar{grid-column:1/3}
  .run-grid{grid-template-columns:1fr}
  .pkg{grid-template-columns:170px minmax(0,1fr) auto;}
  .pk-file{display:none}
}
@media (max-width:900px){
  :root{--hh:58px}
  body{font-size:16px}
  .site-header{flex-wrap:wrap;height:auto;padding:0;gap:0}
  .site-header::before{content:'';order:2;width:96px;flex:none}
  .logo{height:58px;padding-left:var(--pad)}
  .call{order:1;margin-left:auto;height:58px;width:58px;padding:0;justify-content:center}
  .call-l,.call-n{display:none}
  .call svg{width:20px;height:20px}
  .pv-tag{font-size:9px;padding:1px 6px}
  .tabs{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);height:42px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:0 15px;font-size:12px}
  .tab:first-child{border-left:0}
  main{padding-top:101px}
  .hero{grid-template-columns:28px minmax(0,1fr);min-height:auto;column-gap:16px}
  .hero-gutter{margin-left:0;font-size:9.5px;padding-right:6px}
  .hero-main{padding:44px 0 32px}
  .hl{font-size:clamp(31px,8.6vw,46px);line-height:1.08}
  .lede{margin-top:22px;font-size:16px}
  .cta .btn{width:100%;justify-content:center}
  .statusbar span:nth-child(n+3){display:none}
  .intro-grid,.pt-grid,.cdev,.its-grid,.lscat-grid,.form-wrap,.c-meta,.mt-list{grid-template-columns:1fr}
  .mt-list li:nth-child(odd){border-right:0}.mt-list li:nth-child(even){padding-left:0}
  .cnums{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cnums a{padding:18px 12px 20px}
  .cnums li:nth-child(2){border-right:0}
  .cnums li:nth-child(n+3){border-top:1px solid var(--line)}
  .cn-end{font-size:clamp(52px,16vw,110px)}
  .f-top{grid-template-columns:1fr 1fr;gap:28px}
  .f-top .logo,.f-addr{grid-column:1/3;padding-left:0;height:auto}
  .site-footer{padding-bottom:96px}
  .dock{display:grid;grid-template-columns:1.4fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);background:var(--ink)}
  .dock a{display:flex;align-items:center;justify-content:center;height:58px;font-family:var(--mono);font-variation-settings:'wdth' 90;font-weight:600;font-size:14px;text-decoration:none}
  .dock-call{background:var(--lime);color:var(--ink)}
  .dock-dir{color:var(--text)}
  .vmv-row{grid-template-columns:1fr;gap:12px}
  .ls-row{grid-template-columns:0 96px minmax(0,1fr);gap:0 12px}
  .ls-perm{display:none}
  .cats{position:static;min-height:0}
  .pkg{grid-template-columns:1fr;gap:8px}
  .pk-dl{justify-self:start;margin-top:6px}
  .subtabs{width:100%}
  .subtabs a{flex:1 1 auto;text-align:center}
  /* compile stage stacks */
  .cmp-pin{height:calc(100svh - 101px - 58px)}
  .cmp-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1.15fr) minmax(0,1fr) auto;padding:14px var(--pad) 14px;gap:10px}
  .cmp-head{grid-column:1}
  .cmp-head .cm{display:none}
  .cmp-h{font-size:16px}
  .cmp-count{font-size:52px}
  .editor{grid-row:auto}
  .ed-tabs{height:30px;font-size:10.5px}
  .ed-path{display:none}
  .ed-body{font-size:10.6px;padding-top:8px}
  .ed-gut{width:30px;padding-right:8px}
  .buildlog{padding:8px 12px;font-size:10px}
  .bl-h{display:none}
  #buildLog{grid-template-columns:1fr}
  #buildLog li{display:none}
  #buildLog li.cur,#buildLog li.last{display:block}
  .pv{padding:12px;gap:7px}
  .pv-chrome{height:28px}
  .pv-row{grid-template-columns:1fr .8fr auto;padding:6px 8px}
  .pv-row > :nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  #boot{display:none}
  .page-index .rise,.hero .hl,.ph-h span,.pkg{animation:none!important;opacity:1;transform:none;clip-path:none}
  .wipe i{transform:none}
  .caret-cursor{display:none}
  html.has-caret,html.has-caret *{cursor:auto}
}