/* Free cards for the module pages: simplified Komma cards with no app around them and no notes beside them
   (Personio-like, Komma DNA). The same white-card-in-frosted-glass language as forside-skitse2's tour (.fl/.fg/.fw).
   Every size is in --u, 1 % of the stage's width, so a composition scales as one picture; phones restack it. */

.fl{--u:1cqw;position:relative;container-type:inline-size;aspect-ratio:1600/900;color:#1A2233}
.fl.glow{border-radius:28px;background:radial-gradient(52% 62% at 50% 50%,rgba(92,192,138,.24),rgba(227,242,232,.32) 58%,transparent 78%)}
.fl>*{position:absolute;font:400 calc(var(--u)*1.3)/1.3 var(--sans);left:calc(var(--u)*var(--x,0));top:calc(var(--u)*var(--y,0))}.fl>[style*="--cw"]{width:calc(var(--u)*var(--cw))}
.fl .hi{display:inline-grid;place-items:center;flex:none}.fl .hi svg{width:1em;height:1em}.fl .hi path[fill-rule]{fill:currentColor}

/* the card: a white card inside a thick frosted-glass rim */
.fg{padding:calc(var(--u)*.55);border-radius:calc(var(--u)*2);background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(255,255,255,.42));border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(8,50,30,.06),0 calc(var(--u)*2.6) calc(var(--u)*5) calc(var(--u)*-2.8) rgba(8,50,30,.5);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.fw{background:#fff;border-radius:calc(var(--u)*1.5);padding:calc(var(--u)*1.6) calc(var(--u)*1.8);box-shadow:0 0 0 1px rgba(26,34,51,.05)}
.fg.dark{background:linear-gradient(160deg,rgba(11,90,54,.7),rgba(6,55,34,.6))}.fg.dark .fw{background:linear-gradient(160deg,#0B4F33,#073A26);color:#fff}
.fg.pill{border-radius:99px}.fg.pill .fw{border-radius:99px;padding:calc(var(--u)*.9) calc(var(--u)*1.5)}

/* shared bits */
.fa{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 calc(var(--u)*.16) #fff}
.f-tag{display:inline-flex;align-items:center;gap:calc(var(--u)*.4);padding:calc(var(--u)*.35) calc(var(--u)*.85);border-radius:99px;background:#EFEFEB;color:#4F596B;font-size:calc(var(--u)*1.02);font-weight:600;white-space:nowrap}
.f-tag.g{background:#0B4F33;color:#fff}.f-tag.m{background:#E3F1E9;color:#00693E}.f-tag.a{background:#FCEFDD;color:#8F5300}.f-tag.r{background:#FDECEC;color:#B3302B}
.f-hd{display:flex;align-items:center;gap:calc(var(--u)*.8);margin-bottom:calc(var(--u)*1.3)}.f-hd>b{font:500 calc(var(--u)*2)/1.1 var(--serif)}.f-hd>.f-tag{margin-left:auto}
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*.85) calc(var(--u)*1.5);border-radius:99px;background:#00693E;color:#fff;font-weight:600;white-space:nowrap}
.f-btn .hi{font-size:calc(var(--u)*1.5)}
.f-ring{--p:50;position:relative;width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);border-radius:50%;display:grid;place-items:center;background:conic-gradient(#00A550 calc(var(--p)*1%),rgba(255,255,255,.14) 0);flex:none}
.f-ring::before{content:"";position:absolute;inset:calc(var(--u)*.35);border-radius:50%;background:#0A452D}.f-ring b{position:relative;font-size:calc(var(--u)*.95);font-weight:600}
.f-ring.big{width:calc(var(--u)*6.4);height:calc(var(--u)*6.4)}.f-ring.big::before{inset:calc(var(--u)*.55)}.f-ring.big b{font-size:calc(var(--u)*1.8)}

/* job match: the ranked list and one candidate taken apart */
.f-cands{list-style:none;margin:0;padding:0}
.f-cands li{display:grid;grid-template-columns:auto 1fr calc(var(--u)*8) calc(var(--u)*3.2);align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.85) calc(var(--u)*.7);border-top:1px solid #F0EEE9;font-weight:550}
.f-cands li:first-child{border-top:0}.f-cands li.on{background:#EEF7F1;border-radius:calc(var(--u)*1)}.f-cands li.on+li{border-top-color:transparent}
.f-cands i{height:calc(var(--u)*.6);border-radius:99px;background:linear-gradient(90deg,#00693E var(--w),#EDF0EC var(--w))}.f-cands b{font-size:calc(var(--u)*1.12);text-align:right;font-variant-numeric:tabular-nums}
.f-mhd{display:flex;align-items:center;gap:calc(var(--u)*1.3);margin-bottom:calc(var(--u)*1.4)}.f-mhd b{display:block;font-size:calc(var(--u)*1.75);font-weight:600}.f-mhd span{font-size:calc(var(--u)*1.15);color:rgba(255,255,255,.66)}
.f-crit{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.85)}.f-crit li{display:flex;align-items:center;gap:calc(var(--u)*1.1);font-size:calc(var(--u)*1.35);font-weight:550}

/* the yardstick: one weighted profile, every candidate placed on it axis by axis */
.f-rule{display:grid;gap:calc(var(--u)*.2)}
.f-rule .ax{display:grid;grid-template-columns:calc(var(--u)*13) 1fr;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1.05) 0;border-top:1px solid #F0EEE9}
.f-rule .ax:first-of-type{border-top:0}
.f-rule .ax>span{display:grid;gap:calc(var(--u)*.35);font-weight:600}
.f-wt{display:flex;gap:calc(var(--u)*.3)}.f-wt i{width:calc(var(--u)*.62);height:calc(var(--u)*.62);border-radius:50%;background:#E2E6E1}.f-wt i.on{background:#00693E}
.f-track{position:relative;height:calc(var(--u)*2.8)}
.f-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(var(--u)*.36);margin-top:calc(var(--u)*-.18);border-radius:99px;background:linear-gradient(90deg,#EDF0EC,#DCEBE1)}
.f-track .fa{position:absolute;top:50%;left:calc(var(--s)*1%);translate:-50% -50%;width:calc(var(--u)*2.5);height:calc(var(--u)*2.5)}
.f-track .fa.on{z-index:2;width:calc(var(--u)*2.9);height:calc(var(--u)*2.9);box-shadow:0 0 0 calc(var(--u)*.2) #fff,0 0 0 calc(var(--u)*.4) #00A550}
.f-scale{display:grid;grid-template-columns:calc(var(--u)*13) 1fr;gap:calc(var(--u)*1.4);font-size:calc(var(--u)*1);color:#8A918C}.f-scale>div{display:flex;justify-content:space-between}
.f-rank{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.5)}
.f-rank li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.8);border-radius:calc(var(--u)*1);font-weight:550}
.f-rank li.on{background:#EEF7F1}.f-rank li.on .fa{box-shadow:0 0 0 calc(var(--u)*.2) #fff,0 0 0 calc(var(--u)*.4) #00A550}
.f-rank b{font:500 calc(var(--u)*2)/1 var(--serif)}.f-rank li.on b{color:#00693E}

/* stages by where they sit: beside the words in a split, and inside the tour */
.fl.side{--u:1.75cqw}
.fl.tourfl{--u:1.1cqw}
.annot.free{display:block}
.sside:has(.fl){width:100%}

.stext>h2+p:not(.lead){margin-top:20px}.stext>p:not(.lead){color:var(--mute)}.stext>p:not(.lead)+p{margin-top:14px}.stext>p:not(.lead)+.ticks{margin-top:26px}

/* more bits */
.fa.sm{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);margin-left:auto}
.fa.ini{display:grid;place-items:center;background:#E3F2E9;color:#00693E;font-size:calc(var(--u)*.95);font-weight:650;font-style:normal}
.f-ic{display:grid;place-items:center;width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border-radius:calc(var(--u)*.9);background:#E3F2E9;color:#00693E;font-size:calc(var(--u)*1.55);flex:none}
.f-btn.wide{display:flex;width:100%;margin-top:calc(var(--u)*1.4)}
.f-btn.ghost{background:#fff;color:#00693E;box-shadow:inset 0 0 0 1px #BFE0CD}
.f-ring.light{background:conic-gradient(#00A550 calc(var(--p)*1%),#E6EEE8 0)}.f-ring.light::before{background:#fff}.f-ring.light b{color:#00693E}
.f-note{display:inline-flex;align-items:center;gap:calc(var(--u)*.7);padding:calc(var(--u)*.85) calc(var(--u)*1.4);border-radius:99px;background:#fff;font-weight:600;white-space:nowrap}
.f-note .hi{color:#00693E;font-size:calc(var(--u)*1.55)}.f-note .hi.ok{color:#00A550}
.f-alert{display:inline-flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.7) calc(var(--u)*.8) calc(var(--u)*.7) calc(var(--u)*1.3);border-radius:99px;background:#fff;white-space:nowrap}
.f-alert>.hi{color:#B06D00;font-size:calc(var(--u)*1.55)}.f-alert b{font-weight:600}
.f-foot{display:flex;align-items:center;gap:calc(var(--u)*.6);margin-top:calc(var(--u)*1.3);padding-top:calc(var(--u)*1.1);border-top:1px solid #F0EEE9;color:#5B6660;font-size:calc(var(--u)*1.15)}.f-foot .hi{color:#00693E;font-size:calc(var(--u)*1.4)}
.hi.warn{color:#D9822B;font-size:.9em;vertical-align:-.1em}

/* offer */
.f-me{display:flex;align-items:center;gap:calc(var(--u)*1)}.f-me>div{flex:1;display:grid}.f-me b{font-size:calc(var(--u)*1.45);font-weight:600}.f-me span{font-size:calc(var(--u)*1.1);color:#5B6660}
.f-doc{display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*1);border-radius:calc(var(--u)*1.1);background:#F6F8F5;margin-bottom:calc(var(--u)*.6)}
.f-doc>.hi{width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border-radius:calc(var(--u)*.9);background:#fff;color:#00693E;font-size:calc(var(--u)*1.5);box-shadow:0 0 0 1px #E2E4DE}
.f-doc div{display:grid}.f-doc b{font-weight:600}.f-doc span{font-size:calc(var(--u)*1.1);color:#5B6660}
.f-kv{list-style:none;margin:0;padding:0}.f-kv li{display:flex;justify-content:space-between;gap:calc(var(--u)*1);padding:calc(var(--u)*.75) 0;border-top:1px solid #F0EEE9}.f-kv li:first-child{border-top:0}
.f-kv span{color:#5B6660}.f-kv b{font-weight:600}
.f-todo{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.2)}
.f-todo li{display:flex;align-items:center;gap:calc(var(--u)*.9);padding:calc(var(--u)*.7) 0;color:#4F596B}
.f-todo li>i{width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u)*.14) #C9CFC9;flex:none;font-size:calc(var(--u)*1.1);display:grid;place-items:center}
.f-todo li.done{color:#1A2233;font-weight:600}.f-todo li.done>.hi{background:#00693E;color:#fff;box-shadow:none}

/* jobs */
.f-req{list-style:none;margin:0;padding:0}
.f-req li{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*1);padding:calc(var(--u)*.95) 0;border-top:1px solid #F0EEE9}.f-req li:first-child{border-top:0}
.f-req div{display:grid}.f-req b{font-weight:600}.f-req div span{font-size:calc(var(--u)*1.1);color:#5B6660}
.f-hd>.f-ic+b{font:600 calc(var(--u)*1.45)/1.2 var(--sans)}
.f-skills{list-style:none;margin:0;padding:0}.f-skills li{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*.75) 0;border-top:1px solid #F0EEE9;font-weight:550}.f-skills li:first-child{border-top:0}

/* sourcing */
.f-ppl{list-style:none;margin:0;padding:0}
.f-ppl li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.8) 0;border-top:1px solid #F0EEE9}.f-ppl li:first-child{border-top:0}
.f-ppl div{display:grid}.f-ppl b{font-weight:600}.f-ppl div span{font-size:calc(var(--u)*1.05);color:#5B6660}
.f-dots{display:grid;grid-template-columns:repeat(7,calc(var(--u)*.62));gap:calc(var(--u)*.3)}.f-dots i{width:calc(var(--u)*.62);height:calc(var(--u)*.62);border-radius:50%;background:#E2E6E1}.f-dots i.on{background:#00693E}

/* tour */
.f-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*1)}
.f-kpis div{display:grid;gap:calc(var(--u)*.45);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);border-radius:calc(var(--u)*1.2);background:#F6F8F5}
.f-kpis span{font-size:calc(var(--u)*1.1);color:#5B6660}.f-kpis b{font:600 calc(var(--u)*3)/1 var(--sans);letter-spacing:-.03em}.f-kpis b small{font-size:.42em;letter-spacing:0;color:#5B6660;font-weight:500}
.f-kpis em{justify-self:start;font-style:normal;font-size:calc(var(--u)*1);font-weight:600;padding:calc(var(--u)*.25) calc(var(--u)*.7);border-radius:99px;background:#E3F1E9;color:#00693E}.f-kpis em.bad{background:#FDECEC;color:#B3302B}
.f-bars{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.95)}
.f-bars li{display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*.45) calc(var(--u)*1);align-items:center}
.f-bars span{font-weight:550}.f-bars b{font-size:calc(var(--u)*1.15);color:#5B6660;font-variant-numeric:tabular-nums}
.f-bars i{grid-column:1/-1;grid-row:2;height:calc(var(--u)*.6);border-radius:99px;background:linear-gradient(90deg,#00693E var(--w),#EDF0EC var(--w))}
.f-bars li.warn b{color:#B06D00}.f-bars li.warn i{background:repeating-linear-gradient(135deg,#FDF6EA 0 calc(var(--u)*.5),#FBEBD3 calc(var(--u)*.5) calc(var(--u)*1))}
.f-pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(var(--u)*.8)}
.f-pipe div{display:grid;gap:calc(var(--u)*.3);padding:calc(var(--u)*1) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.1);background:#F6F8F5}
.f-pipe span{font-size:calc(var(--u)*1.05);color:#5B6660}.f-pipe b{font:600 calc(var(--u)*2.2)/1 var(--sans)}
.f-pipe .on{background:#0B4F33;color:#fff}.f-pipe .on span{color:rgba(255,255,255,.72)}
.f-big{display:flex;align-items:center;gap:calc(var(--u)*1.4)}.f-big>div{display:grid}.f-big>div b{font:600 calc(var(--u)*3)/1 var(--sans);letter-spacing:-.03em}.f-big>div span{color:#5B6660;font-size:calc(var(--u)*1.15)}
.f-big .f-ring.big b{font-size:calc(var(--u)*1.35)}
.f-chan{list-style:none;margin:0;padding:0}
.f-chan li{display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.8) 0;border-top:1px solid #F0EEE9}.f-chan li:first-child{border-top:0}
.f-chan div{flex:1;display:grid}.f-chan b{font-weight:600}.f-chan div span{font-size:calc(var(--u)*1.05);color:#5B6660}
.f-chan .f-tag .hi{font-size:1.2em}
.f-add{display:inline-flex;align-items:center;gap:calc(var(--u)*.35);color:#00693E;font-weight:600;font-size:calc(var(--u)*1.1)}

/* the tour as a simple desktop: the Komma app with its green menu in the product's order, the job's tabs, and the
   tab's content drawn simply. --u is 1 % of the window's width, so the window scales as one picture. */
.dwrap{position:relative;container-type:inline-size;width:100%;padding:2.2% 3%;border-radius:28px;background:radial-gradient(56% 62% at 50% 50%,rgba(92,192,138,.26),rgba(227,242,232,.34) 60%,transparent 80%)}
.dwg{padding:.6cqw;border-radius:2.2cqw;background:linear-gradient(160deg,rgba(255,255,255,.76),rgba(255,255,255,.44));border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(8,50,30,.06),0 2.6cqw 5cqw -2.8cqw rgba(8,50,30,.5);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.dw{--u:1cqw;display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:1600/770;border-radius:calc(var(--u)*1.6);overflow:hidden;background:#F6F5F1;color:#1A2233;font:400 calc(var(--u)*1.22)/1.3 var(--sans);box-shadow:0 0 0 1px rgba(26,34,51,.05)}
.dw svg{display:block}
.dw-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dw-hd{display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*1.7) calc(var(--u)*2.6) calc(var(--u)*1.5);border-bottom:1px solid #E6E3DD}
.dw-hd>b{font:500 calc(var(--u)*2.3)/1.1 var(--serif)}.dw-hd>b span{color:#9AA19C}
.dw-pill{padding:calc(var(--u)*.2) calc(var(--u)*.8);border-radius:99px;box-shadow:inset 0 0 0 1px #CFD3CE;color:#5B6660;font-size:calc(var(--u)*1)}
.dw-st.draft{color:#8F5300}.dw-st.draft i{background:#E2A646;box-shadow:0 0 0 calc(var(--u)*.25) #FBEBD3}
.dw-st{margin-left:auto;display:inline-flex;align-items:center;gap:calc(var(--u)*.5);color:#00693E;font-size:calc(var(--u)*1.05);font-weight:550}.dw-st i{width:calc(var(--u)*.6);height:calc(var(--u)*.6);border-radius:50%;background:#00A550;box-shadow:0 0 0 calc(var(--u)*.25) #D6EEDF}
.dw-tabs{display:flex;gap:calc(var(--u)*2.1);padding:calc(var(--u)*1.5) calc(var(--u)*2.6) 0;border-bottom:1px solid #E6E3DD;color:#5B6660;white-space:nowrap}
.dw-tabs span{padding-bottom:calc(var(--u)*.9)}.dw-tabs .on{color:#1A2233;font-weight:600;box-shadow:inset 0 calc(var(--u)*-.22) 0 #00693E}
.dw-body{flex:1;min-height:0;display:grid;gap:calc(var(--u)*1.2);align-content:start;padding:calc(var(--u)*1.6) calc(var(--u)*2.6)}
.dw-c{background:#fff;border-radius:calc(var(--u)*1.1);padding:calc(var(--u)*1.3) calc(var(--u)*1.5);box-shadow:0 0 0 1px rgba(26,34,51,.05)}
.dw-c>h4{margin:0 0 calc(var(--u)*1);font:600 calc(var(--u)*1.2)/1.2 var(--sans)}
.dw-c>h4 small{float:right;font-weight:500;color:#5B6660}
.dw-row{display:grid;gap:calc(var(--u)*1.2)}
.dw-tool{display:flex;align-items:center;gap:calc(var(--u)*1)}
.dw-seg{display:inline-flex;padding:calc(var(--u)*.25);border-radius:99px;background:#fff;box-shadow:0 0 0 1px #E6E3DD}.dw-seg span{display:inline-flex;align-items:center;gap:calc(var(--u)*.4);padding:calc(var(--u)*.35) calc(var(--u)*1);border-radius:99px;color:#5B6660}
.dw-seg span svg{width:calc(var(--u)*1.2);height:calc(var(--u)*1.2)}.dw-seg .on{background:#0B5A36;color:#fff;font-weight:600}
.dw-btn{display:inline-flex;align-items:center;gap:calc(var(--u)*.45);padding:calc(var(--u)*.45) calc(var(--u)*1.1);border-radius:99px;background:#fff;box-shadow:0 0 0 1px #E6E3DD;font-weight:550}
.dw-btn.go{background:#00693E;color:#fff;box-shadow:none}.dw-btn svg{width:calc(var(--u)*1.2);height:calc(var(--u)*1.2)}
.dw .fa{width:calc(var(--u)*2.3);height:calc(var(--u)*2.3);box-shadow:0 0 0 calc(var(--u)*.12) #fff}
.dw .hi svg{width:1em;height:1em}.dw .hi path[fill-rule]{fill:currentColor}

/* the channels' own wordmarks, as the product shows them */
.dw-logo{display:block;height:calc(var(--u)*2.9);width:auto;mix-blend-mode:multiply}
.dw-tile>p .dw-logo{height:calc(var(--u)*3.4)}
.dw-conv .dw-logo{height:calc(var(--u)*2.3);justify-self:start;margin-left:calc(var(--u)*-.5)}

/* the candidate against the job profile: a spider chart on a card over the window's right corner */
.dw-side{--u:1cqw;position:absolute;z-index:3;right:0;top:4%;width:calc(var(--u)*27);color:#1A2233;font:400 calc(var(--u)*1.2)/1.3 var(--sans)}
.dw-side .fw{padding:calc(var(--u)*1.4) calc(var(--u)*1.5)}
.dw-side .f-me b{font-size:calc(var(--u)*1.3)}.dw-side .f-me span{font-size:calc(var(--u)*1)}
.rd{display:block;width:100%;margin:calc(var(--u)*.6) 0 calc(var(--u)*.2);overflow:visible}
.rd .g{fill:none;stroke:#E4E8E3;stroke-width:1}
.rd .pr{fill:none;stroke:#8A918C;stroke-width:1.5;stroke-dasharray:4 3}
.rd .me{fill:rgba(0,165,80,.18);stroke:#00693E;stroke-width:2;stroke-linejoin:round;transform-box:view-box;transform-origin:130px 100px}
.rd text{font:600 11px var(--sans);fill:#5B6660}
.rd-key{display:flex;justify-content:center;gap:calc(var(--u)*1.4);color:#5B6660;font-size:calc(var(--u)*1)}
.rd-key span{display:inline-flex;align-items:center;gap:calc(var(--u)*.5)}.rd-key i{width:calc(var(--u)*1.6);height:0;border-top:2px dashed #8A918C}.rd-key i.me{height:calc(var(--u)*.8);border:2px solid #00693E;background:rgba(0,165,80,.18);border-radius:2px;width:calc(var(--u)*1.2)}
.anim .rd .me{transform:scale(.15);opacity:0}
.anim.play .rd .me{animation:fkGrow 1.1s cubic-bezier(.16,1,.3,1) .5s forwards}
@keyframes fkGrow{to{transform:none;opacity:1}}

/* overview */
.dw-kpi{display:grid;grid-template-columns:repeat(5,1fr);padding:0}
.dw-kpi>div{display:grid;gap:calc(var(--u)*.35);padding:calc(var(--u)*1.2) calc(var(--u)*1.4);border-left:1px solid #F0EEE9}.dw-kpi>div:first-child{border-left:0}
.dw-kpi span{color:#5B6660;font-size:calc(var(--u)*1)}.dw-kpi b{font:600 calc(var(--u)*2.1)/1 var(--sans);letter-spacing:-.02em}
.dw-kpi em{justify-self:start;font-style:normal;font-size:calc(var(--u)*.9);font-weight:600;padding:calc(var(--u)*.15) calc(var(--u)*.55);border-radius:calc(var(--u)*.4);background:#E3F1E9;color:#00693E}.dw-kpi em.bad{background:#FDECEC;color:#B3302B}
.dw-bars{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.85)}
.dw-bars li{display:grid;grid-template-columns:1fr auto;gap:calc(var(--u)*.35) calc(var(--u)*1)}.dw-bars small{color:#5B6660}
.dw-bars i{grid-column:1/-1;height:calc(var(--u)*.42);border-radius:99px;background:linear-gradient(90deg,#00693E var(--w),#EDF0EC var(--w))}
.dw-chart{display:flex;align-items:flex-end;gap:calc(var(--u)*.35);height:calc(var(--u)*13)}
.dw-chart i{flex:1;height:calc(var(--h)*1%);border-radius:calc(var(--u)*.3) calc(var(--u)*.3) 0 0;background:#9CCBB0}.dw-chart i.hi2{background:#00693E}
.dw-tasks{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.9)}
.dw-tasks li{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*.9);align-items:center}
.dw-date{display:grid;place-items:center;width:calc(var(--u)*3.4);border-radius:calc(var(--u)*.6);overflow:hidden;box-shadow:0 0 0 1px #E6E3DD;font:600 calc(var(--u)*1.5)/1.4 var(--sans)}
.dw-date small{display:block;width:100%;text-align:center;font-size:calc(var(--u)*.75);line-height:1.6;background:#0054A3;color:#fff;letter-spacing:.04em}.dw-date.late small{background:#E83946}
.dw-tasks div{display:grid}.dw-tasks div span{color:#5B6660;font-size:calc(var(--u)*1)}
.dw-flag{display:inline-flex;align-items:center;gap:calc(var(--u)*.4);color:#B06D00;font-size:calc(var(--u)*1);font-weight:600}.dw-flag svg{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1)}

/* candidates as a kanban: one card lifted on its way to the next step */
.dw-kb{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(var(--u)*.9);min-height:0}
.dw-col{display:grid;align-content:start;gap:calc(var(--u)*.7);padding:calc(var(--u)*.8);border-radius:calc(var(--u)*1);background:#EDEBE5;min-height:calc(var(--u)*29)}
.dw-col>h5{display:flex;justify-content:space-between;align-items:center;margin:0 0 calc(var(--u)*.1);font:600 calc(var(--u)*1.05)/1.2 var(--sans)}
.dw-col>h5 span{padding:calc(var(--u)*.1) calc(var(--u)*.6);border-radius:99px;background:#fff;color:#5B6660;font-size:calc(var(--u)*.9)}
.dw-kc{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:calc(var(--u)*.4) calc(var(--u)*.7);padding:calc(var(--u)*.75);border-radius:calc(var(--u)*.8);background:#fff;box-shadow:0 0 0 1px rgba(26,34,51,.05),0 calc(var(--u)*.5) calc(var(--u)*1) calc(var(--u)*-.7) rgba(8,50,30,.35)}
.dw-kc>b{font-size:calc(var(--u)*1.02);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-kc>span{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(var(--u)*.6);font-size:calc(var(--u)*.9);font-weight:700}
.dw-kc>span i{height:calc(var(--u)*.38);border-radius:99px;background:linear-gradient(90deg,#00693E var(--w),#EDF0EC var(--w))}
.dw-kc .hi{color:#D9822B}
.dw-more{color:#7A818C;font-size:calc(var(--u)*.95);padding-left:calc(var(--u)*.3)}
.dw-slot{height:calc(var(--u)*4.6);border-radius:calc(var(--u)*.8);border:calc(var(--u)*.1) dashed #BFD8C9}
.dw-kc.mover{position:absolute;z-index:2;left:calc((100% - var(--u)*4.5)/6 + var(--u)*1.7);top:calc(var(--u)*2.8);width:calc((100% - var(--u)*4.5)/6 - var(--u)*1.6);box-shadow:0 0 0 calc(var(--u)*.14) #00A550,0 calc(var(--u)*1.4) calc(var(--u)*2.4) calc(var(--u)*-1) rgba(8,50,30,.55);transform:translate(calc(150% + var(--u)*3.75),calc(var(--u)*-1.6)) rotate(3deg)}
@media (prefers-reduced-motion:no-preference){ .dw-kc.mover{animation:dwMove 7s cubic-bezier(.65,0,.35,1) infinite} }
@keyframes dwMove{0%,18%{transform:translate(0,0) rotate(0)}40%{transform:translate(calc(100% + var(--u)*2.5),calc(var(--u)*-2.2)) rotate(3deg)}58%,86%{transform:translate(calc(200% + var(--u)*5),0) rotate(0)}100%{transform:translate(0,0) rotate(0)}}

/* insights */
.dw-donut{position:relative;width:calc(var(--u)*13);aspect-ratio:1;margin:calc(var(--u)*.2) auto 0;border-radius:50%;background:conic-gradient(#00693E 0 38%,#0054A3 0 62%,#E8973A 0 80%,#E83946 0 91%,#5CC08A 0)}
.dw-donut::before{content:"";position:absolute;inset:calc(var(--u)*2.4);border-radius:50%;background:#fff}
.dw-donut b{position:absolute;inset:0;display:grid;place-items:center;font:500 calc(var(--u)*2.6)/1 var(--serif)}
.dw-src{list-style:none;margin:0;padding:0}
.dw-src li{display:grid;grid-template-columns:calc(var(--u)*9) calc(var(--u)*2.4) 1fr;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.6) 0;border-top:1px solid #F0EEE9;font-weight:600}.dw-src li:first-child{border-top:0}
.dw-src em{display:grid;place-items:center;height:calc(var(--u)*1.9);border-radius:99px;background:#0054A3;color:#fff;font-style:normal;font-size:calc(var(--u)*.9)}
.dw-src i{height:calc(var(--u)*.38);border-radius:99px;background:linear-gradient(90deg,#00693E var(--w),#EDF0EC var(--w))}
.dw-split{display:flex;height:calc(var(--u)*3);border-radius:calc(var(--u)*.6);overflow:hidden;margin:calc(var(--u)*.4) 0 calc(var(--u)*.8);color:#fff;font-weight:600;font-size:calc(var(--u)*1)}
.dw-split span{display:grid;place-items:center;background:#00A550}.dw-split span+span{background:#0054A3}
.dw-note{display:flex;align-items:center;gap:calc(var(--u)*.5);color:#5B6660;font-size:calc(var(--u)*1)}.dw-note svg{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1)}

/* promote */
.dw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1)}
.dw-tile{display:grid;background:#fff;border-radius:calc(var(--u)*1);overflow:hidden;box-shadow:0 0 0 1px rgba(26,34,51,.05)}
.dw-tile>p{margin:0;display:grid;place-items:center;height:calc(var(--u)*5.4);border-bottom:1px solid #F0EEE9;font:500 calc(var(--u)*1.9)/1 var(--serif);color:#1A2233}
.dw-tile>div{display:grid;gap:calc(var(--u)*.55);padding:calc(var(--u)*1) calc(var(--u)*1.1)}
.dw-tile b{font-weight:600}.dw-tile .row{display:flex;justify-content:space-between;align-items:center;color:#5B6660;font-size:calc(var(--u)*.95)}
.dw-tile .row em{font-style:normal;padding:calc(var(--u)*.15) calc(var(--u)*.6);border-radius:99px;box-shadow:inset 0 0 0 1px #E6E3DD;color:#1A2233}
.dw-tile .dw-btn{justify-content:center;margin-top:calc(var(--u)*.2)}
.dw-tile .dw-btn.done{color:#00693E}
.dw-basket{display:grid;align-content:start;gap:calc(var(--u)*.8)}
.dw-basket ul{list-style:none;margin:0;padding:0}.dw-basket li{display:flex;justify-content:space-between;padding:calc(var(--u)*.7) 0;border-top:1px solid #F0EEE9}.dw-basket li:first-child{border-top:0}.dw-basket li span{color:#5B6660}
.dw-basket .dw-btn{justify-content:center}

/* phones: the window loses its menu and keeps the tab's content at a readable size */
@media (max-width:760px){
  .dw{--u:9px;grid-template-columns:1fr;aspect-ratio:auto}.dw-side{--u:10px;position:relative;right:auto;top:auto;width:auto;margin-top:14px}
  .dw-tabs{overflow:hidden;gap:16px}
  .dw-row{grid-template-columns:1fr!important}.dw-kpi{grid-template-columns:repeat(2,1fr)}.dw-kpi>div:nth-child(n+3){border-top:1px solid #F0EEE9}
  .dw-kb{grid-template-columns:repeat(6,46%);overflow:hidden}.dw-kc.mover{display:none}
  .dw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the job ad: Karma writes it line by line, the skills light up in the text and land in the list, then it waits for your yes */
.dw-ad{display:grid;grid-template-columns:1.55fr 1fr;gap:calc(var(--u)*1.2);min-height:0}
.dw-k{display:flex;align-items:center;gap:calc(var(--u)*.8);margin-bottom:calc(var(--u)*1)}
.dw-k>i{display:grid;place-items:center;width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:calc(var(--u)*.8);background:#E3F2E9;color:#00693E;font-size:calc(var(--u)*1.4)}
.dw-k>div{display:grid}.dw-k b{font-weight:600}.dw-k span{color:#5B6660;font-size:calc(var(--u)*1)}
.dw-k .st{margin-left:auto;display:grid}.dw-k .st>*{grid-area:1/1;justify-self:end;padding:calc(var(--u)*.2) calc(var(--u)*.7);border-radius:99px;font-size:calc(var(--u)*.95);font-weight:600}
.dw-k .st .w{background:#FCEFDD;color:#8F5300;opacity:0}.anim .dw-k .st .w{opacity:1}.dw-k .st .r{background:#E3F1E9;color:#00693E}
.dw-ask{margin:0 0 calc(var(--u)*1.1) auto;max-width:88%;padding:calc(var(--u)*.8) calc(var(--u)*1.1);border-radius:calc(var(--u)*1.1) calc(var(--u)*1.1) calc(var(--u)*.3) calc(var(--u)*1.1);background:#0B5A36;color:#fff;font-size:calc(var(--u)*1.05)}
.dw-draft{display:grid;gap:calc(var(--u)*.45);padding:calc(var(--u)*1.1) calc(var(--u)*1.2);border-radius:calc(var(--u)*1);background:#F6F8F5}
.dw-draft .ty{display:block;white-space:nowrap;overflow:hidden}
.dw-draft .ty.h{font:500 calc(var(--u)*1.7)/1.2 var(--serif);margin-bottom:calc(var(--u)*.3)}
.dw-draft .ty.li{padding-left:calc(var(--u)*1.1);position:relative}.dw-draft .ty.li::before{content:"";position:absolute;left:0;top:.55em;width:calc(var(--u)*.45);height:calc(var(--u)*.45);border-radius:50%;background:#00A550}
.dw-draft mark{background:#D6EEDF;color:#0B4F33;font-weight:600;border-radius:calc(var(--u)*.3);padding:0 calc(var(--u)*.2)}
.dw-acts{display:flex;gap:calc(var(--u)*.7);margin-top:calc(var(--u)*1.1)}
.dw-skl{list-style:none;margin:0;padding:0}
.dw-skl li{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*.85) 0;border-top:1px solid #F0EEE9;font-weight:550}.dw-skl li:first-child{border-top:0}
.dw-skl .f-wt i{width:calc(var(--u)*.6);height:calc(var(--u)*.6)}
.dw-prof{display:flex;align-items:center;gap:calc(var(--u)*.6);margin-top:calc(var(--u)*1);padding-top:calc(var(--u)*1);border-top:1px solid #F0EEE9;color:#5B6660;font-size:calc(var(--u)*1)}.dw-prof .hi{color:#00693E;font-size:calc(var(--u)*1.3)}
.anim .dw-draft .ty{clip-path:inset(0 100% 0 0)}
.anim .dw-draft mark{background:transparent;color:inherit;font-weight:400}
.anim .dw-skl li,.anim .dw-prof{opacity:0;transform:translateY(calc(var(--u)*.8))}
.anim .dw-acts .go{opacity:.35}.anim .dw-k .st .r{opacity:0}
.anim.play .dw-draft .ty{animation:fkType .8s steps(26,end) forwards;animation-delay:calc(var(--i)*.7s + .3s)}
.anim.play .dw-draft mark{animation:fkMark .35s ease forwards;animation-delay:calc(var(--i)*.7s + 1s)}
.anim.play .dw-skl li{animation:fkIn .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*.7s + 1.1s)}
.anim.play .dw-prof{animation:fkIn .5s cubic-bezier(.16,1,.3,1) 5.2s forwards}
.anim.play .dw-acts .go{animation:fkOn .4s ease 5.3s forwards}
.anim.play .dw-k .st .w{animation:fkOff .3s ease 5.2s forwards}.anim.play .dw-k .st .r{animation:fkOn .3s ease 5.3s forwards}
@keyframes fkType{to{clip-path:inset(0 0 0 0)}}
@keyframes fkMark{to{background:#D6EEDF;color:#0B4F33;font-weight:600}}
@keyframes fkIn{to{opacity:1;transform:none}}
@keyframes fkOn{to{opacity:1}}@keyframes fkOff{to{opacity:0}}

/* insights: what each channel turns into, step by step */
.dw-conv{display:grid;gap:0}
.dw-conv>div{display:grid;grid-template-columns:calc(var(--u)*10) repeat(5,calc(var(--u)*6)) 1fr;align-items:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*.65) calc(var(--u)*.6);border-top:1px solid #F0EEE9;border-radius:calc(var(--u)*.7)}
.dw-conv>div:first-child{border-top:0;color:#7A818C;font-size:calc(var(--u)*.92);padding-top:0}
.dw-conv>div.best{background:#EEF7F1;border-top-color:transparent}.dw-conv>div.best+div{border-top-color:transparent}
.dw-conv b{font-weight:600}
.dw-conv em{justify-self:center;display:grid;place-items:center;min-width:calc(var(--u)*2.3);height:calc(var(--u)*2.3);padding:0 calc(var(--u)*.5);border-radius:99px;background:#0054A3;color:#fff;font-style:normal;font-size:calc(var(--u)*.92);font-weight:600}
.dw-conv em.z{background:#fff;color:#9AA19C;box-shadow:inset 0 0 0 1px #E2E4DE}.dw-conv em.h{background:#00A550}
.dw-conv>div>span:first-child+em{background:#0B4F33}
.dw-conv .rt{display:grid;grid-template-columns:1fr calc(var(--u)*3.4);align-items:center;gap:calc(var(--u)*.6);font-weight:600;font-size:calc(var(--u)*1)}
.dw-conv .rt i{height:calc(var(--u)*.5);border-radius:99px;background:linear-gradient(90deg,#00693E var(--w),#EDF0EC var(--w))}
.dw-conv>div:first-child>span{justify-self:center}.dw-conv>div:first-child>span:first-child{justify-self:start}

/* the phone: a test in progress, everything inside the screen's corners and below the status bar */
.ph{padding:calc(var(--u)*.7);border-radius:calc(var(--u)*4);background:#151A21;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 calc(var(--u)*3) calc(var(--u)*5) calc(var(--u)*-2.5) rgba(8,50,30,.55)}
.ph-scr{display:flex;flex-direction:column;aspect-ratio:9/19;border-radius:calc(var(--u)*3.3);overflow:hidden;background:#F6F5F1}
.ph-bar{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*3.6);padding:0 calc(var(--u)*2.2);font-size:calc(var(--u)*.95);font-weight:650;flex:none}
.ph-bar i{width:calc(var(--u)*6.5);height:calc(var(--u)*1.9);border-radius:99px;background:#151A21}
.ph-bar span:last-child{display:flex;gap:calc(var(--u)*.25)}.ph-bar span:last-child b{width:calc(var(--u)*.35);border-radius:1px;background:#1A2233}
.ph-in{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*1);padding:calc(var(--u)*.6) calc(var(--u)*1.6) calc(var(--u)*1.2)}
.ph-hd{display:grid;gap:calc(var(--u)*.4)}.ph-hd b{font:500 calc(var(--u)*1.9)/1.1 var(--serif)}.ph-hd span{color:#5B6660;font-size:calc(var(--u)*.95)}
.ph-pg{height:calc(var(--u)*.5);border-radius:99px;background:linear-gradient(90deg,#00A550 var(--w),#E2E4DE var(--w))}
.ph-q{font-weight:600;font-size:calc(var(--u)*1.3);line-height:1.3;margin-top:calc(var(--u)*.4)}
.ph-op{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.6)}
.ph-op li{display:flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.85) calc(var(--u)*1);border-radius:calc(var(--u)*1);background:#fff;box-shadow:0 0 0 1px #E6E3DD;font-size:calc(var(--u)*1.05)}
.ph-op li>i{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u)*.14) #C9CFC9;flex:none;display:grid;place-items:center;font-size:calc(var(--u)*1)}
.ph-op li.on{box-shadow:0 0 0 calc(var(--u)*.16) #00693E;font-weight:600}.ph-op li.on>i{background:#00693E;color:#fff;box-shadow:none}
.ph-go{margin-top:auto;display:grid;place-items:center;padding:calc(var(--u)*.9);border-radius:99px;background:#00693E;color:#fff;font-weight:600}
.ph-home{width:calc(var(--u)*7);height:calc(var(--u)*.4);border-radius:99px;background:#1A2233;margin:calc(var(--u)*.2) auto calc(var(--u)*.8);flex:none}
.f-opts{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u)*.55)}
.f-opts li{display:flex;align-items:center;gap:calc(var(--u)*.9);padding:calc(var(--u)*.8) calc(var(--u)*1);border-radius:calc(var(--u)*1);box-shadow:0 0 0 1px #E6E3DD;font-weight:550}
.f-opts li span{margin-left:auto;color:#7A818C;font-size:calc(var(--u)*1);font-weight:400}
.f-opts li>i{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u)*.14) #C9CFC9;flex:none}
.f-opts li.on{background:#EEF7F1;box-shadow:0 0 0 calc(var(--u)*.16) #00693E}.f-opts li.on>i{box-shadow:inset 0 0 0 calc(var(--u)*.45) #00693E}
.f-to{display:flex;align-items:center;gap:calc(var(--u)*.8);margin-top:calc(var(--u)*1.2);color:#5B6660;font-size:calc(var(--u)*1.05)}
.f-to .f-avs{display:flex}.f-to .f-avs .fa+.fa{margin-left:calc(var(--u)*-.7)}

/* the career site that builds itself from a prompt */
.f-prompt{padding:calc(var(--u)*1) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.1);background:#F6F8F5;color:#1A2233;line-height:1.4}
.f-prompt+.f-btn{margin-top:calc(var(--u)*1.1)}
.br{border-radius:calc(var(--u)*1.4);overflow:hidden;background:#fff}
.br-top{display:flex;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.8) calc(var(--u)*1.1);background:#F1F0EC}
.br-top>i{width:calc(var(--u)*.75);height:calc(var(--u)*.75);border-radius:50%;background:#D6D3CC}
.br-top>span{margin-left:calc(var(--u)*.8);flex:1;padding:calc(var(--u)*.3) calc(var(--u)*.9);border-radius:99px;background:#fff;color:#5B6660;font-size:calc(var(--u)*.95)}
.br-top>em{font-style:normal;display:grid}.br-top>em>*{grid-area:1/1;justify-self:end;padding:calc(var(--u)*.2) calc(var(--u)*.7);border-radius:99px;font-size:calc(var(--u)*.9);font-weight:600;white-space:nowrap}
.br-top>em .w{background:#FCEFDD;color:#8F5300;opacity:0}.anim .br-top>em .w{opacity:1}.br-top>em .r{background:#E3F1E9;color:#00693E}
.br-pg{display:grid;gap:calc(var(--u)*1);padding:calc(var(--u)*1)}
.cs-ban{display:grid;gap:calc(var(--u)*.7);justify-items:start;padding:calc(var(--u)*1.8) calc(var(--u)*1.6);border-radius:calc(var(--u)*1);background:radial-gradient(70% 120% at 85% 10%,#1C8A55,transparent 70%),linear-gradient(120deg,#0B5A36,#137A47);color:#fff}
.cs-ban b{font:500 calc(var(--u)*2.1)/1.1 var(--serif)}.cs-ban span{padding:calc(var(--u)*.45) calc(var(--u)*1);border-radius:99px;background:#fff;color:#0B5A36;font-weight:600;font-size:calc(var(--u)*1)}
.cs-h{font-weight:650;font-size:calc(var(--u)*1.05);margin-bottom:calc(var(--u)*.5)}
.cs-jobs{display:grid;gap:calc(var(--u)*.5)}.cs-jobs div{display:flex;justify-content:space-between;padding:calc(var(--u)*.7) calc(var(--u)*.9);border-radius:calc(var(--u)*.8);box-shadow:0 0 0 1px #ECEAE5}.cs-jobs span{color:#5B6660}
.cs-team{display:flex;gap:calc(var(--u)*.5)}.cs-team .fa{width:calc(var(--u)*3);height:calc(var(--u)*3)}
.cs-faq{display:grid;gap:calc(var(--u)*.45)}.cs-faq i{height:calc(var(--u)*.6);border-radius:99px;background:#ECEAE5}.cs-faq i:nth-child(2){width:80%}.cs-faq i:nth-child(3){width:60%}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1)}
.anim .cs-sec{opacity:0;transform:translateY(calc(var(--u)*1.2))}
.anim .br-top>em .r{opacity:0}
.anim.play .cs-sec{animation:fkIn .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*.55s + .5s)}
.anim.play .br-top>em .w{animation:fkOff .3s ease 2.9s forwards}.anim.play .br-top>em .r{animation:fkOn .3s ease 3s forwards}

/* "Det er med": a bento of eight, each with a small picture of the thing itself */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.bt{display:grid;grid-template-rows:auto 1fr;gap:16px;padding:12px 12px 22px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6));box-shadow:0 0 0 1px rgba(8,50,30,.07),0 24px 48px -32px rgba(8,50,30,.45)}
.bt-v{height:168px;border-radius:18px;background:radial-gradient(80% 90% at 50% 40%,rgba(92,192,138,.22),rgba(227,242,232,.5) 60%,#F4FAF6);display:grid;place-items:center;overflow:hidden;padding:16px;color:#1A2233;font-size:13.5px}
.bt{--u:10px}.bt>div:last-child{padding:0 10px;display:grid;gap:6px;align-content:start}.bt>div:last-child>b{font:650 19px/1.25 var(--sans);color:var(--head)}.bt span.t{color:var(--mute);font-size:15px;line-height:1.5}
.bt-card{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 0 0 1px rgba(26,34,51,.05),0 12px 24px -16px rgba(8,50,30,.45);width:100%;max-width:240px}
.bt-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0}.bt-row+.bt-row{border-top:1px solid #F0EEE9}
.bt-row .f-tag{--u:10px}
.bt .fa{width:30px;height:30px;box-shadow:0 0 0 2px #fff}
.bt-ring{--p:91;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#00A550 calc(var(--p)*1%),#E3EBE5 0);position:relative}
.bt-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}.bt-ring b{position:relative;font:500 26px/1 var(--serif)!important;color:#00693E!important}
.bt-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:230px}
.bt-chips span{padding:6px 11px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #E6E3DD;font-weight:550;font-size:13px}.bt-chips span.on{background:#0B4F33;color:#fff;box-shadow:none}
.bt-stack{display:flex}.bt-stack .fa{width:42px;height:42px;box-shadow:0 0 0 3px #fff}.bt-stack .fa+.fa{margin-left:-12px}
.bt-col{display:grid;gap:12px;justify-items:center}
.bt-push{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:#fff;box-shadow:0 12px 24px -14px rgba(8,50,30,.5);max-width:250px}
.bt-push .hi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0B5A36;color:#fff;font-size:18px;flex:none}.bt-push div{display:grid}.bt-push small{color:#5B6660}
.bt-mini{width:100%;max-width:240px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 24px -16px rgba(8,50,30,.45)}
.bt-mini .ban{height:56px;background:linear-gradient(120deg,#0B5A36,#1C8A55);display:flex;align-items:center;padding:0 14px;color:#fff;font:500 16px/1 var(--serif)}
.bt-mini .ln{display:flex;justify-content:space-between;margin:8px 12px;padding:6px 8px;border-radius:8px;box-shadow:0 0 0 1px #ECEAE5;font-size:12px}
.bt .hi svg{width:1em;height:1em}.bt .hi{display:inline-grid;place-items:center}
@media (max-width:1040px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} }

/* "Det er med": free columns, no boxes, an icon tile on top */
.cards.free{gap:clamp(28px,3vw,48px) clamp(24px,3vw,56px)}
.cards.free .card{padding:0;background:none;border:0;box-shadow:none;border-radius:0;gap:8px}
.cards.free .card .ic{width:48px;height:48px;padding:12px;border-radius:14px;background:#E3F2E9;margin-bottom:10px}
.cards.free .card b{font-size:21px}

/* the Personio panel: one coloured panel per feature, cards on one side, the words on the other */
.rk-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(24px,3vw,56px);padding:clamp(24px,3vw,48px);border-radius:32px;background:linear-gradient(90deg,#5CC08A 0%,#BFE5CE 26%,#E8F5EC 50%,#F4FAF6 100%);box-shadow:0 0 0 1px rgba(8,50,30,.05)}
.rk-panel.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:linear-gradient(270deg,#5CC08A 0%,#BFE5CE 26%,#E8F5EC 50%,#F4FAF6 100%)}.rk-panel.flip .fl{order:2}
.rk-panel .fl{--u:1.75cqw;aspect-ratio:1000/760}
.rk-panel h2{font-size:clamp(32px,3vw,48px);margin:14px 0 16px}

/* phones: the picture restacks as a column of cards at a readable size */
@media (max-width:1040px){ .fl.side{max-width:660px;margin-inline:auto} }
@media (max-width:760px){
  .fl,.fl.side,.fl.tourfl,.rk-panel .fl{--u:10px;aspect-ratio:auto!important;display:grid;gap:14px;padding:18px 0}
  .fl>*{position:relative;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:auto!important}
  .fl>.fg.pill{justify-self:end}
  .fl>.ph{width:min(250px,72%)!important;justify-self:center}
  .dw-ad{grid-template-columns:1fr}.dw-draft .ty{white-space:normal}.dw-conv>div{grid-template-columns:calc(var(--u)*9) repeat(5,calc(var(--u)*3.6)) 1fr}.dw-conv .rt{grid-template-columns:1fr}.dw-conv .rt i{display:none}
  .rk-panel,.rk-panel.flip{grid-template-columns:1fr;padding:18px}.rk-panel.flip .fl{order:0}
  .f-rule .ax{grid-template-columns:1fr;gap:4px}.f-rule .ax>span{display:flex;align-items:center;justify-content:space-between}
  .f-req .f-tag{flex:none}
}