/* ============================================================
   KOMMA — homepage
   Tokens lifted from the live product (css/platform.css, ui-dev.css)
   paper #F6F3EE · forest #00693E · grass #00A550
   Playfair Display = display + numerals · Mona Sans = everything else
   ============================================================ */
:root{
  --paper:#F6F3EE;
  --paper-deep:#EFEAE1;
  --panel:#fff;
  --forest:#00693E;
  --forest-dk:#00522F;
  --forest-lt:#0A7D4D;
  --grass:#00A550;
  --mint:#8FE3B4;
  --ink:#333;
  --slate:#6A7686;
  --mute:#999;
  --line:#E4DFD5;
  --line-soft:#EEE;
  --coral:#E83946;
  --sky:#0054A3;
  --sky-dk:#00417E;   /* hover pair for --sky, same relationship as --forest-dk */
  --amber:#E8973A;
  --maxw:1220px;
  --header-h:74px;
  --r:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(31,26,15,.14);
  --shadow-lg:0 2px 4px rgba(0,0,0,.04), 0 30px 70px -24px rgba(31,26,15,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font-family:'Mona Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* focus — visible, brand-tinted, never removed */
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.on-forest :focus-visible{outline-color:#fff}

/* ---- type scale ---------------------------------------- */
.display{
  font-family:'Playfair Display',Georgia,serif;font-weight:500;
  letter-spacing:-.02em;line-height:1.04;margin:0;
}
h1.display{font-size:clamp(2.5rem,4.7vw,3.55rem)}
h2.display{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08}
h3.display{font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.2}
.num{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--forest);margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--forest);flex:none}
.eyebrow.c::before{display:none}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.62;color:var(--slate);margin:22px 0 0;max-width:62ch}
.section{padding:clamp(72px,9vw,124px) 0}
.wrap{width:min(100% - 48px,var(--maxw));margin-inline:auto}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}}

/* ---- buttons -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s cubic-bezier(.4,0,.2,1),background .18s,box-shadow .18s,border-color .18s;
  white-space:nowrap;
}
.btn-primary{background:var(--forest);color:#fff;box-shadow:0 8px 22px -10px rgba(0,105,62,.7)}
.btn-primary:hover{background:var(--forest-dk);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,105,62,.75)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
/* Log in. Blue rather than forest so it reads as a different kind of action
   from "Book a demo" — the green primary stays the one call to action. */
.btn-blue{background:var(--sky);color:#fff;box-shadow:0 8px 22px -10px rgba(0,84,163,.7)}
.btn-blue:hover{background:var(--sky-dk);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,84,163,.75)}
.on-forest .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.on-forest .btn-ghost:hover{background:#fff;color:var(--forest)}
.on-forest .btn-primary{background:#fff;color:var(--forest);box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.on-forest .btn-primary:hover{background:var(--paper);color:var(--forest-dk)}
.btn-sm{padding:10px 20px;font-size:.875rem}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(246,243,238,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 6px 20px -18px rgba(31,26,15,.5)}
.nav-in{display:flex;align-items:center;gap:34px;height:74px}
.nav-logo img{height:23px;width:auto}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:4px}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--ink);position:relative;padding:4px 0;white-space:nowrap}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--forest);
  transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
/* ---- language selector ---------------------------------- */
.langsel{position:relative}
.langsel-btn{
  display:flex;align-items:center;gap:5px;padding:5px 8px 5px 6px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--panel);cursor:pointer;
  transition:border-color .18s,box-shadow .18s;
}
.langsel-btn:hover{border-color:var(--slate)}
.langsel[data-open] .langsel-btn{border-color:var(--forest);box-shadow:0 0 0 3px rgba(0,105,62,.14)}
.flag{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.langsel .chev{width:14px;height:14px;color:var(--slate);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.langsel:not([data-open]) .chev{transform:rotate(180deg)}

/* right:0, not left:0 — the selector is the last thing in .nav-right, so a
   216px panel opening rightward ran 38px past the viewport and gave the page a
   horizontal scrollbar. It has to open inward from the right edge. */
.langsel-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;margin:0;padding:6px;
  list-style:none;min-width:216px;max-height:min(70vh,420px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 2px 6px rgba(31,26,15,.06), 0 24px 48px -16px rgba(31,26,15,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s cubic-bezier(.4,0,.2,1),visibility 0s linear .18s;
}
.langsel[data-open] .langsel-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.langsel-menu button{
  display:flex;align-items:center;gap:13px;width:100%;padding:9px 12px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;font-size:1rem;font-weight:500;color:var(--ink);text-align:left;
  transition:background .15s;
}
.langsel-menu button:hover{background:var(--paper)}
.langsel-menu button[aria-selected="true"]{background:rgba(0,105,62,.07);font-weight:600}
.langsel-menu button span{flex:1;min-width:0}
@media(max-width:600px){
  .langsel-menu{min-width:190px}   /* right:0 is the default now */
  .langsel-menu button{font-size:.94rem;padding:8px 10px}
}
/* .nav-login carries no look of its own any more — the element takes
   .btn .btn-blue .btn-sm for that. The class stays purely as the hook the
   1080px rule below hides. Do not put a font-size back here: this rule sits
   after .btn-sm in the file, so it would win on source order and undo it. */
.nav-burger{display:none;border:0;background:transparent;padding:8px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:1.6px;background:var(--ink);margin:5px 0;transition:transform .2s}
@media(max-width:1080px){
  .nav-links,.nav-login{display:none}
  .nav-burger{display:block}
}
/* Extra room between "Book a demo" and the flag. Left margin ONLY: the
   selector is now the last item in .nav-right, so a right margin would pull it
   8px off the container edge and the header would stop lining up with the wrap
   the rest of the page aligns to. Still scoped, because the 600px block below
   tightens the whole row to 8px to stop the header scrolling sideways. */
@media(min-width:601px){
  .langsel{margin-left:8px}
}
/* small screens: the nav must never be what makes the page scroll sideways */
@media(max-width:600px){
  .nav-in{gap:10px;height:64px}
  .nav-right{gap:8px}
  .nav-logo img{height:20px}
  .nav-right .btn-sm{padding:9px 14px;font-size:.8rem}
  .langsel-btn{padding:4px 6px 4px 5px}
  .flag{width:21px;height:21px}
  .nav-burger{padding:6px}
}

/* ============================================================
   HERO
   ============================================================ */
/* The 40px at the bottom is load-bearing: overflow:hidden clips the ::before
   wash at this element's edge, and .app is the last thing in here, so at 0 the
   panel's bottom border and the hard end of the gradient were the same line. */
.hero{padding:clamp(48px,6vw,80px) 0 40px;position:relative;overflow:hidden}
/* ambient wash behind the product shot — warm paper lifting into green */
.hero::before{
  content:"";position:absolute;left:50%;top:clamp(300px,34vw,470px);
  width:min(1900px,160vw);height:clamp(560px,66vw,1020px);transform:translateX(-50%);
  background:radial-gradient(62% 56% at 50% 44%,
    rgba(0,165,80,.40) 0%, rgba(0,128,74,.30) 32%, rgba(0,105,62,.17) 55%,
    rgba(0,105,62,.06) 74%, rgba(0,105,62,0) 92%);
  pointer-events:none;z-index:0;
}
.hero .wrap{position:relative;z-index:1}
.hero-top{max-width:840px;margin:0 auto;text-align:center}
h1.display .brk{display:block}
h1.display em{font-style:italic;color:var(--forest)}
.hero-top .lede{margin:22px auto 0;text-align:center;max-width:56ch}

/* email capture */
.capture{
  display:flex;align-items:center;gap:6px;margin:34px auto 0;max-width:530px;
  background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:6px 6px 6px 8px;
  transition:border-color .2s,box-shadow .2s;
}
.capture:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px rgba(0,105,62,.1)}
.capture input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;padding:12px 14px;
  font-size:.95rem;color:var(--ink);font-family:inherit;
}
.capture input::placeholder{color:var(--mute)}
.capture .btn{flex:none}
.capture-note{margin:14px 0 0;font-size:.82rem;color:var(--mute)}
/* below this the field and button fight for room — stack them instead */
@media(max-width:520px){
  .capture{flex-direction:column;gap:8px;border-radius:20px;padding:10px;align-items:stretch}
  .capture input{padding:10px 8px;text-align:center}
  .capture .btn{width:100%}
}
.trust{margin:26px 0 0;font-size:.9rem;color:var(--slate)}
.trust b{color:var(--ink);font-weight:650}

/* module tab pills above the product shot */
.hero-tabs{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:clamp(38px,4.4vw,56px) auto 26px;
}
.htab{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);cursor:pointer;
  font-size:.88rem;font-weight:550;color:var(--slate);white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.htab svg{width:15px;height:15px;opacity:.75}
.htab:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-1px)}
.htab[aria-selected="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.htab[aria-selected="true"] svg{opacity:1}

/* ============================================================
   THE PRODUCT SHOT — a real Komma dashboard, built in HTML so it
   stays crisp, themeable and editable rather than a flat image.
   ============================================================ */
.app{
  max-width:1180px;margin:0 auto;display:grid;grid-template-columns:210px 1fr;
  background:var(--panel);border:1px solid rgba(0,0,0,.06);border-radius:18px;overflow:hidden;
  box-shadow:0 2px 6px rgba(31,26,15,.05), 0 40px 90px -30px rgba(4,48,30,.42);
}
@media(max-width:860px){.app{grid-template-columns:64px 1fr}}
@media(max-width:560px){.app{grid-template-columns:1fr}}

.app-side{background:var(--forest);padding:16px 12px;display:flex;flex-direction:column;gap:2px;min-height:520px}
@media(max-width:560px){.app-side{display:none}}
.app-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px}
/* url() resolves against this stylesheet, not the page — hence ../../ */
.app-brand i{width:24px;height:24px;background:url('../../img/symbol-white.svg') 50% 50%/22px no-repeat;flex:none}
.app-brand span{color:#fff;font-weight:650;font-size:.94rem;letter-spacing:-.01em}
@media(max-width:860px){.app-brand span{display:none}}
.app-nav{display:flex;flex-direction:column;gap:1px}
.app-nav a{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;
  color:rgba(255,255,255,.72);font-size:.83rem;font-weight:500;
  transition:background .2s,color .2s;
}
.app-nav a svg{width:16px;height:16px;flex:none}
.app-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.app-nav a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.app-nav a.ai{color:#8FE3B4}
@media(max-width:860px){.app-nav a span{display:none}.app-nav a{justify-content:center;padding:9px 0}}
.app-rule{height:1px;background:rgba(255,255,255,.14);margin:12px 6px}
.app-me{
  margin-top:auto;display:flex;align-items:center;gap:9px;padding:8px 10px;
  color:rgba(255,255,255,.8);font-size:.8rem;font-weight:500;
}
.app-me i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);flex:none;display:grid;place-items:center;font-size:.6rem;font-style:normal;color:#fff;font-weight:700}
@media(max-width:860px){.app-me span{display:none}.app-me{justify-content:center}}

.app-main{background:var(--paper);display:flex;flex-direction:column;min-width:0}
.app-top{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.app-search{
  flex:1;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:.82rem;color:var(--mute);max-width:420px;margin:0 auto;
}
.app-search svg{width:14px;height:14px;flex:none}
.app-icon{width:32px;height:32px;border-radius:9px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.app-icon svg{width:15px;height:15px;color:var(--forest)}
/* --pad is the one source for this padding: .shot-img below bleeds the
   screenshots back out by exactly this much, so the two must not drift. */
.app-body{--pad:clamp(18px,2.2vw,26px);padding:var(--pad);flex:1}
.app-greet{text-align:center;margin-bottom:22px}
.app-greet span{font-size:.78rem;color:var(--mute);font-weight:500}
.app-greet h3{
  margin:5px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(1.35rem,2.3vw,1.85rem);letter-spacing:-.02em;
}
.app-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
@media(max-width:760px){.app-grid{grid-template-columns:1fr}}
.app-col{display:grid;gap:14px;min-width:0}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 17px}
.pane-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.pane-h h4{margin:0;font-size:.88rem;font-weight:650;letter-spacing:-.01em}
.pane-h a{font-size:.76rem;color:var(--forest);font-weight:600}

.task{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:0;padding-bottom:0}
.task .av{width:26px;height:26px;font-size:.6rem;margin-top:1px}
.task b{display:block;font-size:.8rem;font-weight:550;line-height:1.35}
.task em{font-style:normal;font-size:.72rem;color:var(--mute)}
.task em.due{color:var(--coral);font-weight:600}

.timer{display:flex;align-items:center;gap:13px;background:var(--paper);border-radius:10px;padding:13px 15px}
.timer-btn{width:34px;height:34px;border-radius:50%;background:var(--forest);flex:none;display:grid;place-items:center}
.timer-btn svg{width:13px;height:13px;color:#fff}
.timer-v{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:500;letter-spacing:-.01em;flex:1}
.timer-l{font-size:.72rem;color:var(--mute);text-align:right;line-height:1.35}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo div span{display:block;font-size:.72rem;color:var(--slate);font-weight:550;margin-bottom:3px}
.duo div b{font-family:'Playfair Display',Georgia,serif;font-size:1.7rem;font-weight:500;line-height:1;display:block}
.duo div b i{font-style:normal;font-size:.5em;color:var(--mute);margin-left:1px}

.leave{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.78rem}
.leave:last-child{border-bottom:0;padding-bottom:0}
.leave i{width:3px;height:22px;border-radius:99px;flex:none}
.leave b{flex:1;font-weight:550}
.leave span{color:var(--mute);font-size:.74rem}

/* Karma card inside the dashboard — the AI stays above the fold */
.kcard{background:linear-gradient(160deg,rgba(0,165,80,.09),rgba(0,105,62,.04));border-color:rgba(0,105,62,.18)}
.kcard .pane-h h4{display:flex;align-items:center;gap:7px}
.kcard .pane-h h4 svg{width:14px;height:14px;color:var(--grass)}
.kcard .k-row{margin-bottom:8px}
.kcard .k-bub{font-size:.78rem;padding:9px 12px;border-radius:11px}
.kcard .k-row.ai .k-bub{background:var(--panel)}
.kcard .kq{
  margin-top:11px;padding:8px 13px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);font-size:.76rem;color:var(--mute);display:flex;align-items:center;gap:8px;
}

/* module views swapped in by the hero tabs */
.app-view{display:none}
.app-view.on{display:block}

/* The hero views are screenshots of the real product. Each one already carries
   that screen's own padding, so cancel .app-body's with a matching negative
   margin and let the picture meet the panel edge — otherwise it reads as a
   picture pasted into an app rather than the app itself.

   The bottom is the exception. The captures are cropped to a fixed aspect, so
   they end mid-row; bleeding that into the panel edge reads as the screen
   having been sliced off. Letting .app-body's bottom padding stand lands a
   picture the same distance off the edge as the markup views do. */
.shot-img{
  display:block;width:calc(100% + 2 * var(--pad));height:auto;
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  /* beats the global img{max-width:100%}, which would otherwise cap the width
     back to the padded box and leave the picture flush left with a gap right */
  max-width:none;
}
.mv-h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.mv-h h3{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:1.5rem;letter-spacing:-.02em}
.mv-h span{font-size:.75rem;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ---- hero home: the widget dashboard -----------------------
   Nine cards on a 12-column grid, so one row can be 6+3+3 and the next
   4+4+4 without a second container.

   Compound selectors (.ring.w-ring, .app-greet.w-greet) are deliberate:
   .ring, .av and .bar are all defined LOWER in this file, so a plain
   .w-ring here would lose on source order. Raising specificity instead
   of moving this block keeps the hero CSS together.

   Scoped on purpose. .app-greet, .pane and .bar are shared with the
   /try page's screens, so nothing here edits them in place — the
   greeting takes a .w-greet modifier rather than realigning
   .app-greet, which would have moved /try too. */
.app-greet.w-greet{text-align:left;margin-bottom:18px}
/* .app-greet span is the small grey date line, and it would otherwise catch
   the <span> that carries the greeting's key inside the <h3> too */
.w-greet h3 span{font-size:inherit;color:inherit;font-weight:inherit}
.w-greet h3 em{font-style:italic;color:var(--forest)}
.w-greet h3 .w-wave{font-size:.8em}  /* the emoji would else render at display size */

.w-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:11px}
.w{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0}
.w-6{grid-column:span 6}
.w-4{grid-column:span 4}
.w-3{grid-column:span 3}
/* the panel's content column is only ~968px at full width, so three
   4-wide cards crowd well before the page reaches a phone */
@media(max-width:1000px){.w-6{grid-column:span 12}.w-3,.w-4{grid-column:span 6}}
@media(max-width:700px){.w-3,.w-4{grid-column:span 12}}

.w-lbl{margin:0 0 9px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.w-v{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1;font-size:1.85rem;letter-spacing:-.02em}
.w-v.sm{font-size:1.5rem}
.w-t{margin:0;font-size:.87rem;font-weight:650;letter-spacing:-.01em}
.w-t.mt{margin-top:7px}
.w-m{margin:4px 0 0;font-size:.72rem;color:var(--mute);line-height:1.45}
.w-m.up{color:var(--grass);font-weight:600}

/* the one live card. Brand green, so .bar has to re-skin inside it */
.w.green{background:var(--forest);border-color:var(--forest);color:#fff}
.w.green .w-lbl{color:rgba(255,255,255,.72)}
.w.green .w-m{color:rgba(255,255,255,.82)}
.w.green .bar{background:rgba(255,255,255,.22)}
.w.green .bar i{background:#fff}
.w-bar{margin-top:13px}

/* ring + text and avatar + text are the same two-column shape */
.w-side{display:flex;align-items:center;gap:12px}
.w-side > div{min-width:0}
.ring.w-ring{width:58px;height:58px}  /* the viewBox scales stroke and label with it */
.av.lg{width:38px;height:38px;font-size:.72rem}

.w-avs{display:flex;margin-top:10px}
.w-avs .av{width:25px;height:25px;font-size:.58rem;border:2px solid var(--panel)}
.w-avs .av + .av{margin-left:-8px}

.w-spark{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
.w-spark polyline{fill:none;stroke:var(--forest);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.w-spark circle{fill:var(--grass)}

.w-sc{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:var(--paper);font-size:.79rem;font-weight:550}
.w-sc + .w-sc{margin-top:6px}
.w-sc svg{width:15px;height:15px;color:var(--forest);flex:none}

.w-pct{display:flex;align-items:center;gap:10px;margin-top:10px}
.w-pct .bar{flex:1}
.w-pct span{font-size:.7rem;font-weight:650;color:var(--mute);flex:none}

/* ---- hero product surface: Karma answering ---------------- */

.k-row{display:flex;margin-bottom:12px}
.k-row.me{justify-content:flex-end}
.k-bub{
  max-width:88%;padding:12px 16px;border-radius:14px;font-size:.9rem;line-height:1.55;
}
.k-row.ai .k-bub{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.k-row.me .k-bub{background:var(--forest);color:#fff;border-bottom-right-radius:4px}
.k-chip{
  display:inline-block;padding:2px 9px;border-radius:6px;background:rgba(0,165,80,.14);
  color:var(--forest);font-weight:600;font-size:.85rem;
}
@media(max-width:600px){.k-bub{max-width:94%;font-size:.86rem}}
.k-cursor{
  display:inline-block;width:1.5px;height:1em;background:var(--forest);vertical-align:-2px;
  animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ============================================================
   LOGO WALL  (placeholder wordmarks — replace with customers)
   ============================================================ */
.proof{padding:56px 0 8px;border-top:1px solid var(--line)}
.proof-lbl{text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin-bottom:30px}
.proof-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,5vw,62px)}
.proof-row span{
  font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);opacity:.34;
  transition:opacity .25s;
}
.proof-row span:hover{opacity:.62}

/* ============================================================
   KARMA — ask · prepare · approve  (a real 3-step sequence)
   ============================================================ */
.karma{background:var(--forest);color:#fff;border-radius:28px;overflow:hidden;position:relative}
.karma-in{padding:clamp(48px,6vw,84px) clamp(28px,5vw,70px)}
.karma .eyebrow{color:#8FE3B4}
.karma .eyebrow::before{background:#8FE3B4}
.karma .lede{color:rgba(255,255,255,.76)}
.karma h2{color:#fff}
.karma-head{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;margin-bottom:52px}
@media(max-width:900px){.karma-head{grid-template-columns:1fr;gap:24px;align-items:start}}
/* 4 shared rows — number · heading · body · quote — so the dark quote
   boxes line up across all three cards regardless of copy length. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto auto;gap:20px}
@media(max-width:900px){.steps{grid-template-columns:1fr;grid-template-rows:none}}
.step{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:26px 24px 28px;transition:background .25s,transform .25s,border-color .25s;
  display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;
}
@supports not (grid-template-rows:subgrid){
  .step{display:flex;flex-direction:column}
  .step .step-say{margin-top:auto}   /* specificity beats .step-say's margin-top below */
}
@media(max-width:900px){.step{display:block}}
.step:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26);transform:translateY(-3px)}
.step-n{
  font-family:'Playfair Display',Georgia,serif;font-size:2.4rem;font-weight:500;color:#8FE3B4;
  line-height:1;margin-bottom:16px;display:block;
}
.step h3{font-size:1.06rem;font-weight:650;margin:0 0 9px;letter-spacing:-.01em}
.step p{margin:0;font-size:.92rem;line-height:1.58;color:rgba(255,255,255,.68)}
.step-say{
  margin-top:18px;padding:11px 14px;border-radius:10px;background:rgba(0,0,0,.2);
  font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.9);
  display:flex;align-items:center;
}
.karma-foot{
  margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.karma-foot p{margin:0;font-size:.92rem;color:rgba(255,255,255,.7);max-width:56ch}

/* ============================================================
   ONE SYSTEM — same shell, every module (the thesis, structural)
   ============================================================ */
.sys-head{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:end;margin-bottom:44px}
@media(max-width:900px){.sys-head{grid-template-columns:1fr;gap:20px;align-items:start}}
.tabs{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:26px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:10px 20px;
  font-size:.88rem;font-weight:550;color:var(--slate);cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.tab:hover{border-color:var(--forest);color:var(--forest)}
.tab[aria-selected="true"]{background:var(--forest);border-color:var(--forest);color:#fff}

.stage{
  display:grid;grid-template-columns:1fr 1.32fr;gap:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  min-height:430px;
}
@media(max-width:900px){.stage{grid-template-columns:1fr}}
.stage-l{padding:clamp(30px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center}
/* .eyebrow leaves 18px above the headline, but .display zeroes its own
   margin — so the body copy underneath started flush against it. Give the
   headline the same 18px below, and it sits evenly between the two.
   .stage-l is a flex column, so a .lede's own top margin would add to
   this rather than collapse into it — zero it and let the headline own
   the gap, the way a plain <p> already does. */
.stage-l .display{margin-bottom:18px}
.stage-l .display + .lede{margin-top:0}
.stage-sub{font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grass);margin:0 0 16px}
.stage-l p{margin:0 0 22px;color:var(--slate);font-size:.98rem;line-height:1.62}
.feat{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.feat li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;line-height:1.5}
.feat li::before{
  content:"";width:17px;height:17px;border-radius:50%;flex:none;margin-top:3px;
  background:rgba(0,165,80,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300693E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") 50% 50%/10px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,165,80,.28);
}
.stage-r{background:var(--paper);border-left:1px solid var(--line);padding:26px;display:grid;place-items:center}
@media(max-width:900px){.stage-r{border-left:0;border-top:1px solid var(--line)}}
.shot{width:100%;border-radius:10px;overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.shot-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.shot-t{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;font-weight:500}
.shot-tabs{display:flex;gap:14px;margin-left:auto;font-size:.72rem;color:var(--mute)}
.shot-tabs b{color:var(--forest);font-weight:600;border-bottom:1.5px solid var(--forest);padding-bottom:2px}
.shot-body{padding:16px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
/* min-width:0 for the same reason the figures band needed it: a grid item
   floors at its longest word, and a Danish or German caption ("inkluderet i
   jeres abonnement") sets a floor wider than a third of a phone-width shot.
   The card then spills past .shot, which clips it. */
.card{border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:var(--panel);min-width:0}
.card-l{font-size:.68rem;color:var(--slate);font-weight:550;margin-bottom:5px;letter-spacing:.01em;overflow-wrap:break-word}
.card-v{font-family:'Playfair Display',Georgia,serif;font-size:1.62rem;font-weight:500;line-height:1;color:var(--ink)}
.card-m{font-size:.62rem;color:var(--mute);margin-top:5px;overflow-wrap:break-word}
.rows{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:10px 13px;font-size:.76rem;align-items:center;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row.hd{background:#FCFCFC;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:600}
.row .nm{display:flex;align-items:center;gap:8px;font-weight:550}
.av{width:22px;height:22px;border-radius:50%;background:rgba(0,105,62,.1);color:var(--forest);display:grid;place-items:center;font-size:.58rem;font-weight:700;flex:none}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.66rem;font-weight:600;justify-self:start}
.badge.g{background:rgba(0,165,80,.13);color:var(--forest)}
.badge.b{background:rgba(0,84,163,.1);color:var(--sky)}
.badge.a{background:rgba(232,151,58,.14);color:#A9691D}
.badge.r{background:rgba(232,57,70,.1);color:var(--coral)}
.badge.n{background:#F0EDE7;color:var(--slate)}
.bar{height:5px;border-radius:99px;background:var(--paper-deep);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--forest)}

/* ============================================================
   NUMBERS — true, countable facts about the product
   ============================================================ */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:820px){.figs{grid-template-columns:repeat(2,1fr)}}
.fig{background:var(--panel);padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px)}
.fig-v{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.4rem,4.4vw,3.5rem);font-weight:500;line-height:1;color:var(--forest);letter-spacing:-.02em}
.fig-l{margin-top:12px;font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.fig-d{margin-top:5px;font-size:.82rem;color:var(--mute);line-height:1.5}

/* ============================================================
   SPLIT features (talent intelligence / Nordic compliance)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,76px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
.split.flip .split-v{order:-1}
@media(max-width:900px){.split.flip .split-v{order:0}}

/* weighted skills widget */
.skills{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.skills-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.skills-h h4{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:500}
.skills-h span{font-size:.74rem;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.sk{display:grid;grid-template-columns:1fr 54px;gap:14px;align-items:center;margin-bottom:14px}
.sk-n{font-size:.86rem;font-weight:550}
.sk-n em{font-style:normal;color:var(--mute);font-weight:400;font-size:.78rem;display:block;margin-top:2px}
.sk-w{font-family:'Playfair Display',Georgia,serif;font-size:1.16rem;text-align:right;color:var(--forest)}
.sk-bar{grid-column:1/-1;margin-top:-6px}
.match{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.match-r{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:9px 0}
.match-p{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:'Playfair Display',Georgia,serif;font-size:.94rem;color:#fff;flex:none;
}
.p90{background:#1D8A4E}.p80{background:#4FA35C}.p70{background:#93B455}.p60{background:#E8973A}
.formula{
  margin-top:18px;padding:13px 15px;border-radius:10px;background:var(--paper);
  font-size:.8rem;color:var(--slate);text-align:center;border:1px solid var(--line);
}
.formula b{font-family:'Playfair Display',Georgia,serif;font-size:.95rem;color:var(--ink);font-weight:500}

/* ============================================================
   MOBILE — the same system in your people's pockets.
   Phone frames and screens are CSS, mirroring the React Native app.
   ============================================================ */
.mob{
  border-radius:28px;overflow:hidden;position:relative;
  background:radial-gradient(120% 90% at 78% 8%, #0B5B39 0%, #064027 44%, #04291B 100%);
  color:#fff;padding:clamp(44px,5vw,72px) clamp(24px,4.4vw,60px);
}
.mob-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:1000px){.mob-grid{grid-template-columns:1fr;gap:44px}}
.mob h2{color:#fff;margin:0 0 18px}
.mob .eyebrow{color:#8FE3B4}
.mob .eyebrow::before{background:#8FE3B4}
.mob .lede{color:rgba(255,255,255,.75)}
.mob-feat{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:13px;max-width:52ch}
.mob-feat li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.88)}
.mob-feat li::before{
  content:"";width:17px;height:17px;border-radius:50%;flex:none;margin-top:3px;
  background:rgba(143,227,180,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE3B4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") 50% 50%/10px no-repeat;
}
.mob-store{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.mob-store span{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);font-size:.84rem;font-weight:600;color:#fff;
}
.mob-store svg{width:15px;height:15px}

/* --- phones --- */
.phones{display:flex;gap:18px;justify-content:center;align-items:flex-start}
@media(max-width:520px){.phones{gap:12px}}
.phone{
  width:236px;flex:none;border-radius:30px;background:#12100C;padding:8px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.09);
}
.phone.back{margin-top:34px;transform:scale(.965)}
@media(max-width:640px){.phone{width:196px;border-radius:26px}.phone.back{display:none}}
.phone-scr{background:var(--paper);color:var(--ink);border-radius:23px;overflow:hidden;position:relative;height:486px}
/* A screen that is a real capture rather than CSS. Shot at the 220×486 aspect
   this box defines, so object-fit has nothing to crop — it is there for the
   narrow breakpoint, where .phone drops to 196px. */
.phone-img{display:block;width:100%;height:100%;object-fit:cover}
.phone-notch{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);width:64px;height:16px;
  background:#12100C;border-radius:99px;z-index:3;
}
.ph-top{padding:26px 14px 8px;display:flex;align-items:flex-start;gap:8px}
.ph-top-l{flex:1;min-width:0}
.ph-date{font-size:.58rem;color:var(--mute);font-weight:550}
.ph-h{
  font-family:'Playfair Display',Georgia,serif;font-size:1.16rem;font-weight:500;
  letter-spacing:-.02em;line-height:1.15;margin-top:1px;
}
.ph-h em{font-style:italic;color:var(--forest)}
.ph-av{width:24px;height:24px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:.53rem;font-weight:700;flex:none;margin-top:6px}
.ph-body{padding:0 12px 46px;display:grid;gap:9px;align-content:start;overflow:hidden}
.ph-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.ph-card.hero{background:var(--forest);border-color:transparent;color:#fff}
.ph-tag{
  display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.2);
  font-size:.5rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px;
}
.ph-card.hero b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.02rem;font-weight:500;margin-bottom:3px}
.ph-card.hero span{font-size:.62rem;color:rgba(255,255,255,.82);line-height:1.4;display:block}
.ph-prog{height:5px;border-radius:99px;background:rgba(255,255,255,.24);margin-top:10px;overflow:hidden}
.ph-prog i{display:block;height:100%;background:#fff;border-radius:99px}
.ph-lbl{font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:5px}
.ph-big{font-family:'Playfair Display',Georgia,serif;font-size:1.42rem;font-weight:500;line-height:1}
.ph-big i{font-style:normal;font-size:.52em;color:var(--slate);margin-left:2px}
.ph-sub{font-size:.58rem;color:var(--mute);margin-top:3px;line-height:1.35}
.ph-row{display:flex;align-items:center;gap:9px}
.ph-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.ph-ico svg{width:14px;height:14px}
.ph-karma{background:linear-gradient(150deg,rgba(0,165,80,.14),rgba(0,105,62,.05));border-color:rgba(0,105,62,.2)}
.ph-karma b{font-size:.66rem;font-weight:700;color:var(--forest);display:block;margin-bottom:2px}
.ph-karma p{margin:0;font-size:.6rem;line-height:1.45;color:var(--slate)}
.ph-btn{
  display:inline-block;margin-top:8px;padding:5px 13px;border-radius:999px;background:var(--forest);
  color:#fff;font-size:.58rem;font-weight:650;
}

/* ---- goal cards ----------------------------------------------
   .ph-tag is white-on-green for the hero card; a goal card is a
   plain white card, so its type badge needs its own colours. The
   bar under it is the global .bar, tinted per goal type inline. */
.ph-goal-h{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.ph-tag2{
  display:inline-block;padding:2px 8px;border-radius:999px;background:var(--paper-deep);
  color:var(--slate);font-size:.5rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.ph-goal-h em{font-style:normal;font-size:.55rem;color:var(--mute);font-weight:600}
b.ph-goal-t{display:block;font-size:.72rem;font-weight:650;line-height:1.25}
.ph-goal-f{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px}
.ph-goal-f span{font-size:.58rem;color:var(--slate)}
.ph-goal-f em{font-style:normal;font-size:.62rem;font-weight:700}

/* ---- punch rows on the clock-in screen ----------------------
   Time on the left in a fixed column so the entries line up,
   what happened in the middle, the detail trailing right. */
.ph-punch{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:baseline;padding:5px 0}
.ph-punch + .ph-punch{border-top:1px solid var(--line-soft)}
.ph-punch em{font-style:normal;font-size:.58rem;color:var(--mute);font-weight:650}
.ph-punch b{font-size:.64rem;font-weight:600}
.ph-punch span{font-size:.56rem;color:var(--mute)}

/* ---- signing screen -----------------------------------------
   .ph-doc is the four-page preview: three body pages and the
   signature page, which is the one being asked for. */
.ph-doc{display:flex;gap:4px;margin-top:9px}
.ph-doc i{
  flex:1;height:26px;border-radius:4px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);
}
.ph-doc i.s{background:rgba(0,165,80,.12);box-shadow:inset 0 0 0 1px rgba(0,105,62,.3)}
.ph-kv{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0}
.ph-kv + .ph-kv{border-top:1px solid var(--line-soft)}
.ph-kv span{font-size:.58rem;color:var(--mute)}
.ph-kv b{font-size:.62rem;font-weight:650;text-align:right}
.ph-sign{
  border:1px dashed var(--line);border-radius:9px;background:var(--paper);
  height:52px;display:grid;place-items:center;
}
.ph-sign svg{width:104px;height:30px;color:var(--ink)}
.ph-appr{border-top:1px solid var(--line-soft);margin-top:9px;padding-top:8px;display:flex;gap:6px}
.ph-appr span{flex:1;text-align:center;font-size:.58rem;font-weight:650;padding:5px 0;border-radius:7px}
.ph-appr .no{color:var(--coral)}
.ph-appr .info{color:var(--sky)}
.ph-appr .ok{background:var(--grass);color:#fff}
/* the bottom corners have to be repeated here. backdrop-filter puts the
   bar on its own compositing layer, and a layer of its own is not clipped
   by the rounded overflow:hidden on .phone-scr — so without this the bar
   squares off the bottom of a phone that is round everywhere else. */
.ph-nav{
  position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);display:flex;padding:7px 4px 9px;
  backdrop-filter:blur(8px);border-radius:0 0 23px 23px;
}
.ph-nav > span{flex:1;text-align:center;font-size:.5rem;color:var(--mute);font-weight:600;position:relative}
.ph-nav > span svg{width:14px;height:14px;display:block;margin:0 auto 2px}
.ph-nav > span.on{color:var(--forest)}
/* no drop shadow: at 34px the green glow read as a smudge around the
   button rather than as lift */
.ph-fab{
  position:absolute;right:11px;bottom:44px;width:34px;height:34px;border-radius:50%;
  background:var(--forest);display:grid;place-items:center;
}
.ph-fab svg{width:16px;height:16px;color:#fff}
.ph-badge{
  position:absolute;top:-4px;left:50%;margin-left:5px;min-width:13px;height:13px;border-radius:99px;
  background:var(--coral);color:#fff;font-size:.48rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 3px;flex:none;
}

/* ============================================================
   TALENT — one job profile, scored against employees AND candidates.
   The radar mirrors the product's Chart.js job-match chart:
   Requirements · Skills · Experience · Motivation · Culture fit.
   ============================================================ */
.tal-head{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4.4vw,64px);align-items:end;margin-bottom:clamp(32px,3.6vw,46px)}
@media(max-width:900px){.tal-head{grid-template-columns:1fr;gap:22px;align-items:start}}

.tal-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.tal-bar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:#FCFCFC;flex-wrap:wrap}
.tal-bar h3{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:1.24rem;letter-spacing:-.02em}
.tal-bar .badge{font-size:.68rem}
.tal-bar .spacer{flex:1}
.tal-bar em{font-style:normal;font-size:.74rem;color:var(--mute)}

.tal-cols{display:grid;grid-template-columns:.92fr 1.06fr 1.12fr}
.tal-cols > div{padding:22px;border-right:1px solid var(--line-soft);min-width:0}
.tal-cols > div:last-child{border-right:0}
@media(max-width:1000px){
  .tal-cols{grid-template-columns:1fr 1fr}
  .tal-cols > div:nth-child(2){border-right:0}
  .tal-cols > div:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line-soft)}
}
@media(max-width:640px){
  .tal-cols{grid-template-columns:1fr}
  .tal-cols > div{border-right:0;border-top:1px solid var(--line-soft)}
  .tal-cols > div:first-child{border-top:0}
}
.tal-lbl{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.tal-lbl b{color:var(--forest);font-weight:700}

/* radar */
.radar{width:100%;height:auto;display:block}
.radar-legend{display:flex;gap:16px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.radar-legend span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--slate);font-weight:550}
.radar-legend i{width:9px;height:9px;border-radius:2px;flex:none}

/* ranked list — employees and candidates on one scale */
.rank{display:grid;gap:3px}
.rank-r{
  display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  padding:9px 10px;border-radius:9px;border:1px solid transparent;cursor:default;
  transition:background .2s,border-color .2s;
}
.rank-r:hover{background:var(--paper)}
.rank-r.sel{background:rgba(0,105,62,.06);border-color:rgba(0,105,62,.22)}
.rank-n{font-family:'Playfair Display',Georgia,serif;font-size:.92rem;color:var(--mute);text-align:center}
.rank-r.sel .rank-n{color:var(--forest)}
.rank-who b{display:block;font-size:.84rem;font-weight:600;line-height:1.3}
.rank-who span{display:block;font-size:.71rem;color:var(--mute);margin-top:2px}
.rank-who .tag{
  display:inline-block;padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-right:6px;vertical-align:1px;
}
.tag.emp{background:rgba(0,105,62,.11);color:var(--forest)}
.tag.cand{background:rgba(0,84,163,.1);color:var(--sky)}
.rank-s{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:'Playfair Display',Georgia,serif;font-size:.94rem;color:#fff;
}
.rank-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);font-size:.76rem;color:var(--mute);line-height:1.5}

/* ---- shift planning: a miniature of the real roster grid ---- */
.roster{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.roster-top{display:flex;gap:0;border-bottom:1px solid var(--line)}
.roster-top div{flex:1;padding:13px 16px;border-right:1px solid var(--line-soft)}
.roster-top div:last-child{border-right:0}
.roster-top span{display:block;font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:4px}
.roster-top b{font-family:'Playfair Display',Georgia,serif;font-size:1.32rem;font-weight:500;line-height:1}
.roster-top b i{font-style:normal;font-size:.6em;color:var(--slate);margin-left:2px}
.roster-top .warn b{color:var(--amber)}

.rg{display:grid;grid-template-columns:88px repeat(5,1fr);font-size:.7rem}
.rg > *{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:7px 8px;min-width:0}
.rg-day{background:#FCFCFC;font-weight:600;color:var(--slate);letter-spacing:.02em}
.rg-day em{display:block;font-style:normal;font-size:.62rem;color:var(--mute);font-weight:500;margin-top:2px}
.rg-grp{grid-column:1/-1;background:var(--paper);font-weight:600;color:var(--slate);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px}
.rg-emp{display:flex;flex-direction:column;justify-content:center;gap:4px}
.rg-emp b{font-weight:600;font-size:.72rem;line-height:1.2}
.rg-emp .bar{height:3px}
.rg-emp .bar i{background:var(--grass)}
.rg-emp .bar.over i{background:var(--coral)}
.rg-emp em{font-style:normal;font-size:.6rem;color:var(--mute)}
.rg-cell{position:relative;min-height:44px}
.shift{
  border-left:2.5px solid var(--forest);background:rgba(0,105,62,.06);border-radius:4px;
  padding:4px 5px;line-height:1.25;position:relative;
}
.shift.late{border-left-color:var(--sky);background:rgba(0,84,163,.07)}
.shift.wknd{border-left-color:#7A4FC0;background:rgba(122,79,192,.07)}
.shift.open{border-left-color:var(--amber);background:rgba(232,151,58,.09)}
.shift b{display:block;font-weight:650;font-size:.68rem}
.shift em{font-style:normal;font-size:.6rem;color:var(--mute)}
.shift .dot{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%}
.shift .dot.a{background:var(--amber)}
.shift .dot.r{background:var(--coral)}
.roster-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:#FCFCFC;flex-wrap:wrap}
.roster-foot .badge{font-size:.66rem}
.roster-pub{background:var(--forest);color:#fff;border:0;border-radius:999px;padding:6px 16px;font-size:.72rem;font-weight:600}

/* compliance list */
.comp{display:grid;gap:12px}
.comp-i{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  transition:border-color .22s,transform .22s;
}
.comp-i:hover{border-color:var(--forest);transform:translateX(3px)}
.comp-i h4{margin:0 0 5px;font-size:.98rem;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.comp-i h4 em{
  font-style:normal;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:2px 8px;border-radius:999px;background:var(--paper-deep);color:var(--slate);
}
.comp-i p{margin:0;font-size:.89rem;color:var(--slate);line-height:1.55}

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.ints{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.ints{grid-template-columns:repeat(2,1fr)}}
.int{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 18px;
  display:grid;place-items:center;gap:12px;transition:border-color .22s,transform .22s,box-shadow .22s;
}
.int:hover{border-color:var(--forest);transform:translateY(-3px);box-shadow:var(--shadow)}
.int img{height:30px;width:auto;object-fit:contain}
.int span{font-size:.8rem;font-weight:550;color:var(--slate)}
/* ---- integration hub (front page) --------------------------
   A dark panel with the Komma mark at the centre and the eight
   integration logos wired to it. Geometry is fixed rather than
   clever: .ihub-grid is five equal columns by three equal rows,
   so every centre lands on a percentage this file can hardcode —
   columns at 10/30/50/70/90%, rows at 16.67/50/83.33%. The rails
   below are positioned against exactly those numbers. Change the
   column or row count and every rail has to move with it.

   Logos sit above the rails (z-index) and their white discs are
   opaque, so a rail running behind a logo is masked by it. That
   is what makes one line read as logo → logo → hub.

   Under 860px the whole diagram is dropped for a plain four-up
   grid of the same logos: the rails need the five-column shape
   to mean anything, and a phone has no room for it.
   ------------------------------------------------------------ */
.ihub{
  border-radius:28px;overflow:hidden;position:relative;
  background:radial-gradient(120% 90% at 50% 0%, #0B5B39 0%, #064027 46%, #04291B 100%);
  color:#fff;padding:clamp(40px,5vw,68px) clamp(22px,4vw,56px);text-align:center;
}
/* the faint circuitry behind everything, drawn rather than an image */
.ihub::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 12% 22%, rgba(143,227,180,.10) 0 2px, transparent 2px),
    radial-gradient(circle at 86% 18%, rgba(143,227,180,.10) 0 2px, transparent 2px),
    radial-gradient(circle at 24% 82%, rgba(143,227,180,.09) 0 2px, transparent 2px),
    radial-gradient(circle at 74% 88%, rgba(143,227,180,.09) 0 2px, transparent 2px),
    linear-gradient(rgba(143,227,180,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,227,180,.045) 1px, transparent 1px);
  background-size:auto,auto,auto,auto,64px 64px,64px 64px;
}
.ihub > *{position:relative}
.ihub h2{color:#fff;margin:0 0 10px}
.ihub .eyebrow{color:var(--mint);justify-content:center}
.ihub .lede{color:rgba(255,255,255,.74);margin:0 auto;text-align:center;max-width:60ch}

.ihub-grid{
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);
  aspect-ratio:1000/460;max-width:900px;margin:clamp(30px,4vw,46px) auto 0;
  place-items:center;
}
.ihub-node{grid-row:var(--r);grid-column:var(--c);z-index:2}
.ihub-node img{
  width:clamp(46px,6.4vw,74px);height:clamp(46px,6.4vw,74px);border-radius:50%;
  background:#fff;padding:clamp(9px,1.2vw,15px);object-fit:contain;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.65);
}
/* the hub: the Komma mark, ringed so it reads as the centre */
.ihub-core{
  grid-row:2;grid-column:3;z-index:3;display:grid;place-items:center;
  width:clamp(74px,10vw,116px);height:clamp(74px,10vw,116px);border-radius:50%;
  background:linear-gradient(180deg,#0A7D4D,#00693E);
  box-shadow:0 0 0 clamp(6px,.9vw,11px) rgba(143,227,180,.16),0 14px 34px -14px rgba(0,0,0,.7);
}
.ihub-core img{width:56%;height:56%;object-fit:contain}

/* rails. --x/--y are the hardcoded grid centres described above. */
.ihub-rail{position:absolute;background:rgba(143,227,180,.42);z-index:1}
.ihub-rail.h{height:2px;transform:translateY(-1px)}
.ihub-rail.v{width:2px;transform:translateX(-1px)}
.ihub-dot{
  position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:var(--grass);box-shadow:0 0 0 3px rgba(0,165,80,.22);z-index:1;
}
@media(max-width:860px){
  .ihub-grid{
    display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:none;
    aspect-ratio:auto;gap:14px;
  }
  .ihub-node,.ihub-core{grid-row:auto;grid-column:auto}
  .ihub-core{order:-1;grid-column:1/-1;margin-bottom:8px}
  .ihub-rail,.ihub-dot{display:none}
}
@media(max-width:420px){.ihub-grid{grid-template-columns:repeat(3,1fr)}}

.engines{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:20px;border:1px dashed var(--line);border-radius:12px;
}
/* The pill holds two things — the engine's name and what the integration
   does — with no whitespace between the tags, so they ran together as
   "ZenegyGross handoff…". The gap separates them and the second half
   drops to body colour, so the name is what you scan for. */
.engine{
  display:inline-flex;align-items:baseline;gap:10px;
  padding:8px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--forest);
}
.engine span{font-weight:500;color:var(--slate)}

/* ============================================================
   TESTIMONIALS  (placeholder copy — see comment in markup)
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;
}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.quote-m{font-family:'Playfair Display',Georgia,serif;font-size:1.12rem;line-height:1.5;margin:0 0 20px;flex:1}
.quote-w{display:flex;align-items:center;gap:11px;padding-top:18px;border-top:1px solid var(--line-soft)}
/* Initials by default; drops a portrait in the moment one exists —
   <span class="quote-av"><img src="img/customers/x.jpg" alt="" width="68"
   height="68" loading="lazy"></span>. Same shape as .person-av so the two
   read as one system. */
.quote-av{
  width:34px;height:34px;border-radius:50%;background:rgba(0,105,62,.1);color:var(--forest);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;overflow:hidden;flex:none;
}
.quote-av img{width:100%;height:100%;object-fit:cover;display:block}
.quote-w b{display:block;font-size:.88rem;font-weight:600}
/* scoped to the line under the name: a bare `.quote-w span` also matches
   .quote-av — it is a span too — and its display:block beat the grid that
   centres the initials, so they sat up in the top-left of the circle. */
.quote-w b + span{display:block;font-size:.78rem;color:var(--mute)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin-inline:auto}
.q{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:1.04rem;font-weight:600;letter-spacing:-.01em;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--forest);border-bottom:1.8px solid var(--forest);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.q[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.q p{margin:0 0 24px;color:var(--slate);font-size:.97rem;line-height:1.65;max-width:70ch}

/* ============================================================
   SECURITY & COMPLIANCE
   The page's one dark moment. Deep forest rather than mid-green,
   so it reads as gravitas and not as a third brand-green block.
   ============================================================ */
/* ---- EU / GDPR band ----------------------------------------
   A full-bleed band, not a rounded card: it *is* the <section>, and
   the .wrap sits inside it, so it spans the viewport without any
   100vw trick (which would have overflowed by the scrollbar width).

   Deep navy gradient, top to bottom. This is the one place on the
   site that is not paper or forest — it is the compliance moment,
   and the .cta directly below it stays green, so the two boxes no
   longer match. That is deliberate as of this change.
   ------------------------------------------------------------ */
.sec{
  display:block;border-radius:0;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(180deg,#0B2E7C 0%,#0A2A6B 22%,#06214E 52%,#031229 78%,#01070F 100%);
  padding:clamp(64px,7.5vw,104px) 0;
  margin-block:clamp(48px,6vw,80px);
}
.sec h2{color:#fff;margin:0 0 18px}
.sec .eyebrow{color:#9FC4FF;justify-content:center}   /* 7.4:1 on the mid navy */
.sec .eyebrow::before{display:none}
.sec .lede{color:rgba(255,255,255,.8);margin:0 auto;text-align:center}
.sec-emblem{width:52px;height:52px;margin:0 auto 22px;display:block;opacity:.95}
.sec-emblem g{fill:#9FC4FF}
.sec-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:30px;
  font-size:.96rem;font-weight:600;color:#9FC4FF;
}
.sec-link svg{width:15px;height:15px;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.sec-link:hover svg{transform:translateX(4px)}

.sec-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-top:clamp(40px,5vw,64px);
}
@media(max-width:900px){.sec-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sec-cards{grid-template-columns:1fr}}
.sec-card{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;padding:34px 20px 26px;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;gap:22px;min-height:196px;
  transition:background .25s,border-color .25s,transform .25s;
}
.sec-card:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);transform:translateY(-3px)}
.sec-card figure{margin:0;flex:1;display:grid;place-items:center}
.sec-card svg{width:74px;height:74px;opacity:.92}
.sec-card .fig-num{
  font-family:'Playfair Display',Georgia,serif;font-size:2.9rem;font-weight:500;
  line-height:1;letter-spacing:-.02em;color:#fff;
}
.sec-card .fig-num sup{font-size:.46em;font-weight:500;vertical-align:.75em;margin-left:2px;color:#9FC4FF}
.sec-card figcaption{font-size:.92rem;font-weight:550;color:rgba(255,255,255,.94);line-height:1.4}

.sec-list{
  display:grid;grid-template-columns:repeat(5,1fr);gap:22px;
  margin-top:clamp(40px,5vw,60px);padding-top:clamp(34px,4vw,46px);
  border-top:1px solid rgba(255,255,255,.18);
}
@media(max-width:900px){.sec-list{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:480px){.sec-list{grid-template-columns:1fr}}
.sec-item svg{width:19px;height:19px;margin:0 auto 12px;display:block;color:#9FC4FF}
.sec-item h4{margin:0 0 6px;font-size:.92rem;font-weight:650;letter-spacing:-.01em;color:#fff}
.sec-item p{margin:0;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.76)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{background:var(--forest);border-radius:28px;padding:clamp(52px,6.5vw,92px) clamp(28px,5vw,64px);text-align:center;color:#fff}
.cta h2{color:#fff;margin-bottom:18px}
.cta .lede{color:rgba(255,255,255,.76);margin-inline:auto;text-align:center}
.cta-btns{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.foot{border-top:1px solid var(--line);padding:64px 0 40px;margin-top:clamp(72px,9vw,110px)}
/* Five link columns, all equal. The brand used to be a sixth column
   and squeezed the rest; it now sits on its own row underneath. */
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;margin-bottom:40px}
@media(max-width:1080px){.foot-grid{grid-template-columns:repeat(3,1fr);gap:30px}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}}
.foot-brand{
  grid-column:1/-1;order:2;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:8px;padding-top:30px;border-top:1px solid var(--line);
}
.foot-brand img{height:22px;margin:0;flex:none}
.foot-brand p{margin:0;font-size:.88rem;color:var(--mute);line-height:1.6;max-width:46ch}
@media(max-width:640px){.foot-brand{gap:12px}}
.foot h5{margin:0 0 14px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li a{font-size:.88rem;color:var(--slate);transition:color .18s}
.foot li a:hover{color:var(--forest)}
.foot-btm{
  border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--mute);
}
/* the four legal pages. Was one span of text until they existed; the
   separators are drawn rather than typed, so a translation cannot lose
   them and a screen reader does not read "middot" four times. */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px}
.foot-legal a{color:var(--mute);transition:color .2s}
.foot-legal a:hover{color:var(--forest)}
.foot-legal a[aria-current="page"]{color:var(--forest);font-weight:600}
.foot-legal a + a{position:relative;padding-left:13px}
.foot-legal a + a::before{
  content:"·";position:absolute;left:0;color:var(--line);font-weight:600;
}

/* ---- reveal on scroll -------------------------------------
   Progressive enhancement: content is visible by default and only
   starts hidden once JS confirms it can reveal it again. ------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   Everything below arrived with the split into individual pages.
   The layout primitives (.head, .grid, .tile, .plan, .timeline,
   form fields) come from ../Homepage Test 2, restyled to match the
   compact rule style used above. Colliding names were NOT imported:
   that site's .faq/.quote/.fig/.cta/.engines mean something different
   here, so the ported pages reuse this file's versions instead.
   ============================================================ */

/* skip link — six pages now, so keyboard users need the bypass */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---- section variants ------------------------------------ */
.section.tight{padding:clamp(48px,5vw,72px) 0}
.section.paper-deep{background:var(--paper-deep)}
.section.panel{background:var(--panel)}
.section.forest{background:var(--forest);color:#fff}
.section.forest .display,.section.forest h4{color:#fff}
.on-forest .eyebrow,.section.forest .eyebrow{color:var(--mint)}
.on-forest .eyebrow::before,.section.forest .eyebrow::before{background:var(--mint)}
.section.forest .lede{color:rgba(255,255,255,.82)}
.wrap-narrow{width:min(100% - 48px,860px);margin-inline:auto}
@media(max-width:640px){.wrap-narrow{width:calc(100% - 32px)}}

/* centred section head — the standard opener on every inner page */
/* Centred section headers sit above a product shot that runs the full
   1220px .wrap, so a 720px text block read as a narrow column floating
   over a wide picture. The heading now gets close to the shot's width —
   most of them come back onto one line — while the lede keeps a cap of
   its own: a 1220px measure would be ~120 characters a line, which is
   where long lines start costing you the reader rather than helping. */
.head{max-width:1140px;margin:0 auto clamp(44px,5vw,68px);text-align:center}
.head .lede{margin-inline:auto;max-width:82ch}
/* Centred headings run longest in Danish and German — "HR-data er det
   mest personfølsomme, I har" is 41 characters, which at the shared h1
   size wanted ~1160px and dropped its last word onto a line of its own.
   Slightly smaller here than the shared .display sizes, and balanced so
   a two-line heading splits evenly instead of orphaning a word. The
   headings inside .stage-l keep the shared size: they sit in a 440px
   column where the vw term governs and nothing was wrapping badly. */
.head h1.display{font-size:clamp(2.3rem,4.3vw,3.2rem)}
.head h2.display{font-size:clamp(1.9rem,3.9vw,2.9rem)}
.head .display,.head .lede{text-wrap:balance}
.head .eyebrow{justify-content:center}
.head .eyebrow::before{display:none}

/* ---- utilities ------------------------------------------- */
.muted{color:var(--slate)}
.text-center{text-align:center}
.note{font-size:.84rem;color:var(--mute)}
.mt3{margin-top:24px}
.mt4{margin-top:36px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.c{justify-content:center}
.btn-block{width:100%}
.arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--forest);font-size:.93rem}
.arrow::after{content:"→";transition:transform .18s}
.arrow:hover::after{transform:translateX(4px)}
.on-forest .arrow,.section.forest .arrow{color:var(--mint)}

/* ---- grids + tiles --------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* A grid row stretches every tile to the tallest one, so a three-line
   tile next to a five-line one used to sit high in its box with all the
   slack below it. Centring puts the same space above and below the
   content instead.

   Tiles that end in a "Read more" arrow are unaffected: the arrow's
   margin-top:auto claims the free space first, and an auto margin wins
   over justify-content. So the platform hub and the module capability
   grids keep the arrow pinned to the bottom, exactly as before. */
/* ---- product categories on platform.html -------------------------
   One block per category — Hire, Manage, Grow — each heading its own
   set of module tiles and linking to the package that carries it on
   pricing.html. The nav dropdown, this page and the price list are all
   generated from CATEGORIES in _build/build.py, so the three cannot
   describe the product differently. */
.cat-block + .cat-block{margin-top:clamp(44px,5.5vw,74px)}
.cat-h{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:15px;border-bottom:1px solid var(--line);
}
.cat-h h2{
  margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,2.7vw,2.2rem);letter-spacing:-.02em;
}
.cat-h p{margin:0;flex:1;min-width:220px;color:var(--slate);font-size:1rem}
.cat-h .arrow{flex:none}
@media(max-width:640px){.cat-h{gap:8px}.cat-h p{min-width:100%}}

.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  /* flex-start, not center: with centred content a card whose text is
     one line shorter drops its icon and heading below the neighbours,
     so a row of tiles never lines up. .tile .arrow uses margin-top:auto
     to sit at the bottom regardless. */
  padding:26px;display:flex;flex-direction:column;justify-content:flex-start;
  transition:transform .18s,box-shadow .18s;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile h4{margin:0 0 8px;font-size:1.06rem;font-weight:650;letter-spacing:-.01em}
.tile p{margin:0;font-size:.94rem;color:var(--slate);line-height:1.6}
.tile .arrow{margin-top:auto;padding-top:16px}
.tile-ico{
  width:42px;height:42px;border-radius:11px;background:rgba(0,105,62,.1);color:var(--forest);
  display:grid;place-items:center;margin-bottom:16px;flex:none;
}
.tile-ico svg{width:21px;height:21px}
.section.forest .tile{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.section.forest .tile p{color:rgba(255,255,255,.8)}
.section.forest .tile-ico{background:rgba(255,255,255,.14);color:var(--mint)}

/* ---- pricing --------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
/* Three packages, so the cards are back to the base three-up grid. The
   sub-line under the plan name and the leading currency symbol came from
   the four-tier layout that preceded it and are worth keeping. */
.plan-sub{
  margin:3px 0 0;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--forest);
}
/* tight, so "€15" reads as one price rather than a symbol and a number */
.plans .plan-price{gap:3px}
/* the symbol leads in English (€12) and trails in Danish (89 kr.), so it
   has two positions: raised in front of the figure, on the baseline after */
.plan-price .plan-cur{font-size:1.5rem;color:var(--ink);align-self:flex-start;margin-top:4px}
.plan-price .plan-cur.after{
  font-size:1.1rem;color:var(--slate);align-self:baseline;margin:0 0 0 4px;
}
.plan-price .plan-custom{font-size:1.5rem;letter-spacing:-.01em}
.plan{
  position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:30px;
}
.plan.hero-plan{border:2px solid var(--forest);box-shadow:var(--shadow)}
.plan-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--forest);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
}
.plan h3{font-family:'Playfair Display',Georgia,serif;font-size:1.45rem;font-weight:500;margin:0}
/* No min-height: every plan description and feature bullet is written to
   fit one line at three-up in both languages, so the price rows line up
   on their own. If you lengthen one past ~40 characters it will wrap and
   knock that card's price out of line with the other two — which is the
   signal to shorten the copy rather than to reserve space here. */
.plan-desc{margin-top:8px;font-size:.92rem;color:var(--slate)}
/* Pricing is quote-only, so each card leads to a conversation where the
   figure used to sit. The three rules below (.plan-price, .plan-unit,
   .plan-cur) render nothing while that is true — they are kept so that
   putting a figure back is one change in _build/pricing.py rather than a
   rewrite of the card. */
.plan-cta{display:block;width:100%;margin:22px 0;text-align:center}
.plan-price{margin:20px 0 3px;display:flex;align-items:baseline;gap:6px}
.plan-price b{font-family:'Playfair Display',Georgia,serif;font-size:2.6rem;font-weight:500;line-height:1;letter-spacing:-.03em}
.plan-price span{font-size:.9rem;color:var(--slate)}
.plan-unit{font-size:.84rem;color:var(--mute);margin-bottom:22px}
.plan .btn{margin-bottom:24px}
.plan-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.plan-feat li{position:relative;padding-left:27px;color:var(--slate)}
.plan-feat li::before{
  content:"";position:absolute;left:2px;top:7px;width:7px;height:3.5px;
  border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(-45deg);
}
.plan-feat .ph{padding-left:0;margin-top:8px;font-weight:700;color:var(--ink);font-size:.86rem}
.plan-feat .ph::before{display:none}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:.93rem}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
table.cmp thead th{background:var(--paper);font-weight:700;font-size:.9rem}
table.cmp td:not(:first-child),table.cmp th:not(:first-child){text-align:center;width:150px}
table.cmp tr:last-child td{border-bottom:0}
table.cmp .grp td{
  background:var(--paper-deep);font-weight:700;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--forest);
}
.tick{color:var(--forest);font-weight:700}
.dash{color:var(--line)}

/* ---- package variant: the three packages plus the feature column ----
   Group rows carry a one-line description under the heading, and a value
   that is neither a ✓ nor a — is a pill ("Unlimited", "25 GB"). The
   Manage column is tinted: it is the one flagged most popular, and with
   only three columns the tint is what stops the eye sliding past it. */
table.cmp.pkg{min-width:820px}
table.cmp.pkg th,table.cmp.pkg td{padding:13px 18px}
table.cmp.pkg td:not(:first-child),table.cmp.pkg th:not(:first-child){width:172px}
table.cmp .pro{background:rgba(0,105,62,.045)}
table.cmp thead th.pro{background:rgba(0,105,62,.1)}
table.cmp .grp b{display:inline}
table.cmp .grp span{
  text-transform:none;letter-spacing:0;font-weight:500;color:var(--slate);
  font-size:.82rem;margin-left:12px;
}
.cmp-v{
  display:inline-block;padding:2px 11px;border-radius:999px;background:var(--paper-deep);
  color:var(--slate);font-size:.79rem;font-weight:600;white-space:nowrap;
}
.cmp-v.on{background:rgba(0,165,80,.13);color:var(--forest)}

/* ---- forms (demo page) ------------------------------------ */
.form-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,4vw,38px);box-shadow:var(--shadow);
}
.field{margin-bottom:17px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px}
.field .req{color:var(--coral)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;font:inherit;font-size:.96rem;color:var(--ink);
  background:var(--panel);border:1.5px solid var(--line);border-radius:9px;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(0,105,62,.13);
}
.field textarea{min-height:112px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--slate);margin:20px 0;line-height:1.5}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--forest)}
.consent a{color:var(--forest);font-weight:600;text-decoration:underline}
.form-note{margin-top:15px;font-size:.82rem;color:var(--mute);text-align:center}
.form-status{
  margin-top:18px;padding:14px 16px;border-radius:9px;background:rgba(0,165,80,.12);
  color:var(--forest-dk);font-size:.91rem;font-weight:550;
}
.form-status[hidden]{display:none}
/* the same box in red, for when the submission did not reach the back end —
   set by komma.js, never present in the markup */
.form-status-error{background:rgba(200,40,40,.10);color:#8f1f1f}

/* ---- people + timeline (about page) ----------------------- */
.person{text-align:center}
.person-av{
  width:100px;height:100px;margin:0 auto 18px;border-radius:50%;background:var(--paper-deep);
  color:var(--forest);display:grid;place-items:center;overflow:hidden;
  font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;font-weight:500;
}
.person-av img{width:100%;height:100%;object-fit:cover;display:block}
.person h4{margin:0 0 3px;font-size:1.08rem;font-weight:650}
.person .role{color:var(--forest);font-size:.89rem;font-weight:650;margin:0 0 11px}
.person p{margin:0;font-size:.93rem;color:var(--slate);line-height:1.6}

.val{padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.val .n{
  font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;font-weight:500;
  color:var(--grass);line-height:1;margin-bottom:14px;display:block;
}
.val h4{margin:0 0 8px;font-size:1.04rem;font-weight:650}
.val p{margin:0;font-size:.94rem;color:var(--slate);line-height:1.6}

.timeline{
  list-style:none;max-width:720px;margin:0 auto;padding:0 0 0 32px;
  border-left:2px solid rgba(0,165,80,.22);display:flex;flex-direction:column;gap:32px;
}
.timeline li{position:relative}
.timeline li::before{
  content:"";position:absolute;left:-41px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--forest);border:3px solid var(--paper);box-shadow:0 0 0 2px rgba(0,165,80,.25);
}
.timeline .when{
  display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--forest);margin-bottom:5px;
}
.timeline h4{margin:0 0 5px;font-size:1.05rem;font-weight:650}
.timeline p{margin:0;color:var(--slate);font-size:.95rem;line-height:1.6}

/* ---- responsive for the above ----------------------------- */
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .g3{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .plans .plan-desc{min-height:0}
}
@media(max-width:680px){
  .g2,.g3,.g4,.field-row{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
}

/* ============================================================
   MOBILE MENU
   The burger was styled but had nothing attached while this was
   one long page — scrolling still reached everything. With six
   pages it is the only way to navigate below 1080px, so the same
   .nav-links list becomes a drop panel rather than disappearing.
   ============================================================ */
.nav-links a[aria-current="page"]{color:var(--forest);font-weight:650}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-login-m{display:none}

@media(max-width:1080px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:65;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:8px clamp(16px,4vw,24px) 18px;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;box-shadow:var(--shadow);
  }
  .nav[data-menu] .nav-links{display:flex}
  .nav-links a{padding:15px 4px;font-size:1.02rem;border-bottom:1px solid var(--line-soft)}
  .nav-links a::after{display:none}
  .nav-links a:last-child{border-bottom:0}
  /* blue to match the desktop Log in button — same action, same colour */
  .nav-login-m{display:block;color:var(--sky);font-weight:600}
  /* burger folds into an X while the panel is open */
  .nav[data-menu] .nav-burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .nav[data-menu] .nav-burger span:nth-child(2){opacity:0}
  .nav[data-menu] .nav-burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
}

/* ---- stage panels on the ported pages ---------------------
   .stage-l p was written when the stage only ever held a heading,
   a .stage-sub and body copy, so it sets colour and size on every
   <p>. The ported pages put an .eyebrow and a .lede in there, and
   the descendant selector was beating both. Restore their intent.
   ------------------------------------------------------------ */
.stage-l p.eyebrow{color:var(--forest);font-size:.75rem;line-height:1.6;margin:0 0 18px}
.stage-l p.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.62;margin:22px 0 0}

/* ---- long compound words in the figures band ---------------
   Grid items default to min-width:auto, so the longest unbreakable
   word sets the column floor. In English the figure labels are short
   and it never showed; Danish "Personlighedsværktøjer" (and the
   German equivalents) push the column past the container, and
   body{overflow-x:hidden} then clips the card rather than scrolling.
   min-width:0 lets the column shrink; break-word lets the compound
   wrap. hyphens:auto works because setLang sets <html lang>.
   ------------------------------------------------------------ */
.figs .fig{min-width:0}
.fig-l,.fig-d{overflow-wrap:break-word;hyphens:auto}

/* ============================================================
   PLATFORM DROPDOWN (mega menu)
   Modelled on the one in ../Homepage Test 2. The trigger is a real
   <a href="platform.html">, so the page is still reachable without
   JS and by middle-click; the script only adds the panel.

   Everything inside .mega has to opt out of the .nav-links a rules
   above (underline sweep, nowrap, 4px padding) — the panel links are
   descendants of .nav-links too.
   ============================================================ */
.nav-item{position:relative;display:flex;align-items:center}
.nav-links .nav-link{display:inline-flex;align-items:center;gap:6px}
.nav-link .chev{width:11px;height:11px;flex:none;color:var(--slate);transition:transform .2s}
.nav-item.open .nav-link .chev{transform:rotate(180deg)}

.mega{
  /* left-aligned to the trigger, not centred on it: Platform is the first
     nav item, so a 660px panel centred there hangs off the left edge. */
  position:absolute;top:calc(100% + 18px);left:0;
  transform:translateY(-6px);
  width:660px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:22px;z-index:70;
  opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s cubic-bezier(.4,0,.2,1),visibility 0s linear .18s;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
/* bridges the gap between trigger and panel so hover does not drop out */
.nav-item.has-mega::after{content:"";position:absolute;top:100%;left:0;right:0;height:20px}

/* two-part panel: a rail of whole-platform links, then a bordered card
   of module links — the BambooHR arrangement this was modelled on */
.mega{width:900px}

/* "About" is a plain list rather than a panel, so it gets a narrow
   variant of the same dropdown — same open/close behaviour, no grid. */
.mega.mega-sm{width:250px;padding:18px 16px}
.mega-sm .mega-h{
  font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--forest);margin:0 0 6px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.mega-list{display:grid;gap:1px;margin-top:8px}
.nav-links .mega-list a{
  display:block;padding:9px 10px;border-radius:9px;font-size:.97rem;
  font-weight:600;color:var(--ink);
}
.nav-links .mega-list a:hover{background:var(--paper);color:var(--forest)}
.nav-links .mega-list a::after{display:none}
.nav-links .mega-list a[aria-current="page"]{color:var(--forest)}
.mega-in{display:grid;grid-template-columns:175px 1fr;gap:16px;align-items:start}
.mega-h{
  margin:0 0 14px;font-family:'Playfair Display',Georgia,serif;
  font-size:1.35rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);
}
.mega-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.nav-links .mega-rail a{
  display:block;padding:10px;border-radius:10px;font-size:.95rem;
  font-weight:500;color:var(--ink);transition:background .15s,color .15s;
}
.nav-links .mega-rail a:hover{background:var(--paper);color:var(--forest)}
.nav-links .mega-rail a[aria-current="page"]{color:var(--forest);font-weight:650}
.mega-card{border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--panel)}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}
.nav-links .mega-link[aria-current="page"]{background:var(--paper)}
.nav-links .mega-link[aria-current="page"] strong{color:var(--forest)}
.mega-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* No blanket `padding:0` here any more. It used to sit after both the rail
   and the module rules and, at equal specificity, won on source order — so
   every link in the panel had its padding silently zeroed and the hover
   highlight hugged the text. Each link now states its own padding below;
   only the foot link wants none. */
.nav-links .mega a,.nav-links .mega-foot a{white-space:normal;font-weight:inherit}
.nav-links .mega-foot a{padding:0}
.nav-links .mega a::after{display:none}
/* min-height and centred content are what keep the hover state tidy: the
   descriptions are short enough to sit on one line today, but a longer
   translation would otherwise make one box taller than its neighbour and
   the hover rectangles would step up and down the grid. */
/* min-height is insurance, not the mechanism: what actually keeps the hover
   boxes identical is that every description fits on one line at this width
   in all nine languages. Check that before lengthening one. */
.mega-link{
  display:flex;gap:13px;border-radius:12px;transition:background .15s;
  align-items:center;min-height:62px;
}
/* the padding needs .nav-links in front of it: `.nav-links a{padding:4px 0}`
   further up the file outranks a bare `.mega-link`, and the hover highlight
   ends up flush against the text. Same specificity, later in the file. */
.nav-links .mega-link{padding:10px}
.mega-link:hover{background:var(--paper)}
.mega-ico{
  flex:none;width:34px;height:34px;border-radius:9px;background:rgba(0,105,62,.1);
  color:var(--forest);display:grid;place-items:center;
}
.mega-ico svg{width:17px;height:17px}
.mega-link strong{display:block;font-size:.91rem;font-weight:650;margin-bottom:1px;color:var(--ink)}
/* scoped to the description: a bare `.mega-link span` also matches .mega-ico
   and beats it on specificity, which kills the icon's grid centring */
.mega-link strong + span{display:block;font-size:.8rem;line-height:1.4;color:var(--slate)}
.mega-foot{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.86rem;
}
.nav-links .mega-foot .arrow{color:var(--forest);font-weight:600}

/* ---- inside the mobile panel it becomes an accordion ------- */
@media(max-width:1080px){
  .nav-item{display:block;border-bottom:1px solid var(--line-soft)}
  .nav-links .nav-link{width:100%;justify-content:space-between;padding:15px 4px;font-size:1.02rem}
  .nav-item.has-mega::after{display:none}
  .mega{
    position:static;transform:none;width:auto;max-width:none;opacity:1;visibility:visible;
    display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 12px 4px;
  }
  .nav-item.open .mega{display:block;transform:none}
  .mega{width:auto}
  .mega.mega-sm{width:auto;padding:0 0 12px 4px}
  .mega-sm .mega-h{display:none}
  .nav-links .mega-list a{padding:10px 4px;font-weight:500}
  .mega-in{grid-template-columns:1fr;gap:4px}
  .mega-h{display:none}
  .mega-card{border:0;border-radius:0;padding:0;background:none}
  .mega-grid{grid-template-columns:1fr;gap:0}
  .mega-link{padding:10px 4px}
  .mega-foot{flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px}
}

/* ---- team grid --------------------------------------------
   Flex rather than .g3: with five people a three-column grid
   leaves a conspicuous hole in the second row. This centres the
   orphan row instead.
   ------------------------------------------------------------ */
.people{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 26px}
.people .person{flex:0 1 300px;max-width:340px}
@media(max-width:680px){.people .person{flex:1 1 100%}}

/* ============================================================
   ORG CHART (organisation.html)
   Mirrors platform_organisation_orgchart.html. Built in HTML like
   every other product shot here, so it stays crisp at any zoom and
   restyles with the tokens.

   ⚠ The real screen shows work e-mail addresses and hire dates.
   They are deliberately left out — this is a public page, and a
   list of live addresses is an invitation to a scraper. Names,
   titles and departments are enough to make the point.
   ============================================================ */
.org{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;
  overflow-x:auto;
}
.stage-l,.stage-r{min-width:0}
.org-lv{position:relative;display:flex;justify-content:center;gap:10px}
.org-lv + .org-lv{margin-top:30px}
/* stem down out of the level above */
.org-lv + .org-lv::after{
  content:"";position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:1.5px;height:15px;background:var(--line);
}
/* bar spanning this level's children */
.org-lv + .org-lv::before{
  content:"";position:absolute;top:-15px;left:14%;right:14%;height:1.5px;background:var(--line);
}
.org-node{position:relative}
/* stem up into each child */
.org-lv + .org-lv .org-node::before{
  content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:1.5px;height:15px;background:var(--line);
}
.org-card{
  width:132px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:9px 10px 10px;
}
.org-card.is-root{border-color:var(--forest);box-shadow:0 0 0 2px rgba(0,105,62,.1)}
.org-card.is-you{border-color:var(--forest)}
.org-card .oc-h{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.org-card .av{width:22px;height:22px;font-size:.56rem}
.org-card b{font-size:.74rem;font-weight:650;line-height:1.2;letter-spacing:-.01em}
.org-card span{display:block;font-size:.68rem;color:var(--slate);line-height:1.35}
.org-card em{display:block;font-style:normal;font-size:.66rem;color:var(--mute);margin-top:2px}
.org-you{
  margin-left:auto;font-size:.55rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border-radius:5px;padding:1px 5px;flex:none;
}
/* dotted-line / project reporting, the amber callout on the real screen */
.org-dot{
  border:1.5px dashed var(--amber);border-radius:11px;padding:8px;
  background:rgba(232,151,58,.07);align-self:flex-start;margin-left:14px;
}
.org-dot > p{
  margin:0 0 6px;font-size:.6rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#A9691D;
}
.org-dot .org-card{border-color:rgba(232,151,58,.4)}
.org-row{display:flex;align-items:flex-start;justify-content:center}
@media(max-width:900px){
  /* side by side the dotted card eats half the width off the chart */
  .org-row{flex-direction:column;align-items:stretch;gap:14px}
  .org-dot{margin-left:0;align-self:flex-start}
}
@media(max-width:680px){
  .org{align-items:flex-start}
  .org-lv{justify-content:flex-start}
  .org-card{width:118px}
}

/* ============================================================
   ORGANISATION — SIMULATE ORGANISATIONAL CHANGE
   The canvas on the left is a scratch copy of the org chart, so
   it reuses .org / .org-lv / .org-card and only adds the two
   states the simulator paints on top: .is-cut for someone marked
   for lay-off, .is-new for a planned hire. The panel on the
   right is the product's Scenario impact drawer.

   ⚠ The figures in the shot are one scenario and they reconcile
   with each other — annual payroll is the monthly salary bill
   × 12 × 1.30 on-costs, severance is notice months × base
   salary, payback is severance ÷ the monthly saving. Changing
   one of them means recomputing the other four, so change them
   in _build/modpages.py where they are written down together.
   ============================================================ */
/* the canvas stretches to the drawer's height and centres the branch in
   it, the way it sits on a real screen — otherwise the left half of the
   shot is mostly empty paper */
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,335px);gap:14px;align-items:stretch}
.sim-l{min-width:0;display:flex;flex-direction:column}
.sim-l .org{flex:1;justify-content:center}

/* toolbar above the canvas */
.sim-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.sim-b{
  border:1px solid var(--line);border-radius:7px;padding:3px 9px;background:var(--panel);
  font-size:.63rem;font-weight:600;color:var(--slate);white-space:nowrap;
}
.sim-b.add{border-style:dashed;border-color:rgba(0,84,163,.4);color:var(--sky)}
.sim-b.pri{background:var(--forest);border-color:var(--forest);color:#fff}

/* the two states the simulator paints on a card */
/* light enough to read the name through — the hatch says "struck from
   the plan", it is not meant to redact the card */
.org-card.is-cut{
  position:relative;border-color:#EEB4B4;
  background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(232,57,70,.055) 6px 12px),var(--panel);
}
.org-card.is-cut b{text-decoration:line-through;text-decoration-color:#D23B3B}
.org-card.is-cut b,.org-card.is-cut span,.org-card.is-cut em{opacity:.8}
.org-card.is-new{position:relative;border:1px dashed #8FB4DC;background:#F7FBFF}
/* notched onto the top edge on the right — the avatar sits top-left */
.sim-badge{
  position:absolute;top:-8px;right:8px;border-radius:5px;padding:2px 6px;color:#fff;line-height:1;
  font-size:.5rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sim-badge.cut{background:#D23B3B}
.sim-badge.new{background:#1C68A8}

/* Scenario impact drawer */
.sim-p{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:13px}
.sim-ph{display:flex;align-items:baseline;gap:8px}
.sim-ph b{font-size:.82rem;font-weight:650;letter-spacing:-.01em}
.sim-ph em{font-style:normal;font-size:.6rem;color:var(--mute);margin-left:auto}
.sim-sub{margin:-9px 0 0;font-size:.61rem;color:var(--mute)}

.sim-figs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-fig{border:1px solid var(--line);border-radius:9px;padding:9px 10px}
.sim-fig b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.16rem;font-weight:500;line-height:1}
.sim-fig span{display:block;font-size:.58rem;color:var(--slate);margin-top:6px;line-height:1.35}
.sim-fig em{display:block;font-style:normal;font-size:.55rem;color:var(--mute);line-height:1.35}
.sim-fig.good{background:rgba(0,165,80,.07);border-color:rgba(0,165,80,.28)}
.sim-fig.good b{color:var(--forest)}
.sim-fig.cost{background:rgba(232,151,58,.09);border-color:rgba(232,151,58,.32)}
.sim-fig.cost b{color:#A9691D}

/* section label, with the count pill the drawer puts on the right */
.sim-lb{
  margin:0;display:flex;align-items:center;gap:6px;color:var(--mute);
  font-size:.57rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.sim-lb svg{width:11px;height:11px;flex:none}
.sim-lb i{
  margin-left:auto;font-style:normal;font-size:.57rem;font-weight:600;letter-spacing:0;
  color:var(--slate);background:var(--paper-deep);border-radius:999px;padding:0 6px;
}

/* headcount / payroll / payback, with before struck out */
.sim-kv{display:grid;gap:8px;margin-top:-4px}
.sim-kv > div{display:flex;align-items:center;gap:6px;font-size:.68rem;flex-wrap:wrap}
.sim-kv > div > span{color:var(--slate)}
/* the payroll row carries two amounts and a delta; let it wrap rather
   than squeeze the drawer wider than the product's own 430px */
.sim-kv .v{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.sim-kv s{color:var(--mute);font-size:.61rem}
.sim-kv .v b{font-weight:650}
.sim-d{font-size:.54rem;font-weight:700;border-radius:999px;padding:1px 6px;white-space:nowrap}
.sim-d.down{background:rgba(0,165,80,.13);color:var(--forest)}

/* people affected */
.sim-ppl{display:grid;gap:8px;margin-top:-4px}
.sim-ppl > div{display:flex;align-items:center;gap:8px}
.sim-ppl .av{width:20px;height:20px;font-size:.5rem}
.sim-ppl b{display:block;font-size:.68rem;font-weight:650;line-height:1.25}
.sim-ppl em{display:block;font-style:normal;font-size:.57rem;color:var(--mute);line-height:1.3}
.sim-t{margin-left:auto;border-radius:5px;padding:1px 6px;font-size:.54rem;font-weight:700;white-space:nowrap}
.sim-t.cut{background:rgba(232,57,70,.12);color:#C22833}
.sim-t.upd{background:rgba(0,84,163,.1);color:var(--sky)}

/* skills at risk / job profiles left uncovered */
.sim-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:-4px}
.sim-chip{border:1px solid transparent;border-radius:6px;padding:2px 7px;font-size:.6rem}
.sim-chip b{font-weight:700}
.sim-chip.r{background:rgba(232,57,70,.08);border-color:rgba(232,57,70,.24);color:#C22833}
.sim-chip.a{background:rgba(232,151,58,.1);border-color:rgba(232,151,58,.3);color:#A9691D}

/* critical warnings */
.sim-w{display:grid;gap:6px;margin-top:-4px}
.sim-w > div{
  display:flex;gap:7px;align-items:flex-start;padding:6px 8px;border-radius:7px;
  background:rgba(232,57,70,.055);border:1px solid rgba(232,57,70,.2);
  font-size:.62rem;line-height:1.42;color:var(--ink);
}
.sim-w svg{width:12px;height:12px;flex:none;margin-top:2px;color:#D23B3B}
.sim-w b{font-weight:650}
.sim-foot{display:flex;gap:7px;border-top:1px solid var(--line-soft);padding-top:11px}

@media(max-width:980px){
  .sim{grid-template-columns:1fr}
}

/* ============================================================
   LEGAL PAGES (privacy, terms, cookies, dpa)
   The rest of the site is marketing prose in short blocks; these
   four are documents. They need a numbered-heading rhythm, real
   lists and a way to make an unfilled blank obvious, which is
   what .legal-todo is for — an amber chip rather than a
   plausible-looking invented value, so nobody can publish the
   page believing it is finished.
   ============================================================ */
.legal{max-width:760px;margin-inline:auto}
.legal section + section{margin-top:clamp(30px,3.4vw,44px)}
.legal h2{
  font-size:1.22rem;font-weight:650;letter-spacing:-.01em;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.legal h2 em{
  font-style:normal;color:var(--mute);font-weight:600;font-size:.82rem;
  margin-right:10px;letter-spacing:.04em;
}
.legal h3{font-size:.99rem;font-weight:650;margin:22px 0 7px;letter-spacing:-.01em}
.legal p{margin:0 0 13px;color:var(--slate);font-size:.96rem;line-height:1.68}
.legal ul{margin:0 0 13px;padding-left:0;list-style:none;display:grid;gap:8px}
.legal li{
  position:relative;padding-left:19px;color:var(--slate);font-size:.96rem;line-height:1.6;
}
.legal li::before{
  content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--grass);
}
.legal a{color:var(--forest);font-weight:600}
.legal strong{color:var(--ink);font-weight:650}

/* the last-updated / governing-version strip under the page title */
.legal-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  font-size:.82rem;color:var(--mute);margin-top:18px;
}
.legal-meta b{color:var(--slate);font-weight:600}

/* a blank the company has to fill in before this can be published */
.legal-todo{
  display:inline-block;padding:1px 8px;border-radius:6px;font-size:.86rem;font-weight:600;
  background:rgba(232,151,58,.16);color:#8A5310;border:1px dashed rgba(232,151,58,.5);
  white-space:nowrap;
}

/* the standing notice at the top of each of the four documents */
.legal-note{
  background:rgba(232,151,58,.09);border:1px solid rgba(232,151,58,.34);
  border-radius:12px;padding:17px 20px;margin-bottom:clamp(30px,3.4vw,44px);
}
.legal-note p{margin:0;font-size:.9rem;color:#7A4A0F;line-height:1.6}
.legal-note p + p{margin-top:9px}
.legal-note b{color:#5E390B}

/* jump links between the four documents */
.legal-nav{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin-top:clamp(30px,3.4vw,44px);padding-top:26px;border-top:1px solid var(--line);
}
.legal-nav a{
  font-size:.86rem;font-weight:600;color:var(--slate);
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  transition:border-color .2s,color .2s;
}
.legal-nav a:hover{border-color:var(--forest);color:var(--forest)}
.legal-nav a[aria-current="page"]{border-color:var(--forest);color:var(--forest);background:var(--paper)}

/* ============================================================
   FLOW BUILDER (flows.html)
   The process builder as a product shot: a canvas of stacked
   nodes on the left, the step library on the right. The chain
   between nodes is drawn with ::before on each node rather than
   with SVG, so it survives a font-size change and translates
   without anything overlapping.

   The node kinds are the four the builder actually has — trigger,
   automatic step, condition, step waiting on a person — and each
   is distinguished by its left rail colour rather than by an
   icon, because an icon at this scale is a smudge.
   ============================================================ */
.fb{display:grid;grid-template-columns:1fr 176px;gap:14px;align-items:start}
@media(max-width:760px){.fb{grid-template-columns:1fr}}

.fb-canvas{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 14px;display:flex;flex-direction:column;gap:22px;
}
.fb-n{
  position:relative;border:1px solid var(--line);border-left:3px solid var(--slate);
  border-radius:9px;padding:9px 12px;background:var(--panel);
}
/* the connector: each node but the first grows a line up to the one above */
.fb-n + .fb-n::before{
  content:"";position:absolute;left:50%;top:-22px;width:1.5px;height:22px;
  background:var(--line);
}
.fb-n + .fb-n::after{
  content:"";position:absolute;left:50%;top:-8px;width:5px;height:5px;
  border-radius:50%;background:var(--line);transform:translateX(-1.75px);
}
.fb-k{
  display:block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);font-weight:650;margin-bottom:3px;
}
.fb-n b{display:block;font-size:.78rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.fb-n em{display:block;font-style:normal;font-size:.66rem;color:var(--slate);margin-top:3px}

.fb-n.is-trig{border-left-color:var(--forest);background:rgba(0,165,80,.045)}
.fb-n.is-auto{border-left-color:var(--grass)}
.fb-n.is-cond{border-left-color:#E8973A}
.fb-n.is-person{border-left-color:var(--sky)}
.fb-n.is-end{border-left-color:var(--line);color:var(--slate)}

/* the yes / no legs under a condition */
.fb-br{display:flex;gap:7px;margin-top:7px}
.fb-br span{
  font-size:.62rem;font-weight:650;padding:2px 8px;border-radius:999px;
  background:#F0EDE7;color:var(--slate);
}
.fb-br .y{background:rgba(0,165,80,.13);color:var(--forest)}

.fb-side{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 12px;
}
.fb-h{
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  font-weight:650;margin:0 0 9px;
}
.fb-chip{
  display:block;font-size:.68rem;padding:6px 9px;border-radius:7px;margin-bottom:5px;
  background:var(--panel);border:1px solid var(--line);color:var(--slate);
}
.fb-chip.on{border-color:var(--forest);color:var(--forest);font-weight:600}

/* ============================================================
   FLOW CANVAS (flows.html)
   The Builder tab as the product actually draws it: the trigger
   at the top and the branches hanging under it, rather than the
   single column .fb keeps for the homepage band.

   Same reasoning as .fb — the wiring is pseudo-elements, not
   SVG, so a longer translation moves the line with the node
   instead of leaving it behind. 30px between a node and the one
   above it; the line and the green + button live in that gap.

   The node colours are the builder's own: amber for the trigger
   and the delay, blue for an email, green for a task, teal for a
   wait, violet for a condition. The last two are the only
   colours outside the palette, taken from the product the same
   way the pay-transparency violet is.
   ============================================================ */
.fl{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 14px 22px}

/* the strip above the canvas: state, the two buttons, version, access */
.fl-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.fl-p{
  font-size:.62rem;font-weight:650;padding:3px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel);color:var(--slate);
}
.fl-p.on{background:rgba(0,165,80,.14);border-color:transparent;color:var(--forest)}
.fl-p.pri{background:var(--sky);border-color:transparent;color:#fff}
.fl-p.rt{margin-left:auto}

.fl-cv{display:flex;flex-direction:column;align-items:center}

.fl-n{
  position:relative;width:100%;max-width:335px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:grid;grid-template-columns:26px 1fr;gap:9px;text-align:left;
  box-shadow:0 1px 2px rgba(31,26,15,.05);
}
.fl-n b{display:block;font-size:.78rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.fl-n em{display:block;font-style:normal;font-size:.65rem;line-height:1.4;color:var(--slate);margin-top:2px}

.fl-i{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--slate);color:#fff;
}
.fl-i svg{width:15px;height:15px}
.fl-i.is-trig{background:var(--amber)}
.fl-i.is-mail{background:var(--sky)}
.fl-i.is-task{background:var(--grass)}
.fl-i.is-delay{background:var(--amber)}
.fl-i.is-wait{background:#0F766E}
.fl-i.is-cond{background:#7A4FC0}

/* the settings band at the foot of a node — WHEN, GUARD, UNTIL, IF */
.fl-m{
  grid-column:1/-1;margin:9px -12px -10px;padding:8px 12px;
  border-top:1px solid var(--line-soft);background:var(--paper);
  border-radius:0 0 9px 9px;display:grid;gap:3px;
}
.fl-m span{font-size:.65rem;line-height:1.35}
.fl-m i{
  font-style:italic;font-weight:700;font-size:.57rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sky);margin-right:6px;
}

/* ---- the wiring ---- */
.fl-b{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.fl-b > * + *{margin-top:30px}

/* a node under another node: line, then the + that adds the next step */
.fl-n + .fl-n::before{
  content:"";position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  width:1.5px;height:30px;background:var(--line);
}
.fl-n + .fl-n::after{
  content:"+";position:absolute;left:50%;top:-23px;transform:translateX(-50%);
  width:16px;height:16px;line-height:15px;text-align:center;border-radius:50%;
  background:var(--grass);color:#fff;font-size:.66rem;font-weight:700;
}

/* the fork: a stem down from the node above, a rail across, a stub
   into each column. left/right 25% is the centre of each column. */
.fl-split{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fl-cv > * + .fl-split, .fl-b > * + .fl-split{margin-top:30px}
.fl-split::before{content:"";position:absolute;top:-15px;left:25%;right:25%;height:1.5px;background:var(--line)}
.fl-split::after{
  content:"";position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:1.5px;height:15px;background:var(--line);
}
.fl-split > .fl-b::before{
  content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  width:1.5px;height:15px;background:var(--line);
}

/* MATCHES / OTHERWISE over the legs of a condition */
.fl-leg{
  font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--mute);
}
.fl-leg + .fl-n{margin-top:9px}

/* Two 335px columns need 686px, and the two legs under the condition
   are half a column each — squeeze those below ~150px and every card
   turns into a six-line paragraph. So the canvas keeps a readable
   minimum and scrolls inside the shot, the way .roster does; stacking
   the branches would say they run in sequence, which is the one thing
   the fork is there to deny. */
@media(max-width:900px){
  .fl{overflow-x:auto}
  .fl-cv, .fl-top{min-width:660px}
}

/* what each kind of node does — page copy under the shot, not part
   of it, so it reads at page size rather than screenshot size */
.fl-key{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px;max-width:1000px;margin-inline:auto}
@media(max-width:860px){.fl-key{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fl-key{grid-template-columns:1fr}}
.fl-key > div{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start}
.fl-key b{display:block;font-size:.92rem;font-weight:650;letter-spacing:-.01em;margin-top:2px}
.fl-key p{margin:4px 0 0;font-size:.88rem;line-height:1.55;color:var(--slate)}

/* ---- one run, in the order it happened ---- */
.fl-run{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:12px}
.fl-run b{display:block;font-size:.8rem;font-weight:650;letter-spacing:-.01em}
.fl-run em{display:block;font-style:normal;font-size:.66rem;color:var(--slate);margin-top:1px}
.fl-tl{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.fl-t{
  display:grid;grid-template-columns:58px 1fr auto;gap:11px;align-items:baseline;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);
}
.fl-t:last-child{border-bottom:0}
.fl-tt{font-size:.6rem;color:var(--mute);font-weight:600;white-space:nowrap;line-height:1.3}
.fl-tt i{display:block;font-style:normal;font-weight:650;color:var(--slate);font-size:.64rem}
.fl-tb b{display:block;font-size:.74rem;font-weight:600;line-height:1.35}
.fl-tb em{display:block;font-style:normal;font-size:.65rem;color:var(--slate);margin-top:2px}
.fl-ta{
  font-size:.6rem;font-weight:650;color:var(--slate);white-space:nowrap;
  background:#F0EDE7;border-radius:999px;padding:2px 9px;
}
/* the leg that was not taken — shown, because "nothing happened
   here" is the part of a branch people ask about */
.fl-t.skip{background:#FCFBF8}
.fl-t.skip .fl-tb b{font-weight:550;color:var(--mute);text-decoration:line-through;text-decoration-color:var(--line)}
@media(max-width:420px){
  .fl-t{grid-template-columns:52px 1fr;gap:9px}
  .fl-t .fl-ta{grid-column:2;justify-self:start;margin-top:5px}
}

/* feature bullets under a full-width shot — two columns, centred */
.feat-2{
  max-width:860px;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:11px 30px;
}
@media(max-width:680px){.feat-2{grid-template-columns:1fr}}

/* ---- roster on small screens -------------------------------
   Six columns inside a 305px card gives 43px each — narrower
   than "15:00–23:00". Let the grid keep a readable minimum and
   scroll inside the card instead of being clipped by its
   overflow:hidden. The summary strip goes two-up.
   ------------------------------------------------------------ */
@media(max-width:760px){
  .roster{overflow-x:auto;overflow-y:hidden}
  .rg{min-width:620px}
  .roster-top{flex-wrap:wrap;min-width:0}
  .roster-top div{flex:1 1 50%;border-bottom:1px solid var(--line-soft)}
  .roster-top div:nth-child(2n){border-right:0}
}

/* ============================================================
   PAY TRANSPARENCY (hero, Payroll view)
   Mirrors platform_payroll pay-transparency. Built in HTML like
   every other shot. Gender is the one place this file needs a
   colour outside the palette — men/women are read as a pair, so
   they get the existing --sky and a violet to match it.
   ============================================================ */
.pt-note{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;
  background:rgba(0,165,80,.09);border:1px solid rgba(0,105,62,.14);margin-bottom:12px;
}
.pt-note svg{width:15px;height:15px;color:var(--forest);flex:none;margin-top:1px}
.pt-note b{display:block;font-size:.74rem;font-weight:650;color:var(--forest);margin-bottom:2px}
.pt-note p{margin:0;font-size:.66rem;line-height:1.45;color:var(--slate)}

.pt-4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.pt-4 .card-l{display:flex;align-items:center;gap:4px}
.pt-4 .card-v{font-size:1.42rem}

.pt-row{display:grid;grid-template-columns:186px 1fr;gap:11px;margin-bottom:12px}
.pt-row > .pane{padding:13px 14px}

/* donut */
.donut{width:96px;height:96px;margin:2px auto 10px;display:block;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:5}
.donut .d-m{stroke:var(--sky)}
.donut .d-w{stroke:#7A4FC0}
.donut-wrap{position:relative}
.donut-c{
  position:absolute;top:2px;left:0;right:0;height:96px;display:grid;place-content:center;text-align:center;
}
.donut-c b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;font-weight:500;line-height:1}
.donut-c span{font-size:.58rem;color:var(--mute)}
.pt-leg{display:grid;gap:5px;font-size:.68rem}
.pt-leg div{display:flex;align-items:center;gap:6px}
.pt-leg i{width:8px;height:8px;border-radius:2px;flex:none}
.pt-leg i.m{background:var(--sky)}
.pt-leg i.w{background:#7A4FC0}
.pt-leg b{margin-left:auto;font-weight:600}
.pt-leg em{font-style:normal;color:var(--mute)}

/* pay gap by department */
.ptg{font-size:.7rem}
.ptg-r{
  display:grid;grid-template-columns:1.35fr .5fr 1fr .85fr .6fr;gap:8px;align-items:center;
  padding:7px 2px;border-bottom:1px solid var(--line-soft);
}
.ptg-r:last-child{border-bottom:0}
.ptg-r.hd{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.ptg-r b{font-weight:550}
.ptg-split{display:flex;align-items:center;gap:6px}
.ptg-bar{flex:1;height:4px;border-radius:99px;overflow:hidden;display:flex;min-width:34px}
.ptg-bar i{display:block;height:100%}
.ptg-bar i.m{background:var(--sky)}
.ptg-bar i.w{background:#7A4FC0}
.ptg-split em{font-style:normal;font-size:.6rem;color:var(--mute);white-space:nowrap}

/* pay bands */
.ptb{display:grid;gap:9px}
.ptb-r b{font-size:.7rem;font-weight:600}
.ptb-r span{float:right;font-size:.62rem;color:var(--mute);font-weight:500}
.ptb-rail{position:relative;height:7px;border-radius:99px;background:var(--paper-deep);margin:5px 0 3px}
.ptb-rail i{position:absolute;top:0;bottom:0;border-radius:99px;background:rgba(0,84,163,.28)}
.ptb-rail u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--sky);text-decoration:none}
.ptb-r em{font-style:normal;font-size:.6rem;color:var(--mute)}

@media(max-width:760px){
  .pt-4{grid-template-columns:1fr 1fr}
  .pt-row{grid-template-columns:1fr}
  .ptg-r{grid-template-columns:1.3fr .45fr .8fr .6fr;gap:6px}
  .ptg-r > :nth-child(4){display:none}
}

/* ============================================================
   CANDIDATES (hero, Recruitment view)
   Mirrors platform_recruitment_jobs_candidates: the pipeline strip
   across the top and the candidate list with its weighted job match.
   The real screen carries fourteen columns; this keeps the six that
   carry the story and drops the rest rather than shrinking them all
   into illegibility.
   ============================================================ */
.pipe{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.pipe-s{
  flex:1;padding:9px 6px 9px 14px;position:relative;background:var(--panel);
  border-right:1px solid var(--line-soft);min-width:0;
}
.pipe-s:last-child{border-right:0}
.pipe-s.on{background:rgba(0,105,62,.06)}
.pipe-s span{display:block;font-size:.63rem;color:var(--slate);font-weight:550;white-space:nowrap}
/* body face, not Playfair: these are small UI counts, and Playfair's
   zero is a high-contrast oval that reads as "()" at this size — the
   real screen uses the UI font here too. */
.pipe-s b{
  display:block;font-size:1.05rem;font-weight:650;line-height:1.2;
  letter-spacing:-.02em;font-variant-numeric:lining-nums;
}
.pipe-s.on b{color:var(--forest)}
.pipe-s.zero b{color:var(--mute)}

.cand{font-size:.7rem}
.cand-r{
  display:grid;grid-template-columns:1.5fr .72fr 1.55fr .72fr .78fr;gap:9px;align-items:center;
  padding:8px 2px;border-bottom:1px solid var(--line-soft);
}
.cand-r:last-child{border-bottom:0}
.cand-r.hd{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.cand-n{display:flex;align-items:center;gap:7px;min-width:0}
.cand-n b{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-n em{font-style:normal;color:var(--mute);font-size:.64rem;flex:none}
/* weighted job match: the pill is the score, the rail is the same number */
.mt-p{
  display:inline-block;padding:2px 7px;border-radius:999px;font-size:.64rem;font-weight:700;
}
.mt-p.hi{background:rgba(0,165,80,.15);color:var(--forest)}
.mt-p.mid{background:rgba(232,151,58,.18);color:#A9691D}
.mt-p.lo{background:rgba(232,57,70,.13);color:var(--coral)}
.mt-rail{height:3px;border-radius:99px;background:var(--paper-deep);margin-top:4px;overflow:hidden}
.mt-rail i{display:block;height:100%;border-radius:99px}
.mt-rail i.hi{background:var(--grass)}
.mt-rail i.mid{background:var(--amber)}
.mt-rail i.lo{background:var(--coral)}
.cand-sk{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;min-width:0}
.sk-c{
  font-size:.6rem;padding:2px 6px;border-radius:5px;background:var(--paper);
  border:1px solid var(--line);color:var(--slate);white-space:nowrap;
}
.sk-c i{width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:1px}
.sk-c i.g{background:var(--grass)}
.sk-c i.a{background:var(--amber)}

@media(max-width:760px){
  .pipe{overflow-x:auto}
  .pipe-s{min-width:88px}
  .cand-r{grid-template-columns:1.5fr .8fr .9fr}
  .cand-r > :nth-child(3),.cand-r > :nth-child(5){display:none}
}

/* ============================================================
   JOB MATCH (recruitment.html, "a match score you can take apart")
   Mirrors the Job match tab of the candidate drawer. The section
   claims the score is not a black box, so the shot has to actually
   show the axes, their weights, and the requirement that is missing.
   ============================================================ */
.jm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.jm-head b{font-size:.82rem;font-weight:650}
.jm-head .ref{font-size:.68rem;color:var(--mute)}
.jm-meta{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.jm-meta span{
  font-size:.6rem;padding:2px 7px;border-radius:5px;background:var(--paper);
  border:1px solid var(--line);color:var(--slate);white-space:nowrap;
}

.jm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;align-items:start}

/* one weighted criterion: ring, name, importance, delta vs the pool */
.jm-c{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;padding:6px 0}
.jm-c + .jm-c{border-top:1px solid var(--line-soft)}
.jm-c b{display:block;font-size:.71rem;font-weight:650;line-height:1.2}
.jm-c em{font-style:normal;font-size:.6rem;color:var(--mute)}
.ring{width:34px;height:34px;transform:rotate(-90deg);flex:none}
.ring circle{fill:none;stroke-width:3.5}
.ring .bg{stroke:var(--paper-deep)}
.ring .fg{stroke:var(--grass);stroke-linecap:round}
.ring .fg.mid{stroke:var(--amber)}
.ring .fg.lo{stroke:var(--coral)}
.ring-v{
  font-size:.58rem;font-weight:700;fill:var(--ink);transform:rotate(90deg);
  transform-origin:center;text-anchor:middle;dominant-baseline:central;
}
.jm-d{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:600;margin-top:2px}
.jm-d.up{color:var(--forest)}
.jm-d.dn{color:var(--coral)}
.jm-d.eq{color:var(--mute)}

.jm-sum{
  background:rgba(0,105,62,.05);border:1px solid rgba(0,105,62,.13);
  border-radius:9px;padding:9px 11px;margin-bottom:10px;
}
.jm-sum b{display:block;font-size:.68rem;font-weight:650;margin-bottom:3px}
.jm-sum p{margin:0;font-size:.63rem;line-height:1.5;color:var(--slate)}

/* required skills — the point of the section is the one that is missing */
.jm-sk{margin-top:11px;border-top:1px solid var(--line-soft);padding-top:10px}
.jm-sk-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.jm-sk-h b{font-size:.68rem;font-weight:650}
.jm-sk-h span{font-size:.6rem;color:var(--mute);font-weight:600}
.jm-sk-l{display:flex;flex-wrap:wrap;gap:5px}
.jm-s{
  display:inline-flex;align-items:center;gap:5px;font-size:.6rem;padding:3px 8px;
  border-radius:6px;background:var(--panel);border:1px solid var(--line);color:var(--slate);
}
.jm-s i{
  width:11px;height:11px;border-radius:3px;flex:none;display:grid;place-items:center;
  font-size:.5rem;font-style:normal;font-weight:700;color:#fff;
}
.jm-s i.y{background:var(--grass)}
.jm-s.no{border-color:rgba(232,57,70,.35);background:rgba(232,57,70,.05);color:var(--coral)}
.jm-s.no i{background:var(--coral)}
.jm-dots{display:inline-flex;gap:2px;margin-left:2px}
.jm-dots u{width:5px;height:5px;border-radius:50%;background:var(--line);text-decoration:none}
.jm-dots u.f{background:var(--grass)}

@media(max-width:900px){.jm-grid{grid-template-columns:1fr}}

/* ============================================================
   CAREER-SITE EDITOR (recruitment.html)
   Three columns, the way careersiteeditor.html has them: the page
   tree, the canvas, and the library the canvas is built from. The
   section names are the product's eighteen, not a selection.
   ============================================================ */
.cs{display:grid;grid-template-columns:180px 1fr 220px;gap:16px;align-items:start}
.cs-side{min-width:0}
.cs-lbl{
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);margin:0 0 7px;
}
.cs-lbl:not(:first-child){margin-top:16px}
.cs-pg{display:block;font-size:.72rem;padding:5px 8px;border-radius:6px;color:var(--slate)}
.cs-pg.on{background:rgba(0,105,62,.09);color:var(--forest);font-weight:650}
.cs-pg.sub{padding-left:22px;position:relative}
.cs-pg.sub::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:1px;background:var(--line)}

.cs-canvas{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:10px;display:grid;gap:8px}
.cs-blk{
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;position:relative;
}
.cs-blk.sel{border-color:var(--forest);box-shadow:0 0 0 2px rgba(0,105,62,.13)}
.cs-blk b{display:block;font-size:.74rem;font-weight:650;padding-right:70px}
.cs-blk em{font-style:normal;font-size:.6rem;color:var(--forest);font-weight:600}
.cs-tag{
  position:absolute;top:8px;right:9px;font-size:.55rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);background:var(--paper);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;
}
/* the Jobs block renders live openings, which is the point of it */
.cs-job{display:flex;align-items:center;gap:7px;font-size:.66rem;color:var(--slate);margin-top:6px}
.cs-job i{
  width:17px;height:17px;border-radius:50%;background:rgba(0,105,62,.1);color:var(--forest);
  display:grid;place-items:center;font-size:.5rem;font-style:normal;font-weight:700;flex:none;
}
.cs-job u{text-decoration:none;margin-left:auto;color:var(--mute);font-size:.6rem}
.cs-add{
  border:1px dashed var(--line);border-radius:7px;text-align:center;padding:9px;
  font-size:.66rem;color:var(--mute);font-weight:600;
}

.cs-lib{display:flex;flex-wrap:wrap;gap:4px}
.cs-s{
  font-size:.6rem;padding:3px 7px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--slate);
}
.cs-sw{display:flex;gap:5px}
.cs-sw i{width:18px;height:18px;border-radius:5px;border:1px solid var(--line)}
.cs-set{display:flex;justify-content:space-between;gap:8px;font-size:.64rem;color:var(--mute);margin-top:7px}
.cs-set b{font-weight:600;color:var(--slate)}

.cs-foot{
  margin-top:13px;border-top:1px solid var(--line-soft);padding-top:10px;
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:.63rem;color:var(--mute);
}
.cs-url{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:3px 9px;color:var(--slate);
}
@media(max-width:820px){.cs{grid-template-columns:1fr}}

/* On a phone a four-item .shot-tabs strip runs past the shot it labels.
   Keep the active tab, which is the one that says which screen this is. */
@media(max-width:680px){
  .shot-tabs{flex-wrap:nowrap;min-width:0;overflow:hidden}
  .shot-tabs span{display:none}
  /* a five-character figure — 8.412, 1.240 — is wider than a third of a
     phone-width shot, and a number is the one thing that must not wrap */
  .shot .card-v{font-size:1.28rem}
}

/* alternating stages — the source page flips every second one so the
   shots zig-zag down the page rather than stacking on one side */
.stage.flip .stage-l{order:2;border-left:1px solid var(--line)}
.stage.flip .stage-r{order:1;border-left:0}
@media(max-width:900px){
  .stage.flip .stage-l,.stage.flip .stage-r{order:0;border-left:0}
  .stage.flip .stage-r{border-top:1px solid var(--line)}
}

/* ============================================================
   PHONE SCREENS — extra pieces for mobile.html
   Built from the real Expo app in ../Komma Mobile App: the widget
   dashboard (src/screens/widgets.js), the Karma receipt scan
   (src/screens/Expenses.js) and the manager approval queue
   (src/screens/Tasks.js). The app's own tokens are the site's —
   sand #F6F3EE, green #00693E, blue #0054A3 — so the frames need
   no colours of their own.
   ============================================================ */
.ph-w{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ph-w .ph-card{padding:9px 10px}
.ph-w .ph-lbl{margin-bottom:3px;font-size:.48rem}
.ph-w b{font-size:.72rem;font-weight:650;display:block;line-height:1.2}
.ph-w span{font-size:.54rem;color:var(--mute);display:block;margin-top:2px;line-height:1.3}

/* holiday balance ring */
.ph-ring{width:52px;height:52px;flex:none;transform:rotate(-90deg)}
.ph-ring circle{fill:none;stroke-width:5}
.ph-ring .bg{stroke:var(--paper-deep)}
.ph-ring .fg{stroke:var(--grass);stroke-linecap:round}
.ph-ring-wrap{position:relative;width:52px;height:52px;flex:none}
.ph-ring-c{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-family:'Playfair Display',Georgia,serif;font-size:.86rem;font-weight:500;
}

/* the receipt-scan sheet: fields Karma filled, each badged */
.ph-sheet{
  position:absolute;left:0;right:0;bottom:0;top:64px;background:var(--panel);
  border-radius:16px 16px 0 0;border:1px solid var(--line);border-bottom:0;
  padding:9px 12px 46px;overflow:hidden;
}
.ph-sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ph-sheet-h b{font-family:'Playfair Display',Georgia,serif;font-size:.92rem;font-weight:500}
.ph-sheet-h i{font-style:normal;font-size:.7rem;color:var(--mute)}
.ph-ai{
  display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;
  background:rgba(0,165,80,.11);color:var(--forest);font-size:.55rem;font-weight:650;margin-bottom:8px;
}
.ph-ai svg{width:10px;height:10px;flex:none}
.ph-fld{margin-bottom:7px}
.ph-fld .ph-lbl{display:flex;align-items:center;gap:4px;margin-bottom:3px}
.ph-tagai{
  font-size:.44rem;font-weight:700;letter-spacing:.04em;padding:1px 4px;border-radius:4px;
  background:rgba(0,165,80,.15);color:var(--forest);text-transform:none;letter-spacing:0;
}
.ph-inp{
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:.62rem;
  background:var(--paper);color:var(--ink);
}
.ph-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ph-chip{
  border:1px solid var(--line);border-radius:8px;padding:6px 3px;text-align:center;
  font-size:.52rem;background:var(--panel);color:var(--slate);
}
.ph-chip.on{border-color:var(--forest);background:rgba(0,105,62,.07);color:var(--forest);font-weight:650}

/* a queue row in the manager view */
.ph-q{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--panel)}
.ph-q + .ph-q{margin-top:7px}
.ph-q-h{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.ph-q-h b{font-size:.66rem;font-weight:650;flex:1}
.ph-q p{margin:0;font-size:.56rem;color:var(--mute);line-height:1.35}

/* ---- the home screen with Customise tapped -------------------
   Home.js in the app: a brand banner with Done, then every widget
   in a dashed frame carrying a grip, the two move arrows and the
   eye that hides it, then the tray of widgets not on the screen.
   The arrows are the real mechanism — the app moves a widget by
   one place at a time, it does not drag. */
.ph-edit-top{padding:26px 12px 7px}
.ph-edit-band{
  display:flex;align-items:center;gap:7px;padding:9px;border-radius:13px;
  background:linear-gradient(135deg,var(--forest),var(--grass));color:#fff;
}
.ph-edit-ico{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.ph-edit-ico svg{width:14px;height:14px}
.ph-edit-t{flex:1;min-width:0}
.ph-edit-t b{
  display:block;font-family:'Playfair Display',Georgia,serif;font-size:.78rem;
  font-weight:500;line-height:1.15;
}
.ph-edit-t span{display:block;font-size:.5rem;color:rgba(255,255,255,.85);margin-top:2px;line-height:1.3}
.ph-edit-done{
  background:#fff;color:var(--forest);border-radius:999px;padding:5px 11px;
  font-size:.56rem;font-weight:700;flex:none;
}
.ph-edit-reset{
  display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:5px;
  font-size:.54rem;font-weight:650;color:var(--mute);
}
.ph-edit-reset svg{width:10px;height:10px}

/* a widget while the screen is being arranged */
/* min-width:0 everywhere below: .ph-body is a grid, so a child whose
   min-content is wider than the 180px screen at the 640px breakpoint
   would push the whole column past the phone frame. */
.ph-editw{border:1.5px dashed var(--line);border-radius:13px;padding:6px;background:rgba(255,255,255,.45);min-width:0}
.ph-editw .ph-card{min-width:0}
.ph-editw-h{display:flex;align-items:center;gap:4px;padding:0 2px 6px}
.ph-editw-h b{flex:1;min-width:0;font-size:.6rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-grip,.ph-editw-i{display:grid;place-items:center;flex:none}
.ph-grip svg{width:12px;height:12px;color:var(--mute)}
.ph-editw-i svg{width:12px;height:12px;color:var(--forest)}
.ph-ctrl{
  width:18px;height:18px;border-radius:50%;background:var(--paper-deep);color:var(--slate);
  display:grid;place-items:center;flex:none;
}
.ph-ctrl svg{width:10px;height:10px}
/* first widget cannot move up, last cannot move down */
.ph-ctrl.off{opacity:.35}
.ph-ctrl.hide{background:rgba(214,90,70,.12);color:var(--coral)}
.ph-editw .ph-card:not(.hero) b{display:block;font-size:.72rem;font-weight:650;line-height:1.2}
.ph-editw .ph-card:not(.hero) > span{display:block;font-size:.54rem;color:var(--mute);margin-top:2px}

/* the tray of widgets that are not on the screen */
.ph-add-h{
  display:flex;align-items:center;gap:5px;margin-top:3px;font-size:.5rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);min-width:0;
}
.ph-add-h svg{width:11px;height:11px}
.ph-tray{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:0}
.ph-tray-c{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px 9px;min-width:0}
.ph-tray-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.ph-tray-i{width:24px;height:24px;border-radius:8px;background:rgba(0,105,62,.09);color:var(--forest);display:grid;place-items:center}
.ph-tray-i svg{width:13px;height:13px}
.ph-tray-p{width:16px;height:16px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center}
.ph-tray-p svg{width:9px;height:9px}
.ph-tray-c b{display:block;font-size:.62rem;font-weight:650;line-height:1.2}
.ph-tray-c span{display:block;font-size:.5rem;color:var(--mute);margin-top:2px;line-height:1.3}

/* at the 640px breakpoint the screen is 180px wide, and the handle row
   has to give the widget name room: smaller controls, tighter gaps. */
@media(max-width:640px){
  .ph-editw{padding:5px}
  .ph-editw-h{gap:4px;padding:0 1px 5px}
  .ph-editw-h b{font-size:.58rem}
  .ph-ctrl{width:17px;height:17px}
  .ph-ctrl svg{width:9px;height:9px}
  .ph-grip svg{width:10px;height:10px}
  .ph-edit-t b{font-size:.72rem}
}

@media(max-width:900px){.phones{flex-wrap:wrap}}

/* ============================================================
   FEEDBACK + LEARNING (hero views)
   The six assessment frameworks and the learning paths are what
   those two modules are actually about, and neither fits the
   card + table body. Small purpose-built pieces instead.
   ============================================================ */
.fb-fw{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:13px}
.fb-f{
  border:1px solid var(--line);border-radius:9px;padding:9px 6px;text-align:center;
  background:var(--panel);font-size:.66rem;font-weight:600;color:var(--slate);
}
.fb-f span{display:block;font-size:.56rem;color:var(--mute);font-weight:500;margin-top:2px}
.fb-f.on{border-color:var(--forest);background:rgba(0,105,62,.07);color:var(--forest)}
.fb-f.on span{color:var(--forest);opacity:.75}

.fb-dim{display:grid;gap:9px}
.fb-d{display:grid;grid-template-columns:96px 1fr 34px;gap:11px;align-items:center;font-size:.74rem}
.fb-d b{font-weight:600}
/* "Conscientiousness" is wider than the label column at every breakpoint.
   anywhere rather than break-word: only anywhere lowers the intrinsic
   min-content width, which is what stops the label running over the bar. */
.fb-d > span:first-child{overflow-wrap:anywhere}
.fb-d em{font-style:normal;color:var(--mute);font-size:.62rem;display:block;margin-top:1px}
.fb-d .bar{height:7px}
.fb-d u{text-decoration:none;text-align:right;font-family:'Playfair Display',Georgia,serif;font-size:1rem;color:var(--forest)}
.fb-d .bar i.d{background:var(--coral)}
.fb-d .bar i.i{background:var(--amber)}
.fb-d .bar i.s{background:var(--grass)}
.fb-d .bar i.c{background:var(--sky)}

/* ============================================================
   DISC RESULTS (feedback.html)
   The Results tab of an assessment: the team's spread on the
   left, one person's report on the right. The four dimension
   bars are the .fb-dim / .fb-d pair the candidate shot on
   recruitment.html already uses, so a D bar is the same red in
   both places; everything here is the furniture around them.
   ============================================================ */
.disc{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px;align-items:start}
.disc-lb{
  margin:0 0 9px;color:var(--mute);
  font-size:.57rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.disc-lb + .disc-lb,.disc-pnl + .disc-lb,.fb-dim + .disc-lb,.disc-cmp + .disc-lb{margin-top:16px}
.disc-pnl{border:1px solid var(--line);border-radius:10px;padding:13px}

/* team spread: one ring, one slice per style */
.disc-don{display:flex;align-items:center;gap:15px}
/* .disc-ring, not .donut — the pay-gap donut above is an <svg> turned
   -90deg to start its first arc at twelve o'clock, and sharing the name
   turned this ring and the text inside it on their side */
.disc-ring{
  width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--coral) 0 20%,var(--amber) 0 40%,var(--grass) 0 80%,var(--sky) 0 100%);
}
.disc-ring > span{
  width:82px;height:82px;border-radius:50%;background:var(--panel);flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.disc-ring b{font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;font-weight:500;line-height:1}
/* nowrap: the hole is only 82px across and "COMPLETED" set with letter-
   spacing is wider than that, which otherwise wraps it a letter per line */
.disc-ring em{
  font-style:normal;font-size:.45rem;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  text-transform:uppercase;color:var(--mute);margin-top:3px;
}
.disc-key{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1;min-width:0}
.disc-key li{display:flex;align-items:center;gap:7px;font-size:.68rem;color:var(--slate)}
.disc-key i{width:8px;height:8px;border-radius:2px;flex:none}
.disc-key u{margin-left:auto;text-decoration:none;font-weight:650;color:var(--ink)}
.disc-key i.d{background:var(--coral)}
.disc-key i.i{background:var(--amber)}
.disc-key i.s{background:var(--grass)}
.disc-key i.c{background:var(--sky)}

/* who has taken it, and what came out */
.disc-ppl{display:grid;gap:8px}
.disc-ppl > div{display:flex;align-items:center;gap:8px}
.disc-ppl .av{width:22px;height:22px;font-size:.53rem}
.disc-ppl b{display:block;font-size:.7rem;font-weight:650;line-height:1.25}
.disc-ppl em{display:block;font-style:normal;font-size:.58rem;color:var(--mute);line-height:1.3}
.disc-t{
  margin-left:auto;width:19px;height:19px;border-radius:5px;flex:none;color:#fff;
  display:grid;place-items:center;font-size:.6rem;font-weight:700;
}
.disc-t.d{background:var(--coral)}
.disc-t.i{background:var(--amber)}
.disc-t.s{background:var(--grass)}
.disc-t.c{background:var(--sky)}

/* the individual report */
.disc-hd{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.disc-hd .av{width:34px;height:34px;font-size:.72rem}
.disc-hd b{display:block;font-size:.92rem;font-weight:650;letter-spacing:-.01em}
.disc-hd em{display:block;font-style:normal;font-size:.66rem;color:var(--mute);margin-top:2px}
.disc-chip{
  margin-left:auto;border-radius:999px;padding:3px 11px;background:rgba(232,57,70,.1);
  color:#C22833;font-size:.66rem;font-weight:700;white-space:nowrap;
}
.disc-sub{margin:0 0 16px;font-size:.72rem;color:var(--slate)}

/* the report is wide enough for the bars and the comparison to sit side
   by side; left to run full width the dimension bars stretch to about a
   thousand pixels and stop reading as a measure of anything */
.disc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:22px;align-items:start}
.disc-grid .disc-lb{margin-top:0}
/* wider label column than the candidate shot's: "Conscientiousness" gets
   a line to itself here instead of breaking mid-word */
.disc .fb-d{grid-template-columns:132px minmax(0,1fr) 30px}

/* natural vs adapted, one pair of columns per dimension */
.disc-cmp{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dc{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dc-b{display:flex;align-items:flex-end;gap:4px;height:84px}
.dc-b i{width:15px;border-radius:3px 3px 0 0}
.dc-b i.lt{opacity:.42}
.dc-b i.d{background:var(--coral)}
.dc-b i.i{background:var(--amber)}
.dc-b i.s{background:var(--grass)}
.dc-b i.c{background:var(--sky)}
.dc b{font-size:.7rem;font-weight:700}
.dc em{font-style:normal;font-size:.58rem;color:var(--mute)}
.disc-lg{display:flex;gap:14px;margin-top:11px;font-size:.6rem;color:var(--slate)}
.disc-lg span{display:flex;align-items:center;gap:6px}
.disc-lg i{width:9px;height:9px;border-radius:2px;background:var(--ink);flex:none}
.disc-lg i.lt{opacity:.42}

/* the written half of the report */
.disc-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.disc-sum > div{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--paper)}
.disc-sum b{
  display:block;margin-bottom:7px;color:var(--mute);
  font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.disc-sum ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.disc-sum li{position:relative;padding-left:11px;font-size:.66rem;line-height:1.45;color:var(--slate)}
.disc-sum li::before{
  content:"";position:absolute;left:0;top:6px;width:4px;height:4px;
  border-radius:50%;background:var(--line);
}

@media(max-width:900px){
  .disc{grid-template-columns:1fr}
  .disc-sum{grid-template-columns:1fr}
}

/* learning paths */
.lp{display:grid;gap:2px}
.lp-r{
  display:grid;grid-template-columns:1.5fr 1fr 74px;gap:11px;align-items:center;
  padding:9px 10px;border-radius:9px;font-size:.74rem;
}
.lp-r:nth-child(odd){background:var(--paper)}
.lp-r b{font-weight:600}
.lp-r em{font-style:normal;font-size:.62rem;color:var(--mute);display:block;margin-top:1px}
.lp-r .bar{height:6px}
.lp-r u{text-decoration:none;text-align:right;font-size:.68rem;font-weight:600;color:var(--slate)}
.lp-r u.done{color:var(--forest)}

@media(max-width:680px){
  .fb-fw{grid-template-columns:repeat(3,1fr)}
  .fb-d{grid-template-columns:78px 1fr 30px;gap:8px}
  .lp-r{grid-template-columns:1.4fr 1fr 58px;gap:8px}
}

/* A grid that opens its section has nothing above it to space it off the
   edge — most tile grids follow a .head, which does that job, but on
   security.html, platform.html and contact.html the cards sat flush
   against the top of the band.

   Padding, not margin, for two reasons: a top margin collapses straight
   out through .wrap and the section (both have no top padding or border),
   so the gap lands OUTSIDE the panel background instead of inside it; and
   putting it on the grid rather than on .tile keeps multi-row grids —
   platform.html has nine tiles in three rows — from spacing every row. */
.section > .wrap > .grid:first-child{padding-top:30px}