/* Paylists — Belgium construction campaign landing page (NL / FR / EN) */
a{color:var(--green)}a:hover{color:var(--green-light)}
.chain{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;max-width:920px;margin:36px auto 0}
.chain i{font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:8px;padding:8px 13px;margin:4px 0}
.chain i.hi{color:#fff;border-color:oklch(43.5% .09 158/.6);background:oklch(43.5% .09 158/.22)}
.chain s{text-decoration:none;width:22px;height:1px;background:rgba(255,255,255,.2)}
.band{border-top:1px solid var(--border)}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.bgrid.flip .bcopy{order:2}
.bstage{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9aa5b5;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.bstage em{font-style:normal;color:var(--green)}
.bcopy h2,.bhead h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-1.1px;line-height:1.15;margin-bottom:16px;text-wrap:balance}
.bcopy p,.bhead p{font-size:16px;color:var(--mid);line-height:1.8;max-width:48ch}
.bhead{max-width:660px;margin-bottom:38px}
.bhead p{max-width:62ch}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--green-pale);padding:4px 9px;border-radius:6px;margin-bottom:14px}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 24px;box-shadow:0 10px 36px rgba(12,19,32,.06);min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.card-h b{font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pill{font-size:11px;font-weight:600;color:var(--green);background:var(--green-pale);border-radius:999px;padding:4px 10px;white-space:nowrap}
.pill.warn{color:#8a6116;background:#fdf5e4}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:13.5px;border-bottom:1px solid #f1f4f9}
.kv div:last-child{border-bottom:none}
.kv span:first-child{color:var(--mid)}
.kv span:last-child{font-weight:600;text-align:right}
/* Drawing takeoff */
.dw{margin-top:6px;display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:start}
.pts{display:flex;flex-direction:column;gap:7px}
.pt{border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:12px;display:flex;align-items:center;gap:7px}
.pt i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pt.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green-pale)}
.plan{position:relative;border:1px solid var(--border);border-radius:9px;background:#fbfcfe;height:186px;overflow:hidden}
.plan svg{position:absolute;inset:0;width:100%;height:100%}
.mk{position:absolute;font-size:10.5px;font-weight:600;background:#fff;border:1px solid var(--border);border-radius:5px;padding:3px 7px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.mk i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.area{position:absolute;border:1.5px solid #d46a6a;background:rgba(212,106,106,.13);border-radius:2px}
.take{margin-top:14px;width:100%;border-collapse:collapse}
.take th{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8d99ab;text-align:left;padding:0 0 8px;border-bottom:1px solid var(--border)}
.take th.r,.take td.r{text-align:right}
.take td{font-size:12.5px;padding:9px 0;border-bottom:1px solid #f1f4f9}
.take tr:last-child td{border-bottom:none}
.take td:first-child{font-weight:600}
.card-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-foot span.n{font-size:12.5px;color:var(--mid)}
.card-foot span.go{font-size:12px;font-weight:600;color:#fff;background:var(--green);border-radius:8px;padding:8px 13px}
.steps4{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
.stp{border:1px solid var(--border);border-radius:11px;padding:14px 15px;background:#fff}
.stp em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:8px}
.stp b{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.stp span{font-size:12.5px;color:var(--mid);line-height:1.6}
/* Project cash flow chart */
.pcf{padding:0;overflow:hidden}
.pcf-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border);background:#fcfdff}
.pcf-kpis>div{padding:18px 20px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.pcf-kpis>div:first-child{border-left:none}
.pcf-kpis span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8d99ab}
.pcf-kpis b{font-size:16px;font-weight:700;letter-spacing:-.4px}
.pcf-kpis b.in{color:#1a6b47}
.pcf-kpis b.out{color:#a63b3b}
.pcf-body{padding:18px 20px 22px}
.pcf-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mid);margin-bottom:10px}
.pcf-legend span{display:flex;align-items:center;gap:6px}
.pcf-legend em{font-style:normal;color:#9aa5b5}
.pcf-legend .rng{margin-left:auto;font-weight:600;color:var(--text)}
.d{width:9px;height:9px;border-radius:50%;display:inline-block}
.d.in{background:#1a6b47}.d.out{background:#4a48c8}.d.nyh{background:#fff;border:1.5px solid #9aa5b5}
.chart{position:relative;height:300px;margin-top:6px}
.months3{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.months3 span{border-left:1px solid #eef1f6;padding:0 0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#b3bccb}
.months3 span:first-child{border-left:none}
.axis{position:absolute;left:0;right:0;top:50%;height:1px;background:#dfe4ec}
.cfpt{position:absolute;top:50%;width:0}
.cfpt::before{content:'';position:absolute;left:-1px;width:2px;height:var(--h);background:currentColor;opacity:.35}
.cfpt::after{content:'';position:absolute;left:-4.5px;width:9px;height:9px;border-radius:50%;background:currentColor}
.cfpt b{position:absolute;font-size:11.5px;font-weight:600;white-space:nowrap;transform:translateX(-50%);color:var(--text)}
.cfpt.up{color:#1a6b47}
.cfpt.up::before{bottom:0}
.cfpt.up::after{top:calc(-1 * var(--h) - 4.5px)}
.cfpt.up b{top:calc(-1 * var(--h) - 26px);left:0}
.cfpt.down::before{top:0}
.cfpt.down::after{top:calc(var(--h) - 4.5px)}
.cfpt.down b{top:calc(var(--h) + 12px);left:0}
.cfpt.out{color:#4a48c8}
.cfpt.in.down{color:#1a6b47}
.cfpt.nyh::after{background:#fff;border:1.5px solid currentColor}
.ticks{position:absolute;left:0;right:0;bottom:0;height:16px;font-size:11px;color:#9aa5b5}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
/* Peppol in + out on one project */
.flow2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 36px rgba(12,19,32,.06)}
.flow2>div{padding:20px 22px}
.flow2>div+div{border-left:1px solid var(--border)}
.flow-h{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8d99ab;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:4px}
.flow-h i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.flow-h span{margin-left:auto;color:#b3bccb;letter-spacing:0;text-transform:none;font-weight:600;font-size:11px}
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:12px 0;border-bottom:1px solid #f1f4f9}
.doc:last-child{border-bottom:none}
.doc b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:600}
.doc .amt{margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap}
.doc .who{flex:1 1 100%;font-size:11.5px;color:#9aa5b5}
.doc .wpk{font-size:10.5px;font-weight:600;color:var(--green);background:var(--green-pale);border-radius:999px;padding:2px 7px}
.proj-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;background:#fcfdff;border-top:1px solid var(--border);grid-column:1/-1;font-size:12.5px;color:var(--mid)}
.proj-bar b{font-size:13.5px;color:var(--text)}
.proj-bar .pill{margin-left:auto}
/* Budget vs committed vs billed */
.bvc{width:100%;border-collapse:collapse;min-width:790px}
.bvc th{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8d99ab;text-align:left;padding:0 10px 12px;border-bottom:1px solid var(--border)}
.bvc th.r,.bvc td.r{text-align:right}
.bvc td{font-size:12.5px;padding:13px 10px;border-bottom:1px solid #f1f4f9;white-space:nowrap}
.bvc tr:last-child td{border-bottom:none}
.bvc td:first-child{font-weight:600;white-space:normal}
.bvc td.mut{color:#b3bccb}
.bvc tfoot td{font-weight:700;border-top:1px solid var(--border);border-bottom:none;background:#fcfdff}
.meter{display:block;position:relative;height:10px;border-radius:5px;background:#eef1f6;min-width:110px}
.meter i{position:absolute;left:0;top:0;height:100%;border-radius:5px}
.meter i.cm{background:#c7dbcf}
.meter i.bl{background:var(--green)}
.meter i.cm.over{background:#eec9c9}
.mlegend{display:flex;gap:16px;margin-top:16px;font-size:12px;color:var(--mid);flex-wrap:wrap}
.mlegend span{display:flex;align-items:center;gap:7px}
.mlegend i{width:16px;height:8px;border-radius:4px;display:inline-block}
.scroll-x{overflow-x:auto}
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.fig{padding:26px;border-left:1px solid var(--border)}
.fig:first-child{border-left:none}
.fig b{display:block;font-size:19px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.fig span{font-size:13.5px;color:var(--mid);line-height:1.65}
.note{font-size:13px;color:var(--mid);line-height:1.7;border-left:2px solid var(--border);padding-left:14px;margin-top:20px;max-width:52ch}
@media(max-width:1000px){.steps4{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.bgrid{grid-template-columns:1fr;gap:32px}.bgrid.flip .bcopy{order:0}.dw{grid-template-columns:1fr}.flow2{grid-template-columns:1fr}.flow2>div+div{border-left:none;border-top:1px solid var(--border)}.pcf-kpis{grid-template-columns:1fr 1fr}.pcf-kpis>div:nth-child(3){border-left:none}.chart{height:340px}.cfpt b{font-size:10.5px}.figures{grid-template-columns:1fr}.fig{border-left:none;border-top:1px solid var(--border)}.fig:first-child{border-top:none}}