/* ── Portalen as the homepage hero: the Komma symbol in particles, a sphere on contact, cards inside ── */
.hero.portal{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;text-align:left;padding:0;background:radial-gradient(58% 72% at 66% 52%,#FFFFFF 0%,#F4FAF6 46%,#E3F2E8 100%);touch-action:pan-y}
.hero.portal::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 28%,rgba(255,255,255,.42) 52%,rgba(255,255,255,.78) 78%,#fff 100%);pointer-events:none;z-index:0}   /* behind the particles: it fades the background, never the logo */
.pstage{position:absolute;inset:0;z-index:1;container-type:inline-size;cursor:default}
.pstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.pcards{position:absolute;inset:0;z-index:3;pointer-events:none}   /* above the particles: inside the comma the near half is gone, so the card sits in front of the far side */
.pcards.in{z-index:3}
.ptip{position:absolute;left:0;top:0;z-index:6;margin:0;pointer-events:none;font:500 13.5px/1 var(--sans);color:#1A2233;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);padding:9px 14px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;transition:opacity .4s}
.ptip:empty{opacity:0}
.hero.portal .pcopy{position:relative;z-index:5;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--bar) + 40px) 96px;pointer-events:none;transition:opacity .45s}
.hero.portal .pcopy>*{pointer-events:auto;max-width:min(560px,40%)}
.hero.portal h1{margin:0;max-width:none;font-size:clamp(44px,5.4vw,90px)}   /* "HR-universet" is 5.93em wide and the column stops at 560px, so 90px is the most that fits */
.hero.portal h1 .ln:first-child{white-space:nowrap}   /* "HR-universet" must not break at its hyphen */
.hero.portal .lead{margin:28px 0 0}
.hero.portal .ctas{justify-content:flex-start}
.hero.portal.inside .pcopy{opacity:0}
.hero.portal.inside .pcopy>*{pointer-events:none}
.hero.portal.orb .pstage{cursor:pointer}
@media (max-width:899px){
  .hero.portal{background:radial-gradient(90% 55% at 50% 34%,#FFFFFF 0%,#F4FAF6 50%,#E3F2E8 100%)}
  .hero.portal .pcopy{justify-content:flex-end;padding-bottom:56px}
  .hero.portal .pcopy>*{max-width:100%}
  .hero.portal h1{font-size:clamp(40px,11vw,64px)}
  .hero.portal .lead{margin-top:16px}
  .hero.portal .ctas{margin-top:22px}
}

/* the glass module cards: simplified Komma UI, clear glass */
/* the cards are built like the Karma panel on the page: a white card with a thin line, inside a light glass frame */
.pcard{position:absolute;left:0;top:0;width:18.5cqw;min-width:236px;padding:8px;border-radius:24px;font:400 14px/1.35 var(--sans);color:#1A2233;
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.52));border:1px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(8,50,30,.07),0 30px 70px -30px rgba(8,50,30,.38),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);transform-origin:50% 50%;opacity:0;visibility:hidden}
.pcard .pin{background:#fff;border:1px solid var(--card-line,#E6E3DD);border-radius:17px;padding:14px 16px 15px;box-shadow:0 1px 2px rgba(20,22,40,.04)}
.pcard.m-recTasks{width:20cqw;min-width:252px}
.pcard .c-top{display:flex;align-items:center;gap:.6em;min-width:0}
.pcard .c-ico{width:1.9em;height:1.9em;border-radius:50%;background:rgba(227,242,233,.85);color:#00693E;display:grid;place-items:center;flex:none}
.pcard .c-ico svg{width:1.15em;height:1.15em}
.pcard .c-ico.k{background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 .16em #00693E}
.pcard .c-ico.k::after{content:"";width:.6em;height:.6em;border-radius:50%;background:#00693E}
.pcard .c-lbl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard .c-live{margin-left:auto;display:inline-flex;align-items:center;gap:.35em;font-size:.8em;font-weight:600;color:#00693E;flex:none}
.pcard .c-live i{width:.5em;height:.5em;border-radius:50%;background:#00A550;box-shadow:0 0 0 .25em rgba(0,165,80,.18)}
.pcard .c-big{margin-top:.45em;font:600 2.35em/1 var(--sans);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.pcard .c-big.mid{font-size:1.75em}
.pcard .c-sub{margin-top:.45em;font-size:.82em;color:#3F4D45}
.pcard .c-text{margin-top:.6em;font-weight:550;font-size:1.05em;line-height:1.32}
.pcard .c-title{margin-top:.55em;font:500 1.4em/1.12 var(--serif);letter-spacing:-.01em}
.pcard .c-money{margin-top:.5em;font:600 1.95em/1 var(--sans);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.pcard .c-chip{display:inline-flex;align-items:center;margin-top:.65em;padding:.4em .7em;border-radius:999px;background:rgba(227,242,233,.9);color:#00693E;font-size:.8em;font-weight:600;font-variant-numeric:tabular-nums}
.pcard .c-score{display:flex;align-items:baseline;gap:.35em;margin-top:.4em}
.pcard .c-score b{font:600 2.5em/1 var(--sans);letter-spacing:-.03em}
.pcard .c-score span{color:#3F4D45;font-size:.9em}
.pcard .c-prog{margin-top:.65em;height:.45em;border-radius:999px;background:rgba(26,34,51,.12);overflow:hidden}
.pcard .c-prog i{display:block;height:100%;width:33%;background:#00693E;border-radius:inherit}
.pcard .c-kv{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;margin-top:.55em;font-size:.9em}
.pcard .c-kv b{font-size:1.28em;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pcard .av{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;font:600 .8em/1 var(--sans);color:#fff;background:#1F5C3D;flex:none}
.pcard .av.b{background:#00A550}
.pcard .c-quote{margin-top:.55em;font-size:.95em;line-height:1.4}
.pcard .c-match{display:flex;align-items:center;gap:.8em;margin-top:.65em}
.pcard .c-ring{width:3.4em;height:3.4em;transform:rotate(-90deg);flex:none}
.pcard .c-ring .bg{fill:none;stroke:rgba(26,34,51,.14);stroke-width:4}
.pcard .c-ring .fg{fill:none;stroke:#00693E;stroke-width:4;stroke-linecap:round}
.pcard .c-match b{display:block;font:600 1.75em/1 var(--sans);letter-spacing:-.02em}
.pcard .c-match span{font-size:.86em;color:#3F4D45}
/* actions, lists and tasks on the cards */
.pcard .c-act{display:flex;align-items:center;gap:.45em;margin-top:.85em}
.pcard .c-act>span{display:inline-flex;align-items:center;justify-content:center;height:2.3em;padding:0 1em;border-radius:999px;font-size:.84em;font-weight:600;white-space:nowrap;transition:background .4s,color .4s}
.pcard .c-act .pri{background:#00693E;color:#fff}
.pcard .c-act .pri.alt{background:#E3F2E9;color:#00693E}
.pcard .c-act .gh{background:#fff;color:#1A2233;border:1px solid #E6E3DD}
.pcard .c-act .wide{flex:1}
.pcard .c-act svg{width:1em;height:1em;margin-right:.45em;fill:currentColor;flex:none}
.pcard .c-act .chipv{background:#E3F2E9;color:#00693E;font-size:.78em;height:2.1em}
.pcard .c-list{list-style:none;margin:.7em 0 0;padding:0;display:grid;gap:.55em;font-size:.86em}
.pcard .c-list li{display:flex;align-items:center;gap:.55em;min-width:0}
.pcard .c-list li>span{flex:1;min-width:0;line-height:1.3}
.pcard .c-list .t{font-style:normal;font-weight:650;color:#00693E;width:3em;flex:none;font-variant-numeric:tabular-nums}
.pcard .mini{flex:none;font-style:normal;font-size:.86em;font-weight:600;padding:.4em .75em;border-radius:999px;background:#fff;border:1px solid #E6E3DD;color:#1A2233}
.pcard .mini.pri{background:#00693E;border-color:#00693E;color:#fff}
.pcard .c-list .ok{flex:none;font-size:.82em;font-weight:600;color:#00693E}
.pcard .c-prog i{transition:width .5s var(--out)}
/* to-do tables (Karma and recruitment tasks): a header row, hairline rows, a check circle that fills when done */
.pcard .c-todo{margin-top:.75em;border:1px solid #ECEAE4;border-radius:.9em;overflow:hidden;font-size:.86em}
.pcard .c-todo .th{display:flex;justify-content:space-between;padding:.5em .8em;background:#F7F7F4;color:#6E7A73;font-size:.86em;font-weight:600}
.pcard .c-todo .tr{display:flex;align-items:center;gap:.6em;padding:.55em .8em;border-top:1px solid #F0EEE9}
.pcard .c-todo .tr>span{flex:1;min-width:0;display:grid}
.pcard .c-todo .tr b{font-weight:600;line-height:1.25;transition:color .35s}
.pcard .c-todo small{margin-top:.1em;font-size:.86em;color:#5B6660;line-height:1.2}
.pcard .c-todo .ck{width:1.25em;height:1.25em;border-radius:50%;border:1.5px solid rgba(26,34,51,.28);display:grid;place-items:center;flex:none;transition:background .35s,border-color .35s}
.pcard .c-todo .done .ck{background:#00693E;border-color:#00693E}
.pcard .c-todo .done .ck::after{content:"";width:.3em;height:.56em;border:solid #fff;border-width:0 .14em .14em 0;transform:translate(0,-.06em) rotate(45deg)}
.pcard .c-todo .done b{color:#6E7A73;text-decoration:line-through;text-decoration-color:rgba(26,34,51,.28)}
.pcard .c-todo .late .ck{border-color:#E83946}
.pcard .c-todo .st{font-style:normal;font-size:.86em;font-weight:600;color:#5B6660;flex:none;transition:color .35s}
.pcard .c-todo .done .st{color:#00693E}
.pcard .c-todo .late .st{color:#B42330;background:#FCE8EA;padding:.3em .55em;border-radius:999px}
.pcard .c-todo .done .mini.pri{background:#E3F2E9;border-color:#E3F2E9;color:#00693E}
/* job match: each skill as five dots, filled to the candidate's level; a green ring is a level the job asks for that he lacks */
.pcard .c-skills{list-style:none;margin:.7em 0 0;padding:0;display:grid;gap:.42em;font-size:.84em}
.pcard .c-skills li{display:flex;align-items:center;gap:.6em}
.pcard .c-skills li>span{flex:1;min-width:0;font-weight:550}
.pcard .c-skills .d{display:flex;gap:.28em;font-style:normal}
.pcard .c-skills .d b{width:.78em;height:.78em;border-radius:50%;background:#00A550}
.pcard .c-skills .d b.gap{background:none;box-shadow:inset 0 0 0 .14em #00A550}
.pcard .c-skills .d b.no{background:rgba(26,34,51,.12)}
.pcard .c-skills em{width:1.7em;text-align:right;font-style:normal;font-weight:700;flex:none;color:#00693E}
.pcard .c-skills em.gap{color:#9A5B00}
/* wellbeing pulse: one series, so no legend; 2px line, 8px markers with a surface ring, recessive grid, the first value labelled */
.pcard .c-score em.c-up{margin-left:auto;align-self:center;font-style:normal;font-size:.8em;font-weight:600;color:#00693E;background:#E3F2E9;padding:.35em .65em;border-radius:999px}
.pcard .c-line{position:relative;height:5.4em;margin-top:.8em}
.pcard .c-line svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pcard .c-line .gl{fill:none;stroke:rgba(26,34,51,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.pcard .c-line .ln{fill:none;stroke:#00A550;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pcard .c-line i{position:absolute;width:.6em;height:.6em;margin:-.3em 0 0 -.3em;border-radius:50%;background:#00A550;box-shadow:0 0 0 2px #fff}
.pcard .c-line i.now{width:.85em;height:.85em;margin:-.425em 0 0 -.425em;background:#00693E;animation:nowPulse 2.4s ease-out infinite}
.pcard .c-line .lb{position:absolute;transform:translate(-30%,-185%);font-size:.76em;font-weight:600;color:#5B6660;font-variant-numeric:tabular-nums}
@keyframes nowPulse{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(0,165,80,.4)}70%,100%{box-shadow:0 0 0 2px #fff,0 0 0 .7em rgba(0,165,80,0)}}
.pcard .c-axis{display:flex;justify-content:space-between;margin-top:.45em;font-size:.76em;color:#7A857F}
/* the month's kudos: the most praised colleague large, two runners-up below */
.pcard.m-kudos,.pcard.m-karma{width:23cqw;min-width:290px}
.pcard .c-star{display:flex;align-items:center;gap:.75em;margin-top:.75em}
.pcard .av.xl{position:relative;width:3.1em;height:3.1em;font-size:.95em}
.pcard .av.xl i{position:absolute;right:-.2em;bottom:-.15em;width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;background:#00A550;color:#fff;font:700 .62em/1 var(--sans);font-style:normal;box-shadow:0 0 0 .2em #fff}
.pcard .c-star b{display:block;font:600 1.18em/1.15 var(--sans);letter-spacing:-.01em}
.pcard .c-star>div>span{font-size:.86em;color:#3F4D45}
.pcard .c-vals{display:flex;flex-wrap:wrap;gap:.35em}
.pcard .c-vals .c-chip{margin-top:.6em}
.pcard .c-quote cite{display:block;margin-top:.2em;font-style:normal;font-size:.84em;color:#5B6660}
.pcard .c-rank{list-style:none;margin:.7em 0 0;padding:0;font-size:.86em}
.pcard .c-rank li{display:flex;align-items:center;gap:.6em;padding:.45em 0;border-top:1px solid #F0EEE9}
.pcard .c-rank li>i{width:1em;font-style:normal;font-weight:700;color:#6E7A73;font-variant-numeric:tabular-nums}
.pcard .c-rank .av{width:2em;height:2em;font-size:.82em}
.pcard .c-rank .nm{flex:1;min-width:0;font-weight:550}
.pcard .c-rank b{font-variant-numeric:tabular-nums}
/* organisation simulation: a small chart where one person is about to be laid off, the critical skill that leaves with her hangs underneath */
.pcard .c-org{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 .6em;margin-top:.8em;font-size:.8em}
.pcard .c-org::before{content:"";position:absolute;left:calc(50% - .5px);top:1.9em;height:.7em;border-left:1px solid rgba(26,34,51,.25)}
.pcard .c-org::after{content:"";position:absolute;left:25%;right:25%;top:2.6em;border-top:1px solid rgba(26,34,51,.25)}
.pcard .o-n{position:relative;display:flex;align-items:center;gap:.4em;height:2.5em;padding:0 .45em;border-radius:.7em;background:#fff;border:1px solid rgba(26,34,51,.16);min-width:0}
.pcard .o-n::before{content:"";position:absolute;left:calc(50% - .5px);top:-.75em;height:.75em;border-left:1px solid rgba(26,34,51,.25)}
.pcard .o-n.boss{grid-column:1/-1;justify-self:center;width:calc(50% - .3em);height:1.9em;margin-bottom:1.4em}
.pcard .o-n.boss::before{display:none}
.pcard .o-n i{width:1.5em;height:1.5em;border-radius:50%;background:#DCEBE2;flex:none}
.pcard .o-n s{flex:1;height:.42em;border-radius:99px;background:rgba(26,34,51,.12)}
.pcard .o-n.cut{background:#FDF1F2;border:1.5px dashed #D93644}
.pcard .o-n.cut b{width:1.75em;height:1.75em;border-radius:50%;display:grid;place-items:center;flex:none;background:#B42330;color:#fff;font:700 .78em/1 var(--sans)}
.pcard .o-n.cut span{font-weight:650;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pcard .c-risk{position:relative;margin-top:.9em;padding:.6em .75em;border-radius:.85em;background:#FDF1F2;border:1px solid #F4C9CE;font-size:.86em}
.pcard .c-risk::before{content:"";position:absolute;left:calc(75% + .15em);top:-.95em;height:.9em;border-left:1.5px dashed #D93644}
.pcard .c-risk .h{display:flex;align-items:center;gap:.45em;font-weight:650;color:#B42330}
.pcard .c-risk .h i{width:1.25em;height:1.25em;border-radius:50%;display:grid;place-items:center;background:#D93644;color:#fff;font:800 .8em/1 var(--sans);font-style:normal;flex:none;animation:riskPulse 2.4s ease-out infinite}
.pcard .c-risk .h em{margin-left:auto;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.pcard .c-risk small{display:block;margin-top:.2em;color:#5A4447;font-size:.92em}
@keyframes riskPulse{0%{box-shadow:0 0 0 0 rgba(217,54,68,.45)}70%,100%{box-shadow:0 0 0 .55em rgba(217,54,68,0)}}
.pcard .c-kv.cost{margin-top:.7em}
.pcard .c-kv.cost+.c-kv{margin-top:.3em}
.pcard .c-kv .g{color:#00693E}
/* pay review and transparency: the pay band for one level, colleagues as dots, the proposal moves one of them */
.pcard .c-bandh{margin-top:.75em;font-size:.8em;color:#3F4D45}
.pcard .c-band{position:relative;height:1.6em;margin-top:.45em}
.pcard .c-band::before{content:"";position:absolute;left:0;right:0;top:calc(50% - .35em);height:.7em;border-radius:99px;background:linear-gradient(90deg,#DCEBE2,#BFE0CD)}
.pcard .c-band i{position:absolute;top:50%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;border-radius:50%;background:#fff;border:1.5px solid rgba(26,34,51,.35)}
.pcard .c-band b{position:absolute;top:50%;left:42.7%;width:1.15em;height:1.15em;margin:-.575em 0 0 -.575em;border-radius:50%;background:#00A550;box-shadow:0 0 0 .3em rgba(0,165,80,.2);transition:left .9s var(--out)}
.pcard .c-band b.on{left:63.5%}
.pcard .c-bandx{display:flex;justify-content:space-between;margin-top:.3em;font-size:.76em;color:#7A857F;font-variant-numeric:tabular-nums}
@container (max-width:560px){.pcard{width:48cqw;min-width:0;font-size:12px;padding:6px;border-radius:18px}.pcard .pin{padding:11px 12px;border-radius:13px}.pcard.m-recTasks,.pcard.m-kudos,.pcard.m-karma{width:52cqw;min-width:0}}
@media (prefers-reduced-motion:reduce){.pcard .c-risk .h i,.pcard .c-line i.now{animation:none}.pcard .c-band b{transition:none}.pcard,.ptip,.hero.portal .pcopy{transition:none}}