/* =====================================================================
   SalaryTruth theme v2 — loaded AFTER each page's own <style>.
   Language: neutral canvas, near-monochrome, weight 500, tight tracking,
   hairline-ring cards, pill buttons, one restrained accent.
   ===================================================================== */
:root{
  --bg:#F2F2F2; --bg2:#fff; --tray:#E9E9E9;
  --tx:#0A0A0A; --tx1:#0A0A0A; --tx2:rgba(0,0,0,.68); --tx3:rgba(0,0,0,.48);
  --brd:rgba(0,0,0,.07);
  --ring:0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04);
  --ring-hover:0 0 0 1px rgba(0,0,0,.06),0 14px 34px -14px rgba(0,0,0,.20);
  --ink:#0A0A0A; --ink-hover:#262626;
  --ease:cubic-bezier(.22,.7,.2,1);
  --r-card:14px; --r-tray:18px;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--tx);letter-spacing:-.011em;font-feature-settings:"cv11","ss01","ss03"}
::selection{background:rgba(34,101,255,.16)}

/* ---------- Type scale: 58 / 40 / 22 / 16 / 14 / 12, weight 500 ---------- */
h1,h2,h3,h4{font-weight:500;color:var(--tx);letter-spacing:-.04em}
.hero h1,.st-ph-title,.article-hero h1,main h1{font-size:clamp(34px,5.2vw,58px)!important;line-height:1.08!important;font-weight:500!important;letter-spacing:-.055em!important}
.st-ph-title{font-size:clamp(28px,3.6vw,40px)!important}
.section-title,.article-body h2,.st-section-block h2,.section-h2{font-size:clamp(26px,3.2vw,36px)!important;line-height:1.15!important;font-weight:500!important;letter-spacing:-.045em!important;color:var(--tx)!important}
.article-body h3,.tool-card h2,.related-card h3,.how-card h3,.value-card h2{font-size:18px!important;font-weight:500!important;letter-spacing:-.03em!important;line-height:1.3!important}
p,li{letter-spacing:-.011em}
.hero-sub,.section-sub,.article-hero .lead,.st-ph-sub,.lead{font-size:17px!important;line-height:1.6!important;color:var(--tx2)!important;font-weight:400!important}
.article-body p,.article-body li,.st-info-col p,.st-info-col li{font-size:16px;line-height:1.75;color:var(--tx2)}
strong,b{font-weight:600}
.hero h1 span{color:rgba(0,0,0,.42)!important}

/* section rhythm: centred head, generous air */
.section-title{text-align:center;margin:0 auto 10px!important}
.section-sub{text-align:center;max-width:560px;margin:0 auto 36px!important}
main > section,.st-section-block{margin-top:88px}
.sx-eyebrow{display:table;margin:0 auto 16px;padding:5px 12px;border-radius:999px;background:var(--tray);font-size:13px;font-weight:500;color:var(--tx);letter-spacing:-.01em}

/* ---------- Cards: white, hairline ring, no borders ---------- */
.tool-card,.how-card,.related-card,.st-card,.st-res-card,.value-card,.tool-row,.article-toc,.faq-list,.founder-card,.pg-1.st-card{
  background:#fff!important;border:0!important;border-radius:var(--r-card)!important;box-shadow:var(--ring)!important;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)!important}
a.tool-card:hover,a.related-card:hover,a.st-res-card:hover,a.tool-row:hover{transform:translateY(-3px)!important;box-shadow:var(--ring-hover)!important}
.tool-card{padding:24px!important}
.tool-card p{font-size:14px!important;color:var(--tx2)!important}
.tool-card-icon,.st-ph-icon,.sx-mi-ic{background:var(--bg)!important;color:var(--tx)!important;border-radius:10px!important}
.tool-card-kws{display:none!important}
.tool-card-badge,.tool-card-badge.hot{background:var(--bg)!important;color:var(--tx2)!important;border:0!important;font-weight:500!important;font-size:11px!important;padding:4px 9px!important}
.tool-arrow{color:var(--tx3)!important;transition:transform .45s var(--ease),color .3s}
a.tool-card:hover .tool-arrow{transform:translateX(3px);color:var(--tx)!important}

/* grouped cards sit in a grey tray */
.tools-grid,.how-grid,.related-grid,.values-grid{background:var(--tray);border-radius:var(--r-tray);padding:6px!important;gap:6px!important}

/* card headers: quiet, sentence case */
.st-card-h{border-bottom:1px solid rgba(0,0,0,.05)!important;padding:14px 20px!important}
.st-card-hl{text-transform:none!important;letter-spacing:-.01em!important;font-size:14px!important;font-weight:500!important;color:var(--tx)!important}

/* metric tiles */
.st-mc{background:var(--bg)!important;border-radius:12px!important}
.st-ml{text-transform:none!important;letter-spacing:-.01em!important;font-size:12px!important;font-weight:500!important;color:var(--tx3)!important}
.st-mv{font-weight:500!important;letter-spacing:-.035em!important;font-size:22px!important}
.st-mv.hi{color:var(--b600)!important}

/* ---------- Buttons: pills ---------- */
.st-btn,.sx-cta,.article-tool-cta a,.hero .st-btn{
  background:var(--ink)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:500!important;
  font-size:15px!important;letter-spacing:-.01em!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.2)!important;
  transition:background .25s var(--ease),transform .25s var(--ease)!important}
.st-btn:hover,.sx-cta:hover,.article-tool-cta a:hover{background:var(--ink-hover)!important}
.st-btn:active{transform:scale(.985)!important}
.st-btn-out{background:#fff!important;color:var(--tx)!important;box-shadow:var(--ring)!important}
.sx-cta{padding:9px 18px!important;font-size:14px!important}

/* ---------- Inputs & toggles ---------- */
.st-iw{background:#fff!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)!important;border-radius:12px!important;transition:box-shadow .2s var(--ease)!important}
.st-iw:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(0,0,0,.06)!important}
.st-iw input::placeholder{color:rgba(0,0,0,.3)!important}
.st-field label{font-weight:500!important;color:var(--tx)!important;letter-spacing:-.01em}
.st-tg{background:var(--bg);padding:4px;border-radius:12px;gap:4px!important}
.st-tgb{background:transparent!important;border:0!important;border-radius:9px!important;font-weight:500!important;color:var(--tx2)!important;transition:background .25s var(--ease),color .25s,box-shadow .25s!important}
.st-tgb.on{background:#fff!important;color:var(--tx)!important;box-shadow:var(--ring)!important}
select{border-radius:12px}

/* ---------- Hero ---------- */
.hero{padding:72px 20px 40px!important;max-width:760px!important}
.hero-badge{background:#fff!important;color:var(--tx)!important;border:0!important;box-shadow:var(--ring)!important;font-weight:500!important}
.trust-row{color:var(--tx3)!important}
.trust-row span::before{color:var(--tx)!important}

/* ---------- FAQ ---------- */
.faq-list{padding:4px 22px}
.faq-item{border-bottom:1px solid rgba(0,0,0,.06)!important;border-top:0!important;padding:18px 0!important}
.faq-item:last-child{border-bottom:0!important}
.faq-q{font-weight:500!important;font-size:16px!important;letter-spacing:-.02em}
.faq-a{font-size:15px!important;line-height:1.7!important}

/* ---------- Nav & footer in the new language ---------- */
.sx-nav{background:rgba(242,242,242,.82)!important;border-bottom:0!important}
.sx-nav.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.06)}
.sx-link{color:var(--tx)!important;font-weight:500!important}
.sx-link:hover,.sx-dd.open .sx-dd-btn{background:rgba(0,0,0,.05)!important;color:var(--tx)!important}
.sx-link.active{color:var(--tx)!important;background:rgba(0,0,0,.05)!important}
.sx-mega{border:0!important;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 60px -18px rgba(0,0,0,.25)!important}
.sx-mi.active{background:var(--bg)!important}
.sx-logo-dot{box-shadow:none!important}
.sx-foot{background:transparent!important;color:var(--tx2)!important;margin-top:96px!important}
.sx-foot-in{border-top:1px solid rgba(0,0,0,.07)}
.sx-foot .sx-logo,.sx-fh,.sx-fmade a{color:var(--tx)!important}
.sx-fh{text-transform:none!important;letter-spacing:-.01em!important;font-weight:500!important;font-size:14px!important}
.sx-fcol a{color:var(--tx2)!important}
.sx-fcol a:hover{color:var(--tx)!important}
.sx-fbar{color:var(--tx3)!important;border-top:1px solid rgba(0,0,0,.07)!important}
.st-cluster-bar{background:transparent!important;border-top:1px solid rgba(0,0,0,.07)!important}

/* pills used in link rows */
.st-pill,.st-pill-sm{background:#fff!important;border:0!important;box-shadow:var(--ring)!important;color:var(--tx)!important;font-weight:500!important;transition:box-shadow .3s var(--ease),transform .3s var(--ease)!important}
.st-pill:hover,.st-pill-sm:hover{transform:translateY(-1px);box-shadow:var(--ring-hover)!important}
.st-pill-active{background:var(--ink)!important;color:#fff!important;border:0!important}

/* ---------- Scroll reveal (only when JS has opted in) ---------- */
.sx-js .sx-rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sx-js .sx-rv.sx-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sx-js .sx-rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}
@media(max-width:700px){
  main > section,.st-section-block{margin-top:64px}
  .hero{padding:48px 16px 28px!important}
}

/* homepage privacy panel */
.privacy-bar{background:#fff!important;border:0!important;box-shadow:var(--ring)!important;border-radius:var(--r-card)!important}
.privacy-bar-icon{background:var(--bg)!important;color:var(--tx)!important}
.privacy-bar-t{color:var(--tx)!important;font-weight:500!important}
.ppill{background:var(--bg)!important;color:var(--tx2)!important;border:0!important;font-weight:500!important}
.how-num{background:var(--ink)!important;color:#fff!important;font-weight:500!important}
.privacy-bar-s{color:var(--tx2)!important}
.how-card p{font-size:14px!important;color:var(--tx2)!important}

/* quiet labels: sentence case, no shouting */
.st-section-label,.text-label3,.st-ml,.article-toc-title,.related-card-tag,.offer-label,.metric-lbl{text-transform:none!important;letter-spacing:-.01em!important;font-weight:500!important;font-size:13px!important;color:var(--tx3)!important}
.st-divider{background:rgba(0,0,0,.06)!important}
/* tips & cross-links: neutral surfaces */
.st-tip{background:#fff!important;border:0!important;box-shadow:var(--ring)!important}
.st-tip-t{color:var(--tx)!important;font-weight:500!important;font-size:14px!important}
.st-tip-tx{color:var(--tx2)!important;font-size:14px!important}
.st-xlink{background:transparent!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)!important;border-radius:var(--r-card)!important;transition:background .3s var(--ease)}
.st-xlink:hover{background:#fff!important}
.st-xlink a{color:var(--tx)!important;font-weight:500!important}
.st-ph-icon{background:#fff!important;box-shadow:var(--ring)!important}
/* article callouts */
.highlight,.warning,.formula{border-radius:12px!important;border:0!important;box-shadow:var(--ring)!important}
.highlight{background:#fff!important}
.formula{background:var(--tray)!important;color:var(--tx)!important;font-weight:500!important}
.article-tool-cta{background:var(--ink)!important;border:0!important;border-radius:var(--r-tray)!important}
.article-tool-cta h3,.article-tool-cta p{color:#fff!important}
.article-tool-cta p{opacity:.72}
.article-tool-cta a{background:#fff!important;color:var(--ink)!important}
.article-eeat{background:#fff!important;border:0!important;box-shadow:var(--ring)!important;border-radius:var(--r-card)!important}
.article-eeat-av{background:var(--ink)!important;color:#fff!important}
.article-tag,.article-eeat-badge{background:var(--tray)!important;color:var(--tx)!important;border:0!important;font-weight:500!important}
table th{text-transform:none!important;letter-spacing:-.01em!important;font-weight:500!important}
/* guides: "Quick answers" label inside the article header only */
.article-hero .pg-1 > .pg-2{text-transform:none!important;letter-spacing:-.01em!important;font-weight:500!important;font-size:14px!important;color:var(--tx)!important}
.article-hero .pg-1{background:#fff!important;border:0!important;box-shadow:var(--ring)!important}
@media(max-width:900px){.sx-nav{background:#F2F2F2!important}.sx-links{background:#F2F2F2!important}}

/* ---------- Content tables: card, airy rows, aligned figures ---------- */
.st-tbl,.article-body table,.st-info-col table,.st-section-block table:not(.cmp){
  width:100%;border-collapse:separate!important;border-spacing:0;background:#fff;border-radius:var(--r-card);
  box-shadow:var(--ring);overflow:hidden;margin:20px 0 24px;font-size:15px;font-variant-numeric:tabular-nums}
.st-tbl th,.st-tbl td,.article-body table th,.article-body table td,.st-info-col table th,.st-info-col table td,.st-section-block table:not(.cmp) th,.st-section-block table:not(.cmp) td{
  padding:14px 20px!important;text-align:left;border:0!important;border-bottom:1px solid rgba(0,0,0,.06)!important;background:transparent!important;color:var(--tx)}
.st-tbl thead th,.article-body table thead th,.st-info-col table thead th,.st-section-block table:not(.cmp) thead th{
  background:#FAFAFA!important;color:var(--tx3)!important;font-size:13px!important;font-weight:500!important}
.st-tbl tr:last-child td,.article-body table tr:last-child td,.st-info-col table tr:last-child td,.st-section-block table:not(.cmp) tr:last-child td{border-bottom:0!important}
/* data tables (with a header row): numbers right-aligned */
table:has(thead) th:not(:first-child),table:has(thead) td:not(:first-child),.st-tbl:has(thead) th:not(:first-child),.st-tbl:has(thead) td:not(:first-child){text-align:right!important}
table:has(thead) tbody tr{transition:background .2s var(--ease)}
table:has(thead) tbody tr:hover{background:#FAFAFA}
.overflow-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.overflow-x > table{min-width:420px}

/* headings inside content sections: same voice as the rest */
.st-section-block h3,.st-info-col h3,main h3{font-size:22px!important;font-weight:500!important;letter-spacing:-.035em!important;line-height:1.25!important;margin:48px 0 4px!important;color:var(--tx)!important}
.st-section-block p + .overflow-x,.st-section-block h3 + .overflow-x{margin-top:16px}
.overflow-x + p{margin-top:4px;color:var(--tx2);font-size:15px;line-height:1.7}

/* ---------- FAQ breathing room ---------- */
#faq,.section-title#faq{margin-top:96px!important}
.faq-list{margin-top:8px!important;padding:6px 28px!important}
.faq-item{padding:22px 0!important}
.faq-q{gap:20px!important;line-height:1.45!important}
.faq-a{margin-top:12px!important;max-width:680px}
.faq-chevron{flex-shrink:0;color:var(--tx3);transition:transform .35s var(--ease)!important}
@media(max-width:700px){.faq-list{padding:2px 18px!important}.faq-item{padding:18px 0!important}#faq{margin-top:72px!important}
  .st-tbl th,.st-tbl td,.article-body table td,.article-body table th{padding:12px 14px!important}}

/* ---------- No brand blue: tokens remapped to ink & neutrals ---------- */
:root{
  --b50:#F4F4F4;--b100:#E6E6E6;--b200:#D4D4D4;--b400:#525252;--b600:#0A0A0A;--b800:#262626;--b900:#000;
  --blu:#0A0A0A;--blubg:#F4F4F4;--blubrd:#E6E6E6;--blutx:#0A0A0A;
}
a{color:var(--tx)}
.article-body a,.st-info-col a,.st-section-block p a,.faq-a a,.lead a,.st-tip-tx a,.sx-fmade a{
  color:var(--tx)!important;text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .25s}
.article-body a:hover,.st-info-col a:hover,.st-section-block p a:hover,.faq-a a:hover{text-decoration-color:var(--tx)}


/* ---------- Result numbers: big, calm, ink ---------- */
#hero,.salary-result-amount,#r-exempt-m,#r-tds-m,#r-newbasic,#r-bonus-net,#r-equiv-salary,#r-inhand,.metric-val,.verdict-title{
  color:var(--tx)!important;font-weight:500!important;letter-spacing:-.05em!important;font-variant-numeric:tabular-nums}
#hero,.salary-result-amount{font-size:clamp(44px,6vw,64px)!important;line-height:1.05!important}
.st-mv,.st-mv.hi{color:var(--tx)!important}

/* ---------- Rollout fixes ---------- */
/* thick accent borders (were blue, now would be black) → hairline rings */
.salary-result-card,.offer-card,.offer-card.new-offer,.offer-card.current{border:0!important;box-shadow:var(--ring)!important;border-radius:var(--r-card)!important}
.offer-card.new-offer{box-shadow:0 0 0 1.5px var(--ink)!important}
.salary-hero,.about-hero{background:transparent!important;border:0!important;padding-left:0!important;padding-right:0!important}
.salary-result-label,.salary-result-sub{color:var(--tx3)!important}
/* every page title in the same voice, whatever local class it carries */
h1{font-weight:500!important;letter-spacing:-.05em!important;line-height:1.08!important;color:var(--tx)!important}
/* subtitles align with their heading: centred only under centred section titles */
.section-h2 + .section-sub,.section-h2 ~ .section-sub{text-align:left!important;margin-left:0!important}
.section-h2{text-align:left}
/* semantic tiles (deductions) softened to neutral with a red figure only */
.salary-breakdown-item.bg-red{background:#fff!important;box-shadow:var(--ring)!important}
.salary-breakdown-item{border-radius:12px!important;border:0!important}
.salary-breakdown-label,.c-redtx{text-transform:none!important;letter-spacing:-.01em!important;font-weight:500!important}

/* ---------- Line icons replacing emoji ---------- */
.sx-ico{display:inline-block;vertical-align:-3px;flex-shrink:0;color:currentColor}
.fs-18 .sx-ico,.st-tip > span .sx-ico{width:20px;height:20px;color:var(--tx)}
.value-icon .sx-ico{width:22px;height:22px}
.verdict-emoji{display:flex;justify-content:center;color:var(--tx)}
.checklist .icon .sx-ico{width:18px;height:18px;color:var(--tx2)}
.sx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.sx-dot-r{background:#DC2626}.sx-dot-a{background:#D97706}.sx-dot-g{background:#16A34A}

/* =========== STRICT RULE 1: no bold anywhere =========== */
body *{font-weight:500!important}
body p,body li,body dd,.faq-a,.st-fd,.text-sm,.st-ms,.hero-sub,.section-sub,.lead,input,textarea,select,option,.sx-mi-d,.sx-ex-tl{font-weight:400!important}
/* hierarchy comes from size & colour instead */
.st-result-title{font-size:20px!important;letter-spacing:-.035em!important}
.st-section-h{font-size:15px!important;color:var(--tx)!important}
.salary-breakdown-value{letter-spacing:-.03em!important}

/* =========== STRICT RULE 2: nothing touches — consistent vertical rhythm =========== */
main .st-btn{margin-bottom:28px!important}
.st-cta-block{margin-top:16px!important;margin-bottom:8px!important}
#results,#res{margin-top:8px}
.verdict-box,.metrics-row,.offer-grid,.mode-toggle,.st-card,.st-mgrid,.st-tip,.st-xlink,.notice,.salary-result-card,.salary-breakdown-grid,.st-res-card{margin-bottom:20px!important}
.st-tgrid{gap:28px!important}
.metrics-row,.st-mgrid,.offer-grid{gap:12px!important}
.st-card-b{padding:22px 24px!important}
.st-res-card,.metric-card,.st-mc{padding:20px 22px!important}

/* verdict: neutral card, colour only as a small status bar */
.verdict-box,.verdict-box.accept,.verdict-box.reject,.verdict-box.neutral{background:#fff!important;border:0!important;box-shadow:var(--ring)!important;border-radius:var(--r-card)!important;padding:36px 32px!important;position:relative;overflow:hidden}
.verdict-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tx3)}
.verdict-box.accept::before{background:#16A34A}.verdict-box.reject::before{background:#DC2626}.verdict-box.neutral::before{background:#D97706}
.verdict-title{font-size:26px!important;color:var(--tx)!important;margin:10px 0 6px!important}
.verdict-sub{color:var(--tx2)!important;max-width:620px;margin:0 auto}
