/* Salary ladder — 3D range bars. Navy surface, one data hue (blue), total-comp bars in the deeper blue with a yellow cap. */
.salary-chart{--sc-depth:20px;--sc-ink:#fff;--sc-muted:#aab8e6;--sc-line:rgba(255,255,255,.1);--sc-bar:#5b8bff;--sc-bar-2:#3866e6;--sc-bar-3:#2a4fc0;color:var(--sc-ink);position:relative}
.sc-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}
.sc-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border:1px solid var(--sc-line);border-radius:999px;background:rgba(255,255,255,.04)}
.sc-tab{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--sc-muted);transition:background .2s,color .2s}
.sc-tab:hover{color:#fff}
.sc-tab[aria-selected=true]{background:var(--yellow,#ffcf08);color:var(--deep,#08206b)}
.sc-single{font:700 18px var(--display,'Barlow Condensed',sans-serif);letter-spacing:.04em;text-transform:uppercase}
.sc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:12px;color:var(--sc-muted)}
.sc-legend>span{display:inline-flex;align-items:center;gap:8px}
.sc-key{width:14px;height:10px;border-radius:2px;background:var(--sc-bar);display:inline-block}
.sc-key.is-total{background:var(--sc-bar-3);box-shadow:inset 0 3px 0 var(--yellow,#ffcf08)}
.sc-toggle{font-size:12px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:8px 12px;transition:background .2s}
.sc-toggle:hover,.sc-toggle[aria-pressed=true]{background:rgba(255,255,255,.12)}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.sc-headline{display:flex;align-items:center;gap:18px}
.sc-headline>b{font:800 clamp(46px,5vw,72px)/1 var(--display,'Barlow Condensed',sans-serif);color:var(--yellow,#ffcf08);letter-spacing:-.01em}
.sc-headline>span{font-size:13px;line-height:1.5;color:var(--sc-muted);max-width:340px}
.sc-headline strong{display:block;color:#fff;font-size:15px}
.sc-chapter{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--sc-muted);white-space:nowrap;padding-top:8px}
.sc-plot{position:relative;height:400px;padding:0 0 74px 64px;perspective:1400px}
.sc-grid{position:absolute;inset:0 0 74px 64px}
.sc-grid>span{position:absolute;left:0;right:0;bottom:var(--y);height:1px;background:var(--sc-line)}
.sc-grid>span>i{position:absolute;right:100%;margin-right:12px;top:-8px;font-size:11px;font-style:normal;color:var(--sc-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-avg{position:absolute;left:64px;right:0;bottom:calc(74px + var(--y));height:0;border-top:1px dashed rgba(255,207,8,.7);z-index:3;pointer-events:none}
.sc-avg>em{position:absolute;right:0;top:-24px;font-style:normal;font-size:11px;font-weight:700;color:var(--yellow,#ffcf08);background:rgba(7,21,64,.9);padding:3px 8px;border-radius:6px}
.sc-bars{position:relative;height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(18px,4vw,52px);padding:0 clamp(8px,3vw,40px);transform-style:preserve-3d;transform:rotateX(9deg) rotateY(-6deg);transform-origin:50% 100%}
.sc-slot{position:relative;height:100%}
.sc-stem{position:absolute;left:50%;bottom:0;height:var(--low);border-left:1px dashed rgba(255,255,255,.22);transform:translateX(-.5px)}
.sc-bar{position:absolute;left:50%;bottom:var(--low);width:min(88px,62%);height:var(--h);transform:translateX(-50%) scaleY(0);transform-origin:50% 100%;background:linear-gradient(180deg,var(--sc-bar) 0%,var(--sc-bar-2) 100%);border-radius:3px 3px 0 0;box-shadow:0 26px 40px -18px rgba(0,0,0,.6);outline:0;cursor:default;transition:transform .9s cubic-bezier(.2,.75,.25,1) calc(var(--i)*.12s),filter .2s}
.sc-bar.is-total{background:linear-gradient(180deg,var(--sc-bar-2) 0%,var(--sc-bar-3) 100%)}
.sc-bar.is-total:after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--yellow,#ffcf08);border-radius:3px 3px 0 0}
.sc-bar .sc-top{position:absolute;left:0;width:100%;height:var(--sc-depth);top:calc(-1 * var(--sc-depth));background:linear-gradient(90deg,#8fb0ff,#6d97ff);transform:skewX(-45deg) translateX(calc(var(--sc-depth)/2));border-radius:2px 2px 0 0}
.sc-bar.is-total .sc-top{background:linear-gradient(90deg,#ffe066,#ffcf08)}
.sc-bar .sc-side{position:absolute;top:calc(-1 * var(--sc-depth) / 2);right:calc(-1 * var(--sc-depth));width:var(--sc-depth);height:100%;background:linear-gradient(180deg,#2c52c9,#1b3a99);transform:skewY(-45deg);border-radius:0 2px 0 0}
.sc-bar.is-total .sc-side{background:linear-gradient(180deg,#1f3fa3,#12297a)}
.sc-bar:hover,.sc-bar:focus-visible{filter:brightness(1.12)}
.sc-bar:focus-visible{outline:3px solid var(--yellow,#ffcf08);outline-offset:4px}
.sc-val{position:absolute;left:50%;top:calc(-1 * var(--sc-depth) - 30px);transform:translateX(-50%) scaleY(1);white-space:nowrap;font:700 13px/1 var(--body,'DM Sans',sans-serif);color:#fff;background:rgba(7,21,64,.85);padding:6px 9px;border-radius:6px;opacity:0;transition:opacity .4s .8s;font-variant-numeric:tabular-nums}
.salary-chart.is-live .sc-bar{transform:translateX(-50%) scaleY(1)}
.salary-chart.is-live .sc-val{opacity:1}
.sc-to{font-weight:inherit}
.sc-label{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);width:max(100%,150px);text-align:center;line-height:1.3}
.sc-label strong{display:block;font-size:13px;color:#fff}
.sc-label small{display:block;font-size:11px;color:var(--sc-muted);margin-top:3px}
.sc-table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 18px}
.sc-table caption{text-align:left;font-size:12px;color:var(--sc-muted);padding-bottom:10px}
.sc-table th,.sc-table td{text-align:left;padding:12px 10px;border-top:1px solid var(--sc-line);vertical-align:top}
.sc-table thead th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sc-muted);border-top:0}
.sc-table tbody th{color:#fff;font-weight:600}
.sc-table td{color:#d5def6}
.sc-notes{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:8px;font-size:13px;color:var(--sc-muted)}
.sc-notes li{padding-left:16px;position:relative;line-height:1.55}
.sc-notes li:before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--yellow,#ffcf08)}
.sc-tip{position:absolute;z-index:9;max-width:260px;padding:10px 12px;border-radius:10px;background:#fff;color:var(--ink,#0d1730);font-size:12px;line-height:1.5;box-shadow:0 18px 40px rgba(0,0,0,.35);pointer-events:none;transform:translate(-50%,calc(-100% - 14px))}
.salary-chart.show-table .sc-plot{display:none}
.salary-chart.show-table .sc-table{display:table}
.salary-chart.is-compact .sc-plot{height:300px}
.salary-chart.is-compact .sc-headline>b{font-size:52px}
@media(max-width:780px){
 .sc-head{flex-direction:column;gap:10px}.sc-chapter{padding:0}
 .sc-plot{height:320px;padding-left:52px;padding-bottom:88px}.sc-grid{left:52px;bottom:88px}.sc-avg{left:52px;bottom:calc(88px + var(--y))}
 .sc-bars{gap:12px;padding:0 4px;transform:rotateX(8deg)}
 .sc-bar{width:min(40px,70%)}.salary-chart{--sc-depth:11px}
 .sc-val{font-size:11px;padding:5px 7px;top:auto;bottom:calc(100% + var(--sc-depth) + 6px);line-height:1.2;text-align:center}.sc-to{display:block}
 .sc-label{width:100%;top:calc(100% + 12px)}.sc-label strong{font-size:11px}.sc-label small{display:none}
 .sc-legend{gap:12px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.sc-bar{transition:none;transform:translateX(-50%) scaleY(1)}.sc-val{opacity:1;transition:none}}

/* ---------- Home salary explorer ---------- */
.sx-head{max-width:1000px;margin:0 auto;text-align:center}
.sx-head .eyebrow{justify-content:center;margin-bottom:20px;font-size:13px;letter-spacing:.24em;color:#c9d6ff}
.sx-head .eyebrow>span{box-shadow:0 0 0 3px rgba(255,207,8,.2),0 0 14px rgba(255,207,8,.6)}
.salary-section .sx-head h2{margin:0;font-size:clamp(40px,5vw,78px);line-height:.94;letter-spacing:-.01em;color:#fff}
.sx-head h2 span,.sx-head h2 em{display:block}
.sx-head h2 em{color:var(--yellow);font-style:normal}
.salary-section .sx-sub{display:grid;gap:4px;margin:20px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.45}
.sx-sub strong{color:#d7e0ff;font-weight:600}
.sx-sub span{color:#9fb0dc}
.salary-explorer{position:relative;margin-top:34px}
.sx-tabs{position:relative;display:flex;justify-content:center;gap:12px;margin:0 auto 30px;padding:2px}
.sx-tab-pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--yellow);box-shadow:0 12px 30px -12px rgba(255,207,8,.75);transition:transform .55s cubic-bezier(.34,1.4,.5,1),width .45s cubic-bezier(.34,1.2,.5,1);pointer-events:none}
.sx-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 26px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:#dfe6ff;font-size:15px;font-weight:600;white-space:nowrap;transition:color .3s,border-color .3s,background .3s}
.sx-tab:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.sx-tab[aria-selected=true]{color:var(--navy);border-color:transparent;background:transparent}
.sx-tab svg,.sx-market svg{flex:0 0 auto;width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.sx-card{position:relative;padding:40px 48px 30px;border:1px solid rgba(130,165,255,.3);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 90px -60px rgba(0,0,0,.8)}
.sx-panel{display:grid;grid-template-columns:minmax(300px,.36fr) 1px minmax(0,1fr);gap:0 48px}
.sx-panel[hidden]{display:none}
.sx-panel:not([hidden]){animation:sxIn .5s var(--ease,ease) both}
.sx-summary{align-self:center;min-width:0;container-type:inline-size}
.sx-market{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb0dc}
.sx-amount{display:block;white-space:nowrap;font:800 min(clamp(56px,6.2vw,104px),calc(100cqi / (var(--chars,7) * .5)))/.9 var(--display);color:var(--yellow);letter-spacing:-.015em;font-variant-numeric:tabular-nums;text-shadow:0 12px 40px rgba(255,207,8,.2)}
.sx-amount-label{display:block;margin-top:16px;font-size:clamp(18px,1.5vw,22px);font-weight:700;line-height:1.25;color:#fff}
.sx-range{display:block;margin-top:6px;font-size:clamp(15px,1.25vw,18px);color:#9fb0dc;text-wrap:balance}
.sx-highlights{display:grid;margin:26px 0 0}
.sx-highlights>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid rgba(130,165,255,.18)}
.sx-highlights dt{min-width:0;font-size:13px;color:#9fb0dc}
.sx-highlights dd{margin:0;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-divider{background:linear-gradient(180deg,transparent,rgba(130,165,255,.3) 15%,rgba(130,165,255,.3) 85%,transparent)}
.sx-chart{display:flex;flex-direction:column;min-width:0}
.sx-plot{position:relative;height:280px;margin:28px 112px 0 calc(var(--axis,5) * 8px + 22px)}
.sx-grid{position:absolute;inset:0}
.sx-grid>span{position:absolute;left:0;right:0;bottom:var(--y);border-top:1px dashed rgba(255,255,255,.12)}
.sx-grid>span:first-child{border-top:1px solid rgba(255,255,255,.28)}
.sx-grid i{position:absolute;right:calc(100% + 14px);top:-9px;font-size:13px;font-style:normal;color:#9fb0dc;white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-avg{position:absolute;left:0;right:0;bottom:var(--y);z-index:3;border-top:2px dashed var(--yellow);transform-origin:left;transition:transform 1s cubic-bezier(.65,0,.35,1) .35s;pointer-events:none}
.sx-avg em{position:absolute;left:calc(100% + 12px);top:-11px;font:700 14px/1.4 var(--body);font-style:normal;color:var(--yellow);white-space:nowrap;transition:opacity .4s ease 1.2s}
.sx-bars{position:absolute;inset:0;display:flex;justify-content:space-around;gap:16px;padding:0 2%}
.sx-col{position:relative;flex:1 1 0;max-width:200px;height:100%}
.sx-track{position:absolute;left:50%;bottom:0;width:min(118px,64%);height:var(--low);transform:translateX(-50%);border-radius:10px 10px 0 0;background:linear-gradient(180deg,rgba(79,146,255,.16),rgba(79,146,255,.03))}
.sx-bar{position:absolute;left:50%;bottom:var(--low);width:min(118px,64%);height:var(--h);min-height:6px;overflow:hidden;transform:translateX(-50%);transform-origin:50% 100%;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,#5b9bff 0%,#2e6bff 55%,#1a4fe6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 22px 44px -18px rgba(40,110,255,.85);transition:transform .95s cubic-bezier(.22,1.25,.36,1) calc(var(--i)*120ms),filter .25s,opacity .3s}
.sx-bar.is-total{background:linear-gradient(180deg,#3f7dff 0%,#2155e0 60%,#163fb8 100%)}
.sx-bar.is-total::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--yellow)}
.sx-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%) no-repeat -150% 0/250% 100%;opacity:0}
.sx-panel.is-live .sx-bar::after{animation:sxShine 1.4s ease calc(.9s + var(--i)*120ms) 1 both}
.sx-bars:hover .sx-col:not(:hover) .sx-bar{opacity:.5}
.sx-col:hover .sx-bar{filter:brightness(1.12)}
.sx-val{position:absolute;left:50%;bottom:calc(var(--top) + 12px);width:max-content;transform:translateX(-50%);font:700 clamp(13px,1.15vw,17px)/1.15 var(--body);color:#fff;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums;transition:opacity .5s ease calc(.5s + var(--i)*120ms),transform .5s ease calc(.5s + var(--i)*120ms)}
.sx-xlabel{position:absolute;left:50%;top:calc(100% + 14px);width:max-content;max-width:170px;transform:translateX(-50%);text-align:center;font-size:clamp(13px,1.1vw,16px);line-height:1.3;color:#dfe6ff}
.sx-note{margin:74px 0 0;text-align:center;font-size:15px;line-height:1.5;color:#aebbe2}
/* Start states apply only once salary-chart.js arms the explorer, so visitors without JS see the finished chart. */
.sx-armed .sx-panel:not(.is-live) .sx-bar{transform:translateX(-50%) scaleY(0)}
.sx-armed .sx-panel:not(.is-live) .sx-val{opacity:0;transform:translate(-50%,10px)}
.sx-armed .sx-panel:not(.is-live) .sx-avg{transform:scaleX(0)}
.sx-armed .sx-panel:not(.is-live) .sx-avg em{opacity:0;transition-delay:0s}
.sx-guide-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;padding:0 20px;border-radius:999px;background:var(--yellow);color:var(--navy);font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 12px 28px -12px rgba(255,207,8,.7);transition:transform .25s var(--ease,ease),box-shadow .25s,background .25s}
.sx-guide-btn .icon{width:16px;height:16px;transition:transform .25s var(--ease,ease)}
.sx-guide-btn:hover{transform:translateY(-2px);background:var(--yellow-2,#ffdc4a);box-shadow:0 16px 32px -12px rgba(255,207,8,.85)}
.sx-guide-btn:hover .icon{transform:translateX(3px)}
.sx-guide-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.sx-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:36px;text-align:center}
.sx-guide-btn.sx-guide-pill{min-height:54px;margin-top:0;padding:0 30px;font-size:15px}
.sx-disclaimer{margin:0;font-size:12.5px;letter-spacing:.01em;color:rgba(185,198,238,.62)}
.sx-tip{position:absolute;z-index:10;max-width:260px;padding:12px 14px;border-radius:12px;background:#fff;color:var(--ink,#0d1730);font-size:13px;line-height:1.45;box-shadow:0 20px 44px rgba(0,0,0,.4);transform:translate(-50%,calc(-100% - 14px));pointer-events:none}
.sx-tip strong{display:block;font-size:14px}
.sx-tip small{display:block;margin-top:4px;font-size:12px;color:#5b6780}
@keyframes sxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sxShine{from{opacity:1;background-position:-150% 0}to{opacity:1;background-position:250% 0}}
@media(max-width:1100px){
 .sx-card{padding:32px 32px 26px}
 .sx-panel{grid-template-columns:1fr;gap:28px}
 .sx-divider{display:none}
 .sx-summary{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:end}
 .sx-summary>.sx-market,.sx-summary>.sx-amount,.sx-summary>.sx-amount-label,.sx-summary>.sx-range{grid-column:1}
 .sx-highlights{grid-column:2;grid-row:1/span 4;align-self:end;margin:0}
 .sx-guide-btn{grid-column:1;justify-self:start}
}
@media(max-width:720px){
 .sx-tabs{justify-content:flex-start;overflow-x:auto;margin:0 -16px 22px;padding:2px 16px;scrollbar-width:none}
 .sx-tabs::-webkit-scrollbar{display:none}
 .sx-tab{min-height:42px;padding:0 16px;gap:8px;font-size:14px}
 .sx-card{padding:22px 16px 20px;border-radius:18px}
 .sx-summary{display:block}
 .sx-highlights{margin-top:18px}
 .sx-guide-btn{margin-top:18px}
 .sx-foot{margin-top:28px;gap:14px}
 .sx-guide-btn.sx-guide-pill{min-height:50px;padding:0 24px;font-size:14px}
 .sx-disclaimer{font-size:12px}
 .sx-plot{height:220px;margin:40px 0 0 calc(var(--axis,5) * 6.6px + 12px)}
 .sx-grid i{right:calc(100% + 8px);font-size:11px}
 .sx-avg em{left:auto;right:0;top:-24px;padding:2px 6px;border-radius:6px;background:rgba(8,25,77,.92);font-size:12px}
 .sx-bars{gap:6px;padding:0}
 .sx-bar,.sx-track{width:72%}
 .sx-val{width:auto;min-width:64px;max-width:76px;white-space:normal;font-size:11px}
 .sx-xlabel{max-width:76px;font-size:11px}
 .sx-note{margin-top:80px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.sx-tab-pill,.sx-bar,.sx-val,.sx-avg,.sx-avg em{transition:none}.sx-panel:not([hidden]),.sx-panel.is-live .sx-bar::after{animation:none}}