:root{
  --ink:#17241F;
  --ink-soft:#3A4A43;
  --paper:#EAE6D9;
  --paper-raised:#F6F3E9;
  --accent:#2F5D50;
  --accent-soft:#DCE6DF;
  --gold:#B8912B;
  --gold-soft:#EFE3BE;
  --brick:#A23B2E;
  --brick-soft:#EFD9D3;
  --line: rgba(23,36,31,0.18);
  --line-strong: rgba(23,36,31,0.35);
  --radius: 3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
}
::selection{ background:var(--gold-soft); }
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(234,230,217,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; flex-wrap:wrap; gap:10px;
}
.wordmark{
  font-family:'Fraunces', serif; font-weight:700; font-size:22px;
  display:flex; align-items:baseline; gap:8px;
}
.wordmark .tick{ color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:14px; }
.navlinks{ display:flex; gap:22px; font-size:14px; flex-wrap:wrap; }
.navlinks a{
  color:var(--ink-soft); padding:6px 2px; border-bottom:2px solid transparent; font-size:14px;
}
.navlinks a:hover{ color:var(--ink); }
.navlinks a.active{ color:var(--ink); border-bottom-color:var(--gold); }

.breadcrumb{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);
  padding:14px 0 0; letter-spacing:.02em;
}
.breadcrumb a:hover{ color:var(--accent); }

.subnav{
  display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.subnav a{
  font-size:13px; font-family:'IBM Plex Mono', monospace; padding:7px 12px; border:1px solid var(--line-strong);
  border-radius:20px; color:var(--ink-soft);
}
.subnav a:hover{ color:var(--ink); border-color:var(--ink); }
.subnav a.active{ background:var(--ink); color:var(--paper-raised); border-color:var(--ink); }

/* ---------- hero ---------- */
.hero{ padding:64px 0 46px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--accent); display:inline-block; }
.hero h1{ font-size:clamp(30px, 5vw, 52px); line-height:1.06; max-width:820px; }
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero p.lede{ font-size:17px; color:var(--ink-soft); max-width:560px; margin-top:18px; }

.question-cycle{
  margin-top:28px; display:flex; align-items:center; gap:14px;
  font-family:'IBM Plex Mono', monospace; font-size:15px; flex-wrap:wrap;
}
.question-cycle .q-label{ color:var(--ink-soft); white-space:nowrap; }
.question-cycle .q-text{
  color:var(--ink); font-weight:500; min-height:22px;
  border-bottom:1px dashed var(--line-strong); padding-bottom:6px; min-width:260px;
}
.question-cycle .q-text::after{ content:'|'; margin-left:2px; animation:blink 1s step-start infinite; color:var(--gold); }
@keyframes blink{ 50%{opacity:0;} }

/* ---------- grid / cards ---------- */
.section-label{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:22px;
}
.tool-card{
  background:var(--paper-raised); padding:24px 20px; cursor:pointer;
  transition:background .15s ease; display:flex; flex-direction:column; gap:12px; text-align:left;
  border:none; width:100%;
}
.tool-card:hover{ background:var(--accent-soft); }
.tool-card .no{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold); letter-spacing:.08em; }
.tool-card .ic{ font-size:24px; }
.tool-card h3{ font-size:18px; font-weight:600; }
.tool-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* ---------- page/tool head ---------- */
.page{ padding:36px 0 90px; }
.tool-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:18px 0 30px; }
.tool-head h2{ font-size:clamp(24px,3.2vw,34px); }
.tool-head .sub{ color:var(--ink-soft); font-size:15px; max-width:540px; margin-top:8px; }

.tool-body{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media (max-width: 820px){ .tool-body{ grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; margin-bottom:6px; color:var(--ink); }
.field .hint{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.field input, .field select{
  width:100%; padding:11px 12px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper-raised); font-family:'IBM Plex Mono', monospace; font-size:14.5px; color:var(--ink);
}
.field input:focus, .field select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.compute-btn{
  margin-top:8px; background:var(--ink); color:var(--paper-raised); border:none; border-radius:var(--radius);
  padding:13px 22px; font-size:14px; font-weight:600; cursor:pointer; letter-spacing:.02em;
  font-family:'IBM Plex Sans',sans-serif;
}
.compute-btn:hover{ background:var(--accent); }

.job-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:520px){ .job-cols{ grid-template-columns:1fr; } }
.job-col{ border:1px solid var(--line); padding:16px; border-radius:var(--radius); background:var(--paper-raised); }
.job-col h4{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }

/* ---------- receipt / result panel ---------- */
.receipt{
  background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:26px 24px; position:sticky; top:90px;
}
.receipt .placeholder{ color:var(--ink-soft); font-size:14px; font-style:italic; }
.receipt-title{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px dashed var(--line-strong); padding-bottom:12px; margin-bottom:14px;
  display:flex; justify-content:space-between;
}
.line-item{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px dotted var(--line); font-size:14px; }
.line-item .val{ font-family:'IBM Plex Mono', monospace; font-weight:600; }
.line-item.total{ font-size:16px; margin-top:6px; padding-top:12px; border-top:1px solid var(--line-strong); border-bottom:none; }
.line-item.total .val{ font-size:19px; }
.line-item.neg .val{ color:var(--brick); }
.line-item.pos .val{ color:var(--accent); }

.stamp{
  display:inline-block; margin-top:18px; padding:8px 16px; border:2px solid currentColor; border-radius:2px;
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  transform:rotate(-2deg);
}
.stamp.good{ color:var(--accent); background:var(--accent-soft); }
.stamp.warn{ color:var(--gold); background:var(--gold-soft); }
.stamp.bad{ color:var(--brick); background:var(--brick-soft); }
.receipt .note{ font-size:12.5px; color:var(--ink-soft); margin-top:16px; line-height:1.5; }

.career-card{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-top:10px; background:var(--paper); }
.career-card .t{ font-weight:600; font-size:14.5px; display:flex; justify-content:space-between; }
.career-card .range{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent); }
.career-card .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
.career-card .skills{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-size:11px; font-family:'IBM Plex Mono',monospace; background:var(--accent-soft); color:var(--accent); padding:2px 8px; border-radius:10px; display:inline-block; }
.chip.clickable{ cursor:pointer; }
.chip.clickable:hover{ background:var(--gold-soft); color:var(--gold); }

/* ---------- data table (jobs/salary database, explorer) ---------- */
.data-table-wrap{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-raised); }
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.data-table th, table.data-table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
table.data-table th{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); background:var(--paper); cursor:pointer; user-select:none;
}
table.data-table th:hover{ color:var(--accent); }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr.rowlink{ cursor:pointer; }
table.data-table tr.rowlink:hover{ background:var(--accent-soft); }
table.data-table td.range{ font-family:'IBM Plex Mono',monospace; color:var(--accent); }

.search-row{ display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.search-row input, .search-row select{
  padding:11px 12px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper-raised); font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--ink);
}
.search-row input{ flex:1; min-width:200px; }

.job-detail-card{ background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:var(--radius); padding:28px; }
.job-detail-card h2{ font-size:26px; margin-bottom:6px; }
.job-detail-card .range{ font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:18px; margin-bottom:18px; }
.cta-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.cta-row a{
  border:1px solid var(--ink); border-radius:var(--radius); padding:10px 16px; font-size:13px;
  font-family:'IBM Plex Mono',monospace;
}
.cta-row a:hover{ background:var(--ink); color:var(--paper-raised); }

/* ---------- paycheck calculator extras ---------- */
.big-take-home{ font-family:'Fraunces', serif; font-size:38px; font-weight:700; color:var(--accent); margin:2px 0 0; line-height:1; }
.big-take-home-sub{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); margin-top:6px; text-transform:uppercase; letter-spacing:.06em; }

.expand-toggle{
  cursor:pointer; color:var(--accent); font-family:'IBM Plex Mono', monospace; font-size:13px;
  text-decoration:underline dotted; margin:6px 0 14px; display:inline-block;
}
.other-deductions{ display:none; padding:4px 0 6px; }

.money-bar{ display:flex; height:32px; width:100%; border-radius:4px; overflow:hidden; border:1px solid var(--line-strong); margin-top:10px; }
.money-bar-seg{ height:100%; }
.legend-list{ margin-top:12px; }
.legend-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:4px 0; color:var(--ink-soft); }
.legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; }

.connect-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius);
  padding:12px 16px; font-size:13.5px; margin-bottom:6px;
}
.radio-row{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px; }
.radio-row label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.radio-row input{ width:auto; }

.view-toggle{ display:flex; gap:0; border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; width:fit-content; margin-bottom:14px; }
.view-toggle button{
  background:none; border:none; padding:7px 16px; font-size:12.5px; font-family:'IBM Plex Mono', monospace;
  cursor:pointer; color:var(--ink-soft);
}
.view-toggle button.active{ background:var(--ink); color:var(--paper-raised); }

.chips-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chips-row .chip{
  font-size:12px; font-family:'IBM Plex Mono',monospace; padding:6px 12px; border-radius:14px;
  background:var(--accent-soft); color:var(--accent); display:inline-block;
}
a.chip:hover{ background:var(--gold-soft); color:var(--gold); }

.progress-bar-outer{ background:var(--paper); border:1px solid var(--line-strong); border-radius:20px; height:14px; overflow:hidden; margin:10px 0; }
.progress-bar-inner{ background:var(--accent); height:100%; border-radius:20px 0 0 20px; transition:width .3s ease; }

.quick-answer{
  background:var(--gold-soft); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;
  padding:12px 16px; font-size:14px; color:var(--ink); margin-top:16px; max-width:640px;
}

.badge-accuracy{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft);
  border:1px solid var(--line-strong); border-radius:20px; padding:7px 14px;
}

.compare-box{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--line-strong); }

footer{ border-top:1px solid var(--line); padding:34px 0 60px; margin-top:20px; }
footer p{ font-size:12.5px; color:var(--ink-soft); max-width:640px; }
footer .fnav{ display:flex; gap:18px; margin-bottom:16px; flex-wrap:wrap; font-size:13px; }
footer .fnav a:hover{ color:var(--accent); }