/* Preview only: front page proposal 3 (da/forside-skitse3.html). After personio.com's front page: the headline, then a row
   of module tabs (Core and the add-ons) that switch a simplified, clickable Komma app with the product's sidebar and top bar.
   One glass panel sticks out of the window per view. The window runs under the next section through a fade. */
.hero.kw{min-height:0;padding:calc(var(--bar) + 56px) 0 0;background:radial-gradient(70% 60% at 50% 0%,#FFFFFF 0%,#F2F9F4 50%,#E3F2E8 100%);overflow:hidden}
.hero.kw::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:clamp(90px,9vw,130px);background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;z-index:3}
.hero.kw>.wrap{position:relative;z-index:1;text-align:center}
.hero.kw h1{margin:0 auto;max-width:14ch;font-size:clamp(42px,6.4vw,96px)}
.hero.kw .lead{max-width:620px;margin:22px auto 0}
.hero.kw .ctas{justify-content:center;margin-top:26px}

/* the tab row: Core as the filled tab, the add-ons as light glass pills */
.kw-tabs{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;margin:clamp(34px,4vw,54px) auto 26px;padding:0 16px;flex-wrap:wrap}
.kw-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border:1px solid #fff;border-radius:999px;background:rgba(255,255,255,.72);color:#1A2233;font:600 14px/1 var(--sans);cursor:pointer;box-shadow:0 0 0 1px rgba(8,50,30,.05),0 12px 26px -18px rgba(8,50,30,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.kw-tabs button .hi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#E3F2E9;color:#00693E;font-size:15px;transition:background .25s,color .25s}
.kw-tabs button em{font-style:normal;margin-left:2px;padding:3px 7px;border-radius:99px;background:#E3F1E9;color:#00693E;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.kw-tabs button:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(8,50,30,.08),0 16px 30px -18px rgba(8,50,30,.55)}
.kw-tabs button[aria-selected="true"]{background:#00693E;color:#fff;border-color:#00693E}
.kw-tabs button[aria-selected="true"] .hi{background:rgba(255,255,255,.18);color:#fff}
.kw-tabs button[aria-selected="true"] em{background:rgba(255,255,255,.22);color:#fff}
.kw-tabs button:focus-visible{outline:2px solid #00A550;outline-offset:3px}

/* the stage: the window in its glass frame, and the panel that sticks out */
.kw-stage{position:relative;width:min(1180px,calc(100% - 32px));margin:0 auto;text-align:left}   /* the hero centres its copy; the app does not */
.kw-win{position:relative;z-index:1;padding:10px;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.55));border:1px solid #fff;box-shadow:0 0 0 1px rgba(8,50,30,.06),0 50px 90px -46px rgba(8,50,30,.55);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.kw-app{display:grid;grid-template-columns:196px minmax(0,1fr);height:auto;min-height:660px;border-radius:24px;overflow:hidden;background:#F6F5F1;box-shadow:0 0 0 1px rgba(8,50,30,.08)}

/* the product's sidebar, in the product's order: top group, the modules, settings */
.kw-side{contain:size;overflow:hidden;display:flex;flex-direction:column;background:#0B5A36;color:#fff;padding:14px 10px 12px;font:500 13.5px/1 var(--sans)}
.kw-lg{display:flex;align-items:center;gap:10px;height:40px;margin:0 6px 10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.kw-lg svg{width:22px;height:24px;fill:#fff}
.kw-lg b{font:600 15px/1 var(--sans)}
/* the fold (Mark 23-10): the sidebar folds in to its icons and the view gets the room */
.kw-app{transition:grid-template-columns .3s cubic-bezier(.22,1,.36,1)}
.kw-fold{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:none;color:rgba(255,255,255,.8);cursor:pointer;transition:background .2s,color .2s}
.kw-fold svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.kw-fold:hover{background:rgba(255,255,255,.1);color:#fff}.kw-fold:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.kw-app.mini{grid-template-columns:64px minmax(0,1fr)}
.kw-app.mini .kw-lg{justify-content:center;margin:0 0 10px}.kw-app.mini .kw-lg b,.kw-app.mini .kw-it>span,.kw-app.mini .kw-me>span{display:none}
.kw-app.mini .kw-fold{margin:0}.kw-app.mini .kw-fold svg{transform:scaleX(-1)}
.kw-app.mini .kw-it{justify-content:center;padding:0;width:40px;margin:0 auto}.kw-app.mini .kw-me{justify-content:center;padding:0}
@media (prefers-reduced-motion:reduce){.kw-app,.kw-fold svg{transition:none}}
.kw-grp{display:grid;gap:2px;padding:6px 0}.kw-grp+.kw-grp{border-top:1px solid rgba(255,255,255,.12)}
.kw-grp.bund{margin-top:auto}
.kw-it{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border:0;border-radius:10px;background:none;color:rgba(255,255,255,.86);font:inherit;text-align:left;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.kw-it .hi{width:18px;height:18px;flex:none;font-size:18px}
.kw-it:hover{background:rgba(255,255,255,.1);color:#fff}
.kw-it.on{background:#fff;color:#0B5A36;font-weight:600}
.kw-it:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.kw-me{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;font-size:13px;color:rgba(255,255,255,.86)}
.kw-me img{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.kw-cog{margin-left:auto;font-size:17px;font-style:normal;color:rgba(255,255,255,.7)}.kw-app.mini .kw-cog{display:none}

/* the main area: the product's top bar (title and tabs), then the view */
.kw-main{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0}
.kw-top{display:flex;align-items:center;gap:22px;min-height:60px;padding:0 26px;background:#fff;border-bottom:1px solid #ECEAE4}
.kw-top h2{margin:0;font:500 20px/1.1 var(--serif);color:#1A2233;white-space:nowrap}
.kw-ptabs{display:flex;gap:20px;align-self:stretch;align-items:stretch}
.kw-ptabs span{display:flex;align-items:center;padding:0 2px;font:400 13.5px/1 var(--sans);color:#6B7470;white-space:nowrap}
.kw-ptabs span.on{color:#0B5A36;font-weight:600;box-shadow:inset 0 -2px 0 #0B5A36}
.kw-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.kw-tools img{width:32px;height:32px;border-radius:50%;object-fit:cover}
/* Home: the greeting header is green, as in the product's home */
.kw-top.hi{background:radial-gradient(60% 140% at 85% 0%,#1C8A55,transparent 70%),linear-gradient(120deg,#0B5A36,#137A47);border-bottom:0;color:#fff;min-height:84px}
.kw-top.hi h2{color:#fff;font-size:22px}.kw-top.hi h2 small{display:block;margin-top:5px;font:400 13.5px/1.3 var(--sans);color:rgba(255,255,255,.82)}

/* the view: one strict grid of the same cards as the hero proposal, flown in one after another. Mark 23-10: the cards
   fill the window — two rows that share its height, every card as high as the others in its row, none cut at the foot
   (a view with more content makes the window taller instead) */
.kw-view{position:relative;display:grid;min-width:0}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--rows,2),1fr);gap:18px;align-items:stretch;padding:22px 24px 24px}
.kv.two{grid-template-columns:1.55fr 1fr}
.kv>.vc{min-width:0;display:flex;flex-direction:column}
.kv>.vc>.in{flex:1 1 auto;display:flex;flex-direction:column}
/* the space a card gets from its row goes above its buttons, so the buttons in a row line up at the foot */
.kv>.vc>.in>.v-acts,.kv .kv-adv>.v-acts,.kv .kv-ai>.v-acts{margin-top:auto;padding-top:14px}
.kv>.vc>.in>:is(.kv-adv,.kv-ai,.kv-career,.v-post){flex:1 1 auto;display:flex;flex-direction:column}
.kv .v-post>.v-chip{align-self:flex-start}
.kv>.vc>.in>:is(.v-line,.kv-kb){flex:1 1 auto}
.kv .vc{position:relative;width:auto;padding:0;border:0;background:#fff;box-shadow:0 0 0 1px rgba(26,34,51,.06),0 10px 24px -16px rgba(8,50,30,.3);opacity:0;transform:translate(var(--fx,0),var(--fy,48px)) rotate(var(--fr,0deg)) scale(.94);transition:transform .85s cubic-bezier(.34,1.2,.5,1),opacity .5s ease;transition-delay:var(--d,0s)}
.kv .vc .in{padding:13px 14px 14px;overflow:hidden}
/* Mark 23-10: the same glass frame and frosted face as the module cards, so every view looks alike */
.kv>.vc{padding:7px;border:1px solid rgba(255,255,255,.7);border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22));box-shadow:0 0 0 1px rgba(8,50,30,.05),0 26px 50px -28px rgba(8,50,30,.38)}
.kv>.vc>.in{border-radius:19px;background:rgba(255,255,255,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(26,34,51,.04)}
.kv .vc.w-wide,.kv .vc.w-pill{width:auto}
.kw-app.in .kv .vc{opacity:1;transform:none}
.kw-view.out .kv{opacity:0;transform:scale(.985);transition:opacity .22s ease,transform .22s ease}

/* the panel: one card out over the window's edge, with the same frosted frame as the hero cards */
.kw-panel{position:absolute;z-index:4;pointer-events:none;width:264px;padding:7px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.62));border:1px solid #fff;box-shadow:0 0 0 1px rgba(8,50,30,.06),0 30px 56px -28px rgba(8,50,30,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:400 14px/1.3 var(--sans);color:#1A2233;opacity:0;transform:translateY(24px) scale(.94);transition:opacity .4s ease,transform .7s cubic-bezier(.34,1.3,.5,1)}
.kw-panel.in{opacity:1;transform:none}
.kw-panel>.in{background:#fff;border-radius:17px;padding:13px 14px 14px;box-shadow:0 0 0 1px rgba(26,34,51,.05)}
.kw-panel.pill{width:270px;border-radius:999px}.kw-panel.pill>.in{border-radius:999px;padding:9px}
.kw-panel.pos-tr{right:-28px;top:54px}.kw-panel.pos-br{right:-30px;bottom:150px}.kw-panel.pos-bl{left:-30px;bottom:160px}.kw-panel.pos-l{left:-34px;top:230px}
.kw-panel.wide{width:300px}

/* ── the new cards (px, inside .vc .in) ── */
/* Karma's brief */
.kv-brief .kb-hd{display:flex;align-items:center;gap:9px;font:600 14px/1 var(--sans)}.kv-brief .kb-hd small{font-weight:400;color:#7A857F}
.kv-brief .kb-k{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff 0 3.5px,#00693E 4.5px);box-shadow:0 0 0 3px #E3F2E9;flex:none}
.kv-brief p{margin:10px 0 0;font-size:14.5px;line-height:1.5}
.kv-src{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid #F0EEE9}
.kv-src span{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:#F4F6F3;font:500 12px/1 var(--sans);color:#5B6660}
.kv-src span .hi{font-size:13px;color:#7A857F}.kv-src span.read{background:#E3F1E9;color:#00693E}.kv-src span.read .hi{color:#00A550}
/* an advice card from Karma */
.kv-adv .kv-tag{display:flex;align-items:center;gap:8px}.kv-adv .kv-tag .hi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(160deg,#2BAA68,#00693E);color:#fff;font-size:15px}
.kv-adv .kv-tag em{font-style:normal;padding:3px 8px;border-radius:99px;font-size:11.5px;font-weight:600;background:#E3F1E9;color:#00693E}.kv-adv .kv-tag em.r{background:#FDECEC;color:#B3302B}.kv-adv .kv-tag em.a{background:#FCEFDD;color:#8F5300}
.kv-adv .kv-tag small{margin-left:auto;font-size:11.5px;color:#9AA29D}
.kv-adv>b{display:block;margin-top:10px;font:600 15px/1.3 var(--sans)}
.kv-adv .kv-who{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:13px;color:#5B6660}.kv-adv .kv-who .v-av{width:30px;height:30px}.kv-adv .kv-who .v-av+.v-av{margin-left:-10px}
.kv-adv .kv-advice{display:flex;gap:7px;margin-top:10px;padding:8px 10px;border-radius:12px;background:#F1F8F4;font-size:12.5px;line-height:1.4;color:#1F4D36}.kv-adv .kv-advice .hi{flex:none;font-size:14px;color:#00A550;margin-top:1px}
/* the composer */
.kv-ask{display:flex;align-items:center;gap:10px;padding:0 0 0 10px;font-size:14px;color:#7A857F}.kv-ask .kb-k{width:22px;height:22px;background:radial-gradient(circle,#fff 0 3px,#00693E 4px);box-shadow:none;flex:none}
.kv-ask span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kv-ask i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#00693E;color:#fff;font-size:16px;flex:none}
/* the shift plan: the week, three people, one open shift */
.kv-sp{display:grid;grid-template-columns:86px repeat(5,minmax(0,1fr));gap:6px;align-items:center;font-size:12px}
.kv-sp .d{text-align:center;color:#7A818C;font-size:11px}.kv-sp .d b{display:block;font-size:13px;color:#1A2233}
.kv-sp .who{display:flex;align-items:center;gap:7px;font-weight:550;color:#4F596B;white-space:nowrap;overflow:hidden}.kv-sp .who .v-av{width:24px;height:24px}
.kv-sp .c{min-height:30px}.kv-sp .s{display:grid;padding:4px 6px;border-radius:7px;background:#EAF4EE;border-left:3px solid #00693E;font-size:11px;font-weight:600;color:#0B4F33;line-height:1.2}.kv-sp .s small{font-weight:500;color:#4F6B5B;font-size:10px}
.kv-sp .s.open{background:repeating-linear-gradient(135deg,#FDF6EA 0 5px,#FBEBD3 5px 10px);border:1px dashed #E2A646;border-left:3px solid #E2A646;color:#8F5300}.kv-sp .s.open small{color:#8F5300}
.kv-sp .s.sick{background:#FDECEC;border-left-color:#E83946;color:#B3302B}
/* checks */
.kv-chk{list-style:none;margin:0;padding:0;display:grid;gap:6px}.kv-chk li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:#F1F8F4;font-size:13px}
.kv-chk li .hi{font-size:17px;color:#00A550;flex:none}.kv-chk li.bad{background:#FDF0F0}.kv-chk li.bad .hi{color:#D93644}.kv-chk span{display:grid}.kv-chk small{font-size:11.5px;color:#5B6660}
/* the payroll table */
.kv-tbl{font-size:13px}.kv-tbl .r{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.3fr;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid #F3F1EC}
.kv-tbl .r.h{font-size:11px;font-weight:600;color:#7A818C;border-bottom:1px solid #ECEAE4;padding-top:2px}.kv-tbl .r>*:not(.nm){text-align:right;font-variant-numeric:tabular-nums}
.kv-tbl .nm{display:flex;align-items:center;gap:8px;font-weight:550;white-space:nowrap;overflow:hidden}.kv-tbl .nm .v-av{width:26px;height:26px}.kv-tbl .ab{color:#8F5300}.kv-tbl .mu{color:#B0B6B1}
.kv-tbl .f{display:flex;align-items:center;gap:12px;padding:12px 4px 0}.kv-tbl .f span{display:inline-flex;align-items:center;gap:5px;color:#00693E;font-weight:600;font-size:12.5px}.kv-tbl .f b{margin-left:auto;font:600 20px/1 var(--sans);letter-spacing:-.02em}
/* the org tree */
.kv-tree{display:grid;justify-items:center;gap:0}.kv-tree .nd{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;background:#F6F8F5;font-size:12.5px;white-space:nowrap}.kv-tree .nd .v-av{width:26px;height:26px}
.kv-tree .nd b{display:block;font-size:13px}.kv-tree .nd small{color:#5B6660;font-size:11px}.kv-tree .nd.on{background:#fff;box-shadow:0 0 0 1.5px #00A550}
.kv-tree .ln{width:1.5px;height:14px;background:#BFD8C9}.kv-tree .row{display:flex;gap:8px;position:relative;padding-top:14px}
.kv-tree .row::before{content:"";position:absolute;left:18%;right:18%;top:0;height:1.5px;background:#BFD8C9}.kv-tree .row .nd{position:relative}.kv-tree .row .nd::before{content:"";position:absolute;left:50%;top:-14px;width:1.5px;height:14px;background:#BFD8C9}
.kv-tree .nd.out{opacity:.55}.kv-tree .nd.out b{text-decoration:line-through}
.kv-tree .row{width:100%;justify-content:center}.kv-tree .row .nd{flex:1 1 0;min-width:0;flex-direction:column;gap:4px;padding:7px 4px 8px;text-align:center}.kv-tree .row .nd span{min-width:0}.kv-tree .row .nd b,.kv-tree .row .nd small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kv-tree .row::before{left:16.6%;right:16.6%}
/* assets */
.kv-assets{list-style:none;margin:0;padding:0}.kv-assets li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #F0EEE9;font-size:13px}.kv-assets li:first-child{border-top:0}
.kv-assets li>.hi{width:30px;height:30px;border-radius:9px;background:#E3F2E9;color:#00693E;font-size:16px;flex:none}.kv-assets li span{flex:1;display:grid;min-width:0}.kv-assets li span small{color:#7A857F;font-size:11.5px}
.kv-assets em{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:99px;background:#EFEFEB;color:#4F596B}.kv-assets em.g{background:#E3F1E9;color:#00693E}.kv-assets em.a{background:#FCEFDD;color:#8F5300}
/* a mini kanban for recruiting */
.kv-kb{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.kv-kb>div{padding:8px;border-radius:11px;background:#F6F8F5;display:grid;gap:6px;align-content:start;min-height:120px}
.kv-kb b{display:flex;justify-content:space-between;font-size:11.5px;color:#4F596B}.kv-kb b span{padding:1px 6px;border-radius:99px;background:#fff;font-weight:600}
.kv-kb .kc{display:flex;align-items:center;gap:6px;padding:6px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(26,34,51,.06);font-size:11.5px;font-weight:550;white-space:nowrap;overflow:hidden}.kv-kb .kc .v-av{width:22px;height:22px}.kv-kb .kc.best{box-shadow:0 0 0 1.5px #5CC08A}
.kv-kb .slot{height:34px;border-radius:9px;border:1.5px dashed #BFD8C9}

/* the stage shrinks before the phone layout: the sidebar keeps its labels down to 1040px */
@media (max-width:1040px){
  .kw-app{grid-template-columns:168px minmax(0,1fr)}.kv{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px}.kv.two{grid-template-columns:1.4fr 1fr}
  .kv:not(.two){grid-template-rows:none}.kv:not(.two)>.vc{grid-column:auto!important;grid-row:auto!important}   /* three columns of cards flow into two */
  .kw-panel.pos-tr{right:-16px;top:40px}.kw-panel.pos-br{right:-16px}.kw-panel.pos-bl{left:-16px}.kw-panel.pos-l{left:-16px}
}
@media (max-width:720px){
  .hero.kw{padding-top:calc(var(--bar) + 28px)}
  .kw-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:0 16px 8px;margin:26px 0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.kw-tabs::-webkit-scrollbar{display:none}
  .kw-tabs button{flex:none;scroll-snap-align:start}
  .kw-stage{width:calc(100% - 20px)}
  .kw-win{padding:6px;border-radius:22px}
  .kw-app{grid-template-columns:48px minmax(0,1fr);height:auto;min-height:0;border-radius:16px}
  .kw-side{padding:10px 6px}.kw-fold{display:none}.kw-lg{justify-content:center;margin:0 0 6px}.kw-lg b,.kw-it span,.kw-me span,.kw-cog{display:none}
  .kw-it{justify-content:center;padding:0;height:34px;width:36px;margin:0 auto}.kw-me{justify-content:center;padding:0}
  .kw-top{padding:0 14px;min-height:50px;gap:12px;overflow:hidden}.kw-top h2{font-size:17px}.kw-ptabs{gap:12px;overflow:hidden}.kw-ptabs span{font-size:12.5px}.kw-tools img{width:28px;height:28px}
  .kw-top.hi{min-height:70px}.kw-top.hi h2{font-size:18px}.kw-top.hi h2 small{font-size:12.5px}
  .kv,.kv.two{grid-template-columns:1fr;grid-template-rows:none;gap:12px;padding:14px 12px 18px}.kv>.vc{grid-column:auto!important;grid-row:auto!important}
  .kw-panel{position:static;width:auto;margin:0;transform:none;opacity:1}   /* the panel becomes the first card of the view */
  .kw-panel.pill{width:auto}
  .kw-view{overflow:visible}
  .hero.kw::after{height:90px}
}
@media (prefers-reduced-motion:reduce){
  .kv .vc{transition:none;opacity:1;transform:none}.kw-panel{transition:opacity .2s;transform:none}.kw-view.out .kv{transition:none}
}

/* a subpage hero: the module's own view in the window, under the page's headline (data-view on the hero) */
.hero.kw-sub{min-height:0;padding-bottom:0;overflow:hidden}
.hero.kw-sub .kw-stage{margin-top:clamp(34px,4vw,54px)}
.hero.kw-sub .kw-app{min-height:560px}
.hero.kw-sub::after{height:clamp(90px,9vw,130px)}
.hero.kw-sub .kw-tabs{display:none}
@media (max-width:720px){.hero.kw-sub .kw-app{height:auto}}

/* ── the sidebar's other views: employees, flows, documents, reports, the career site, learning ── */
.kv-emp{display:flex;gap:12px;align-items:center}.kv-emp .v-av.big{width:52px;height:52px;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #CFE6D8}.kv-emp b{display:block;font:500 19px/1.1 var(--serif)}.kv-emp span{font-size:12.5px;color:#5B6660}.kv-emp p{display:flex;gap:4px;margin:6px 0 0}
.kv-dl{margin:12px 0 0;display:grid}.kv-dl div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #F0EEE9;font-size:13px}.kv-dl dt{color:#7A818C}.kv-dl dd{margin:0;font-weight:600}
.kv-team{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.kv-team div{padding:8px 4px;border-radius:12px;background:#F6F8F5;font-size:12px}.kv-team .v-av{width:34px;height:34px;margin:0 auto 5px}.kv-team b{display:block;font-size:12.5px}.kv-team small{color:#7A857F;font-size:11px}
.kv-tpl{list-style:none;margin:0;padding:0}.kv-tpl li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #F0EEE9;font-size:13px}.kv-tpl li:first-child{border-top:0}.kv-tpl li>.hi{width:30px;height:30px;border-radius:9px;background:#E3F2E9;color:#00693E;font-size:16px;flex:none}.kv-tpl li span{flex:1;display:grid}.kv-tpl small{color:#7A857F;font-size:11.5px}.kv-tpl em{font-style:normal;padding:5px 10px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #D8EADF;color:#00693E;font-size:12px;font-weight:600}
.kv-ai .kb-hd{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans)}.kv-ai .kb-k{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 0 3px,#00693E 4px);box-shadow:0 0 0 3px #E3F2E9;flex:none}
.kv-prompt{margin-top:10px;padding:9px 12px;border-radius:14px;background:#F4F6F3;font-size:13px;line-height:1.4;color:#1A2233}.kv-prompt span{font-style:italic}
.kv-built{margin-top:10px}.kv-type{margin:10px 0 0;font-size:13px;line-height:1.45;color:#2A2F3A;padding:9px 12px;border-radius:14px;background:#F4F6F3}
.kv-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.kv-kpi div{padding:10px 8px;border-radius:12px;background:#F6F8F5;text-align:center}.kv-kpi b{display:block;font:600 22px/1 var(--sans);letter-spacing:-.03em}.kv-kpi span{display:block;margin-top:4px;font-size:11px;color:#5B6660}
.kv-sign{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#F6F8F5}.kv-doc{flex:1;display:grid}.kv-doc b{font-size:13.5px}.kv-doc small{color:#7A857F;font-size:11.5px}.kv-sig{font:400 22px/1 var(--serif);font-style:italic;color:#00693E;padding:6px 10px;border-bottom:1.5px solid #00693E;transform:rotate(-4deg)}
.kv-career ul{list-style:none;margin:8px 0 0;padding:0}.kv-career li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 2px;border-top:1px solid #F0EEE9;font-size:13px}.kv-career li span{display:grid}.kv-career small{color:#7A857F;font-size:11.5px}.kv-career em{font-style:normal;padding:3px 8px;border-radius:99px;background:#E3F1E9;color:#00693E;font-size:11.5px;font-weight:600;white-space:nowrap}
.kv-chero{padding:14px 14px 16px;border-radius:14px;background:linear-gradient(120deg,#0B5A36,#137A47);color:#fff}.kv-chero b{display:block;font:500 20px/1.1 var(--serif)}.kv-chero span{font-size:12.5px;color:rgba(255,255,255,.8)}
.kv-course{list-style:none;margin:0;padding:0}.kv-course li{display:grid;grid-template-columns:1.4fr 1fr auto;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid #F0EEE9;font-size:13px}.kv-course li:first-child{border-top:0}.kv-course span{display:grid;min-width:0}.kv-course small{color:#7A857F;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-course i{height:7px;border-radius:99px;background:#EDF0EC;overflow:hidden}.kv-course i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#00A550,#00693E)}.kv-course em{font-style:normal;font-size:12px;font-weight:600;padding:3px 8px;border-radius:99px;background:#EFEFEB;color:#4F596B}.kv-course em.g{background:#E3F1E9;color:#00693E}.kv-course em.a{background:#FCEFDD;color:#8F5300}
.kv-dept span{width:62px}

/* ── small effects when a view lands: bars grow, the curve draws, the flow's steps light up, the layoff fades ── */
.kw-app.in .v-bar i,.kf-stage.in .v-bar i,.kw-app.in .v-wk i b,.kf-stage.in .v-wk i b,.kw-app.in .kv-course i b,.kf-stage.in .kv-course i b{animation:kfGrow 1s .5s cubic-bezier(.22,1,.36,1) both;transform-origin:left}
@keyframes kfGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kw-app.in .v-line .ln,.kf-stage.in .v-line .ln{stroke-dasharray:420;stroke-dashoffset:420;animation:kfDraw 1.4s .6s ease-out forwards}
@keyframes kfDraw{to{stroke-dashoffset:0}}
.kw-app.in .v-fl li,.kf-stage.in .v-fl li{animation:kfStep .5s both}.v-fl li:nth-child(2){animation-delay:.9s!important}.v-fl li:nth-child(3){animation-delay:1.3s!important}.v-fl li:nth-child(4){animation-delay:1.7s!important}
@keyframes kfStep{from{opacity:.35;transform:translateX(-6px)}to{opacity:1;transform:none}}
.kw-app.in .v-out,.kf-stage.in .v-out{animation:kfOut 1.6s 1.2s forwards}@keyframes kfOut{to{opacity:.45}}
.kw-app.in .v-save,.kf-stage.in .v-save{animation:kfPop .6s 2s cubic-bezier(.34,1.4,.64,1) both}@keyframes kfPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kw-app.in .v-bar i,.kf-stage.in .v-bar i,.kw-app.in .v-wk i b,.kf-stage.in .v-wk i b,.kw-app.in .kv-course i b,.kf-stage.in .kv-course i b,.kw-app.in .v-line .ln,.kf-stage.in .v-line .ln,.kw-app.in .v-fl li,.kf-stage.in .v-fl li,.kw-app.in .v-out,.kf-stage.in .v-out,.kw-app.in .v-save,.kf-stage.in .v-save{animation:none}}

/* ── the subpages: the module's cards free on the page, no app window (hero.kw-free) ── */
.kw-ex{display:none}
.hero.kw-free{min-height:0;padding-bottom:0;overflow:hidden}
.kf-stage{position:relative;width:min(1180px,calc(100% - 32px));height:clamp(440px,44vw,600px);margin:clamp(30px,4vw,50px) auto 0}
.kf-stage::before{content:"";position:absolute;inset:8% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(92,192,138,.22),rgba(227,242,232,.3) 60%,transparent);pointer-events:none}
.kf-stage .vc{opacity:0;transform:translate(var(--fx,0),var(--fy,40px)) rotate(var(--r,0deg)) scale(.94);transition:transform .9s cubic-bezier(.34,1.2,.5,1),opacity .5s ease;transition-delay:var(--d,0s)}
.kf-stage.in .vc{opacity:1;transform:rotate(var(--r,0deg));animation:kfFloat 8s var(--fd,0s) ease-in-out infinite}
@keyframes kfFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.kf-stage .vc:hover{animation-play-state:paused}
@media (max-width:720px){
  .kf-stage{height:auto;display:grid;gap:12px;width:calc(100% - 24px)}.kf-stage::before{display:none}
  .kf-stage .vc{position:static;width:auto!important;left:auto!important;top:auto!important;--r:0deg}.kf-stage.in .vc{animation:none}
}
@media (prefers-reduced-motion:reduce){.kf-stage .vc{transition:none;opacity:1;transform:rotate(var(--r,0deg))}.kf-stage.in .vc{animation:none}}

/* ── colour in the visualisations (Mark 28-10): green is the only accent; holiday is a lighter green, sick/absent amber ── */
.v-team i b{background:linear-gradient(90deg,#A9D8BE,#3E9C6A)}.v-team i b.s{background:#F2B866}
.v-don .b{stroke:#7FC29C}.v-don li i.b{background:#7FC29C}

/* ── Mark 23-10: the front page's Home and People views ── */
/* the most kudos this month: rank, person, count */
.v-kud{list-style:none;margin:2px 0 0;padding:0;display:grid}
.v-kud li{display:grid;grid-template-columns:18px 30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #F0EEE9;font-size:13px}.v-kud li:first-child{border-top:0}
.v-kud .v-rk{font:700 12px/1 var(--sans);color:#9AA29D;text-align:center}.v-kud li:first-child .v-rk{color:#00693E}
.v-kud .v-av{width:30px;height:30px}.v-kud span{display:grid;min-width:0}.v-kud small{color:#7A857F;font-size:11.5px}
.v-kud em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:600;color:#00693E;font-variant-numeric:tabular-nums}.v-kud em .hi{font-size:13px}
/* skills across the team */
.kv-skm{display:grid;grid-template-columns:minmax(74px,1.2fr) repeat(4,minmax(0,1fr));gap:6px 6px;align-items:center;font-size:12px}
.kv-skm>span:not(.who){font-size:10.5px;line-height:1.15;color:#7A818C;text-align:center;hyphens:manual}
.kv-skm .who{display:flex;align-items:center;gap:7px;font-weight:550;color:#1A2233;white-space:nowrap;overflow:hidden}.kv-skm .who .v-av{width:24px;height:24px}
.kv-skm i{display:grid;place-items:center;height:26px;border-radius:8px;font:600 12px/1 var(--sans);font-style:normal;font-variant-numeric:tabular-nums}
.kv-skm .l5{background:#00693E;color:#fff}.kv-skm .l4{background:#3E9C6A;color:#fff}.kv-skm .l3{background:#A9D8BE;color:#0B4F33}.kv-skm .l2{background:#DCEFE3;color:#0B4F33}.kv-skm .l1{background:#FCEFDD;color:#8F5300}.kv-skm .l0{background:#fff;color:#C77A0A;box-shadow:inset 0 0 0 1.5px #F2C98B}
.kv-gap{display:flex;align-items:center;gap:7px;margin:12px 0 0;padding:8px 10px;border-radius:10px;background:#FDF6EA;font-size:12.5px;color:#5B4A2E}.kv-gap .hi{color:#C77A0A;font-size:15px;flex:none}.kv-gap b{color:#1A2233}
/* career paths */
.kv-cp{list-style:none;margin:0;padding:0}
.kv-cp li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #F0EEE9;font-size:13px}.kv-cp li:first-child{border-top:0}
.kv-cp .v-av{width:30px;height:30px}.kv-cp span{display:grid;gap:2px;min-width:0}.kv-cp small{color:#7A857F;font-size:11.5px}
.kv-cp i{height:5px;margin-top:3px;border-radius:99px;background:#EDF0EC;overflow:hidden}.kv-cp i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5CC08A,#00A550)}
.kv-cp em{font-style:normal;padding:3px 8px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}.kv-cp em.a{background:#FCEFDD;color:#8F5300}.kv-cp em.g{background:#E3F1E9;color:#00693E}
.kw-panel:empty{display:none}

/* Mark 23-10: the demo stands in front, whole and clickable — no fade over the window's foot */
.hero.kw::after{display:block;z-index:0;height:46%;background:linear-gradient(rgba(255,255,255,0),#fff 92%)}   /* the background fades to white behind the window */
.hero.kw .kw-stage{z-index:2}.hero.kw .kw-tabs{z-index:3}
.hero.kw{padding-bottom:clamp(48px,6vw,88px)}
.kw-win{box-shadow:0 0 0 1px rgba(8,50,30,.06),0 40px 80px -40px rgba(8,50,30,.45)}

/* ── Mark 23-10: the sidebar's top group as in the product — Opret, Indbakke, Søg ── */
.kw-it{position:relative}
.kw-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#5CC08A;color:#05301C;font:700 11px/20px var(--sans);font-style:normal;text-align:center}
.kw-n[hidden]{display:none}.kw-it.on .kw-n{background:#0B5A36;color:#fff}
.kw-app.mini .kw-n{position:absolute;top:5px;right:6px;min-width:0;width:8px;height:8px;padding:0;font-size:0;box-shadow:0 0 0 2px #0B5A36}
/* the inbox: the messages on the left, the one picked on the right */
.kv-inbox{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;padding:22px 24px 24px;min-width:0}
.ib-list,.ib-read{border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(26,34,51,.06),0 10px 24px -16px rgba(8,50,30,.3)}
.ib-list{list-style:none;margin:0;padding:8px;display:grid;align-content:start;gap:2px;min-width:0}
.ib-list button{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;font:inherit;color:#1A2233;text-align:left;cursor:pointer;transition:background .2s}
.ib-list button:hover{background:#F6F5F1}.ib-list button.on{background:#EEF7F1}
.ib-list button:focus-visible{outline:2px solid #00A550;outline-offset:-2px}
.ib-list button.new::after{content:"";position:absolute;right:12px;top:31px;width:8px;height:8px;border-radius:50%;background:#00A550}
.ib-l{display:grid;gap:2px;min-width:0}
.ib-r1{display:flex;align-items:center;gap:7px;min-width:0}.ib-r1 b{flex:0 1 auto;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ib-r1 em{flex:none;margin-left:auto;font-style:normal;font-size:11.5px;color:#9AA29D}
.ib-s{font-size:12.5px;color:#5B6660;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:16px}.new .ib-s{color:#1A2233;font-weight:550}
.ib-k{flex:none;padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:600;line-height:1.4}
.ib-k.b{background:#E8F0FD;color:#2F5FB3}.ib-k.g{background:#E3F1E9;color:#00693E}.ib-k.n{background:#F0EFEA;color:#5B6660}
.ib-sys{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#E3F2E9;color:#00693E;font-size:17px;font-style:normal;flex:none}
.ib-read{display:flex;flex-direction:column;min-width:0;padding:22px 26px}
.ib-hd{display:flex;align-items:center;gap:12px}.ib-hd>span{flex:1;display:grid;min-width:0}.ib-hd b{font-size:15px;font-weight:600}.ib-hd small{font-size:12.5px;color:#5B6660}.ib-hd>em{font-style:normal;font-size:12px;color:#9AA29D}
.ib-hd .v-av.big,.ib-hd .ib-sys.big{width:44px;height:44px;font-size:21px}
.ib-read h3{margin:20px 0 0;font:500 22px/1.2 var(--serif);color:#1A2233}
.ib-read p{margin:10px 0 0;max-width:62ch;font-size:14px;line-height:1.55;color:#2A2F3A}
.ib-att{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ib-att span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;background:#F6F8F5;box-shadow:inset 0 0 0 1px #E3E8E3;font-size:12.5px;font-weight:550}.ib-att .hi{font-size:15px;color:#00693E}
.ib-hint{display:flex;gap:8px;margin-top:16px;padding:10px 12px;border-radius:12px;background:#F1F8F4;font-size:13px;line-height:1.4;color:#1F4D36}.ib-hint .hi{flex:none;margin-top:1px;font-size:15px;color:#00A550}
.ib-read .v-acts{margin-top:auto;padding-top:18px;justify-content:flex-end}.ib-read .v-b{flex:none;padding:0 18px}
/* over the view: Opret slides out from the sidebar, Søg drops down from the top; the view dims behind them */
.kw-ov{position:absolute;inset:0;z-index:5;pointer-events:none}
.kw-ov.opret,.kw-ov.soeg{pointer-events:auto}
.kw-scrim{position:absolute;inset:0;background:rgba(16,32,24,.26);opacity:0;transition:opacity .3s ease}
.kw-ov.in .kw-scrim{opacity:1}
.kw-drawer{position:absolute;left:0;top:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:24px 0 60px -30px rgba(8,50,30,.45);transform:translateX(-102%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.kw-ov.in .kw-drawer{transform:none}
.kd-hd{display:flex;align-items:center;gap:10px;min-height:60px;padding:0 16px 0 24px;border-bottom:1px solid #ECEAE4}.kd-hd b{font:500 20px/1 var(--sans);color:#1A2233}
.kd-hd .kd-bk{margin:0 2px 0 -8px}
.kd-x{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:#F4F4F1;color:#4F596B;font-size:18px;cursor:pointer}.kd-x:hover{background:#ECEDE8}
.kd-x:focus-visible,.kd-tile:focus-visible{outline:2px solid #00A550;outline-offset:-2px}
.kd-b{flex:1;display:flex;flex-direction:column;min-height:0;padding:20px 24px}
.kd-lead{margin:0 0 14px;font-size:13.5px;color:#4F596B}
/* the tiles: an icon in a soft square, the title, one line */
.kd-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kd-tile{display:grid;align-content:start;justify-items:start;gap:3px;padding:14px;border:1px solid #E7E8E4;border-radius:14px;background:#fff;font:inherit;color:#1A2233;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.kd-tile:hover{border-color:#BFD8C9;box-shadow:0 10px 24px -18px rgba(8,50,30,.45);transform:translateY(-1px)}
.kd-ti{display:grid;place-items:center;width:34px;height:34px;margin-bottom:9px;border-radius:10px;background:#F3F4F1;color:#7A818C;font-size:17px;font-style:normal}
.kd-tile:hover .kd-ti{background:#E3F2E9;color:#00693E}
.kd-tile b{font-size:14px;font-weight:600}.kd-tile small{font-size:12px;line-height:1.35;color:#7A818C}
.kd-form{min-width:0}
.kd-s{font-size:12.5px;color:#7A857F}
.kd-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.kd-fl{display:grid;gap:5px;min-width:0}.kd-fl.w{grid-column:1 / -1}
.kd-fl>span{font-size:11.5px;font-weight:600;color:#5B6660}
.kd-fl>i{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #DCDFD8;font-style:normal;font-size:13.5px;color:#1A2233;white-space:nowrap;overflow:hidden}
.kd-fl>i .hi{flex:none;font-size:16px;color:#7A857F}.kd-fl>i .v-av{width:22px;height:22px}
.kd-tg{display:grid;gap:8px;margin-top:16px}
.kd-tg>div{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#F6F8F5}
.kd-tg span{flex:1;display:grid;min-width:0}.kd-tg b{font-size:13px;font-weight:600}.kd-tg small{font-size:11.5px;color:#7A857F}
.kd-acts{margin-top:auto;padding-top:16px;justify-content:flex-end}.kd-acts .v-b{flex:none;padding:0 18px;cursor:pointer}
.kw-ov.soeg{display:grid;justify-items:center;align-items:start;padding-top:48px}
.kw-find{position:relative;width:min(560px,calc(100% - 32px));border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(26,34,51,.08),0 40px 80px -30px rgba(8,50,30,.5);overflow:hidden;opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.kw-ov.in .kw-find{opacity:1;transform:none}
.kw-find kbd{font:600 11px/1 var(--sans);padding:4px 6px;border-radius:6px;background:#F1F2EE;color:#5B6660;box-shadow:inset 0 -1px 0 #DCDFD8}
.kf-in{display:flex;align-items:center;gap:10px;height:58px;padding:0 18px;border-bottom:1px solid #ECEAE4;font-size:17px;color:#1A2233}.kf-in>.hi{font-size:20px;color:#7A857F}
.kf-q{flex:1;display:flex;align-items:center}.kf-c{width:1.5px;height:22px;margin-left:1px;background:#00693E;animation:kfBlink 1s steps(1) infinite}
@keyframes kfBlink{50%{opacity:0}}
.kf-res{display:grid;padding:6px 8px 8px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.kw-ov.found .kf-res{opacity:1;transform:none}
.kf-g{padding:10px 10px 4px;font-size:11px;font-weight:600;color:#9AA29D}
.kf-h{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;font-size:13.5px}.kf-h>span{flex:1;display:grid;min-width:0}.kf-h b{font-weight:600}.kf-h small{font-size:12px;color:#7A857F}.kf-h.on{background:#EEF7F1}
.kf-h .v-av{width:32px;height:32px}.kf-h mark{background:#FDF0C8;color:inherit;border-radius:3px;padding:0 1px}
.kf-i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#F1F2EE;color:#4F596B;font-size:16px;font-style:normal;flex:none}
.kf-k{display:flex;align-items:center;gap:10px;margin:8px 2px 2px;padding:10px 12px;border-radius:12px;background:#F1F8F4;font-size:13px;color:#1F4D36}.kf-k .hi{font-size:17px;color:#00A550}
.kf-ft{display:flex;gap:16px;padding:10px 18px;border-top:1px solid #ECEAE4;font-size:11.5px;color:#7A857F}.kf-ft span{display:inline-flex;align-items:center;gap:4px}
/* what was created, for a moment at the window's foot */
.kw-toast{position:absolute;left:50%;bottom:22px;z-index:6;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:#0B3D26;color:#fff;font-size:13.5px;font-weight:550;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(8,50,30,.6);transform:translateX(-50%);animation:kwToast .4s cubic-bezier(.22,1,.36,1)}
.kw-toast .hi{font-size:18px;color:#5CC08A}.kw-toast.out{opacity:0;transition:opacity .3s}
@keyframes kwToast{from{opacity:0;transform:translate(-50%,12px)}}
@media (max-width:720px){
  .kw-n{position:absolute;top:4px;right:4px;min-width:0;width:8px;height:8px;padding:0;font-size:0;box-shadow:0 0 0 2px #0B5A36}
  .kv-inbox{grid-template-columns:1fr;gap:12px;padding:14px 12px 18px}.ib-read{padding:18px}
  .kw-drawer{width:100%;bottom:auto}.kd-b{padding:16px}.kd-acts{margin-top:4px}   /* on a phone the panel is as tall as what it shows */
  .kd-f{grid-template-columns:1fr}.kd-fl.w{grid-column:auto}.kd-tile{padding:12px}
  .kw-ov.soeg{padding-top:16px}.kf-ft{display:none}
}
@media (prefers-reduced-motion:reduce){.kw-scrim,.kw-drawer,.kw-find,.kf-res{transition:none}.kf-c{animation:none}.kw-toast{animation:none}}

/* ── Mark 23-10: the front page's content list moves into the demo — a view with stop: shows that stop's module cards
   (kort.js) in the tour's grid: measured in their own widths, gridded, zoomed to fit the window, equal rows ── */
.kv-stop{position:relative;display:grid;grid-template-columns:var(--cols,1fr);gap:20px;align-items:stretch;align-content:start;align-self:start;margin:22px 24px 24px;min-width:0}
.kv-stop.n1{justify-content:start}
.kv-stop>.vc{position:relative;inset:auto;margin:0!important;display:flex;flex-direction:column;opacity:0;transform:translate(var(--fx,0),var(--fy,48px)) rotate(var(--fr,0deg)) scale(.94);transition:transform .85s cubic-bezier(.34,1.2,.5,1),opacity .5s ease;transition-delay:var(--d,0s)}
.kw-app.in .kv-stop>.vc{opacity:1;transform:none}
.kv-stop:not(.ms-measure)>.vc{width:auto!important;max-width:none}
.kv-stop>.vc>.in{flex:1 1 auto}
.kv-stop:not(.ms-top)>.vc:first-child{grid-column:1;grid-row:1 / span 2}.kv-stop:not(.ms-top)>.vc:nth-child(n+2){grid-column:2}
.kv-stop.n2:not(.ms-top)>.vc:first-child{grid-row:1}
.kv-stop.ms-top>.vc:first-child{grid-column:1 / -1}
.kv-stop.ms-measure{display:flex;align-items:flex-start;gap:20px}.kv-stop.ms-measure>.vc{flex:none}
.kw-ptabs.click span{cursor:pointer}.kw-ptabs.click span:hover{color:#0B5A36}
@media (max-width:720px){
  .kv-stop{grid-template-columns:minmax(0,1fr)!important;margin:14px 12px 18px;gap:12px}
  .kv-stop>.vc:nth-child(n){grid-column:1!important;grid-row:auto!important;display:flex!important}
}
@media (prefers-reduced-motion:reduce){.kv-stop>.vc{transition:none;opacity:1;transform:none}}

/* ── Mark 25-10: the demo's charts answer the pointer — the bar or row under it lifts and fills brighter, the rest of its
   chart steps back; grid cells lift; the line's dots grow. Every view, the stop cards included ── */
.kw-view :has(> :is(i,b)[style*="width:"]){transition:transform .25s cubic-bezier(.22,1,.36,1)}
.kw-view :has(> :is(i,b)[style*="width:"]):hover{transform:scaleY(1.6)}
.kw-view :is(i,b)[style*="width:"]{transition:filter .25s,opacity .25s}
.kw-view li{transition:opacity .25s,box-shadow .25s,background .25s}
.kw-view :is(.kv-sp,.kv-skm,.kv-kb,.kv-team,.kv-kpi,.kv-dept,.kv-sign,.fs-sim,.v-sum,.v-don,.v-team,.kv-tbl) > * {transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,opacity .25s}
.kw-view :is(.kv-sp,.kv-skm,.kv-kb,.kv-team,.kv-kpi,.v-sum) > *:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(8,50,30,.5)}
.kw-view .kv-sp .s:hover,.kw-view .kv-kb .kc:hover{transform:translateY(-1px);box-shadow:0 8px 16px -12px rgba(8,50,30,.5)}
.kw-view .kv-skm i:hover{transform:scale(1.08)}
.kw-view .v-dots i{transition:transform .25s}.kw-view .v-dots i:hover{transform:scale(1.35)}
.kw-view .fs-steps i{transition:transform .25s,filter .25s}.kw-view .fs-steps:hover i{filter:brightness(1.1)}.kw-view .fs-steps i:hover{transform:scaleY(1.7)}
/* the poll: three people to vote on, the bars grow from zero, your vote is marked (pl- prefix: its own names) */
.pl-box{display:flex;flex-direction:column;margin-top:10px}
.pl-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pl-list li{display:grid;grid-template-columns:30px minmax(0,1fr) 40px;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:12px;cursor:pointer;font-size:13px}
.pl-list li.mine{background:#EEF7F1;box-shadow:inset 0 0 0 1px #CFE6D8}
.pl-list .v-av{width:30px;height:30px}
.pl-n{display:grid;gap:5px;min-width:0}
.pl-t{display:flex;align-items:baseline;gap:8px;min-width:0}
.pl-t b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pl-t small{margin-left:auto;flex:none;font-size:11px;color:#7A857F;white-space:nowrap}
.pl-bar{display:block}.pl-bar i{display:block;height:6px;border-radius:99px;background:#EDF0EC;overflow:hidden}
.pl-bar i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5CC08A,#00A550);animation:plGrow .9s cubic-bezier(.22,1,.36,1) both;transform-origin:left}
.pl-list li.mine .pl-bar i b{background:linear-gradient(90deg,#00A550,#00693E)}
.pl-list em{font-style:normal;font-size:12.5px;font-weight:600;color:#1A2233;font-variant-numeric:tabular-nums;text-align:right}
@keyframes plGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pl-foot{display:flex;justify-content:space-between;gap:8px;margin:10px 0 0;padding-top:9px;border-top:1px solid #F0EEE9;font-size:11.5px;color:#7A857F}.pl-foot b{color:#1A2233;font-weight:600}
@media (prefers-reduced-motion:reduce){.pl-bar i b{animation:none}.kw-view *{transition:none!important}}
/* the team's holiday bars are placed by left and right, not width */

/* the click answers (Mark 25-10): a selected row or cell, a button marked done, a switch that is off */
.kw-view .vc li.sel,.kw-view .kv-kb .kc.sel,.kw-view .kv-sp .s.sel,.kw-view .kv-tree .nd.sel,.kw-view .kv-team>div.sel{background:#EEF7F1;box-shadow:inset 0 0 0 1.5px #00A550}
.kw-view .vc li.sel{border-radius:10px}
.kw-view .v-b.done{background:#EEF7F1;border-color:#CFE6D8;color:#00693E}
.kw-view .v-b.p.done{background:#00693E;border-color:#00693E;color:#fff}
.kw-view .v-tog{cursor:pointer;transition:background .25s}.kw-view .v-tog::after{transition:left .25s,right .25s}
.kw-view .v-tog.off{background:#D7DCD8}.kw-view .v-tog.off::after{right:auto;left:2px}
.kw-view .v-b{cursor:pointer}

/* ── the window's tabs (Mark 27-10): Organisation, Flows and Rekruttering, every tab a simplified page from Komma's layout:
   a list on the left, the picked row on the right. Prefix dx- ── */
.kw-ptabs button{display:flex;align-items:center;padding:0 2px;border:0;background:none;font:400 13.5px/1 var(--sans);color:#6B7470;white-space:nowrap;cursor:pointer}
.kw-ptabs button:hover{color:#0B5A36}.kw-ptabs button.on{color:#0B5A36;font-weight:600;box-shadow:inset 0 -2px 0 #0B5A36}
.kw-ptabs button:focus-visible,.dx-tb li:focus-visible,.dx-tpl li:focus-visible,.dx-chk li:focus-visible,.dx-ev:focus-visible,.dx-pipe button:focus-visible,.dx-seg button:focus-visible,.dx-tabs button:focus-visible,.dx-add:focus-visible,.dx-on:focus-visible{outline:2px solid #00A550;outline-offset:2px}
.kv-stop>.vc.dx-w3{width:262px}.kv-stop>.vc.dx-w4{width:340px}.kv-stop>.vc.dx-w35{width:300px}.kv-stop>.vc.dx-w6{width:530px}.kv-stop>.vc.dx-w7{width:610px}
.dx-bar{display:flex;align-items:center;gap:8px;margin:12px 0 8px}
.dx-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px 0 10px;border-radius:999px;border:1px solid #E2E4DE;background:#fff;font-size:12.5px;font-weight:600;color:#1A2233;cursor:pointer;white-space:nowrap}.dx-btn .hi{font-size:15px;color:#00693E}.dx-btn:hover{border-color:#BFD8C9}
.dx-q{flex:1;display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;background:#F5F7F4;font-size:12.5px;color:#8A938E;min-width:0;white-space:nowrap;overflow:hidden;cursor:text}.dx-q .hi{font-size:15px}
/* the table: one grid per row, the picked row in mint */
.dx-tb{list-style:none;margin:0;padding:0;display:grid}
.dx-tb li{display:grid;grid-template-columns:var(--c);align-items:center;gap:10px;padding:7px 8px;border-top:1px solid var(--ks-line);border-radius:10px;font-size:12.5px;min-width:0;transition:background .15s}
.dx-tb li>*{min-width:0}.dx-tb .ks-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}.ks-chip .live{flex:none}
.dx-tb li.dx-th{padding-top:0;padding-bottom:6px;border-top:0;font-size:11.5px;color:#7A857F;cursor:default}
.dx-tb li.dx-none{padding:18px 8px;justify-items:center;color:#7A857F}
.dx-tb li[data-pk]:hover{background:#F6FAF7}
.dx-tb li[aria-current]{background:#EEF7F1;border-top-color:transparent}.dx-tb li[aria-current]+li{border-top-color:transparent}
.dx-tb li[aria-current] .dx-pp b{color:#00693E}
.dx-pp{display:flex;align-items:center;gap:9px;min-width:0}.dx-pp>.v-av,.dx-pp>.dx-ini{flex:none;width:28px;height:28px}
.dx-pp>span{display:grid;min-width:0}.dx-pp b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx-pp small{font-size:11px;color:#7A857F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-ini{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#E3F1E9;color:#00693E;font:600 11px/1 var(--sans);font-style:normal}
.dx-ft{display:flex;justify-content:space-between;gap:10px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--ks-line);font-size:11.5px;color:#7A857F}
.dx-emp{--c:minmax(0,1.5fr) minmax(0,1.05fr) minmax(0,1fr)}
.dx-jobs{--c:minmax(0,1.05fr) minmax(0,1.5fr) 74px}
.dx-skl{--c:minmax(0,1.5fr) minmax(0,.8fr) 74px}
.dx-cand{--c:minmax(0,1.25fr) 64px minmax(0,1.55fr) 84px}.dx-cand .dx-sks{gap:3px}.dx-cand .dx-sk{padding:3px 6px;gap:4px}.dx-cand .dx-sks{flex-wrap:nowrap;overflow:hidden}.dx-cand .dx-sk{font-size:10.5px}
.dx-hire{--c:minmax(0,1.4fr) minmax(0,1fr) 64px}.dx-hire li>.ks-chip{justify-self:end}
.dx-n{display:flex;align-items:center;justify-content:flex-end;gap:6px}.dx-n small{font-size:11.5px;color:#6B7470;font-variant-numeric:tabular-nums}
.dx-sc{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:99px;background:#E3F1E9;color:#00693E;font:600 11.5px/1 var(--sans);font-style:normal;font-variant-numeric:tabular-nums}
.dx-sc.l{background:#F0F4F1;color:#3F6B52}.dx-sc.a{background:var(--ks-amber-bg);color:var(--ks-amber-ink)}
.dx-sks{display:flex;flex-wrap:wrap;gap:4px}
.dx-sk{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 7px;box-sizing:border-box;border-radius:99px;border:1px solid #E6E9E4;background:#fff;font-size:11px;font-weight:500;color:#3A4540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-sk i{flex:none;width:6px;height:6px;border-radius:50%;background:#00A550}.dx-sk i.a{background:#E2A646}
.dx-m{display:grid;gap:3px;justify-items:end;min-width:0}.dx-m>b{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.dx-m>i{display:block;width:100%;height:6px;border-radius:99px;background:#EDF0EC;overflow:hidden}.dx-m>i b{display:block;height:100%;border-radius:inherit;background:#00A550}
.dx-m.a>i b{background:#E2A646}.dx-m.n>i b{background:#C9CEC8}
.dx-dots{display:inline-flex;gap:3px}.dx-dots i{width:7px;height:7px;border-radius:50%;background:#E3E7E2}.dx-dots i.on{background:#00A550}
/* the segmented switch and the record's tabs */
.dx-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#F1F3EF}
.dx-seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;border-radius:999px;background:none;font:600 12px/1 var(--sans);color:#4F5B54;cursor:pointer;white-space:nowrap}
.dx-seg button i{font-style:normal;font-size:10.5px;padding:2px 6px;border-radius:99px;background:#E3E7E2}
.dx-seg button[aria-selected="true"]{background:#0B5A36;color:#fff}.dx-seg button[aria-selected="true"] i{background:rgba(255,255,255,.2)}
.dx-tabs button{padding:0 0 8px;border:0;background:none;font:inherit;color:inherit;white-space:nowrap;cursor:pointer}
.dx-tabs button.on{color:#00693E;font-weight:600;box-shadow:inset 0 -2px 0 #00693E}.dx-tabs button:hover{color:#00693E}
.dx-who{margin-top:10px}.dx-who>.dx-ini{width:52px;height:52px;font-size:15px;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #CFE6D8}.dx-who>.fs-ring{margin-left:auto}
.dx-docs li>.hi{flex:none;font-size:17px;color:#00693E}.dx-docs li>span{flex:1;display:grid;min-width:0}.dx-docs small{font-size:11px;color:#7A857F}
/* the picked row's detail: a title, levels, matches, Karma */
.dx-title{display:grid;gap:2px;margin:10px 0 0}.dx-title b{font:500 21px/1.15 var(--serif);color:#1A2233}.dx-title small{font-size:12px;color:#6B7470}
.dx-lbl{margin:14px 0 2px;font-size:11.5px;font-weight:600;color:#7A857F}
.dx-req,.dx-mt{list-style:none;margin:0;padding:0}
.dx-req li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--ks-line);font-size:12.5px}.dx-req li:first-child{border-top:0}
.dx-req li>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dx-req .ks-chip{min-width:64px;justify-content:center}
.dx-lv li>b{min-width:10px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.dx-lv .dx-pp>.v-av{width:24px;height:24px}.dx-lv .dx-pp b{font-weight:500;font-size:12.5px}
.dx-mt li{display:grid;grid-template-columns:28px minmax(0,1fr) 84px;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--ks-line);font-size:12.5px}.dx-mt li:first-child{border-top:0}
.dx-mt .v-av,.dx-mt .dx-ini{width:28px;height:28px}.dx-mt li>span{display:grid;min-width:0}.dx-mt b{font-weight:600}.dx-mt small{font-size:11px;color:#7A857F}
.dx-in{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:11.5px;color:#6B7470}.dx-in .hi{flex:none;font-size:14px;color:#00693E}
.dx-k{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:9px 11px;border-radius:12px;background:#F4F8F5;font-size:12px;line-height:1.4;color:#33403A}.dx-k>.hi{flex:none;margin-top:1px;font-size:15px;color:#00A550}.dx-k b{font-weight:600;color:#00693E}
.dx-link{display:inline-flex;align-items:center;gap:6px;color:#00693E;font-weight:600;cursor:pointer}.dx-link .hi{font-size:14px}.dx-link:hover{text-decoration:underline}
.dx-avs{display:inline-flex}.dx-avs .v-av+.v-av{margin-left:-6px;box-shadow:0 0 0 2px #fff}
/* Flows · the builder: templates, and the canvas with the trigger, its branches and a + under every step */
.dx-tpl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:3px}
.dx-tpl li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;font-size:12.5px;cursor:pointer}.dx-tpl li:hover{background:#F6FAF7}
.dx-tpl li[aria-current]{background:#EEF7F1;box-shadow:inset 0 0 0 1.5px #5CC08A}.dx-tpl li span{display:grid;min-width:0}.dx-tpl b{font-weight:600}.dx-tpl small{font-size:11px;color:#7A857F}
.dx-si{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#E3F1E9;color:#00693E;font-size:16px;font-style:normal}
.dx-bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dx-bt{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0}.dx-bt b{font:500 21px/1.15 var(--serif);color:#1A2233;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-on{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 8px;border-radius:999px;background:#F5F7F4;font-size:12.5px;font-weight:600;cursor:pointer}
.dx-bh>.v-b{flex:none;height:32px;padding:0 14px}
.dx-cv{display:grid;justify-items:center;margin-top:12px;padding:18px 14px 10px;border-radius:16px;background:#FAFBF9 radial-gradient(#DEE4DD 1px,transparent 1.3px) 0 0/16px 16px}
.dx-st{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:250px;box-sizing:border-box;padding:8px 12px 8px 8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(8,50,30,.08),0 6px 14px -10px rgba(8,50,30,.35);text-align:left}
.dx-st span{display:grid;min-width:0}.dx-st b{font-weight:600;font-size:12.5px}.dx-st small{font-size:11px;color:#7A857F}
.dx-st.t{max-width:290px;box-shadow:0 0 0 1.5px #5CC08A,0 8px 18px -12px rgba(8,50,30,.4)}.dx-st.t .dx-si{background:#00693E;color:#fff}
.dx-st.nw{animation:dxpop .45s cubic-bezier(.16,1,.3,1)}@keyframes dxpop{from{opacity:0;transform:translateY(-8px) scale(.94)}}
.dx-stem{display:block;width:1.5px;height:18px;background:#BFD8C9}
.dx-br{position:relative;display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:18px;width:100%}.dx-br.n2{--n:2;padding-top:16px}
.dx-br.n2::before{content:"";position:absolute;top:0;left:calc(25% - 4.5px);right:calc(25% - 4.5px);height:1.5px;background:#BFD8C9}
.dx-col{align-self:start;display:grid;justify-items:center;align-content:start;background:linear-gradient(#BFD8C9,#BFD8C9) 50% 0/1.5px calc(100% - 11px) no-repeat}
.dx-br.n2 .dx-col{margin-top:-16px;padding-top:16px}
.dx-add{display:grid;place-items:center;width:22px;height:22px;margin:7px 0;padding:0;border:0;border-radius:50%;background:#00A550;color:#fff;font-size:13px;cursor:pointer;box-shadow:0 0 0 4px #FAFBF9;transition:transform .15s}.dx-add:hover{transform:scale(1.12)}
/* Flows · log */
.dx-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 2px}
.dx-kpi span{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:#F5F7F4}.dx-kpi b{font:500 22px/1 var(--serif);color:#1A2233;font-variant-numeric:tabular-nums}.dx-kpi small{font-size:11px;color:#6B7470}
.dx-kpi span.r small{color:var(--ks-red-ink);font-weight:600}
.dx-grp{margin-top:12px}.dx-grp>p{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:12.5px}.dx-grp>p b{font-weight:600}.dx-grp>p em{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:#F1F3EF;color:#4F5B54}
.dx-run,.dx-fail,.dx-act{list-style:none;margin:0;padding:0}
.dx-run li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--ks-line);font-size:12.5px}
.dx-run li>span{display:grid;gap:3px;min-width:0}.dx-run b{font-weight:600}.dx-run small{font-size:11px;color:#7A857F}.dx-run .v-av,.dx-run .dx-ini{width:28px;height:28px}
.dx-run li>span>i{display:block;height:5px;border-radius:99px;background:#EDF0EC;overflow:hidden}.dx-run li>span>i b{display:block;height:100%;border-radius:inherit;background:#00A550}
.dx-fail{margin-top:8px}.dx-fail li{display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px 10px;border-radius:12px;background:#FDF5F5;font-size:12.5px}.dx-fail li>span{flex:1;display:grid;min-width:0}.dx-fail b{font-weight:600}.dx-fail small{font-size:11px;color:#6B7470}
.dx-act{margin-top:6px}.dx-act li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--ks-line);font-size:12.5px}.dx-act li:first-child{border-top:0}
.dx-act time{padding-top:1px;font-size:11px;color:#7A857F;font-variant-numeric:tabular-nums}.dx-act span{display:grid}.dx-act b{font-weight:500}.dx-act small{font-size:11px;color:#7A857F}
/* Rekruttering · the pipeline as filters, the calendar, pre-boarding */
.dx-pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:2px 0 10px}
.dx-pipe button{display:grid;gap:1px;padding:7px 10px;border:0;border-radius:12px;background:#F5F7F4;font:inherit;color:#1A2233;text-align:left;cursor:pointer;min-width:0}
.dx-pipe button span{font-size:11px;color:#6B7470;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx-pipe button b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.dx-pipe button:hover{background:#EEF4EF}.dx-pipe button[aria-pressed="true"]{background:#E3F1E9;box-shadow:inset 0 0 0 1.5px #00A550}.dx-pipe button[aria-pressed="true"] span{color:#00693E}
.dx-stg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#33403A;white-space:nowrap}.dx-stg .hi{flex:none;font-size:15px;color:#6B7470}
.dx-cal{display:grid;grid-template-columns:38px repeat(5,minmax(0,1fr));grid-template-rows:30px repeat(6,50px);margin-top:12px}
.dx-cal .dh{display:flex;align-items:center;justify-content:center;gap:4px;grid-row:1;font-size:11.5px;color:#6B7470}.dx-cal .dh b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12.5px;color:#1A2233}
.dx-cal .dh.now b{background:#00693E;color:#fff}
.dx-cal .hr{grid-column:1;padding-top:3px;font-size:10.5px;color:#8A938E;font-variant-numeric:tabular-nums}
.dx-cal .c{border-top:1px solid var(--ks-line);border-left:1px solid var(--ks-line)}
.dx-ev{z-index:1;display:grid;grid-template-columns:18px minmax(0,1fr);align-content:center;align-items:center;column-gap:5px;row-gap:2px;min-width:0;margin:3px;padding:5px 7px;border:0;border-radius:10px;background:#E3F1E9;color:#0B5A36;font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.dx-ev .v-av{width:18px;height:18px}.dx-ev>span{display:contents}.dx-ev b{min-width:0;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx-ev small{grid-column:1 / -1;min-width:0;font-size:10.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-ev.busy b{grid-column:1 / -1}
.dx-ev.done{background:#F1F3EF;color:#4F5B54}.dx-ev.busy{background:repeating-linear-gradient(-45deg,#F7F8F6 0 6px,#F1F3EF 6px 12px);color:#8A938E;cursor:default}.dx-ev.busy b{font-weight:500}
.dx-ev[aria-current]{background:#00693E;color:#fff}.dx-ev:not(.busy):hover{filter:brightness(.97)}
.dx-prog{display:grid;gap:3px}.dx-prog>i{display:block;height:6px;border-radius:99px;background:#EDF0EC;overflow:hidden}.dx-prog>i b{display:block;height:100%;border-radius:inherit;background:#00A550;transition:width .4s cubic-bezier(.16,1,.3,1)}.dx-prog small{font-size:11px;color:#7A857F}
.dx-prog.dx-big{margin:12px 0 4px}.dx-prog.dx-big>i{height:8px}
.dx-chk{list-style:none;margin:6px 0 0;padding:0}
.dx-chk li{display:flex;align-items:center;gap:10px;padding:7px 6px;border-top:1px solid var(--ks-line);border-radius:10px;font-size:12.5px;cursor:pointer}.dx-chk li:first-child{border-top:0}.dx-chk li:hover{background:#F6FAF7}
.dx-chk li>.hi{flex:none;font-size:19px;color:#C9CEC8}.dx-chk li.d>.hi{color:#00A550}.dx-chk li>span{flex:1;display:grid;min-width:0}.dx-chk b{font-weight:600}.dx-chk small{font-size:11px;color:#7A857F}
.dx-chk li.d b{color:#5B6660}.dx-chk .dx-si{width:26px;height:26px;font-size:14px;background:#F5F7F4;color:#6B7470}
@media (max-width:720px){
  .kw-ptabs button{font-size:12.5px}.kw-ptabs[role="tablist"]{overflow-x:auto;scrollbar-width:none}.kw-ptabs[role="tablist"]::-webkit-scrollbar{display:none}
  .dx-q{display:none}
  .dx-emp{--c:minmax(0,1fr) auto}.dx-emp li>:nth-child(2){display:none}.dx-emp .ks-chip{font-size:10.5px;padding:2px 7px}
  .dx-jobs,.dx-skl{--c:minmax(0,1fr) 74px}.dx-jobs li>:nth-child(2),.dx-skl li>:nth-child(2){display:none}
  .dx-cand{--c:minmax(0,1fr) 72px}.dx-cand li>:nth-child(n+3){display:none}
  .dx-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-cal{grid-template-columns:30px repeat(5,minmax(0,1fr));grid-template-rows:40px repeat(6,44px)}.dx-cal .dh{flex-direction:column;gap:1px;font-size:10px}.dx-ev{grid-template-columns:minmax(0,1fr);margin:2px;padding:4px 5px}.dx-ev .v-av,.dx-ev small{display:none}.dx-ev b{grid-column:1 / -1;font-size:10.5px}
  .dx-br.n2{--n:1;gap:0;padding-top:0}.dx-br.n2::before{display:none}.dx-br.n2 .dx-col{margin-top:0;padding-top:0}   /* a phone runs the branches one after the other */
  .dx-bh>.v-b:not(.p):not([data-runflow]){display:none}
  .dx-bt b{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.dx-st.nw{animation:none}.dx-prog>i b{transition:none}}
/* the tab views' lists keep every row readable on hover (the row itself takes the tint); the jobs' chips stay on one line */
.kw-view :is(.dx-tb,.dx-tpl,.dx-chk,.dx-req,.dx-mt,.dx-run,.dx-act,.dx-fail):has(> li:hover) > li:not(:hover){opacity:1}
.dx-jobs .dx-sks{flex-wrap:nowrap;overflow:hidden}

/* ── Mark 28-10: the module grid shows one thing per card, big enough to read ── */
#platform .mthumb.pk{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:auto;min-height:150px;padding:22px 22px 20px;border-radius:16px;background:#F6FAF7;box-shadow:inset 0 0 0 1px rgba(8,50,30,.06)}
#platform .mthumb.pk::before,#platform .mthumb.pk::after{display:none}
#platform .pk-n{font:300 clamp(34px,3.2vw,46px)/1 var(--sans);font-stretch:122%;letter-spacing:-.02em;color:#1A2233;font-variant-numeric:tabular-nums;white-space:nowrap}
#platform .pk-l{font-size:14px;line-height:1.35;color:#5B6660}
#platform .pk-bar{display:block;height:6px;margin-top:6px;border-radius:99px;background:#E3F2E9;position:relative;overflow:hidden}
#platform .pk-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:#00693E}
@media (max-width:720px){#platform .mthumb.pk{min-height:0;padding:18px}}

/* ── Mark 28-10: Karma on the front page is one calm section, no green fog; on phones only the card ── */
#karma.field-sec{background:linear-gradient(180deg,#FFFFFF 0%,#F6FAF7 40%,#F6FAF7 100%);padding-bottom:clamp(64px,7vw,104px)}
#karma.field-sec::after,#karma canvas,#karma .fieldc{display:none}
@media (max-width:720px){#karma .graph,#karma .kd-wires{display:none}#karma .demo{min-height:0}}

/* ── Mark 28-10: Tid & fravær's tabs Fravær, Refusion and Barsel ── */
.dx-btn.p{background:#00693E;border-color:#00693E;color:#fff}.dx-btn.p .hi{color:#fff}.dx-btn.p:hover{background:#0B5A36}
.kw-view .v-acts .dx-btn{flex:1;justify-content:center}
.dx-ac{display:grid;grid-template-columns:92px repeat(var(--n),minmax(0,1fr));gap:6px 3px;align-items:center;margin-top:4px}
.dx-ac>b{display:grid;justify-items:center;font:500 10.5px/1.1 var(--sans);color:#7A857F}.dx-ac>b i{font-style:normal;font-weight:600;font-size:12.5px;color:#1A2233}
.dx-ac>b.on i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#00693E;color:#fff}
.dx-acr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:34px;border-radius:10px;cursor:pointer;transition:background .2s}
.dx-acr:hover{background:#F6FAF7}.dx-acr[aria-current]{background:#EEF7F1;box-shadow:inset 0 0 0 1px #BFD8C9}
.dx-acn{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:550;color:#1A2233;padding-left:4px}.dx-acn .v-av,.dx-acn .dx-ini{width:22px;height:22px}
.dx-acb{grid-row:1;height:22px;display:flex;align-items:center;padding:0 8px;border-radius:7px;font:600 11px/1 var(--sans);font-style:normal;white-space:nowrap;overflow:hidden;transition:transform .2s,filter .2s}
.dx-acb.f{background:#DCEFE3;color:#0B5A36}.dx-acb.r{background:#FDECEC;color:#B42318}.dx-acb.b{background:#FCEFDD;color:#8F5300}
.dx-acb.p{background:repeating-linear-gradient(135deg,#fff 0 5px,#F1F8F4 5px 10px);box-shadow:inset 0 0 0 1.5px #7FC29C}
.dx-acr:hover .dx-acb{transform:translateY(-1px);filter:saturate(1.15)}
.dx-leg{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;font-size:11.5px;color:#6B7470}.dx-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dx-leg i.f{background:#DCEFE3}.dx-leg i.r{background:#FDECEC}.dx-leg i.b{background:#FCEFDD}.dx-leg i.p{box-shadow:inset 0 0 0 1.5px #7FC29C}
.dx-ref{--c:minmax(0,1.5fr) 90px minmax(0,1.3fr) 76px}
.dx-rt{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:16px 0 4px;font-size:11.5px;color:#6B7470}
.dx-rt i{position:relative;height:8px;border-radius:99px;background:#E3F2E9}.dx-rt i b{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:#A9D8BE}
.dx-rt i em{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:#00693E;transform:translateX(-50%)}
.dx-bp{display:flex;gap:3px;margin:8px 0 6px}
.dx-bp button{min-width:0;display:grid;gap:2px;text-align:left;padding:9px 10px;border:0;border-radius:10px;cursor:pointer;font:inherit;transition:transform .2s,box-shadow .2s}
.dx-bp button b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dx-bp button span{font-size:11px;opacity:.8}
.dx-bp .b{background:#FCEFDD;color:#8F5300}.dx-bp .g{background:#DCEFE3;color:#0B5A36}.dx-bp .f{background:#F1F3EF;color:#4F596B}
.dx-bp button:hover{transform:translateY(-2px)}.dx-bp button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #00693E}
.dx-bpx{display:flex;justify-content:space-between;font-size:11px;color:#7A857F;margin-bottom:10px}.dx-bpx .m{color:#00693E;font-weight:600}
.dx-bpl{--c:minmax(0,1.4fr) 64px minmax(0,1.2fr)}

/* ── Mark 30-10: the card answers the mouse (a small lift), its lines do not; only a row you can pick (an employee,
   a case) gets a quiet tint, and buttons keep theirs ── */
@media (hover:hover){
  .kw-view .kv-stop>.vc,.kw-view .kv-col>.vc{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
  .kw-view .kv-stop>.vc:hover,.kw-view .kv-col>.vc:hover{transform:translateY(-3px);box-shadow:0 28px 48px -30px rgba(8,50,30,.45),0 0 0 1px rgba(8,50,30,.06)}
  .kw-view [data-pk]:not(button){transition:background .2s;cursor:pointer}
  .kw-view [data-pk]:not(button):not([aria-current="true"]):hover{background:#F6FAF7}
  .kw-view .v-b,.kw-view .dx-btn{transition:transform .2s,background .2s,border-color .2s}.kw-view .v-b:hover,.kw-view .dx-btn:hover{transform:translateY(-1px)}
}
@media (max-width:720px){.dx-ac{grid-template-columns:64px repeat(var(--n),minmax(0,1fr))}.dx-acn{font-size:0;gap:0}.dx-acb{font-size:0;padding:0}.dx-ref{--c:minmax(0,1fr) 80px}.dx-ref li>span:nth-child(n+3){display:none}.dx-bp button span{display:none}.dx-bpl{--c:minmax(0,1fr) 60px}.dx-bpl li>span:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){.kw-view .vc,.kw-view .vc *{transition:none!important;transform:none!important}}
.dx-ref .dx-n>span,.dx-bpl li>span:first-child{display:grid;min-width:0}.dx-bpl li>span:first-child small{font-size:11px;color:#7A857F}
.dx-amt{font-weight:600;font-variant-numeric:tabular-nums;color:#1A2233;font-size:12.5px}
.dx-ref li>span,.dx-bpl li>span{border:0!important;background:none!important;box-shadow:none!important;padding:0}
.dx-ref li>span::before,.dx-ref li>span::after{display:none}

/* Løn tabs (29-10): a row's first cell without a face */
.dx-ref .dx-tx{display:grid;min-width:0;justify-items:start;text-align:left}.dx-ref .dx-tx small{font-size:11px;color:#7A857F}

/* Flows (29-10): × on a step, the two-question + panel, and the dry run */
.dx-rm{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#fff;color:#4F5B54;font:600 13px/1 var(--sans);box-shadow:0 0 0 1px rgba(8,50,30,.14);cursor:pointer;opacity:0;transition:opacity .15s}
.dx-st:hover .dx-rm,.dx-rm:focus-visible{opacity:1}.dx-rm:hover{color:#B42318}
@media (hover:none){.dx-rm{opacity:1}}
.dx-add.on{transform:rotate(45deg);background:#0B5A36}
.dx-ask{width:100%;max-width:270px;margin:0 0 8px;padding:10px;border-radius:14px;background:#fff;box-shadow:0 0 0 1.5px #5CC08A,0 12px 26px -14px rgba(8,50,30,.45);animation:dxpop .3s cubic-bezier(.16,1,.3,1);text-align:left}
.dx-ask .dx-lbl{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}
.dx-x{border:0;background:none;font-size:15px;line-height:1;color:#7A857F;cursor:pointer}
.dx-opts{display:flex;flex-wrap:wrap;gap:6px}
.dx-opts button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:999px;background:#F1F3EF;font:600 12px/1 var(--sans);color:#1A2233;cursor:pointer}
.dx-opts button:hover{background:#E3F2E9;color:#00693E}.dx-opts button svg{width:13px;height:13px}
.dx-cv.run .dx-add,.dx-cv.run .dx-rm{opacity:.3;pointer-events:none}
.dx-st.go{box-shadow:0 0 0 1.5px #00A550,0 8px 18px -12px rgba(8,50,30,.4);animation:dxgo .5s cubic-bezier(.16,1,.3,1)}
.dx-st.go .dx-si{background:#00A550;color:#fff;transition:background .2s}
@keyframes dxgo{40%{transform:scale(1.035)}}
.v-b.on{background:#E3F2E9;color:#00693E}
@media (prefers-reduced-motion:reduce){.dx-st.go,.dx-ask{animation:none}}
/* Refusion sent, Løn totals */
.dx-sent{margin:10px 0 0}.dx-sent li{cursor:default}
.dx-dk{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:11.5px;color:#7A857F}.dx-dk svg{width:13px;height:13px}
.dx-tb li.dx-tot{border-top:1px solid rgba(8,50,30,.12);background:none!important;cursor:default;font-weight:600}
.dx-done{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--sans);color:#00693E}
.fs-go{cursor:pointer}.fs-go:hover{background:#F6FAF7}
.dx-seg+.dx-tb{margin-top:10px}

/* Refusion as our NemRefusion form (29-10) */
.dx-rs{display:grid;grid-template-columns:repeat(5,1fr);margin:12px 0 4px;padding:0;list-style:none}
.dx-rs li{display:grid;justify-items:center;gap:5px;position:relative}
.dx-rs li::before{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;background:#E3E7E2}.dx-rs li:first-child::before{display:none}
.dx-rs li.d::before,.dx-rs li.now::before{background:#00A550}
.dx-rs i{position:relative;width:12px;height:12px;border-radius:50%;background:#E3E7E2}
.dx-rs li.d i{background:#00A550}.dx-rs li.now i{background:#fff;box-shadow:inset 0 0 0 3px #00A550}
.dx-rs small{font-size:10.5px;color:#7A857F}.dx-rs li.now small{color:#00693E;font-weight:600}
.dx-form{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#FAFBF9;box-shadow:inset 0 0 0 1px rgba(8,50,30,.08)}
.dx-fh{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:12.5px}.dx-fh span{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#00693E}.dx-fh svg{width:12px;height:12px}
.dx-form .dx-q{display:grid!important;gap:1px;height:auto!important;min-height:0!important;margin:0!important;padding:5px 0!important;overflow:visible!important;border:0!important;border-top:1px solid rgba(8,50,30,.06)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.dx-form .dx-q small{font-size:10.5px;line-height:1.3;color:#7A857F}.dx-form .dx-q strong{font-size:12.5px;line-height:1.3;font-weight:600;color:#1A2233}
.dx-form .dx-qt strong{color:#00693E}
@media (max-width:720px){.dx-rs small{display:none}.dx-rs li.now small{display:block;white-space:nowrap}.dx-fh{flex-wrap:wrap;gap:4px}}
.dx-rcpt{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:#00693E}.dx-rcpt svg{width:14px;height:14px}
.dx-mut{font-size:11.5px;color:#7A857F}
.dx-ref .dx-n{justify-content:start;justify-self:stretch;text-align:left}

/* Løn on the front page (30-10): simple salary review and pay transparency */
.dx-pg{display:grid;gap:2px;margin:6px 0 10px}.dx-pg b{font:500 34px/1 var(--serif);color:#1A2233;font-variant-numeric:tabular-nums}.dx-pg small{font-size:12px;color:#7A857F}
.dx-pw{display:flex;align-items:center;gap:8px;margin:0;padding:9px 11px;border-radius:12px;background:#FCEFDD;color:#8F5300;font-size:12.5px}.dx-pw svg{width:16px;height:16px;flex:none}.dx-pw b{font-weight:600}
/* Folded in (the default, Mark 30-10): the rail shows Komma's o; hovering the top swaps it for the fold-out button.
   Each icon names itself in a dark tooltip to its right */
.kw-app{position:relative}
.kw-app.mini .kw-lg{display:grid;place-items:center}.kw-app.mini .kw-lg>*{grid-area:1/1}
.kw-app.mini .kw-lg>svg{transition:opacity .15s}
.kw-app.mini .kw-fold{width:36px;height:36px;opacity:0;transition:opacity .15s,background .2s,color .2s}
.kw-app.mini .kw-fold svg{width:22px;height:22px;stroke-width:1.8}
.kw-app.mini .kw-lg:hover>svg,.kw-app.mini .kw-lg:has(.kw-fold:focus-visible)>svg{opacity:0}
.kw-app.mini .kw-lg:hover .kw-fold,.kw-app.mini .kw-fold:focus-visible{opacity:1;color:#fff}
.kw-tip{position:absolute;z-index:30;left:0;top:0;transform:translate(-4px,-50%);padding:7px 10px;border-radius:8px;background:#1A2233;color:#fff;font:500 12.5px/1 var(--sans);white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 8px 20px -8px rgba(8,30,20,.45);transition:opacity .12s,transform .12s}
.kw-tip::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:2px;background:inherit;transform:rotate(45deg)}
.kw-tip.on{opacity:1;transform:translate(0,-50%)}
@media (prefers-reduced-motion:reduce){.kw-tip,.kw-app.mini .kw-lg>svg,.kw-app.mini .kw-fold{transition:none}}
/* Phone: no demo window. The module pills wrap to two rows with short names and switch one card on a green panel,
   cropped at its foot (Personio's grip, Mark 02-11). iPad and desktop keep the window. */
.kw-mob,.kw-tabs .kw-s{display:none}
@media (max-width:720px){
  .hero.kw:not(.kw-sub) .kw-stage{display:none}
  .hero.kw:not(.kw-sub) .kw-tabs{flex-wrap:wrap;justify-content:center;overflow:visible;gap:8px 6px;padding:0 8px;margin:26px 0 0}
  .hero.kw .kw-tabs .kw-l{display:none}.hero.kw .kw-tabs .kw-s{display:inline}
  .hero.kw .kw-mob{display:block;position:relative;z-index:4;height:340px;margin:18px 16px 0;border-radius:28px;background:#D3EADC;overflow:hidden}
  .kw-mc{display:none;position:absolute;left:50%;top:28px;transform:translateX(-50%)}
  .kw-mc.on{display:block;animation:kwMc .3s cubic-bezier(.16,1,.3,1)}
  .kw-mc>[data-ms-card]{position:relative!important;width:300px!important;margin:0!important;opacity:1!important;transform:none!important}
  .kw-mob .fs-tabs span:nth-child(4){display:none}
}
@keyframes kwMc{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.kw-mc.on{animation:none}}