/* What we build (ADR 0021), ported from the approved prototype. Prefix k-. */
/* 25-build: what we build. Prefix k-.
   A category rail and a living stage. Every scene is drawn in the logo's language: ink, white, and one orange dot where the work lands.
   Base styles show every end state. The script adds .k-motion to the root only when motion is allowed, then each scene assembles when shown. */
.k-root{position:relative;background:var(--paper);color:var(--ink);padding-block:clamp(72px,8vw,128px) clamp(48px,4.4vw,72px);overflow-x:clip}
.k-h2{font-size:var(--fs-h2);max-width:20ch}
.k-h2 span{display:block}
.k-lead{margin-top:clamp(14px,1.4vw,22px);font-size:var(--fs-lead);color:var(--muted-2);max-width:60ch}
.k-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.k-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "stage" "desc";margin-top:clamp(28px,3.4vw,56px)}
.k-railbox{grid-area:rail;position:relative;min-width:0}
.k-stage{grid-area:stage;min-width:0}
.k-desc{grid-area:desc;min-width:0}

/* the rail: a row of tabs that scrolls sideways on phones; a column of rows from 1024 */
.k-rail{position:relative;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:calc(var(--gutter) - 12px) var(--gutter)}
.k-rail::-webkit-scrollbar{display:none}
.k-rail::after{content:"";flex:none;width:calc(var(--gutter) - 12px)}
@media (max-width:1023px){.k-rail{scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)} .k-tab{scroll-snap-align:center}}
.k-tab{position:relative;flex:none;display:flex;align-items:center;min-height:52px;margin:0;padding:0 14px 0 34px;border:0;border-radius:2px;background:none;font:inherit;font-size:16px;font-weight:700;line-height:1.25;color:var(--mwa-muted);cursor:pointer;scroll-snap-align:start;white-space:nowrap;text-align:left;transition:color 200ms var(--mwa-ease)}
.k-tab:hover,.k-tab[aria-selected="true"]{color:var(--ink)}
.k-tab:focus-visible{outline-offset:-2px}
/* each tab carries a small bar on the baseline; it rises on hover, and the travelling dot lands over the active one */
/* an idle tab's bar lies flat on its baseline; it stands up on hover, and the active one is the logo's short bar with the dot over it */
.k-tab::before{content:"";position:absolute;left:14px;bottom:calc(50% - 7px);width:10px;height:14px;background:var(--line-strong);transform-origin:50% 100%;transform:scaleY(.2);transition:transform 260ms var(--mwa-ease),background-color 200ms}
.k-tab:hover::before{transform:scaleY(1);background:var(--ink)}
.k-tab[aria-selected="true"]::before{transform:scaleY(.5);background:var(--ink)}
.k-prog{position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.k-tab[aria-selected="true"] .k-prog{transform:scaleX(1)}
.k-auto .k-tab[aria-selected="true"] .k-prog{animation:k-prog var(--k-auto,9000ms) linear both}
@keyframes k-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.k-ll{display:none}
.k-rdot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--beacon);pointer-events:none;will-change:transform}
.k-rline{height:1px;background:var(--line)}

/* the stage: a surface band that runs to the page edge, with an ink ground the devices stand on */
.k-stage{position:relative;margin:18px calc(-1*var(--gutter)) 0;padding:16px var(--gutter) 14px;background:var(--surface);overflow:hidden}
.k-for{display:block;min-height:22px;font-size:14px;font-weight:600;color:var(--muted-2);line-height:1.35}
.k-for b{font-weight:700;color:var(--ink)}
.k-scenes{position:relative;height:var(--k-h,440px);margin-top:12px;container-type:size}
.k-ground{position:absolute;left:-100vw;right:-100vw;bottom:-4px;height:4px;background:var(--ink);transform-origin:0 50%}
/* three lines of room, so the stage keeps one height from category to category and the ground never jumps */
.k-cap{margin-top:16px;min-height:4.35em;max-width:70ch;line-height:1.45}
.k-cap a{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.k-scene{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;visibility:hidden}
.k-scene.is-on{visibility:visible}
.k-scene.is-out{visibility:visible;animation:k-sink 380ms var(--ease-move) forwards;pointer-events:none}
@keyframes k-sink{to{clip-path:inset(100% 0 0 0);transform:translateY(18px)}}

/* description of the active category, under the rail from 1024 and under the stage on phones */
.k-desc{margin-top:22px}
.k-d{display:none}
.k-d.is-on{display:block}
.k-dt{font-size:var(--fs-body);font-weight:600;line-height:1.5;max-width:46ch}
.k-real{margin-top:12px;font-size:var(--fs-small);line-height:1.5;color:var(--muted-2);max-width:52ch}
.k-real b{color:var(--ink);font-weight:700}
.k-real a{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* the close: the price line and the one action */
.k-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(36px,4vw,64px)}
.k-mem{font-size:clamp(20px,1.7vw,26px);font-weight:500;line-height:1.3;letter-spacing:-.01em;max-width:46ch;text-wrap:pretty}
.k-mem b{font-weight:800}
@media (max-width:599px){ .k-foot .btn{width:100%} }

@media (max-width:599px){
  .k-scenes{--k-h:470px}
}
@media (min-width:600px){
  .k-scenes{--k-h:500px}
}
@media (min-width:1024px){
  .k-body{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"rail stage" "desc stage";grid-template-rows:auto 1fr;column-gap:clamp(36px,4vw,72px)}
  .k-rail{flex-direction:column;overflow:visible;margin:0;padding:0;scroll-snap-type:none;border-top:1px solid var(--line)}
  .k-tab{width:100%;min-height:clamp(58px,4.6vw,68px);padding:10px 0 10px 34px;white-space:normal;font-size:clamp(17px,1.3vw,20px);border-bottom:1px solid var(--line)}
  .k-tab::before{left:6px}
  .k-prog{left:34px;right:0;bottom:-1px}
  .k-ls{display:none} .k-ll{display:inline}
  .k-rline{display:none}
  .k-desc{margin-top:28px}
  /* the stage's right edge keeps a clear column the width of the floating Ask Maya launcher (24px in, 56px wide), so it never covers a device */
  .k-stage{margin:0 calc(-1*(max(0px,(100vw - var(--wrap))/2) + var(--gutter))) 0 0;padding:20px max(104px,calc(max(0px,(100vw - var(--wrap))/2) + var(--gutter))) 16px clamp(24px,2.8vw,48px)}
  .k-scenes{--k-h:max(400px,min(clamp(420px,35vw,600px),calc(100vh - 340px)))}
}

/* ---------- devices ---------- */
.k-shadow{box-shadow:0 24px 48px -24px rgba(17,17,17,.3)}
.k-lap{position:relative}
.k-lid{background:#111111;border-radius:10px 10px 0 0;padding:8px 8px 10px;box-shadow:0 24px 48px -24px rgba(17,17,17,.3)}
.k-disp{position:relative;aspect-ratio:16/10;background:#FFFFFF;border-radius:2px;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}
.k-lbase{position:relative;height:10px;margin:0 -6%;background:#111111;border-radius:0 0 8px 8px}
.k-lbase::after{content:"";position:absolute;left:50%;top:0;width:16%;height:4px;transform:translateX(-50%);background:var(--muted-2);border-radius:0 0 4px 4px}
.k-phone{position:relative;flex:none;height:min(100cqh,560px);aspect-ratio:300/620;background:#111111;border-radius:40px;padding:8px;box-shadow:0 24px 48px -24px rgba(17,17,17,.34)}
.k-phone.is-b{border-radius:30px}
.k-scr{position:relative;height:100%;background:#FFFFFF;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;container-type:size}
.k-phone.is-b .k-scr{border-radius:22px}
.k-sheet{position:relative;background:#FFFFFF;box-shadow:0 24px 48px -24px rgba(17,17,17,.3)}
.k-abar{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.k-an{font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.k-as{margin-top:1px;font-size:12px;font-weight:500;color:var(--muted-2);line-height:1.3}
.k-chip{flex:none;padding:3px 7px;border:1px solid var(--line-strong);border-radius:2px;font-size:12px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}

/* typing: the full text holds the space, the typed copy sits over it */
.k-ty{position:relative;display:block}
.k-tg{visibility:hidden}
.k-tt{position:absolute;inset:0}
.k-motion .k-ty.is-hold .k-tt{visibility:hidden}

/* assembling: pieces start hidden only under .k-motion and only until their scene is built */
.k-motion .k-scene [data-a]{transition:clip-path 620ms var(--mwa-ease),transform 620ms var(--mwa-ease),opacity 260ms linear;transition-delay:calc(var(--d,0)*1ms)}
.k-motion .k-scene:not(.is-built) [data-a="rise"]{clip-path:inset(100% 0 -40px 0);transform:translateY(28px)}
.k-motion .k-scene:not(.is-built) [data-a="wipe"]{clip-path:inset(0 100% 0 0)}
.k-motion .k-scene:not(.is-built) [data-a="bar"]{transform:scaleY(0)}
.k-motion .k-scene:not(.is-built) [data-a="line"]{transform:scaleX(0)}
.k-motion .k-scene:not(.is-built) [data-a="down"]{transform:scaleY(0)}
.k-motion .k-scene:not(.is-built) [data-a="fade"]{opacity:0}
[data-a="bar"]{transform-origin:50% 100%}
[data-a="line"]{transform-origin:0 50%}
[data-a="down"]{transform-origin:50% 0}
.k-motion .k-ground{transition:transform 900ms var(--mwa-ease)}
.k-motion:not(.is-seen) .k-ground{transform:scaleX(0)}

/* ---------- scene: websites (real work, A-1 American Driveway) ---------- */
.k-sites{position:relative;width:100%;height:100%;--sky:58px}
.k-sites .k-lap{position:absolute;left:0;bottom:var(--sky);width:min(70cqw,calc((100cqh - var(--sky) - 30px) * 1.6))}
.k-url{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted-2);line-height:1.3;white-space:nowrap}
.k-url>span:first-child{overflow:hidden;text-overflow:ellipsis}
.k-win .k-url>span:first-child{white-space:normal;overflow:visible}
.k-win .k-view{border-top:1px solid var(--line-strong)}
.k-lang{flex:none;display:inline-flex;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden}
.k-lang b{padding:1px 6px;font-size:12px;font-weight:700;color:var(--muted-2);transition:background-color 300ms var(--ease-move),color 300ms}
.k-lang b.is-on{background:var(--ink);color:#FFFFFF}
.k-view{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--surface-2)}
.k-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.k-view .k-es{clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease-move)}
.k-sites.is-es .k-view .k-es{clip-path:inset(0 0 0 0)}
.k-win{position:absolute;right:0;bottom:calc(var(--sky) + 6px);width:34cqw;max-width:300px;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid var(--line-strong);box-shadow:0 24px 48px -24px rgba(17,17,17,.34)}
.k-win .k-view{flex:none;aspect-ratio:4/3}
.k-win .k-pan{position:absolute;top:0;left:0;width:200%;height:auto;max-width:none;inset:auto;object-fit:fill}
.k-motion.k-live .k-scene.is-on .k-pan{animation:k-pan 11s var(--ease-move) 1.6s infinite}
@keyframes k-pan{0%,18%{transform:translate(0,0)}42%,64%{transform:translate(-50%,-10%)}88%,100%{transform:translate(0,0)}}
.k-count{position:absolute;top:0;right:0;text-align:right}
.k-count b{display:block;font-size:clamp(44px,8cqw,76px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.k-count span{display:block;margin-top:4px;font-size:13px;font-weight:600;line-height:1.35;color:var(--muted-2)}
.k-sky{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:flex-end;gap:2px}
.k-sky i{flex:1 1 0;min-width:0;height:100%;background:var(--ink);transform-origin:50% 100%}
.k-sky i:nth-child(even){height:71%}
.k-motion .k-sky i{transition:transform 420ms var(--mwa-ease);transition-delay:calc(var(--i,0)*11ms + 700ms)}
.k-motion .k-scene:not(.is-built) .k-sky i{transform:scaleY(0)}
.k-skydot{position:absolute;left:0;bottom:44px;width:14px;height:14px;margin:0 0 6px -7px;border-radius:50%;background:var(--beacon)}
@container (max-width:560px){
  /* narrow: the laptop stands whole on the URL bars; the estimate request sits above it at the left and the count at the right */
  .k-sites{--sky:50px;--lap:min(96cqw,calc((100cqh - var(--sky) - 180px) * 1.6))}
  .k-count{top:0;bottom:auto}
  .k-sites .k-lap{width:var(--lap);left:calc((100cqw - var(--lap)) / 2)}
  .k-win{top:0;left:0;right:auto;bottom:auto;width:min(50cqw,calc((100cqh - var(--sky) - var(--lap) * .625 - 60px) / .75))}
  .k-sky{height:38px;gap:1px}
  .k-skydot{bottom:38px}
}

/* ---------- scene: staff desks and dashboards ---------- */
.k-desk{width:min(96cqw,calc((100cqh - 30px) * 1.6),780px)}
.k-dbody{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:19% minmax(0,1fr) 36%}
.k-dnav{padding:8px 0;border-right:1px solid var(--line);background:var(--surface)}
.k-dnav span{display:block;padding:7px 12px;font-size:12px;font-weight:600;line-height:1.3;color:var(--muted-2)}
.k-dnav span.is-on{background:var(--surface-2);color:var(--ink);font-weight:800}
.k-trk{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px 12px 0}
.k-th{flex:none;display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;line-height:1.3;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.k-th span{font-weight:600;color:var(--muted-2);font-size:12px}
.k-swin{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.k-steps{position:relative;will-change:transform}
.k-motion .k-steps{transition:transform 560ms var(--ease-move)}
.k-step{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;height:30px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mwa-muted);white-space:nowrap}
.k-step>span{overflow:hidden;text-overflow:ellipsis}
.k-mk{position:relative;width:12px;height:12px;background:var(--line)}
.k-mk::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform 360ms var(--mwa-ease)}
.k-step.is-done{color:var(--ink)}
.k-step.is-done .k-mk::after,.k-step.is-now .k-mk::after{transform:scaleY(1)}
.k-step.is-now{color:var(--ink);font-weight:800}
.k-motion .k-step.is-now .k-mk{visibility:hidden}
.k-sv{font-size:12px;font-weight:700;color:var(--muted-2)}
.k-step.is-now .k-sv{color:var(--ink)}
.k-ddot{position:absolute;left:6px;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--beacon);will-change:transform}
.k-motion .k-ddot{transition:transform 520ms var(--ease-move)}
.k-mini{flex:none;padding:10px 0 12px}
.k-mini[hidden]{display:none}
.k-mt{font-size:12px;font-weight:800;line-height:1.3}
.k-mbars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;height:clamp(40px,9cqw,72px);margin-top:8px;border-bottom:2px solid var(--ink)}
.k-mbars i{display:block;height:var(--h);background:var(--ink)}
.k-mdays{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:4px;font-size:12px;font-weight:600;color:var(--muted-2);text-align:center}
.k-flds{min-width:0;padding:10px 12px;border-left:1px solid var(--line);background:var(--surface);overflow:hidden}
.k-fh{font-size:12px;font-weight:800;line-height:1.3;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.k-fr{display:grid;gap:1px;padding:7px 0;border-bottom:1px solid var(--line-strong);font-size:12px;line-height:1.35}
.k-fr:last-child{border-bottom:0}
.k-fr span{color:var(--muted-2)}
.k-fr b{font-weight:700;color:var(--ink)}
.k-motion .k-fr{transition:clip-path 520ms var(--mwa-ease)}
.k-motion .k-fr:not(.is-in){clip-path:inset(0 100% 0 0)}
@container (max-width:560px){
  .k-desk{width:min(84cqw,calc((100cqh - 24px) * .75))}
  .k-desk .k-lid{border-radius:22px;padding:10px}
  .k-desk .k-disp{aspect-ratio:3/4;border-radius:12px}
  .k-desk .k-lbase{display:none}
}
@container (max-width:470px){
  .k-mini{display:none}
  .k-dnav{display:none}
  .k-dbody{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .k-flds{border-left:0;border-top:1px solid var(--line);padding-top:8px}
  .k-flds .k-fh{display:none}
  .k-fr{grid-template-columns:5.4em minmax(0,1fr);gap:8px;padding:5px 0}
}

/* ---------- scene: apps ---------- */
.k-apps{display:flex;align-items:flex-end;justify-content:center;gap:clamp(24px,6cqw,64px);height:100%}
.k-apps .k-phone{height:min(calc(100cqh - 34px),540px)}
.k-pt{flex:none;padding:26px 16px 12px;border-bottom:1px solid var(--line)}
.k-pb{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:14px 14px 16px}
.k-q{font-size:13px;font-weight:800;line-height:1.3}
.k-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:4px;font-size:13px;font-weight:600;line-height:1.3;transition:background-color 240ms var(--mwa-ease),color 240ms,border-color 240ms}
.k-opt i{flex:none;width:12px;height:12px;border:1.5px solid currentColor;border-radius:2px}
.k-opt.is-sel{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.k-opt.is-sel i{background:#FFFFFF}
.k-plat{position:absolute;left:0;right:0;bottom:100%;margin-bottom:12px;text-align:center;font-size:13px;font-weight:700;line-height:1.2;color:var(--muted-2)}
.k-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.k-slot{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 3px;border:1px solid var(--line-strong);border-radius:4px;font-size:12px;font-weight:700;line-height:1.25;text-align:center;transition:background-color 240ms var(--mwa-ease),color 240ms,border-color 240ms}
.k-slot.is-sel{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.k-xrow{display:flex;justify-content:space-between;gap:10px;margin-top:4px;padding:10px 0 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.35}
.k-xrow span{color:var(--muted-2)}
.k-xrow b{font-weight:700;text-align:right}
.k-cta{position:relative;margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:2px;background:var(--ink);color:#FFFFFF;font-size:14px;font-weight:700;text-align:center;transition:transform 160ms var(--mwa-ease)}
.k-cta.is-press{transform:translateY(1px) scale(.98)}
.k-ring{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--mwa-muted);pointer-events:none;opacity:0}
.k-ring.is-tap{animation:k-tap 560ms var(--mwa-ease)}
@keyframes k-tap{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(1.15)}}
.k-done{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 24px;background:var(--ink);color:#FFFFFF}
.k-motion .k-done{transition:transform 560ms var(--mwa-ease)}
.k-motion .k-done:not(.is-in){transform:translateY(101%)}
.k-done b{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;line-height:1.3}
.k-done span{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:#DAD5CD}
.k-sq{flex:none;width:11px;height:11px;background:#FFFFFF}
/* one codebase, two stores: the Android phone stands a size smaller behind the iPhone's right edge, like a product shot */
.k-apps .k-phone{z-index:2}
.k-apps .k-phone.is-b{z-index:1;height:min(calc(100cqh - 96px),452px);margin-left:calc(-1 * clamp(24px,6cqw,64px) - clamp(30px,6cqw,56px))}
@container (max-width:560px){ .k-apps .is-b{display:none} .k-plat{display:none} .k-apps .k-phone{height:min(100cqh,540px)} }
@container (max-height:470px){ .k-plat{display:none} .k-apps .k-phone{height:min(100cqh,540px)} }

/* ---------- scene: AI hires on every channel ---------- */
.k-board{position:relative;width:min(100%,780px);display:flex;flex-direction:column;align-self:flex-end}
.k-bh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 16px 10px;border-bottom:2px solid var(--ink)}
.k-lane{position:relative;display:grid;grid-template-columns:clamp(116px,21cqw,168px) minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:clamp(12px,2.6cqh,20px) 16px;border-bottom:1px solid var(--line);transition:background-color 300ms var(--mwa-ease)}
.k-lane:last-child{border-bottom:0}
.k-lane.is-act{background:var(--surface)}
.k-chn{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;line-height:1.3}
.k-lmk{position:relative;flex:none;width:12px;height:12px;background:var(--line-strong);transition:background-color 200ms}
.k-lane.is-act .k-lmk,.k-lane.is-did .k-lmk{background:var(--ink)}
.k-lane.is-dot .k-lmk{visibility:hidden}
.k-meter{flex:none;display:inline-flex;align-items:flex-end;gap:2px;height:16px;margin-left:4px;visibility:hidden}
.k-lane.is-act .k-meter{visibility:inherit}
.k-meter i{width:5px;height:100%;background:var(--ink);transform-origin:50% 100%}
.k-meter i:nth-child(2){height:71%}
.k-live .k-lane.is-think .k-meter i{animation:k-talk 520ms var(--ease-move) infinite alternate}
.k-lane.is-think .k-meter i:nth-child(2){animation-delay:-180ms}
.k-lane.is-think .k-meter i:nth-child(3){animation-delay:-340ms}
@keyframes k-talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.k-ex{min-width:0;display:grid;gap:3px;font-size:13px;line-height:1.4}
.k-in{color:var(--muted-2)}
.k-out b{font-weight:800;color:var(--ink)}
.k-st{justify-self:end;padding:3px 7px;border:1px solid var(--line-strong);border-radius:2px;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;background:#FFFFFF}
.k-lane.is-did .k-st{border-color:var(--ink)}
.k-motion .k-in{transition:clip-path 480ms var(--mwa-ease)}
.k-motion .k-lane:not(.is-in) .k-in{clip-path:inset(0 100% 0 0)}
/* a channel at work never empties: its answer types in ink over its own pale text, and its status waits pale until it stamps */
.k-motion .k-ty.is-typing .k-tg{visibility:visible;color:var(--line-strong)}
.k-motion .k-ty.is-typing .k-tg b{color:var(--line-strong)}
.k-st{transition:color 240ms var(--mwa-ease),border-color 240ms var(--mwa-ease)}
.k-motion .k-lane.is-pend .k-st{color:var(--line-strong);border-color:var(--line)}
.k-hdot{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--beacon);will-change:transform}
.k-motion .k-hdot{transition:transform 560ms var(--ease-move)}
@container (min-width:601px){
  .k-board{height:100%}
  .k-lane{flex:1 1 0;min-height:0}
}
@container (max-width:600px){
  .k-lane{grid-template-columns:minmax(0,1fr) auto;padding:8px 12px;gap:4px 12px}
  .k-in{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .k-bh{padding:10px 12px 8px}
  .k-chn{grid-column:1}
  .k-st{grid-column:2;grid-row:1}
  .k-ex{grid-column:1 / -1;font-size:12.5px;gap:2px}
  .k-meter{margin-left:6px}
}

/* ---------- scene: weekly reports ---------- */
.k-rep{width:min(100%,620px);padding-bottom:16px}
.k-rh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 18px 12px;border-bottom:2px solid var(--ink)}
.k-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.k-kpi{min-width:0;padding:12px 18px 12px;border-right:1px solid var(--line)}
.k-kpi:last-child{border-right:0}
.k-kpi b{display:block;font-size:clamp(26px,5.4cqw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.k-kpi span{display:block;margin-top:3px;font-size:12px;font-weight:600;line-height:1.3;color:var(--muted-2)}
.k-chart{padding:14px 18px 0}
.k-ct{font-size:12.5px;font-weight:700;line-height:1.3}
.k-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1.6cqw,12px);align-items:end;height:clamp(70px,25cqh,150px);margin-top:10px;border-bottom:2px solid var(--ink)}
.k-bars i{display:block;height:var(--h);background:var(--ink)}
.k-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1.6cqw,12px);margin-top:5px;font-size:12px;font-weight:600;color:var(--muted-2);text-align:center}
.k-needs{display:flex;align-items:flex-start;gap:10px;margin:14px 18px 0;padding:10px 12px;background:var(--surface-2);font-size:13px;line-height:1.4}
.k-needs b{font-weight:800}
.k-ndot{flex:none;width:12px;height:12px;margin-top:3px;border-radius:50%;background:var(--beacon)}
.k-motion .k-ndot{transition:transform 620ms var(--mwa-ease),opacity 200ms linear}
.k-motion .k-scene:not(.is-built) .k-ndot,.k-motion .k-rep:not(.is-flag) .k-ndot{transform:translateY(-46px);opacity:0}
.k-src{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 18px 0;font-size:12px;font-weight:600;line-height:1.3;color:var(--muted-2)}
.k-src span{padding:3px 7px;border:1px solid var(--line-strong);border-radius:2px;color:var(--ink);font-weight:700}
@container (max-width:470px){
  .k-kpi{padding:10px 12px}
  .k-chart,.k-rh{padding-inline:12px}
  .k-needs,.k-src{margin-inline:12px}
}

/* ---------- scene: connections. The visitor's own tools stand as three small screens; a wire runs from each into the staff
   desk, and the dot (the AI hire) carries each new piece of work along its wire and lands on the desk row it just wrote ---------- */
.k-conn{position:relative;width:100%;height:100%;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);column-gap:clamp(44px,9cqw,104px);align-items:end}
.k-tools{display:flex;flex-direction:column;gap:clamp(10px,2.2cqh,16px);align-self:end;height:min(calc(100% - 12px),470px);padding-bottom:12px}
/* a tool is a small screen of its own records, newest at the bottom: one row per record, a square for an entry, the logo's three
   bars for a call, an amount block for a ledger line. A row's bar is as long as the record's own words; pale rows are older records. */
.k-tool{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:10px 12px 8px;background:#FFFFFF;border:1px solid var(--line-strong);box-shadow:0 18px 36px -24px rgba(17,17,17,.3);transition:border-color 240ms var(--mwa-ease)}
.k-tool.is-send{border-color:var(--ink)}
.k-tn{flex:none;display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;line-height:1.25}
.k-tn span{font-weight:600;color:var(--muted-2);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-tb{position:relative;flex:1 1 auto;min-height:0;margin-top:7px;border-top:2px solid var(--ink);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.k-tbi{flex:none;will-change:transform}
.k-tr{display:grid;grid-template-columns:10px 4.2em minmax(0,1fr) auto;gap:8px;align-items:center;height:24px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted-2);white-space:nowrap;transition:background-color 300ms var(--mwa-ease),color 300ms}
.k-tr:last-child{border-bottom:0}
.k-trm{display:block;width:8px;height:8px;margin-left:1px;background:currentColor}
.k-tool[data-kind="call"] .k-trm{width:10px;height:10px;margin:0;background:linear-gradient(currentColor,currentColor) 0 100%/2.8px 100% no-repeat,linear-gradient(currentColor,currentColor) 50% 100%/2.8px 66% no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/2.8px 100% no-repeat}
.k-trb{display:block;width:var(--w,60%);height:6px;background:currentColor}
.k-tra{display:none;width:24px;height:6px;background:currentColor}
.k-tool[data-kind="led"] .k-tra{display:block}
.k-tr.is-old{color:var(--line)}
.k-tr.is-old b{display:block;width:3.2em;height:6px;background:currentColor}
.k-tr.is-rec{color:var(--line-strong)}
.k-tr.is-rec b{color:var(--muted-2)}
.k-tr.is-hot{color:var(--ink);background:var(--surface-2)}
.k-tr.is-hot b{color:var(--ink)}
.k-motion .k-tr.is-in{animation:k-wipe 420ms var(--mwa-ease) both}
/* the port where a tool's wire leaves it, beside its newest row */
.k-port{position:absolute;right:-5px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--line-strong);transition:background-color 220ms var(--mwa-ease)}
.k-tool.is-send .k-port{background:var(--ink)}
/* the desk: today's rows hang on one line, the spine its wires join; rows still to come hold their place as quiet blocks */
.k-desk2{position:relative;align-self:end;height:min(calc(100% - 24px),458px);margin-bottom:12px;display:flex;flex-direction:column;min-height:0}
.k-desk2::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:2px;background:var(--line);pointer-events:none}
.k-desk2 .k-abar{position:relative;padding-left:36px}
.k-log{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:4px 14px 8px}
.k-lg{position:relative;display:grid;grid-template-columns:12px 4.8em minmax(0,1fr);gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.k-lg:last-child{border-bottom:0}
.k-lg b{font-weight:700;font-variant-numeric:tabular-nums}
.k-lgm{display:block;width:10px;height:10px;margin:4px 0 0 1px;background:var(--ink)}
.k-lg.is-gone{display:none}
.k-lg.is-dot .k-lgm{visibility:hidden}
.k-motion .k-lg.is-new{animation:k-wipe 520ms var(--mwa-ease) both}
.k-motion .k-lg.is-wait b,.k-motion .k-lg.is-wait span{color:transparent;background:var(--surface-2)}
.k-motion .k-lg.is-wait .k-lgm{background:var(--line)}
.k-wires{position:absolute;inset:0;pointer-events:none}
.k-wire{position:absolute;left:0;top:0;height:2px;margin-top:-1px;background:var(--line-strong);transform-origin:0 50%;transition:background-color 220ms var(--mwa-ease)}
.k-wire.is-v{width:2px;margin:0 0 0 -1px;transform-origin:50% 0}
.k-wire.is-hot{background:var(--ink)}
.k-bus{display:none}
.k-motion .k-scene:not(.is-built) .k-wire{transform:scaleX(0)}
.k-motion .k-scene:not(.is-built) .k-wire.is-v{transform:scaleY(0)}
.k-motion .k-wire{transition:transform 560ms var(--mwa-ease) calc(var(--d,0)*1ms),background-color 220ms var(--mwa-ease)}
/* the dot is one unit, the size of the desk's row squares it lands on */
.k-cdot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--beacon);z-index:2;will-change:transform}
@container (max-width:560px){
  .k-conn{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 34px minmax(0,1fr);align-items:stretch}
  .k-tools{flex-direction:row;height:auto;gap:8px;padding:0;align-self:start}
  .k-tool{flex:1 1 0;min-width:0;height:118px;padding:8px 8px 6px}
  .k-tn{flex-direction:column;gap:2px;font-size:12px}
  .k-tr{grid-template-columns:8px minmax(0,1fr) auto;gap:6px;height:19px}
  .k-tr b{display:none !important}
  .k-tra{width:14px}
  .k-port{right:auto;left:50%;top:auto;bottom:-5px;margin:0 0 0 -4px}
  .k-desk2{grid-row:3;align-self:stretch;height:auto;margin:0 0 10px}
  .k-lg{grid-template-columns:12px 4.4em minmax(0,1fr);gap:8px;padding:7px 0;font-size:12.5px}
  .k-desk2 .k-abar{padding-left:34px}
  .k-bus{display:block}
}
/* replay, pause and wipe helpers */
.k-reset,.k-reset *{transition:none !important;animation:none !important}
.k-paused .k-prog{animation-play-state:paused !important}
@keyframes k-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.k-motion .k-for.k-re{animation:k-wipe 560ms var(--mwa-ease)}
.k-motion .k-d.is-on>*{animation:k-up 560ms var(--mwa-ease) both}
.k-motion .k-d.is-on>*+*{animation-delay:110ms}
@keyframes k-up{from{clip-path:inset(0 0 100% 0);transform:translateY(16px)}to{clip-path:inset(-4px -4px -12px -4px);transform:none}}
.k-motion .k-scene.k-enter{animation:k-enter 300ms var(--mwa-ease) both}
@keyframes k-enter{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-80px -80px 0 -80px)}}
.k-cap a{white-space:nowrap}