/* Four value demonstrations. Neutral palette aligned with the KuWork website. */
#capabilities.kw-values{position:relative;min-height:0!important;width:100vw!important;max-width:none!important;margin:0!important;margin-left:50%!important;transform:translateX(-50%);padding:68px 0 0;overflow:hidden;background:#fff;border:0;color:#242529}
#capabilities.kw-values:before,#capabilities.kw-values:after{display:none}
#capabilities.kw-values .workverse-heading{height:auto!important;padding:0 24px!important;position:relative;z-index:2}
#capabilities.kw-values .workverse-heading p{max-width:860px;margin-inline:auto}
#capabilities .kw-values-grid{position:relative;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(8,1fr);justify-content:center;width:100%;max-width:1381px;margin:-70px auto -60px;background:#e8e8e8;isolation:isolate;--kv-tile-width:138.126px;--kv-tile-height:126.951px;--kv-scene-scale:1;mask-image:linear-gradient(90deg,transparent 2%,#000 10%,#000 90%,transparent 98%),linear-gradient(transparent 5%,#000 15%,#000 85%,transparent 95%);mask-composite:intersect}
#capabilities .kw-value-perimeter{display:contents}
#capabilities .kw-value-cell{grid-column:var(--c);grid-row:calc(var(--r) + 1);display:flex;box-sizing:border-box;width:var(--kv-tile-width);height:var(--kv-tile-height);align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#fff;color:#838383;font-size:14px;line-height:1.4;border:1px solid transparent;border-right-color:#e8e8e8;border-bottom-color:#e8e8e8;text-align:center}
#capabilities .kw-value-cell svg{width:24px;height:24px;flex-shrink:0}
#capabilities .kw-value-card{position:relative;min-width:0;overflow:hidden;border:0;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;border-radius:0;background:#ffffff;isolation:isolate;transition:border-color .18s,box-shadow .2s;--tone:#555555;--wash:#f5f5f5;--paper-shadow:0 5px 20px #35353506}
#capabilities .kw-value-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(155deg,var(--wash),#ffffff 80%);transition:opacity .18s;opacity:.85}
#capabilities .kv-support{grid-column:4/span 2;grid-row:3/span 2;border-bottom-right-radius:12px;--tone:#555555;--wash:#f5f5f5}
#capabilities .kv-collaborate{grid-column:6/span 2;grid-row:3/span 2;border-bottom-left-radius:12px;--tone:#555555;--wash:#f5f5f5}
#capabilities .kv-reuse{grid-column:4/span 2;grid-row:5/span 2;border-top-right-radius:12px;--tone:#555555;--wash:#f5f5f5}
#capabilities .kv-continue{grid-column:6/span 2;grid-row:5/span 2;border-top-left-radius:12px}
#capabilities .kw-value-card h3{position:absolute;inset:auto 0 30px;display:flex;align-items:center;justify-content:center;gap:9px;margin:0;font-family:inherit;font-size:26px!important;font-weight:600;line-height:32.5px;letter-spacing:-.4px;color:#272727}
#capabilities .kw-value-card h3>i{display:grid;place-items:center;width:25px;height:25px;color:var(--tone);font-style:normal}
#capabilities .kw-value-card h3 svg{width:24px;height:24px;stroke-width:2}
#capabilities .kv-scene{position:absolute;top:19px;left:50%;width:240px;height:167px;max-width:none;transform:translateX(-50%) scale(var(--kv-scene-scale));transform-origin:top center;pointer-events:none;font-size:12px;line-height:1.35;user-select:none}
#capabilities .kv-scene svg{width:15px;height:15px;flex-shrink:0}
#capabilities .kv-brief{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:100%;height:29px;padding:0 11px;margin:0 auto 10px;border:1px solid #eaded055;background:#fffdfb;border-radius:7px;color:#695c50;box-shadow:var(--paper-shadow)}
#capabilities .kv-team-list{display:flex;flex-direction:column;gap:6px}
#capabilities .kv-person{display:flex;align-items:center;gap:8px;padding:7px 9px;height:35px;border:1px solid #eddfd755;border-radius:7px;background:#fffffff5;box-shadow:var(--paper-shadow);white-space:nowrap}
#capabilities .kv-person strong{font-size:12px;font-weight:500;color:#51525b}
#capabilities .kv-person>span{margin-left:auto;color:#929197;font-size:12px}
#capabilities .kv-person>b{font-size:11px;font-weight:500;color:#8db49f}
#capabilities .kv-avatar{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;flex-shrink:0}
#capabilities .kv-avatar svg{width:14px;height:14px}
#capabilities .peach{color:#bb906a;background:#fcf0e4}
#capabilities .blue{color:#7a9eb6;background:#eaf4fb}
#capabilities .lilac{color:#a18aac;background:#f2edf7}
#capabilities .kv-connect{top:18px}
#capabilities .kv-scene .kv-wires{position:absolute;inset:0;width:100%;height:100%;stroke:#bdd8eb;stroke-width:1.3;stroke-dasharray:3 3}
#capabilities .kv-source{position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid #e1ecf4;border-radius:6px;padding:6px 8px;font-size:11px;color:#72899f;box-shadow:var(--paper-shadow)}
#capabilities .kv-source-a{left:0;top:3px;transform:rotate(-4deg)}
#capabilities .kv-source-b{right:0;top:3px;transform:rotate(4deg)}
#capabilities .kv-source-c{left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap}
#capabilities .kv-task{position:absolute;top:48px;left:50%;width:82%;padding:10px 12px;transform:translateX(-50%);background:#fff;border:1px solid #dce9f7;border-radius:8px;box-shadow:0 8px 24px #6e9fc412}
#capabilities .kv-task-head{display:flex;gap:7px;align-items:center;color:#4a6b88;font-weight:500}
#capabilities .kv-summary{margin-top:8px;color:#6593b3;font-size:12px;padding-top:7px;border-top:1px solid #edf2f7}
#capabilities .kv-summary>span{display:block;font-size:10px;color:#a0afbe;margin-top:2px}
#capabilities .kv-method-sheet{position:absolute;left:6px;top:4px;width:72%;height:127px;background:#fff;border:1px solid #eddfed;border-radius:7px;padding:11px 12px;transform:rotate(-6deg);box-shadow:var(--paper-shadow)}
#capabilities .kv-sheet-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#876e86;margin-bottom:9px;white-space:nowrap}
#capabilities .kv-method-line{display:flex;align-items:center;gap:7px;color:#a293a2;font-size:12px;margin-top:5px}
#capabilities .kv-method-line i{font-style:normal;font-size:9px;color:#b7a9b7}
#capabilities .kv-new-task{position:absolute;right:0;bottom:0;width:82%;border:1px solid #e9dbea;border-radius:8px;background:#fff;padding:11px;box-shadow:0 8px 24px #a986ac0d}
#capabilities .kv-new-heading{font-size:10px;color:#b2a2b2;display:flex;align-items:center;gap:8px}
#capabilities .kv-new-heading>span{font-size:12px;font-weight:500;color:#746275}
#capabilities .kv-method-pills{display:flex;gap:5px;margin-top:9px}
#capabilities .kv-method-pills>span{flex:1;text-align:center;padding:3px 0;border-radius:4px;background:#f8f2f8;color:#aa8aab;font-size:10px}
#capabilities .kv-applied{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:10px;color:#a68ca7}
#capabilities .kv-applied svg{width:12px;height:12px}
#capabilities .kv-report{position:absolute;top:0;left:10px;width:82%;height:134px;border:1px solid #e3e2f2;border-radius:7px;background:#fff;padding:12px;transform:rotate(3deg);box-shadow:var(--paper-shadow)}
#capabilities .kv-report-heading{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:500;color:#686987}
#capabilities .kv-report-heading>span{margin-left:auto;font-size:8px;color:#b1afc5}
#capabilities .kv-report-lines{display:flex;flex-direction:column;gap:5px;margin-top:11px}
#capabilities .kv-report-lines>i{display:block;width:80%;height:3px;border-radius:3px;background:#edecf5}
#capabilities .kv-report-lines>i+ i{width:57%}
#capabilities .kv-chart{position:relative;display:flex;gap:10px;align-items:flex-end;margin:10px 0 0;height:42px;border-bottom:1px solid #eeedf4;padding:0 6px}
#capabilities .kv-chart>i{flex:1;height:var(--height);background:linear-gradient(#d6d5ee,#eeeefa);border-radius:2px 2px 0 0;transform-origin:bottom}
#capabilities .kv-chart>i:nth-child(2){background:linear-gradient(#bfbddd,#e7e6f5)}
#capabilities .kv-chart>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a9a6d0;stroke-width:1.2}
#capabilities .kv-update{position:absolute;bottom:2px;right:0;display:flex;align-items:center;gap:7px;width:96%;padding:10px 8px;background:#fff;border:1px solid #e5e3f1;border-radius:8px;box-shadow:0 8px 22px #7874ab10;transform:rotate(-2deg)}
#capabilities .kv-member-stack{display:flex;padding-right:3px}
#capabilities .kv-member-stack>i{display:grid;place-items:center;width:22px;height:22px;border:2px solid white;border-radius:50%;font-style:normal;font-size:9px;color:#947c6c;background:#eaded5}
#capabilities .kv-member-stack>i+i{margin-left:-7px;background:#dcdff0;color:#8288a5}
#capabilities .kv-update strong{display:block;font-size:11px;font-weight:500;color:#73718c;white-space:nowrap}
#capabilities .kv-update span{display:block;font-size:8px;color:#b0adbd;margin-top:3px;white-space:nowrap}
#capabilities .kv-update>b{margin-left:auto;color:#a3b7aa;font-weight:500}
#capabilities .kv-replay{position:absolute;inset:0;z-index:5;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent!important;box-shadow:none!important;cursor:pointer;color:#979797;outline-offset:-4px}
#capabilities .kv-replay[hidden]{display:none!important}
#capabilities .kv-replay:focus-visible{outline:2px solid #707070!important}
#capabilities .kv-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(hover:hover) and (pointer:fine){
 #capabilities .kw-value-card:hover{z-index:2;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}
 #capabilities .kw-value-card:hover h3{color:#161616}
 #capabilities .kw-value-card:hover:before{opacity:1}
}
#capabilities .kw-value-card.is-playing .kv-step{animation:kv-step-in 650ms cubic-bezier(.2,.65,.3,1) both;animation-delay:var(--delay,0s)}
#capabilities .kv-collaborate.is-playing .kv-wires{animation:kv-wire 2s ease both}
#capabilities .kv-continue.is-playing .kv-chart>i{animation:kv-bar 1.2s cubic-bezier(.2,.65,.3,1) both;animation-delay:.35s}
#capabilities .kw-values-grid.kv-enter .kw-value-card{animation:kv-arrive 240ms ease both;animation-delay:var(--entry,0ms)}
#capabilities .kv-collaborate{--entry:80ms}#capabilities .kv-reuse{--entry:160ms}#capabilities .kv-continue{--entry:240ms}
@keyframes kv-step-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes kv-wire{0%{opacity:.2;stroke-dashoffset:30}50%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes kv-bar{from{scale:1 .15;opacity:.3}to{scale:1 1;opacity:1}}
@keyframes kv-arrive{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 #capabilities .kw-value-card,#capabilities .kv-step,#capabilities .kv-wires,#capabilities .kv-chart>i{animation:none!important;transition:none!important}
 #capabilities .kv-replay{display:none!important}
}

/* Original 24×24 assets exported from the user-provided Figma icon library. */
#capabilities .kw-value-card h3 img.kv-figma-icon{display:block;width:24px;height:24px;max-width:none;flex-shrink:0}

/* Fixed scene composition: panels and connector coordinates share the same 240×167 canvas. */
#capabilities .kv-method-sheet{top:0;height:114px;padding:9px 12px}
#capabilities .kv-sheet-label{margin-bottom:5px;font-size:11px}
#capabilities .kv-method-line{line-height:14px;margin-top:2px}
#capabilities .kv-new-task{height:76px;padding:8px 10px}
#capabilities .kv-new-heading{line-height:16px}
#capabilities .kv-method-pills{margin-top:6px}
#capabilities .kv-method-pills>span{padding:2px 0;line-height:14px}
#capabilities .kv-applied{margin-top:5px;line-height:12px}
/* ClickUp reference: fixed ten-column board, centered and clipped; four center cards never reflow. */
@media(max-width:1000px){
 #capabilities .kw-values-grid{justify-items:center;margin-top:-50px;padding:0 20px;--kv-tile-width:96.139px;--kv-tile-height:81.331px;--kv-content-scale:0.6421156697973307}
 #capabilities .kw-value-card{width:192.991px;height:163.376px}
 #capabilities .kw-value-cell{gap:0;font-size:9.803px;line-height:15.248px}
 #capabilities .kw-value-cell svg{width:16px;height:16px}
}
@media(max-width:900px){
 #capabilities.kw-values{padding-top:48px;padding-bottom:48px}
 #capabilities .kw-values-grid{--kv-tile-width:88.139px;--kv-content-scale:0.6393619436875567}
 #capabilities .kw-value-card{width:176.991px}
}
@media(max-width:600px){
 #capabilities .kw-values-grid{margin-bottom:-40px}
 #capabilities.kw-values .workverse-heading{padding-inline:20px!important}
}

/* Figma assets retain their 24px canvas; the explicitly positioned child scales within its slot. */
#capabilities .kv-perimeter-icon{display:block;position:relative;width:24px;height:24px;flex:0 0 auto}
#capabilities .kv-perimeter-icon>img{position:absolute;left:0;top:0;display:block;width:24px;height:24px;max-width:none;opacity:.49;transform-origin:0 0}
@media(max-width:1000px){
 #capabilities .kv-perimeter-icon{width:16px;height:16px}
 #capabilities .kv-perimeter-icon>img{transform:scale(.6666666667)}
}

/* Scale the entire composition once: illustration, title, icon and spacing share one fixed canvas. */
#capabilities .kv-card-content{position:absolute;top:50%;left:50%;width:275.25px;height:252.875px;transform:translate(-50%,-50%) scale(var(--kv-content-scale,1));transform-origin:center;pointer-events:none}