/* klif site. Layout after whichsausagemate.com v2 (a 12-column bento of cards, sections with a centred head, wide
   alternating chapters), in KLIF's own palette and type: basalt, sky, kelp and amber from the app, Archivo for
   display, IBM Plex Sans for text, IBM Plex Mono for every readout. Corners are sharper than WSM's and frames carry
   the app's corner ticks. Behind everything: sky.js, a dithered pixel planet. */
@font-face{font-family:'Archivo';src:url(fonts/archivo-wght.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(fonts/plex-sans-wght.woff2) format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(fonts/plex-mono-500.woff2) format('woff2');font-weight:500 700;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#080b0e;--text:#d3e1e9;--dim:#8a9fab;--white:#eef7fc;
  --card:rgba(15,21,26,.93);--card-solid:#0f151a;--card2:#141d23;--line:#1c2b34;--line-hi:#2b4a5e;
  --sky:#5ab6eb;--sky-hi:#86cdf4;--fill-grad:linear-gradient(180deg,#74c4f1 0%,#4aa6df 100%);--on-fill:#04121b;
  --kelp:#58d0a5;--amber:#f2a33a;--danger:#e8645a;
  --glow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 70px -50px rgba(90,182,235,.38);
  --disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --r:18px;--gutter:56px;--wrap:1328px;--hh:700px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
code{font:500 .92em var(--mono);color:var(--sky-hi)}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--sky);color:var(--on-fill);font-weight:700;padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the pixel sky (sky.js); without WebGL the gradient stays */
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:pixelated;background:linear-gradient(0deg,#0c2b45 0,#0a1d2e 14%,transparent 15%),var(--bg)}
.pg{position:relative;z-index:1;overflow:hidden;overflow:clip;padding-bottom:6px}
.pg:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}

/* nav */
.top{height:76px;display:flex;align-items:center;gap:30px;padding:0 var(--gutter);position:sticky;top:0;z-index:30;background:rgba(8,11,14,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(90,182,235,.13)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:10px}
.brand span{font:800 22px var(--disp);letter-spacing:.32em;color:var(--white)}
.top .links{display:flex;gap:28px}
.top .links a,.gh{font:500 14px var(--font);color:#c6d8e3}
.top .links a{position:relative;padding:6px 0;transition:color .15s}
.top .links a:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sky);transform:scaleX(0);transition:transform .2s}
.top .links a.on{color:var(--white)}.top .links a.on:after{transform:scaleX(1)}
.top .links a:hover,.gh:hover,footer a:hover{color:var(--white)}
@media (prefers-reduced-motion:reduce){.top .links a,.top .links a:after{transition:none}}
.top .sp{flex:1}
.gh{display:flex;align-items:center;gap:8px}
.top .bt{padding:11px 20px;font-size:14px}

/* grid */
.wb{width:min(var(--wrap),100% - 2*var(--gutter));margin:0 auto;position:relative;z-index:1}
.gd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}.s8{grid-column:span 8}.s12{grid-column:span 12}
.cd{background:radial-gradient(120% 90% at 0% 0%,rgba(90,182,235,.07),transparent 55%),var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;position:relative;overflow:hidden;box-shadow:var(--glow)}
/* the app's corner ticks */
.tick{position:absolute;width:18px;height:18px;pointer-events:none;z-index:5;border-color:var(--sky);border-style:solid;opacity:.85}
.tick.tl{left:10px;top:10px;border-width:2px 0 0 2px}.tick.br{right:10px;bottom:10px;border-width:0 2px 2px 0}

/* type */
.lb{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.lb.a{color:var(--amber)}.lb.g{color:var(--kelp)}
.h1,.h2,.t{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;word-spacing:.04em;color:var(--white);line-height:1.12;text-wrap:balance}
.h1{font-size:50px}.h2{font-size:52px}.t{font-size:26px}
.h1 em,.h2 em{font-style:normal;color:var(--sky);padding-bottom:.1em;background:repeating-linear-gradient(90deg,var(--sky) 0 .42em,transparent .42em .52em) 0 100%/100% .09em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.h1 .cur{display:inline-block;width:.42em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--sky);animation:blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.h1 .cur{animation:none}}
.t em{font-style:normal;color:var(--sky)}
p{text-wrap:pretty}
.ps{color:var(--dim);font-size:16px;line-height:1.6}
.nm{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--white)}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--fill-grad);color:var(--on-fill);font:700 15px var(--font);padding:14px 24px;border-radius:10px;white-space:nowrap;box-shadow:0 10px 26px -10px rgba(90,182,235,.55);transition:filter .15s}
.bt:hover{filter:brightness(1.08)}
.bt.o{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bt.o:hover{background:rgba(255,255,255,.13)}
.pills{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.pills>*{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:6px;color:#cfe0ea;background:rgba(255,255,255,.065)}
.pills .a{color:var(--sky-hi);background:rgba(90,182,235,.15)}
.sec{margin-top:120px;scroll-margin-top:100px}
.sh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:end;margin-bottom:34px;position:relative;z-index:2}
.sh .lb{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-bottom:16px}
.sh .lb:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line-hi),rgba(43,74,94,0))}
.sh .h2{grid-column:1}.sh p:not(.lb){grid-column:2;max-width:520px;color:#a9bcc7;padding-bottom:8px}
.sh .h2:last-child{grid-column:1/-1}
.sh:before{content:'';position:absolute;inset:-30px -40px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(8,11,14,.92),rgba(8,11,14,.55) 65%,rgba(8,11,14,0))}
.vhead,.tcap,.fin .r>div{text-shadow:0 1px 12px rgba(8,11,14,.9)}

/* header */
.hdr{margin-top:96px}
.hero{padding:0;height:var(--hh);overflow:visible}
.hero .hclip{position:absolute;inset:0;border-radius:calc(var(--r) - 1px);overflow:hidden}
.hero .hbg{position:absolute;inset:0;background:url(img/hero-orb.webp) right 3% top 44%/auto 86% no-repeat,radial-gradient(42% 60% at 74% 46%,rgba(90,182,235,.12),transparent 70%)}
.hero .hclip{background:#060a0d}
.hero .hsh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,14,.97) 0%,rgba(8,11,14,.93) 44%,rgba(8,11,14,.5) 58%,rgba(8,11,14,0) 72%),linear-gradient(0deg,rgba(8,11,14,.9) 0%,rgba(8,11,14,0) 26%)}
.hero .hlogo{position:absolute;right:30px;top:-70px;z-index:4;display:flex;align-items:center;gap:18px;padding:16px 26px 16px 16px;border-radius:24px;background:rgba(10,15,19,.92);border:1px solid var(--line-hi);box-shadow:0 24px 50px -16px rgba(0,0,0,.75),0 0 0 6px rgba(90,182,235,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero .hlogo img{width:84px;height:84px;border-radius:18px}
.hero .hlogo b{display:block;font:900 54px/0.9 var(--disp);letter-spacing:.3em;margin-right:-.3em;color:var(--white)}
.hero .hlogo i{display:block;width:max-content;white-space:nowrap;margin-top:10px;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--sky)}
.hero .htx{position:absolute;left:44px;top:58px;width:410px;z-index:3}
.hero .h1{margin:22px 0 18px}.hero .ps{color:#c3d4de;font-size:16.5px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero .hspace{display:none}
.chip{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:8px;background:rgba(90,182,235,.09);box-shadow:inset 0 0 0 1px rgba(90,182,235,.32);font:500 14px var(--font);color:#d6ebf6}
.chip b{padding:3px 9px;border-radius:5px;background:var(--sky);color:var(--on-fill);font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* the hero's row: Systems as the app draws its tabs */
.hrow{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none}
.tab{display:flex;flex-direction:column;gap:3px;padding:11px 12px 10px;border-radius:8px;background:rgba(9,14,18,.86);border:1px solid #1d2c35;min-width:0}
.tab b{display:flex;align-items:center;gap:8px;font:600 12.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap}
.tab span{font:400 12px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab em{font-style:normal;color:var(--sky-hi)}
.tab i{order:-1;display:none}
.tab b:before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid #4e6270;flex:none}
.tab.on b:before{background:var(--kelp);border-color:var(--kelp)}
.tab.busy{border-color:rgba(90,182,235,.55);background:linear-gradient(180deg,rgba(90,182,235,.13),rgba(9,14,18,.88))}
.tab.busy b:before{background:var(--sky);border-color:var(--sky);box-shadow:0 0 0 0 rgba(90,182,235,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(90,182,235,.55)}70%{box-shadow:0 0 0 7px rgba(90,182,235,0)}100%{box-shadow:0 0 0 0 rgba(90,182,235,0)}}
@media (prefers-reduced-motion:reduce){.tab.busy b:before{animation:none}}

.stack{display:grid;gap:16px;grid-template-rows:minmax(0,1fr) auto;height:var(--hh)}
.runs{padding:22px 28px 18px;display:flex;flex-direction:column;color:inherit;transition:border-color .15s}.runs:hover{border-color:var(--line-hi)}
.runs .lb{display:flex;justify-content:space-between;gap:12px}.runs .lb span+span{color:var(--dim)}
.runs ul{list-style:none;margin-top:10px}
.runs li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0;border-top:1px solid var(--line);font:400 12.5px/1.45 var(--mono);color:var(--dim)}.runs li:first-child{border-top:0}
.runs li b{font-weight:500;font-size:13.5px;color:var(--white);white-space:nowrap}.runs li span{text-align:right}
.pm{padding:0;display:flex;flex-direction:column;transition:border-color .15s}.pm:hover{border-color:var(--line-hi)}
.pm .ph{display:block;flex:1;min-height:0;position:relative;overflow:hidden;background:#05080a}
.pm .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.pm .tx{display:block;padding:14px 28px 18px}.pm .r{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pm b{font:800 20px var(--disp);letter-spacing:-.01em;color:var(--white)}.pm .ps{display:block;margin-top:6px;font-size:15px;line-height:1.45}
.vid{padding:0;height:360px;display:block;color:#fff}
.vid .bg{position:absolute;inset:0;background:url(img/trailer-thumb.webp) 50% 50%/cover no-repeat;filter:brightness(.74);transition:filter .2s}
.vid:hover .bg{filter:brightness(.85)}
.vid .sc{position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(0deg,rgba(8,11,14,0),rgba(8,11,14,.9) 70%)}
.vid .play{position:absolute;left:50%;top:46%;width:84px;height:84px;margin:-42px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 12px rgba(90,182,235,.16)}
.vid .play:after{content:'';position:absolute;left:33px;top:25px;border:17px solid transparent;border-left:26px solid var(--on-fill);border-right:0}
.vid .cap{position:absolute;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;gap:16px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.agent{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:360px;scroll-margin-top:100px}
.term{margin:0;padding:26px 22px;background:#05080a;border-right:1px solid var(--line);font:400 12.5px/1.75 var(--mono);color:#b7cbd6;white-space:pre;overflow:hidden}
.term .pr{color:var(--sky)}.term .dim{color:#5b707c}.term .on{color:var(--kelp)}.term .busy{color:var(--sky-hi)}
.term .cur{display:inline-block;width:8px;height:15px;margin-left:4px;vertical-align:-2px;background:var(--sky);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.term .cur{animation:none}}
.agent .tx{padding:28px 28px 26px;display:flex;flex-direction:column}.agent .t{margin:10px 0 10px}.agent .ps{font-size:15px}
.agent .pr{margin-top:auto}
.tele{padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none}
.tele li{padding:22px 24px 20px;display:flex;flex-direction:column;border-left:1px solid var(--line)}.tele li:first-child{border-left:0}
.tele .lb{color:var(--sky)}.tele .nm{margin:12px 0 10px;font-size:48px}.tele .ps{margin-top:auto;font:400 12.5px/1.4 var(--mono);color:var(--dim)}

/* systems: full-width chapters */
.sys .gd{row-gap:16px}
.eb{padding:0;height:360px}.eb.ft{height:420px}
.eb .bg{position:absolute;top:0;bottom:0;width:64%;background-size:cover;background-position:0 0;background-repeat:no-repeat}
.eb.l .bg{right:0}.eb.r .bg{left:0;background-position:100% 0}
.eb .ov{position:absolute;inset:0}
.eb.l .ov{background:linear-gradient(90deg,var(--tint) 0,var(--tint) 40%,transparent 64%)}.eb.r .ov{background:linear-gradient(270deg,var(--tint) 0,var(--tint) 40%,transparent 64%)}
.eb .tx{position:absolute;top:50%;transform:translateY(-50%);width:500px;z-index:3}.eb.l .tx{left:44px}.eb.r .tx{right:44px}
.ro{margin:14px 0 6px;font:800 64px/1 var(--disp);letter-spacing:-.03em;color:var(--white)}
.ro small{margin-left:10px;font:500 15px var(--mono);letter-spacing:.06em;color:var(--sky)}
.eb .t{margin:4px 0 8px}.eb p:not(.ro){color:#c3d4de;font-size:15.5px;margin-bottom:14px}

/* skins: viewer + thumbnails + the nine-at-once strip */
/* the two panes share one height: 3:2 next to 8:9 means columns of 1.5 : 0.889, and the row stretches both */
.vhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-bottom:18px}.vhead .t{font-size:32px}.vhead .ps{margin:0}
.viewer{display:grid;grid-template-columns:minmax(0,1.6875fr) minmax(0,1fr);gap:16px}
.pane{position:relative;margin:0;display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line-hi);background:#05080a;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 8px rgba(90,182,235,.04)}
.pane img{display:block;flex:1;min-height:0;width:100%;height:100%;object-fit:cover;border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
.pane figcaption{padding:9px 14px 9px 38px;border-bottom:1px solid var(--line);border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;background:#0a0f13;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sky-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcap{margin:22px 0 10px}
.thumbs{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;list-style:none;margin:0}
.thumbs button{display:block;width:100%;padding:5px 5px 7px;border-radius:10px;border:1px solid var(--line);background:var(--card-solid);color:var(--dim);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,color .15s}
.thumbs img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;margin-bottom:7px;opacity:.82;transition:opacity .15s}
.thumbs button:hover{color:var(--white);border-color:var(--line-hi)}.thumbs button:hover img{opacity:1}
.thumbs button[aria-pressed=true]{color:var(--on-fill);background:var(--sky);border-color:var(--sky)}.thumbs button[aria-pressed=true] img{opacity:1}
.strip{margin-top:40px;padding:22px 22px 24px}
.strip .sr-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:flex;gap:4px;padding:4px;border-radius:10px;background:rgba(255,255,255,.05)}
.seg button{border:0;background:none;color:var(--dim);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:7px;cursor:pointer}
.seg button:hover{color:var(--white)}
.seg button[aria-pressed=true]{background:var(--sky);color:var(--on-fill)}
.strip video{width:100%;border-radius:8px;background:#05080a;image-rendering:pixelated}

/* history */
.hist{list-style:none;position:relative;padding-top:34px}
.hist:before{content:'';position:absolute;left:12.5%;right:12.5%;top:9px;height:2px;background:repeating-linear-gradient(90deg,var(--line-hi) 0 10px,transparent 10px 14px)}
.cal{overflow:visible}.cal:before{content:'';position:absolute;left:50%;top:-31px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg);border:2px solid var(--line-hi)}
.cal.now:before{background:var(--sky);border-color:var(--sky);box-shadow:0 0 0 5px rgba(90,182,235,.2)}
.cal{padding:12px 12px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}
.cal img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:10px;background:#05080a}
.cal b{display:block;margin-top:16px;font:800 24px var(--disp);color:var(--white)}
.cal p{margin:6px 10px 14px;font-size:14.5px;color:var(--dim);line-height:1.5}
.cal span{margin-top:auto;display:inline-block;padding:5px 11px;border-radius:6px;background:rgba(255,255,255,.065);font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cal.now{background:linear-gradient(180deg,rgba(90,182,235,.16),rgba(90,182,235,.03)),var(--card);border-color:var(--line-hi)}
.cal.now span{background:var(--sky);color:var(--on-fill)}

/* platforms */
.bento .cd{padding:28px 30px;display:flex;flex-direction:column;transition:border-color .15s}
.bento a.cd:hover{border-color:var(--line-hi)}
.bento .big{min-height:220px}.bento .big b{font:800 44px/1 var(--disp);letter-spacing:-.02em}
.bento b{font:800 24px var(--disp);color:var(--white)}.bento .ps{margin-top:10px;font-size:15.5px}.bento .pills{margin-top:auto;padding-top:16px}
.bento .big .ps{font-size:17px}
.bento .reqs{padding:20px 30px;flex-direction:row;gap:26px;align-items:baseline}.reqs p{font-size:15px;color:var(--dim)}.reqs .lb{flex:none}

/* final call */
.fin .im{height:380px;border-radius:var(--r);background:url(img/skin-loom-image.webp) 50% 38%/cover no-repeat;border:1px solid var(--line);box-shadow:var(--glow)}
.fin .r{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:30px}
.fin .h2{margin-top:12px}.fin .ps{margin-top:10px;max-width:560px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* leases: two Systems on one time line, the steps under it */
.chip:hover{box-shadow:inset 0 0 0 1px rgba(90,182,235,.6)}
.lease{padding:26px 30px 28px}
.lease .lh{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-bottom:26px}
.lease .cmd{padding:9px 14px;border-radius:8px;background:#05080a;box-shadow:inset 0 0 0 1px var(--line);font:400 13.5px/1.5 var(--mono);color:#cfe0ea;overflow-wrap:anywhere}
.lease .cmd .pr{color:var(--sky)}
.lease .ex{transition:color .3s}.lease.done .ex{color:var(--kelp)}
.lanes{--lw:190px;--lg:20px;position:relative;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);gap:10px var(--lg)}
.lane{display:contents}
.lane .tab{justify-content:center;transition:border-color .2s,background .2s}
.tab.go b:before{background:var(--amber);border-color:var(--amber)}
.tab.park{border-style:dashed;border-color:rgba(90,182,235,.45)}.tab.park b:before{border-color:var(--sky)}
.track{position:relative;min-height:46px;border-radius:8px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.sg{position:absolute;top:5px;bottom:5px;left:calc(var(--a) * 100% + 2px);width:calc((var(--b) - var(--a)) * 100% - 4px);border-radius:5px;display:flex;align-items:center;padding:0 10px;overflow:hidden;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sg span{overflow:hidden;text-overflow:ellipsis}
.sg.busy{background:var(--fill-grad);color:var(--on-fill)}
.sg.go{background:repeating-linear-gradient(135deg,#f2a33a 0 6px,#d98c2a 6px 12px);color:#1d1305}
.sg.park{background:repeating-linear-gradient(135deg,rgba(90,182,235,.12) 0 6px,transparent 6px 12px);box-shadow:inset 0 0 0 1px rgba(90,182,235,.5);color:var(--sky-hi)}
.axis{grid-column:2;position:relative;height:24px}
.axis:before{content:'';position:absolute;left:0;right:0;top:11px;height:1px;background:repeating-linear-gradient(90deg,var(--line-hi) 0 6px,transparent 6px 10px)}
.axis span,.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--card-solid);box-shadow:inset 0 0 0 1.5px var(--line-hi);font:600 12px var(--mono);color:var(--dim);transition:background .2s,color .2s,box-shadow .2s}
.axis span{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(-50%)}
.lanes .head{display:none;position:absolute;top:-8px;bottom:30px;left:calc(var(--lw) + var(--lg) + var(--t, .5) * (100% - var(--lw) - var(--lg)));width:2px;margin-left:-1px;background:var(--white);box-shadow:0 0 14px 1px rgba(90,182,235,.8);pointer-events:none}
.lanes.run .head{display:block}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.steps li{display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.5;color:var(--dim);transition:color .2s}
.steps li.on{color:var(--text)}
.steps li.on b,.lanes[data-step="1"] .axis span:nth-child(1),.lanes[data-step="2"] .axis span:nth-child(2),.lanes[data-step="3"] .axis span:nth-child(3),.lanes[data-step="4"] .axis span:nth-child(4),.lanes[data-step="5"] .axis span:nth-child(5){background:var(--sky);color:var(--on-fill);box-shadow:0 0 0 4px rgba(90,182,235,.18)}
.lcards{margin-top:16px}

/* footer */
footer{width:min(var(--wrap),100% - 2*var(--gutter));margin:56px auto 0;padding:26px 0 36px;display:flex;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;border-top:1px solid var(--line);color:var(--dim);font-size:14px;position:relative;z-index:1}
footer a{color:#c6d8e3}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}

/* ---------------------------------------------------------------- laptop: the hero takes the full row */
@media (max-width:1359px){
  .hero{grid-column:span 12}
  .stack{grid-column:span 12;height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .pm .tx{margin-top:auto}
  .vid,.agent{grid-column:span 12}
  .vid{height:min(560px,(100vw - 2 * var(--gutter)) * 9 / 16)}
  .tele{grid-template-columns:repeat(3,minmax(0,1fr))}.tele li:nth-child(4){border-left:0}.tele li:nth-child(n+4){border-top:1px solid var(--line)}
  .pm .ph{flex:none;aspect-ratio:22/21}
  .eb .tx{width:min(500px,100% - 480px)}
}
/* ---------------------------------------------------------------- tablet */
@media (max-width:1023px){
  :root{--gutter:32px}
  .hist:before,.cal:before{display:none}.hist{padding-top:0}
  .top .links{display:none}
  .h2{font-size:44px}
  .sec{margin-top:96px}
  .hero .htx{width:380px}
  .hrow{grid-template-columns:repeat(3,minmax(0,1fr))}.hrow .tab:nth-child(n+4){display:none}
  .eb,.eb.ft{height:auto;display:flex;flex-direction:column}
  .eb .bg,.eb.l .bg,.eb.r .bg{position:relative;left:auto;right:auto;width:100%;height:300px;order:2;background-position:0 0}
  .eb .ov{display:none}
  .eb{background:var(--tint)}
  .eb .tx,.eb.l .tx,.eb.r .tx{position:relative;left:auto;right:auto;top:auto;transform:none;width:auto;max-width:620px;padding:34px 32px 18px}
  .cal{grid-column:span 6}
  .vid .cap .lb+.lb{display:none}
  .thumbs{gap:6px}.thumbs button{padding:4px 4px 6px;font-size:10px;letter-spacing:.04em}
  .lanes{--lw:160px}.sg.go span{display:none}
  .steps{gap:14px}.steps li{font-size:14px}
  .agent{grid-template-columns:1fr;height:auto}
  .term{border-right:0;border-bottom:1px solid var(--line)}
  .bento .big b{font-size:36px}
  .fin .r{flex-direction:column;align-items:flex-start;gap:22px}
}
/* laptop and tablet: the photo two rows tall, the backends card and the trailer beside it, all in the hero's grid */
@media (min-width:760px) and (max-width:1359px){
  .stack{display:contents}
  .pm{grid-column:span 6;grid-row:span 2}.pm .ph{flex:1 0 auto}
  .runs{grid-column:span 6}
  .vid{grid-column:span 6;height:auto;min-height:300px}
}
/* ---------------------------------------------------------------- phone */
@media (max-width:759px){
  :root{--gutter:16px;--r:16px}
  .top{height:64px;gap:12px}
  .brand img{width:34px;height:34px}.brand span{font-size:19px}
  .gh span{display:none}
  .top .bt{padding:9px 14px;font-size:13px}
  .h1{font-size:36px}.h2{font-size:34px}.t{font-size:23px}
  .h2 em{white-space:nowrap}
  .sec{margin-top:80px}
  .sh{margin-bottom:26px}
  .hdr{margin-top:80px}
  .hero{height:auto;display:flex;flex-direction:column}
  .hero .hbg{background:url(img/hero-orb.webp) 50% calc(100% - 78px)/auto 300px no-repeat,radial-gradient(60% 34% at 50% 82%,rgba(90,182,235,.14),transparent 70%)}
  .hero .hsh{background:linear-gradient(0deg,rgba(8,11,14,.8) 0,rgba(8,11,14,0) 120px,rgba(8,11,14,0) 300px,rgba(8,11,14,.95) 420px,rgba(8,11,14,.97) 100%)}
  .hero .hlogo{right:auto;left:50%;top:-56px;transform:translateX(-50%);padding:10px 18px 10px 10px;gap:12px;border-radius:18px}
  .hero .hlogo img{width:64px;height:64px;border-radius:14px}
  .hero .hlogo b{font-size:40px}.hero .hlogo i{font-size:8.5px;letter-spacing:.12em;margin-top:8px}
  .hero .htx{position:relative;left:auto;top:auto;width:auto;padding:70px 22px 0}
  .hero .hspace{display:block;height:380px}
  .hrow{left:12px;right:12px;bottom:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.hrow .tab:nth-child(n+3){display:none}
  .vid .cap .lb{font-size:10.5px;letter-spacing:.08em}
  .tele{grid-template-columns:repeat(2,minmax(0,1fr))}.tele li{padding:18px}.tele li:nth-child(odd){border-left:0}.tele li:nth-child(4){border-left:1px solid var(--line)}.tele li:nth-child(n+3){border-top:1px solid var(--line)}
  .tele .nm{font-size:40px}
  .sh{grid-template-columns:1fr}.sh p:not(.lb){grid-column:1;margin-top:14px}
  .eb .bg,.eb.l .bg,.eb.r .bg{height:210px}
  .eb .tx,.eb.l .tx,.eb.r .tx{padding:28px 22px 14px}
  .ro{font-size:48px}
  .thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.thumbs button{font-size:11px;letter-spacing:.1em}
  .viewer{grid-template-columns:1fr;gap:20px}.vhead .t{font-size:28px}
  .cal{grid-column:span 12}
  .lease{padding:20px 18px 22px}
  .lanes{grid-template-columns:minmax(0,1fr);row-gap:8px}.lanes .axis{grid-column:auto}.lanes.run .head{display:none}
  .lane .tab{margin-top:6px}
  .axis span{width:20px;height:20px;font-size:11px;top:2px}
  .sg:not(.park) span{display:none}.sg.busy:nth-child(2) span{display:block}
  .steps{grid-template-columns:1fr}.steps li{flex-direction:row;align-items:baseline}.steps b{flex:none;transform:translateY(6px)}
  .bento .cd{grid-column:span 12}
  .bento .big{min-height:0}
  .bento .reqs{flex-direction:column;gap:8px;padding:18px 22px}
  .fin .im{height:220px}
  .term{font-size:11px;padding:20px 16px}
  footer{flex-direction:column}
}