/* salarydataapi.com: the site's own styles. The header stays at the top of every page and takes the colour of the band
   under it: dark over graphite (a page's hero, data-band="dark"), light over porcelain (data-band="light"). The logo plays
   its start-up once as a page opens and never loops. */

.site-hdr{position:sticky;top:0;z-index:50;background:#0B0F15;border-bottom:1px solid #1C2430;transition:background-color .25s ease,border-color .25s ease;
  --tile:#111720;--tile-line:#273142;--ink-hi:#EEF2F7;--ink-lo:#5A6880;--cut:#111720;--acc:#2CE5C4;--wm:#EEF2F7;--wm-acc:#2CE5C4}
.site-hdr.is-light{background:#FFFFFF;border-bottom-color:#DCE1E8;--tile:#0F151D;--tile-line:#0F151D;--cut:#0F151D;--wm:#0E1520;--wm-acc:#0A7F6D}
.site-hdr-in{max-width:1240px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:28px}

/* the logo: the mark on its tile and the name, 32px high */
.site-logo{display:inline-flex;align-items:center;flex:none;line-height:0;border-radius:10px}
.site-logo:focus-visible{outline:2px solid var(--wm-acc);outline-offset:4px}
.site-lockup{display:block;height:32px;width:auto;overflow:visible}
.site-lockup .tl-f{fill:var(--tile);transition:fill .25s ease}
.site-lockup .tl-s{fill:none;stroke:var(--tile-line);transition:stroke .25s ease}
.site-lockup .band{fill:var(--acc)}
.site-lockup .cut{fill:none;stroke:var(--cut);stroke-width:.85;transition:stroke .25s ease}
.site-lockup .base{fill:none;stroke:var(--ink-lo);stroke-width:.9}
.site-lockup .crv{fill:none;stroke:var(--ink-hi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-lockup .wm-a{fill:var(--wm);transition:fill .25s ease}
.site-lockup .wm-b{fill:var(--wm-acc);transition:fill .25s ease}

/* the menu, once pages are built */
.site-nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.site-nav a{height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:10px;font-size:14px;white-space:nowrap;color:#8C96A7;text-decoration:none;transition:color .2s ease,background-color .2s ease}
.site-nav a:hover,.site-nav a[aria-current]{color:#E9EDF3;background:#121922}
.site-hdr.is-light .site-nav a{color:#46505F}
.site-hdr.is-light .site-nav a:hover,.site-hdr.is-light .site-nav a[aria-current]{color:#0E1520;background:#E9ECF1}

/* the start-up: the curve draws, the middle half rises, the name slides in */
.site-lockup .crv{animation:site-draw .8s cubic-bezier(.22,.72,.18,1) both}
.site-lockup .band{transform-box:fill-box;transform-origin:50% 100%;animation:site-rise .55s cubic-bezier(.2,.8,.2,1) .32s both}
.site-lockup .cut{animation:site-fade .3s ease .7s both}
.site-lockup .wm{animation:site-word .6s cubic-bezier(.2,.8,.2,1) .18s both}
@keyframes site-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes site-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes site-fade{from{opacity:0}to{opacity:1}}
@keyframes site-word{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.site-lockup *{animation:none!important}}

@media (max-width:640px){.site-hdr-in{padding:0 16px;height:58px}}

/* ---- colour and material (approved 27 Oct 2026, round 2): a page is bands of two materials by turns, graphite and
   porcelain, each naming the same roles; the logo's teal is the only accent, falling figures a calm blue, never red ---- */
:root{--r:10px;--f-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--f-head:'Archivo',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace}
.dark,[data-band=dark],[data-hero]{--bg:#0B0F15;--surface:#10161F;--raised:#151C27;--line:#222B39;--line-2:#2C3747;--ink:#E9EDF3;--ink-2:#9AA5B6;--ink-3:#5E6A7D;
  --acc:#2CE5C4;--acc-ink:#05231E;--acc-soft:rgba(44,229,196,.10);--d1:#2CE5C4;--d2:#6EA8FE;--d3:#7C8799;--down:#8FA3C2}
.light,[data-band=light]{--bg:#F4F6F9;--surface:#FFFFFF;--raised:#FFFFFF;--line:#DFE4EA;--line-2:#CDD4DD;--ink:#0E1520;--ink-2:#46505F;--ink-3:#7A8494;
  --acc:#0A7F6D;--acc-ink:#FFFFFF;--acc-soft:rgba(10,127,109,.08);--d1:#0A7F6D;--d2:#2F6FD6;--d3:#8C96A7;--down:#5B7BA8}
body{margin:0;background:#0B0F15;color:#E9EDF3;font:400 15px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased}
[data-band],[data-hero]{background:var(--bg);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.band-sec{padding:56px 0}
.num{font-variant-numeric:tabular-nums}

/* type: Archivo, a little wide like the wordmark, for headings only; Inter for reading and figures; nothing bold */
.hero-kw{margin:0 0 14px;font:400 13px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.hero-title{display:block;font:500 46px/1.08 var(--f-head);font-stretch:112%;letter-spacing:-.015em;color:var(--ink)}
.t-d{font:500 40px/1.1 var(--f-head);font-stretch:112%;letter-spacing:-.015em;margin:0}
.t-h,h2{font:500 24px/1.2 var(--f-head);font-stretch:112%;letter-spacing:-.01em;margin:0 0 6px}
.lead{margin:0 0 28px;color:var(--ink-2);max-width:720px}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.t-s{font-size:12px;color:var(--ink-3)}
b,strong{font-weight:500}

/* material: one hairline, no shadows, one radius */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.btn{height:44px;min-width:168px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);font:500 14px var(--f-ui);text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent}
.btn.pri{background:var(--acc);color:var(--acc-ink)}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--line-2)}
.chip{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:var(--r);font-size:12px;color:var(--ink-2);background:var(--bg);border:1px solid var(--line);white-space:nowrap}
.chip.on{color:var(--acc);background:var(--acc-soft);border-color:transparent}
.field{height:42px;width:100%;box-sizing:border-box;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:inherit;font-size:14px;padding:0 12px}
.field:focus{outline:2px solid var(--acc-soft);border-color:var(--acc)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font:400 12px var(--f-ui);color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:0 12px;height:46px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--acc-soft)}
.tbl .r{text-align:right}
.up{color:var(--d1)}.dn{color:var(--down)}
.code{background:#0B0F15;color:#C9D1DD;border:1px solid var(--line);border-radius:var(--r);font:12.5px/1.7 var(--f-mono);overflow:hidden}
[data-band=light] .code{background:#0F151D}
.code pre{margin:0;padding:14px 16px;overflow-x:auto}
.code .k{color:#6EA8FE}.code .s{color:#2CE5C4}.code .n{color:#E9C46A}.code .c{color:#5E6A7D}
@media (max-width:640px){.wrap{padding:0 16px}.hero-title{font-size:30px}.t-d{font-size:30px}}

/* ---- header actions, the phone menu and the footer (approved with the homepage, 27 Oct 2026) ---- */
.site-cta{margin-left:auto;display:flex;gap:8px}
.site-cta a{height:36px;min-width:104px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:14px;text-decoration:none;white-space:nowrap}
.site-cta .in{color:#C9D1DD;border:1px solid #273142}.site-hdr.is-light .site-cta .in{color:#0E1520;border-color:#DCE1E8}
.site-cta .go{background:#2CE5C4;color:#05231E}.site-hdr.is-light .site-cta .go{background:#0A7F6D;color:#fff}
.burger{display:none;width:40px;height:36px;border:1px solid #273142;border-radius:10px;background:none;color:#C9D1DD}
@media (max-width:640px){.site-hdr-in{gap:10px}.site-cta a{min-width:0;padding:0 12px}.site-lockup{height:28px}}
@media (max-width:860px){.site-nav{display:none}.burger{display:inline-flex;align-items:center;justify-content:center}.site-cta .in{display:none}}

.burger{cursor:pointer;font-size:16px}.site-hdr.is-light .burger{color:#0E1520;border-color:#DCE1E8}
.site-drop{display:none;position:absolute;left:0;right:0;top:100%;background:#0B0F15;border-bottom:1px solid #1C2430;padding:6px 16px 14px}
.site-drop a{display:flex;align-items:center;height:46px;color:#C9D1DD;text-decoration:none;font-size:15px;border-bottom:1px solid #1C2430}
.site-drop a:last-child{border-bottom:0}.site-drop a[aria-current]{color:#2CE5C4}
.site-hdr.is-light .site-drop{background:#FFFFFF;border-bottom-color:#DCE1E8}.site-hdr.is-light .site-drop a{color:#0E1520;border-bottom-color:#E9ECF1}
.site-hdr.is-light .site-drop a[aria-current]{color:#0A7F6D}
@media (max-width:860px){.site-hdr.open .site-drop{display:block}}
.sfoot{border-top:1px solid var(--line);padding:48px 0 32px}
.fcols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:24px}
.fcols h4{margin:0 0 12px;font:400 12px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fcols a{display:block;color:var(--ink-2);text-decoration:none;font-size:14px;padding:5px 0}
.fcols a:hover{color:var(--ink)}
.fcols .brand p{font-size:13px;color:var(--ink-3);max-width:280px;margin:14px 0 0}
.fbase{display:flex;gap:16px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.fbase .st{margin-left:auto;display:inline-flex;align-items:center;gap:6px}.fbase .st i{width:7px;height:7px;border-radius:50%;background:var(--d1)}
.flk .tl-f{fill:#0F151D}.flk .tl-s{stroke:#0F151D}.flk .cut{stroke:#0F151D}.flk .wm-a{fill:var(--ink)}.flk .wm-b{fill:var(--acc)}.flk .crv{stroke:#EEF2F7}.flk .base{stroke:#5A6880}.flk *{animation:none!important}
.fbase .st{color:inherit;text-decoration:none}.fbase .st:hover{color:var(--ink)}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fcols .brand{grid-column:1/-1}}