/* Extra pieces for the solutions scenes (tools/site/scenes/solutions.py). Tokens only, so
   light and dark both follow the theme; logo chips stay white like .mk-logo. */
.mk.mks-fit{display:flex;flex-direction:column;justify-content:center}
.mk.mks-top{padding-bottom:0}
.mks-top>.mk-win{border-bottom-left-radius:0;border-bottom-right-radius:0}
.mks-row{display:flex;align-items:center;gap:8px}
.mks-row>*{min-width:0}
.mks-wrap{flex-wrap:wrap}
.mks-w{display:flex;justify-content:center;align-self:stretch}
.mks-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.mks-between{justify-content:space-between}
.mks-stack{display:flex;flex-direction:column;gap:8px}
.mks-stack>.mk-pill{align-self:flex-start}
.mks-lines{display:flex;flex-direction:column;gap:6px;min-width:0}
.mks-row>.mks-lines{flex:1}
.mks-skt .mk-sk{height:14px}
.mks-muted{color:var(--ink-3)}
.mks-lead{color:var(--ink)}
.mks-u{text-decoration:underline}
.mks-teal{color:var(--mk-ok)}
.mks-red{color:var(--red)}
.mks-block{height:clamp(40px,13cqi,86px);border-radius:8px;background:var(--card-2)}
.mks-code{display:grid;place-items:center;font:700 clamp(26px,8cqi,48px)/1 var(--mono);color:var(--ink-3);opacity:.5}
.mks-ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.mks-ul .mks-ul{margin-top:2px}
.mks-ul.mks-loose{gap:14px;padding-top:12px}
.mks-ul li::marker{color:var(--ink-3)}
.mks-in{margin-left:20px}
.mk .mk-card>b.mks-cardt{font:700 15px/1.2 var(--display);letter-spacing:-.02em}
.mks-callout{border-radius:8px;background:var(--card-2);padding:9px 12px;color:var(--ink-2)}
.mks-callout>*+*{margin-top:4px}
.mks-callout--ok{background:var(--mk-ok-bg)}
.mks-sw{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px var(--line-2);vertical-align:-1px;margin-left:3px}
.mks-sw--l{width:22px;height:22px;border-radius:6px;margin:0;flex:none}
.mks-sq{display:block;width:30px;height:30px;border-radius:7px;background:var(--card-2)}
.mks-comp{color:var(--ink);font-size:13px;gap:1px}


/* partner logos */
.mks-chips{position:absolute;right:clamp(12px,4%,30px);bottom:clamp(12px,4%,30px);z-index:4;display:flex;gap:6px;padding:7px 10px;border-radius:999px;background:#fff;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5),0 0 0 1px rgba(15,15,18,.06)}
.mks-chips span,.mks-logos span,.mks-app{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff;flex:none}
.mks-logos span,.mks-app{box-shadow:0 8px 20px -12px rgba(0,0,0,.45),0 0 0 1px rgba(15,15,18,.08)}
.mks-chips img,.mks-chips svg,.mks-logos img,.mks-logos svg{width:66%;height:66%;object-fit:contain;display:block}
.mks-app{width:26px;height:26px;border-radius:7px}.mks-app img{width:16px;height:16px;object-fit:contain}
.mks-logos{display:flex;flex-direction:column;align-items:center;gap:8px}
.mks-logos--s{flex-direction:row;justify-content:center}
.mks-logos span.is-on{transform:scale(1.18);box-shadow:0 0 0 2px var(--mk-ok),0 10px 24px -12px rgba(0,0,0,.5)}

/* Kipwise page bits */
.mks-plus{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:12px}
.mks-plus i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.3px var(--mk-ok);color:var(--mk-ok);font:600 12px/1 var(--sans)}
.mks-pop{align-self:flex-start;margin-left:24px}
.mks-who{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 2px;border-radius:999px;background:var(--mk-rev-bg);color:var(--mk-rev);font-size:11px;font-weight:600;align-self:flex-start;white-space:nowrap}
.mks-who .mk-av{border-radius:50%}
.mks-who i{font-style:normal;margin-left:4px;opacity:.7}
.mks-tile{display:flex;flex-direction:column;gap:6px;padding:8px 9px;border-radius:9px;background:var(--card-2)}
.mks-tile>b{font-size:12px;color:var(--ink)}
.mks-eye{display:inline-flex;align-items:center;gap:2px;margin-left:auto;color:var(--mk-ok);font-size:11px;font-weight:700}
.mks-btn{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:7px;background:var(--lime);color:#0f0f12;font-size:12px;font-weight:700;white-space:nowrap}
.mks-btn--off{opacity:.45}
.mks-btn,.mks-who,.mks-toggle{flex:none}
.mks-field{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:34px;padding:6px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12px}
.mks-field--list{flex-direction:column;align-items:stretch}
.mks-field--list>div>span{display:flex;align-items:center;gap:8px;padding:3px 0;font-weight:600;color:var(--ink)}
.mks-eyebrow{font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.mks-sel{display:inline-flex;align-items:center;height:26px;padding:0 8px;margin-left:6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2)}
.mks-review{font-size:12px}
.mks-selw{position:relative}
.mks-tpl{flex-direction:row;justify-content:space-between;padding:0;overflow:hidden;gap:0}
.mks-tpl>div{display:flex;flex-direction:column;gap:6px;padding:10px 12px;font-size:12px;color:var(--ink)}
.mks-thumb{display:grid;place-items:center;width:34%;background:var(--mk-ok-bg);color:var(--mk-ok)}
.mks-thumb .mk-ico{width:36px;height:36px}.mks-thumb .mk-ico svg{width:30px;height:30px}
.mks-embedrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;background:var(--card-2);color:var(--ink-3);font-size:12px}
.mks-embedrow img{width:16px;height:16px;object-fit:contain;flex:none}
.mks-persona{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.mks-persona>.mk-av{border-radius:12px}
.mks-q{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.mks-q p{margin:0 0 6px;font-size:12.5px;color:var(--ink-2)}

/* overlaps */
.mks-ovl{position:relative}
.mks-float{position:absolute;z-index:3}
.mks-float>.mk-card,.mks-rpanel>.mk-card,.mks-pair>*+*>.mk-card{box-shadow:0 24px 50px -22px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.mks-ovl--stack>.mk-win{margin-left:9%}
.mks-assigned{left:0;top:13%;width:min(250px,31%)}
.mks-assigned .mk-card{gap:8px}
.mks-actsw{position:relative;z-index:2;width:min(230px,52%);margin:-70px 3% 0 auto}
.mks-actsw>.mk-menu{box-shadow:0 24px 50px -20px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.mks-acts .mks-lines{padding:6px 8px 9px;border-bottom:1px solid var(--line);margin-bottom:3px}
.mks-ovl--review>.mk-win{margin-right:18%}
.mks-rpanel{position:relative;z-index:2;margin:-12% 0 0 8%}
.mks-ovl--lang>div:first-child{margin-left:28%}
.mks-langm{left:0;top:10%;width:32%}
.mks-langm .mk-menu{min-width:0}
.mks-ja{font-size:11px;gap:5px}
.mk .mks-ja>b.mks-cardt{font-size:13px}
.mks-ja .mks-embedrow{padding:5px 8px;font-size:10.5px}
.mks-ja .mk-p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mks-ovl--hist>.mk-card{margin:6% 40% 0 0}
.mks-ovl--hist .mk-p{font-size:11.5px}
.mks-histm{right:0;top:0;width:44%}
.mks-2l{display:flex;flex-direction:column;line-height:1.3}
.mks-sp{width:10px;flex:none}
.mks-histm .mk-menu{min-width:0}
.mks-pair>*{width:68%}
.mks-pair>*+*{position:relative;z-index:1;margin:-10% 0 0 auto}
.mk-card.mks-doccard{padding:14px 16px;gap:8px}
.mk .mks-doccard>b{font:700 clamp(14px,4cqi,18px)/1.2 var(--display);letter-spacing:-.02em}
.mks-insights .mks-pair>*{width:64%}
.mks-insights .mks-pair>*+*{margin-top:-17%}

/* Slack bits */
.mk-embed>header svg{width:14px;height:14px;flex:none}
.mk-ext .mk-input>span{white-space:nowrap;overflow:hidden;font-size:11.5px}
.mks-res{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-left:9px;border-left:3px solid var(--line-2);font-size:12px}
.mks-big{font-size:14px;font-weight:800}
.mks-hint{position:absolute;left:12px;right:12px;bottom:52px;z-index:3;display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;padding:8px 10px;border-radius:9px;
  background:var(--win);box-shadow:0 12px 30px -12px rgba(0,0,0,.45),0 0 0 1px var(--line);font-size:12px}
.mks-hint b{display:block}.mks-hint span{font-size:11px;color:var(--ink-3)}
.mks-site{position:relative}
.mks-hl{background:var(--mk-men-bg);color:var(--mk-men)}
.mks-ctxm{position:absolute;left:14%;top:22%;z-index:3;min-width:150px}
.mks-ask{margin-left:39px;font-size:12px}
.mk-sbtn.mks-sbtn-g{color:var(--mk-send);box-shadow:inset 0 0 0 1px var(--mk-send)}

/* Slack wiki hero: the app window with Slack on a phone in front */
.mks-duo{position:relative;padding-left:21%}
.mks-dev{position:absolute;left:0;bottom:0;width:31%;z-index:3}
.mks-dev .mk-phone{width:100%}
.mks-dev .mk-phone>div{min-height:0}

/* remote work and company wiki icons */
.mks-icon{display:block;width:min(52%,180px);height:auto;margin:0 auto}
.mks-icon .bg{fill:var(--win)}
.mks-icon g{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mks-icon .ac{stroke:var(--mk-ok)}
.mks-icon .pp{stroke:var(--ink)}

/* about us */
.mks-badges{display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:clamp(220px,56cqi,380px);padding-left:8%}
.mks-badges>div:first-child{margin-left:24%}
.mks-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 24px 10px 12px;border-radius:999px;background:var(--lime);color:#0f0f12;font-size:13px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.mks-badge b{display:block;font:800 clamp(20px,6cqi,28px)/1 var(--display);letter-spacing:-.03em}
.mks-badge .mk-ico{width:34px;height:34px;border-radius:50%;background:#0f0f12;color:var(--lime)}
.mks-badge .mk-ico svg{width:17px;height:17px}

/* distributed team around a globe */
.mks-globe{position:relative;aspect-ratio:1.2;max-width:520px;margin:0 auto}
.mks-globe>svg{position:absolute;inset:0;width:100%;height:100%}
.mks-globe .ln path{fill:none;stroke:var(--ink-3);stroke-width:.6;stroke-dasharray:2.5 2}
.mks-globe .gl *{fill:none;stroke:var(--ink-2);stroke-width:.7}
.mks-globe .gl circle{fill:var(--card-3)}
.mks-globe .st{fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linecap:round}
.mks-spot{position:absolute;transform:translate(-50%,-50%)}
.mks-face{display:block;padding:4px;border-radius:12px;background:var(--win);box-shadow:0 12px 26px -14px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.mks-face .mk-av{--s:clamp(28px,8cqi,44px)!important}

/* enterprise */
.mks-flow{display:grid;grid-template-columns:auto 26px auto 26px minmax(0,1.5fr) 26px auto;align-items:center;gap:10px;max-width:900px;margin:0 auto}
.mks-arrow{position:relative;height:2px;background:var(--line-2)}
.mks-arrow::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid var(--line-2);border-right:0}
.mks-flow .mks-logos span{width:46px;height:46px;border-radius:12px}
.mks-grid4{display:grid;grid-template-columns:repeat(3,auto);gap:6px;padding:10px;border-radius:14px;background:var(--win);box-shadow:0 0 0 1px var(--line)}
.mks-sso{display:flex;flex-direction:column;align-items:center}
.mks-sso>i{width:2px;height:12px;background:var(--mk-ok);flex:none}
.mks-sso>.mks-avs{padding:5px 10px;border-radius:999px;background:var(--navy)}
.mks-sso .mk-card{width:78%;flex-direction:row;align-items:center}
.mks-q2{flex-direction:row;align-items:center}
.mks-ai .mks-pair>:first-child{width:82%}
.mks-ai .mks-pair>*+*{width:74%;margin-top:-2%}
.mk-mt>.mks-lines{align-self:stretch}
.mks-q2>div{flex:1}
.mks-avs{display:flex}
.mks-avs .mk-av{border-radius:50%;box-shadow:0 0 0 2px var(--win)}
.mks-avs .mk-av+.mk-av{margin-left:-7px}
.mks-fun{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;width:var(--w);border-radius:10px;overflow:hidden;background:var(--win);box-shadow:0 0 0 1px var(--line)}
.mks-fun>span:first-child{display:flex;align-items:center;gap:6px;min-width:112px;padding:7px 10px;background:var(--navy);color:#fff;font-size:12px;font-weight:700}
.mks-fun .mks-avs{padding:0 10px}
.mks-right{align-self:flex-end;font-size:11px;font-weight:600}
.mks-chart2{display:block;width:100%;height:auto}
.mks-chart2 .g line{stroke:var(--line)}
.mks-chart2 .g text{font:500 7px var(--mono);fill:var(--ink-3)}
.mks-chart2 path{fill:none;stroke-width:2;stroke-linecap:round}
.mks-chart2 path.a{stroke:var(--mk-ok)}.mks-chart2 path.b{stroke:var(--mk-l2)}
.mk-live .mks-draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease-out}
.mk-live .mks-draw.is-on path{stroke-dashoffset:0}
.mks-del{text-decoration:line-through;background:var(--mk-rev-bg);color:var(--mk-rev);border-radius:3px;padding:0 2px}
.mks-ins{text-decoration:none;background:var(--mk-ok-bg);color:var(--mk-ok);border-radius:3px;padding:0 2px}
.mks-tpf{flex-direction:row;align-self:center;gap:20px;padding:14px 22px}
.mks-tpf .mk-ico{width:30px;height:30px}.mks-tpf .mk-ico svg{width:24px;height:24px}

/* trackable links */
.mks-links{gap:4px}
.mks-links__r{display:grid;grid-template-columns:minmax(0,2fr) 30px minmax(0,2fr) 30px;gap:8px;align-items:center;font-size:12px;padding-top:8px}
.mks-links__r b{font-size:12.5px}
.mks-links__r>span:nth-child(2){text-align:center}
.mks-links__r code{font:10.5px/1.4 var(--mono);padding:5px 6px;border-radius:5px;background:var(--card-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mks-links__h{padding:6px 8px;border-radius:6px;background:var(--card-2);font-weight:700;font-size:11px;color:var(--ink-2)}
.mks-toggle{width:26px;height:15px;border-radius:8px;background:var(--mk-ok);position:relative}
.mks-toggle::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.mks-by{display:flex;align-items:center;gap:5px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mks-by .mk-av{border-radius:50%}

@container (max-width:620px){
  .mks-flow{grid-template-columns:minmax(0,1fr);justify-items:center}
  .mks-flow .mks-logos{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .mks-flow>.mks-step:has(.mk-win){width:100%}
  .mks-arrow{width:2px;height:18px}
  .mks-arrow::after{right:auto;left:-4px;top:auto;bottom:-3px;border:5px solid transparent;border-top:7px solid var(--line-2);border-bottom:0}
}
@container (max-width:560px){
  .mks-duo{padding-left:0}
  .mks-dev{position:relative;width:min(250px,86%);margin:-70px auto 0}
  .mks-ovl--stack>.mk-win{margin-left:0}
  .mks-ovl--stack>.mks-float{position:relative;left:auto;top:auto;width:auto;margin:-24px 6% 0}
}
@container (max-width:460px){
  .mks-insights .mks-pair>*{width:90%}
  .mks-insights .mks-pair>*+*{margin-top:-4%}
}
@container (max-width:400px){
  .mks-links__r{grid-template-columns:minmax(0,1fr) 36px 44px}
  .mks-links__r code,.mks-links__h>span:nth-child(3){display:none}
}