/* Use cases page (P2). Only values the homepage panel already uses.
   .kx-use-cases-label  = the card's "Sources" label (11px, 600, #607482) with a divider above, like the card's rec block.
   .kx-use-cases-figure = the card heading type (17px, 15px on a phone, Manrope 600).
   The anchor rule keeps a story's label clear of the sticky header when a "See: ..." link jumps to it. */
.hd .kx-use-cases-label{margin-top:6px;padding:14px 0 0;border-top:1px solid #dbe3e9;font-size:11px;font-weight:600;line-height:1.5;color:#607482}
.hd .kx-use-cases-figure{padding:8px 0 4px;font:600 17px/1.3 NexusManrope,Manrope,system-ui,sans-serif;letter-spacing:-.01em;color:#202d32}
.k-panel[id^="use-cases-story-"]{scroll-margin-top:var(--site-section-space)}
/* A rec block inside a fold-down gets the same 12px the fold's own paragraphs get below them. */
.hd-more .hd-rec{margin-bottom:12px}
/* On a phone the card is narrower than the kit table's 300px minimum, which cut the right-hand column off; let the table fit and wrap. */
@media(max-width:640px){.hd .kx-use-cases-figure{font-size:15px}.hd-table table{min-width:0}}

/* ---- The workspace (13 Oct, James: "one big interactive dashboard where you can toggle between the different examples").
   .kx-uc-desk  = one frame for every example: the site's pale stage, 1px line, 20px corners (the panel frame's own values).
   .kx-uc-rail  = the list of jobs: the homepage's navy, cyan label, pale type; the highlight (.kx-uc-thumb) slides to the pick.
   .kx-uc-stage = the selected example: the shared Slack panel, unchanged, minus its own outer frame (the desk is the frame).
   Colours and type sizes are the homepage's own. Phones: the rail is a row you swipe, kept in reach under the header. */
.kx-uc-rail[hidden],.kx-uc-panel[hidden]{display:none}
.kx-uc-desk{margin-top:3rem;text-align:left}
.kx-uc-desk.is-on{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:8px;align-items:stretch;padding:8px;border:1px solid #d6e2ea;border-radius:20px;background:#edf3f8}
.kx-uc-rail{padding:.75rem;border-radius:14px;background:#173249}
/* The list stays in view while a long example scrolls past. */
.kx-uc-rail-in{position:sticky;top:6rem}
.kx-uc-rail .kx-uc-rail-title{margin:0;padding:.75rem .75rem .875rem;font:600 13px/18.2px var(--site-body,Inter,system-ui,sans-serif);letter-spacing:normal;color:#dbeaf4}
.kx-uc-tabs{position:relative;display:grid;gap:2px}
.kx-uc-tabs [role="tab"]{position:relative;z-index:1;min-height:48px;padding:.625rem .75rem;border:0;border-radius:10px;background:none;font:400 1rem/1.7 var(--site-body,Inter,system-ui,sans-serif);letter-spacing:normal;text-align:left;color:#dbeaf4;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .16s ease,transform .1s ease-out}
.kx-uc-tabs [role="tab"]:hover{color:#fff}
.kx-uc-tabs [role="tab"]:active{transform:scale(.98)}
.kx-uc-tabs [role="tab"][aria-selected="true"]{color:#fff}
.kx-uc-tabs [role="tab"]:focus-visible{outline:2px solid #35b9e4;outline-offset:2px}
/* The highlight is one element that travels to the selected job, so the eye follows the change instead of a blink. */
.kx-uc-thumb{position:absolute;left:0;top:0;width:0;height:0;border-radius:10px;background:#14638f;transition:transform .32s cubic-bezier(.2,.9,.3,1),width .32s cubic-bezier(.2,.9,.3,1),height .32s cubic-bezier(.2,.9,.3,1)}
.kx-uc-thumb.is-placing{transition:none}
.kx-uc-stage{min-width:0;padding:0 .5rem .5rem}
.kx-uc-desk.is-on .kx-uc-panel>.hd-label{margin-top:1.25rem}
body main.homepage .home-demo .kx-uc-desk.is-on .home-demo-frame.hd{padding:0!important;border:0;background:none;box-shadow:none}
.kx-uc-desk.is-on .kx-uc-panel{animation:kx-uc-in .22s ease-out both}
@keyframes kx-uc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kx-uc-panel:focus-visible{outline:2px solid #2180b8;outline-offset:4px;border-radius:16px}
@media(max-width:900px){
 .kx-uc-desk.is-on{display:block;padding:6px;border-radius:18px}
 .kx-uc-rail{position:sticky;top:4.625rem;z-index:3;padding:0 0 .5rem;border-radius:13px}
 .kx-uc-rail-in{position:static}
 .kx-uc-rail .kx-uc-rail-title{padding:.875rem 1rem .5rem}
 .kx-uc-tabs{display:flex;gap:4px;padding:0 .5rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .kx-uc-tabs::-webkit-scrollbar{display:none}
 .kx-uc-tabs [role="tab"]{flex:none;min-height:44px;padding:.375rem .875rem;white-space:nowrap;scroll-snap-align:center}
 .kx-uc-stage{padding:0}
 .kx-uc-desk.is-on .kx-uc-panel>.hd-label{margin:1rem .5rem 0}
}
@media(prefers-reduced-motion:reduce){
 .kx-uc-thumb,.kx-uc-tabs [role="tab"]{transition:none}
 .kx-uc-desk.is-on .kx-uc-panel{animation:none}
}

/* 13 Oct ~20:45 UTC: the rail title uses the site's small label style in pale blue; the uppercase cyan label it copied is gone from the homepage. */

/* 13 Oct ~21:40 UTC: the workspace takes the Slack panels' new stage (the viktor.com still): the gradient is the desk, the list of
   jobs sits straight on it, and the selected panel's white window floats on the same backdrop. */
.kx-uc-desk.is-on{gap:12px;padding:12px;border:0;border-radius:28px;background-color:transparent;background-image:radial-gradient(70% 50% at 10% 0%,rgba(98,216,255,.2) 0%,rgba(98,216,255,0) 60%),linear-gradient(150deg,#071a33 0%,#0f3a62 52%,#2180b8 100%);box-shadow:0 44px 90px -56px rgba(7,26,51,.8)}
.kx-uc-desk.is-on .kx-uc-rail{background-color:transparent}
.kx-uc-desk.is-on .kx-uc-stage{padding:12px 12px 12px 4px}
@media(max-width:900px){
 .kx-uc-desk.is-on{padding:8px;border-radius:22px}
 .kx-uc-desk.is-on .kx-uc-rail{background-color:#173249}
 .kx-uc-desk.is-on .kx-uc-stage{padding:8px 0 0}
}