/* ─────────────────────────────────────────────────────────────────────────────
   Pulsus Platform — shared stylesheet
   about.pulsus.tech

   Loaded by every page except the homepage, which still carries its own inline
   copy. That duplication is temporary and deliberate: the homepage is approved
   and live, so it migrates to this sheet as its own verifiable step rather than
   riding along with new work.

   Brand tokens are taken from the product itself — red #e4012b, ink #1c1416,
   warm paper #faf7f5 — so the site and the applications it sells look like one
   company.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --red:#e4012b; --red-deep:#b80022;
  --navy:#071a33; --navy-2:#0c2748;
  --ink:#1c1416; --muted:#6e625e; --line:#e6ded9;
  --paper:#faf7f5; --white:#fff;
  --on-dark:#eaf1fa; --on-dark-dim:#9fb4cd;
  --green:#4ec98a; --amber:#e8b84b; --blue:#4d9bf0;
  --sora:'Sora',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --plex:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1320px; --gut:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--plex);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.wordmark{font-family:var(--sora);letter-spacing:-0.02em;line-height:1.1;margin:0}
p{margin:0 0 14px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:700 11.5px/1 var(--plex);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}

/* ── Wordmark ─────────────────────────────────────────────────────────────── */
.wordmark{display:inline-block;text-decoration:none}
.wordmark .wm{font-weight:800;font-size:22.5px;letter-spacing:.17em;display:flex;align-items:baseline;gap:1px;line-height:1}
/* The red dot sits inside the second U, as in the logo. It is placed from the
   glyph's vertical centre so line-height cannot move it, and pulled left by
   half the trailing letter-spacing. */
.wm .u{position:relative}
.wm .u::after{content:"";position:absolute;left:calc(50% - .085em);top:50%;width:.2em;height:.2em;
  margin:-.12em 0 0 -.1em;border-radius:50%;background:var(--red)}
.wordmark small{display:block;font:600 9px/1 var(--plex);letter-spacing:.24em;opacity:.7;margin-top:5px;white-space:nowrap}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:8px;padding:14px 24px;
  font:700 15px var(--plex);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-outline:hover{border-color:#fff}
.btn .arw,.tlink .arw{transition:transform .12s ease;display:inline-block}
.btn:hover .arw,.tlink:hover .arw{transform:translateX(3px)}
/* A text link with a trailing arrow — used for "View all features", "Learn more". */
.tlink{font:700 14px var(--plex);color:var(--red);text-decoration:none;white-space:nowrap}
.tlink:hover{text-decoration:underline}

/* ── Header ───────────────────────────────────────────────────────────────── */
header{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.09)}
.nav{display:flex;align-items:center;gap:30px;height:84px}
.nav .wordmark{color:#fff}
.nav nav{display:flex;gap:30px;margin-left:auto}
.nav nav a{font:500 15px var(--plex);color:#dce8f6;text-decoration:none}
.nav nav a:hover{color:#fff}
.nav .srch{color:#dce8f6;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:4px}
.nav .srch:hover{color:#fff}
@media(max-width:1180px){ .nav nav{gap:20px} .nav nav a{font-size:14px} }
@media(max-width:980px){ .nav nav,.nav .srch{display:none} .nav{justify-content:space-between} }

/* ── System-page hero ─────────────────────────────────────────────────────── */
.shero{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 76% 10%, #16416c 0%, rgba(11,34,60,.6) 45%, transparent 74%),
  linear-gradient(160deg,#08203c 0%,#061729 58%,#040e1c 100%)}
/* Bokeh, standing in for the server-room photograph in the concept: same mood,
   a few hundred bytes, and nothing to load. */
.shero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;background:
  radial-gradient(circle 4px at 7% 62%, rgba(150,200,255,.38), transparent 60%),
  radial-gradient(circle 6px at 15% 80%, rgba(255,180,110,.26), transparent 60%),
  radial-gradient(circle 3px at 26% 55%, rgba(190,220,255,.34), transparent 60%),
  radial-gradient(circle 8px at 34% 88%, rgba(255,205,145,.18), transparent 60%),
  radial-gradient(circle 4px at 6% 34%, rgba(160,205,255,.24), transparent 60%),
  radial-gradient(circle 5px at 90% 86%, rgba(255,190,120,.2), transparent 60%)}
.shero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:.86fr 1.14fr;gap:44px;
  align-items:center;padding-top:clamp(40px,5vw,62px);padding-bottom:clamp(40px,5vw,62px)}
.shero .kick{font:700 13px/1 var(--plex);letter-spacing:.13em;text-transform:uppercase;color:#cfe0f2;margin:0 0 20px}
.shero .kick b{color:var(--red);font-weight:700}
.shero h1{font-size:clamp(40px,4.6vw,62px);font-weight:800;color:#fff;margin:0 0 6px;letter-spacing:-0.03em}
.shero h1 span{color:var(--red)}
.shero h2{font-size:clamp(24px,2.5vw,33px);font-weight:600;color:#fff;letter-spacing:-0.025em;margin:0 0 20px;line-height:1.18}
.shero p{color:#b9cde5;max-width:42ch;font-size:16.5px}
.shero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media(max-width:1020px){ .shero .wrap{grid-template-columns:1fr;gap:36px} .shero p{max-width:58ch} }

/* ── Application screenshot, drawn rather than photographed ───────────────────
   Every one of these is CSS and SVG. They stay sharp on any display, add
   nothing to load time, and cannot go stale when the product's UI moves on.
   No screenshot here carries a customer name: the data is illustrative. */
.appshot{border-radius:14px;background:#f4f6f9;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(0,0,0,.5);overflow:hidden;font-family:var(--plex);color:var(--ink)}
.as-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #e7ebf0}
.as-brand{display:flex;align-items:center;gap:9px;font:700 15px var(--sora);color:#0d2440}
.as-brand .mk{width:26px;height:26px;border-radius:7px;background:#fdecef;color:var(--red);display:grid;place-items:center;flex:0 0 auto}
.as-brand em{display:block;font-style:normal;font:400 9.5px var(--plex);color:#8794a5;letter-spacing:.02em}
.as-top .sp{flex:1}
.as-search{display:flex;align-items:center;gap:6px;background:#f1f4f8;border:1px solid #e2e7ee;
  border-radius:7px;padding:5px 11px;font-size:11.5px;color:#8794a5;min-width:150px}
.as-pill{font:600 10.5px var(--plex);padding:4px 10px;border-radius:6px;background:#eef2f7;color:#6b7a8d;border:1px solid #e2e7ee}
.as-pill.on{background:#e6f5ec;color:#1d8a52;border-color:#bfe6d0}
.as-av{width:26px;height:26px;border-radius:50%;background:#1d3a5c;color:#fff;display:grid;place-items:center;
  font:700 10px var(--plex);flex:0 0 auto}
.as-body{display:grid;grid-template-columns:150px 1fr;min-height:430px}
.as-side{background:#fff;border-right:1px solid #e7ebf0;padding:12px 10px}
.as-side a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#6b7a8d;padding:8px 10px;
  border-radius:8px;text-decoration:none;margin-bottom:2px}
.as-side a svg{flex:0 0 auto;opacity:.7}
.as-side a.on{background:#eaf1fb;color:#0d2440;font-weight:600}
.as-side a.on svg{opacity:1;color:var(--red)}
.as-main{padding:14px 15px;background:#f4f6f9}
.as-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.as-h b{font:700 15px var(--sora);color:#0d2440}
.as-h .sp{flex:1}
.as-card{background:#fff;border:1px solid #e7ebf0;border-radius:10px;padding:11px 13px}
.as-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:11px}
.as-kpi .lb{font-size:10px;color:#8794a5;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.as-kpi .vl{font:800 22px var(--sora);color:#0d2440;line-height:1}
.as-kpi .dl{font-size:10.5px;margin-top:5px;color:#8794a5}
.as-kpi .dl.up{color:#1d8a52}
.as-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:10px}
.as-t{font:700 11.5px var(--plex);color:#0d2440;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.as-t .sp{flex:1}
.as-t .mini{font:600 10px var(--plex);color:#8794a5}
.as-asat{margin-left:auto;font:500 10.5px var(--plex);color:#8794a5;white-space:nowrap}
/* A plotted series is only credible if it agrees with the figures beside it,
   so the chart carries a real axis and every line resolves to its KPI value. */
.as-plot{display:flex;gap:7px}
.as-yax{display:flex;flex-direction:column;justify-content:space-between;font:500 9px var(--plex);
  color:#9aa7b6;text-align:right;flex:0 0 auto;padding:1px 0 13px}
.as-xax{display:flex;justify-content:space-between;font:500 9px var(--plex);color:#9aa7b6;
  margin:4px 0 0 30px}
.as-chart{display:block;width:100%;height:118px}
.as-legend{display:flex;gap:12px;margin-top:7px;font-size:10px;color:#8794a5}
.as-legend i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.as-row{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:#41505f;padding:6px 0;border-top:1px solid #f0f3f7}
.as-row:first-of-type{border-top:0}
.as-row .dotx{width:16px;height:16px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;margin-top:1px}
.as-row time{margin-left:auto;color:#9aa7b6;font-size:10px;white-space:nowrap}
@media(max-width:760px){ .as-body{grid-template-columns:1fr} .as-side{display:none}
  .as-grid4{grid-template-columns:repeat(2,1fr)} .as-cols{grid-template-columns:1fr} .as-search{display:none} }

/* ── What it does ─────────────────────────────────────────────────────────── */
.wid{padding:clamp(44px,5vw,64px) 0;background:var(--paper)}
.wid-head{display:flex;align-items:flex-end;gap:30px;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px}
.wid h2{font-size:clamp(26px,3.1vw,36px);font-weight:800;margin-bottom:8px}
.wid-head p{margin:0;color:var(--muted);font-size:15.5px}
.feats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.feat{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 16px}
.feat .ic{color:var(--red);margin-bottom:12px}
.feat b{display:block;font:700 14.5px/1.25 var(--sora);letter-spacing:-.01em;margin-bottom:7px}
.feat p{margin:0;font-size:13px;color:#5b514e;line-height:1.5}
@media(max-width:1180px){ .feats{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){ .feats{grid-template-columns:repeat(2,1fr)} }
@media(max-width:420px){ .feats{grid-template-columns:1fr} }

/* ── Enterprise signal band ───────────────────────────────────────────────── */
.signal{background:linear-gradient(120deg,#050f1f 0%,#071a33 50%,#0a1f3a 100%);
  color:var(--on-dark);padding:30px 0 34px;position:relative;overflow:hidden}
.signal .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.signal .eyebrow{color:#7d9dc4;margin-bottom:9px}
.signal h3{font-size:clamp(20px,2.3vw,27px);font-weight:700;color:#fff;margin-bottom:9px;letter-spacing:-0.02em}
.signal p{margin:0;font-size:13.5px;color:#9fb4cd;max-width:62ch}
/* The heartbeat. It is the product's name made visible, so it is drawn to
   scale rather than dropped in as an image. */
.ecg{position:absolute;right:0;bottom:0;width:62%;height:100%;pointer-events:none;opacity:.85}
.ecg svg{width:100%;height:100%}
@media(max-width:900px){ .signal .wrap{grid-template-columns:1fr} .ecg{opacity:.32;width:100%} }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{background:var(--navy);color:var(--on-dark-dim);padding:44px 0 0}
.frow{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.frow .wordmark{color:#fff}
.frow p{font-size:13px;margin:16px 0 0;max-width:46ch}
.flinks{display:flex;gap:18px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}
.flinks a{color:#9fb4cd;text-decoration:none}
.flinks a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding:18px 0;font-size:12px;color:#6e87a3}
@media(max-width:760px){ .frow{grid-template-columns:1fr;gap:22px} .flinks{justify-content:flex-start} }

/* ── Talent: score card, gauge and rating distribution ────────────────────── */
.as-score{background:linear-gradient(135deg,#e4012b 0%,#b80022 100%);color:#fff;border-radius:10px;
  padding:14px 16px;display:flex;align-items:center;gap:18px;margin-bottom:11px}
.as-score .lb{font:700 10px var(--plex);letter-spacing:.11em;text-transform:uppercase;opacity:.85}
.as-score .vl{font:800 34px var(--sora);line-height:1;margin-top:5px}
.as-score .sub{font-size:10.5px;opacity:.88;margin-top:5px}
.as-score .sp{flex:1}
.as-gauge{position:relative;width:96px;height:58px;flex:0 0 auto;text-align:center}
.as-gauge svg{display:block}
.as-gauge b{position:absolute;left:0;right:0;bottom:2px;font:800 17px var(--sora);color:#fff}
.as-dist{display:grid;grid-template-columns:132px 1fr 22px;gap:8px;align-items:center;
  font-size:11px;color:#41505f;padding:4px 0}
.as-dist .bar{height:7px;border-radius:4px;background:#eef1f5;overflow:hidden}
.as-dist .bar i{display:block;height:100%;border-radius:4px}
.as-dist .n{text-align:right;font-weight:600;color:#0d2440}

/* ── Connect: progress stepper, detail list and timeline ──────────────────── */
.as-steps{display:flex;align-items:flex-start;margin:4px 0 14px}
.as-steps .st{flex:1;text-align:center;position:relative;font-size:10px;color:#41505f}
.as-steps .st::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:#4ec98a}
.as-steps .st:first-child::before{display:none}
.as-steps .st i{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:#4ec98a;
  color:#fff;display:grid;place-items:center;margin:0 auto 6px}
.as-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:11.5px;margin-top:2px}
.as-dl dt{color:#8794a5}
.as-dl dd{margin:0;color:#0d2440;font-weight:600;text-align:right}
.as-tl{position:relative;padding-left:15px}
.as-tl .ev{position:relative;padding:5px 0;font-size:11px;color:#41505f}
.as-tl .ev::before{content:"";position:absolute;left:-15px;top:10px;width:8px;height:8px;border-radius:50%;
  background:#4ec98a;box-shadow:0 0 0 2px #fff}
.as-tl .ev::after{content:"";position:absolute;left:-11.5px;top:18px;bottom:-5px;width:1px;background:#e2e7ee}
.as-tl .ev:last-child::after{display:none}
.as-tl .ev b{font-weight:600;color:#0d2440}
.as-tl .ev span{display:block;color:#9aa7b6;font-size:10px;margin-top:1px}
.as-tl .ev time{position:absolute;right:0;top:6px;color:#9aa7b6;font-size:10px}

/* ── Panorama: tabs, banner and scorecard measures ───────────────────────── */
.as-tabs{display:flex;gap:4px;margin-bottom:11px;flex-wrap:wrap}
.as-tabs span{font:600 10.5px var(--plex);color:#6b7a8d;padding:5px 11px;border-radius:7px;background:#fff;border:1px solid #e2e7ee}
.as-tabs span.on{background:#0d2440;color:#fff;border-color:#0d2440}
.as-banner{background:#fdecef;border:1px solid #f6c9d3;border-left:3px solid var(--red);border-radius:8px;
  padding:9px 12px;margin-bottom:11px;font-size:11px;color:#7a1226}
.as-banner b{display:block;font:700 11.5px var(--sora);margin-bottom:2px}
.as-msr{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border-top:1px solid #f0f3f7;padding:9px 0}
.as-msr:first-of-type{border-top:0}
.as-msr .nm{font:700 12px var(--sora);color:#0d2440}
.as-msr .sb{font-size:10.5px;color:#8794a5;margin-top:1px}
.as-msr .rt{text-align:right;white-space:nowrap}
.as-msr .av{font:800 16px var(--sora);color:#0d2440}
.as-msr .tg{font-size:10px;color:#8794a5;margin-top:1px}
.as-chip{font:700 9.5px var(--plex);padding:3px 8px;border-radius:5px;background:#e6f5ec;color:#1d8a52;
  display:inline-block;margin-bottom:3px}

/* ── Tech: headline availability, stat grid, table and lifecycle ─────────── */
.as-big{font:800 40px var(--sora);color:#0d2440;line-height:1}
.as-met{font-size:10.5px;color:#1d8a52;margin-top:5px}
.as-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}
.as-stats .s{text-align:left}
.as-stats .s .k{font-size:9px;color:#8794a5;text-transform:uppercase;letter-spacing:.05em}
.as-stats .s .v{font:800 16px var(--sora);color:#0d2440;margin-top:2px}
.as-tbl{width:100%;border-collapse:collapse;font-size:11px}
.as-tbl th{text-align:left;font:700 9px var(--plex);color:#8794a5;text-transform:uppercase;
  letter-spacing:.05em;padding:0 0 7px;border-bottom:1px solid #e7ebf0}
.as-tbl td{padding:7px 0;border-bottom:1px solid #f0f3f7;color:#41505f}
.as-tbl td:first-child{font-weight:600;color:#0d2440}
.as-tbl td:not(:first-child){text-align:right}
.as-tbl .up{color:#1d8a52}
.as-life{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border-top:1px solid #f0f3f7;padding:8px 0;font-size:11px}
.as-life:first-of-type{border-top:0}
.as-life .nm{font-weight:600;color:#0d2440}
.as-life .sb{font-size:10px;color:#8794a5;margin-top:1px}
.as-life .rt{text-align:right;white-space:nowrap}
.as-life .due{font-weight:700;color:#0d2440}
.as-life .rk{font-size:9.5px;margin-top:1px}
.as-life .rk.high{color:#c0392b}
.as-life .rk.med{color:#b97e0a}
.as-life .due.over{color:#c0392b}

/* ── The questions band ──────────────────────────────────────────────────
   Six questions and the one that follows from them. Set as a list because
   that is what it is; the last is separated because it is the point. */
.qband{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(44px,5vw,64px) 0}
.qband .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:start}
.qband h2{font-size:clamp(26px,3.1vw,36px);font-weight:800;margin-bottom:10px}
.qband .intro{color:var(--muted);font-size:15.5px;margin:0}
.qlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.qlist li{display:flex;gap:13px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);
  font:600 16.5px/1.35 var(--sora);letter-spacing:-.015em}
.qlist li svg{flex:0 0 auto;color:var(--red);position:relative;top:2px}
.qlist li.last{border-bottom:0;margin-top:10px;padding-top:20px;border-top:2px solid var(--ink);
  font-size:19px;font-weight:800}
@media(max-width:900px){ .qband .wrap{grid-template-columns:1fr;gap:26px} }

/* A single closing statement, set large. */
.closer{background:var(--navy);color:#fff;padding:clamp(40px,4.6vw,58px) 0;text-align:center}
.closer p{font:700 clamp(21px,2.6vw,30px)/1.35 var(--sora);letter-spacing:-.02em;margin:0 auto;max-width:22ch;color:#fff}
.closer p em{display:block;font-style:normal;color:#8ea6c2;font-weight:600;font-size:.72em;margin-bottom:8px}