.salary-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; gap: 1.5rem; }
.salary-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.salary-inputs .calculator-field__control input { min-width: 0; }
.salary-inputs .calculator-field__control select { width: 100%; max-width: 100%; padding: 0.4rem 0; background: transparent; color: var(--ink); font: inherit; border: 0; }
.salary-inputs .salary-help { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.65; }
.salary-check { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0; font-size: 0.93rem; font-weight: 700; cursor: pointer; }
.salary-check input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.salary-check small { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.78rem; font-weight: 400; line-height: 1.6; }
.salary-credits { display: grid; gap: 0.7rem; min-width: 0; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line); }
.salary-credits legend { padding: 0 0.65rem 0 0; font-size: 0.78rem; font-weight: 800; }
.salary-credits:disabled { opacity: 0.5; }
.salary-options { border-top: 1px solid var(--line); padding-top: 1rem; }
.salary-options summary { font-size: 0.9rem; font-weight: 750; cursor: pointer; }
.salary-options[open] summary { margin-bottom: 0.7rem; }
.salary-results { display: grid; gap: 1.25rem; min-width: 0; }
.salary-takehome { padding: clamp(1.35rem, 3vw, 2.3rem); color: #fff; background: #111; border-radius: 0.76rem; }
.salary-takehome .salary-kicker { margin: 0 0 1rem; color: #ccc; font-size: 0.8rem; letter-spacing: 0.06em; font-weight: 750; text-transform: uppercase; }
.salary-takehome__value { display: block; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1.12; overflow-wrap: anywhere; }
.salary-takehome > p:not(.salary-kicker) { margin: 0.6rem 0 0; font-size: 0.83rem; color: #bbb; }
.salary-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #444; }
.salary-rate-grid span { display: block; margin-bottom: 0.3rem; color: #bbb; font-size: 0.75rem; }
.salary-rate-grid output { font-size: 1.04rem; font-weight: 700; overflow-wrap: anywhere; }
.salary-breakdown dl, .salary-company dl { margin: 0; }
.salary-breakdown__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.salary-breakdown__row:last-child { border-bottom: 0; }
.salary-breakdown__row dt { color: var(--muted); font-size: 0.83rem; line-height: 1.55; }
.salary-breakdown__row dd { margin: 0; text-align: right; font-size: 0.94rem; font-weight: 750; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.salary-bar { display: flex; height: 0.55rem; margin: 1.5rem 0 0.65rem; overflow: hidden; border-radius: 2rem; }
.salary-bar span { transition: width 180ms ease; }
.salary-bar [data-salary-bar="net"] { background: #739d81; }
.salary-bar [data-salary-bar="social"] { background: #697c99; }
.salary-bar [data-salary-bar="health"] { background: #bca873; }
.salary-bar [data-salary-bar="tax"] { background: #b57d78; }
.salary-warning { margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid #bca873; border-radius: 0.35rem; color: var(--ink); background: var(--blue-wash); font-size: 0.82rem; line-height: 1.65; }
.salary-warning[hidden] { display: none; }
.salary-company { margin-top: 1.5rem; }
.salary-company__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; padding-top: 1.2rem; }
.salary-company__total span { display: block; margin-bottom: 0.65rem; color: var(--muted); font-size: 0.9rem; }
.salary-company__total output { display: block; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 750; letter-spacing: -0.05em; overflow-wrap: anywhere; }
.salary-year { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; margin-top: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.salary-year h2 { margin: 0; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1.65rem; letter-spacing: -0.04em; }
.salary-year p:not(.eyebrow) { max-width: 37rem; color: var(--muted); font-size: 0.83rem; line-height: 1.7; }
.salary-year__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.salary-year__metrics span { display: block; color: var(--muted); font-size: 0.83rem; margin-bottom: 0.6rem; }
.salary-year__metrics output { display: block; font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 750; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.salary-calculator .calculator-disclaimer { margin-top: 2rem; }
.salary-calculator :is(input, select, summary, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 850px) {
  .salary-layout { grid-template-columns: 1fr; }
  .salary-company__grid, .salary-year { grid-template-columns: 1fr; gap: 1.25rem; }
  .salary-takehome__value { font-size: clamp(2.3rem, 9vw, 3.5rem); }
}
@media (max-width: 420px) {
  .salary-rate-grid, .salary-year__metrics { grid-template-columns: 1fr; }
  .salary-heading { align-items: flex-start; }
  .salary-breakdown__row { gap: 0.7rem; flex-wrap: wrap; }
  .salary-breakdown__row dd { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .salary-bar span { transition: none; } }