:root {
  color-scheme:light;
  --paper:#f7f8f2;
  --ink:#263f33;
  --muted:#566555;
  --sage:#668451;
  --line:#d5ddce;
  --light:#edf1e4;
  --orange:#ad542d}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:20px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 Arial,Helvetica,sans-serif}
button,input,select {
  font:inherit}
button,select,input[type=range] {
  cursor:pointer}
a {
  color:inherit;
  text-underline-offset:3px}
button:disabled,select:disabled {
  cursor:wait}
button {
  color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--sage);
  outline-offset:4px}
h1,h2,h3,p,figure {
  margin:0}
h1,h2,.budget-result>strong {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400}
h2 {
  font-size:clamp(30px,3.3vw,43px);
  line-height:1.16;
  letter-spacing:-.035em}
h3 {
  font-size:16px;
  line-height:1.3}
.col-page {
  max-width:1280px;
  margin:auto;
  padding:65px clamp(20px,4vw,54px) 65px}
.eyebrow {
  font-size:11px;
  font-family:Arial,sans-serif;
  font-weight:600;
  letter-spacing:.15em;
  line-height:1.5;
  color:var(--sage);
  margin-bottom:13px}
.col-hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:70px;
  align-items:center}
.col-hero h1 {
  font-size:clamp(47px,5.7vw,76px);
  line-height:1.02;
  letter-spacing:-.055em}
.col-hero h1 em {
  color:var(--sage);
  font-weight:400}
.lead {
  max-width:43ch;
  color:var(--muted);
  font-size:18px;
  margin-top:23px}
.source-note {
  font-size:12px;
  color:var(--muted);
  margin-top:22px}
.jump-link {
  display:inline-block;
  font-size:14px;
  font-weight:600;
  margin-top:19px;
  text-decoration:none;
  border-bottom:1px solid var(--sage);
  padding-bottom:3px}
.jump-link span {
  margin-left:14px}
.section-block {
  margin-top:66px;
  scroll-margin-top:30px}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:end;
  margin-bottom:23px}
.section-heading>.eyebrow {
  margin-bottom:10px}
.section-heading>p {
  font-size:14px;
  color:var(--muted);
  text-align:right}
.compare-panel,.explore-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px}
.compare-controls {
  display:grid;
  grid-template-columns:1fr 36px 1fr 1fr;
  align-items:end;
  gap:15px}
label {
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:600}
select,input[type=search] {
  display:block;
  border:1px solid #cbd6c5;
  background:#fafbf6;
  color:var(--ink);
  border-radius:5px;
  width:100%;
  min-height:43px;
  padding:9px 11px;
  margin-top:7px;
  font-size:14px}
select {
  padding-right:22px}
.swap {
  background:var(--light);
  border:1px solid var(--line);
  border-radius:50%;
  font-size:24px;
  width:36px;
  height:36px;
  margin-bottom:4px;
  line-height:1}
.budget-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:31px;
  padding-bottom:27px;
  border-bottom:1px solid var(--line)}
.budget-input {
  padding:9px 0}
.money-input {
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  margin:8px 0 15px;
  font-size:34px;
  max-width:290px;
  color:var(--ink)}
.money-input input {
  font-family:Georgia,serif;
  font-size:42px;
  background:none;
  border:0;
  color:inherit;
  width:100%;
  padding:0 0 2px 8px;
  min-width:0}
.budget-input input[type=range] {
  width:100%;
  accent-color:var(--sage);
  margin:0 0 12px;
  min-height:24px}
.fine {
  font-size:12px;
  line-height:1.55;
  color:var(--muted)}
.budget-result {
  background:var(--light);
  border-radius:5px;
  padding:23px 26px}
.budget-result>p:first-child {
  font-size:13px}
.budget-result>strong {
  display:block;
  font-size:56px;
  line-height:1.15;
  letter-spacing:-.04em;
  margin:9px 0}
.budget-result>p {
  font-size:14px}
.equation {
  font-size:11px;
  border-top:1px solid #cfd9c4;
  margin-top:19px;
  padding-top:12px;
  color:var(--muted)}
.category-comparison {
  margin-top:24px}
.mini-heading {
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:center}
.mini-heading h3 {
  font-size:14px}
.mini-heading>div {
  display:flex;
  gap:16px;
  font-size:11px}
.legend-dot {
  width:9px;
  height:9px;
  display:inline-block;
  margin-right:5px;
  background:var(--ink);
  border-radius:50%}
.legend-dot.second {
  background:#8d9f6d}
.category-row {
  display:grid;
  grid-template-columns:110px 1fr 1fr;
  gap:18px;
  align-items:center;
  margin-top:15px;
  font-size:12px}
.category-row strong {
  font-weight:400;
  font-variant-numeric:tabular-nums}
.category-value {
  display:grid;
  grid-template-columns:1fr 43px;
  gap:10px;
  align-items:center}
.category-value .track {
  height:7px;
  background:#eef1e9;
  position:relative}
.category-value .track:after {
  content:'';
  position:absolute;
  left:var(--baseline);
  top:-2px;
  height:11px;
  border-left:1px solid #b7c1b0}
.category-value .bar {
  display:block;
  height:7px;
  background:var(--ink)}
.category-value.second .bar {
  background:#8d9f6d}
.category-comparison>.fine {
  margin-top:17px}
.explore-controls {
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:25px}
.explore-panel>#ranking-context {
  margin:20px 0 15px}
.ranking-header,.state-row {
  display:grid;
  grid-template-columns:minmax(140px,1fr) 1.6fr 83px;
  gap:23px;
  align-items:center}
.ranking-header {
  font-size:9px;
  letter-spacing:.1em;
  color:var(--muted);
  padding:0 0 12px;
  border-bottom:1px solid var(--line)}
.ranking-header span:last-child {
  text-align:right}
.column-sort {
  justify-self:start;
  border:0;
  padding:6px 4px 6px 0;
  background:transparent;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:4px}
.column-sort span {
  margin-left:5px;
  text-decoration:none}
.column-sort:hover {
  color:var(--ink)}
.state-ranking {
  list-style:none;
  padding:0;
  margin:0}
.state-row {
  border-bottom:1px solid #e8ece1;
  padding:13px 0;
  min-height:58px}
.state-row button {
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  text-align:left;
  padding:0;
  cursor:pointer;
  font-size:14px;
  font-weight:600}
.state-row button:hover {
  text-decoration:underline}
.state-abbr {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:30px;
  height:29px;
  font-size:10px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--sage);
  font-weight:400;
  background:#f7f8f2}
.rank-price {
  display:grid;
  grid-template-columns:1fr 65px;
  gap:15px;
  align-items:center;
  font-variant-numeric:tabular-nums;
  font-size:15px}
.rank-price strong {
  font-weight:500;
  text-align:right}
.rank-track {
  height:9px;
  background:#eef2e7;
  position:relative}
.rank-track:after {
  content:'';
  position:absolute;
  top:-4px;
  bottom:-4px;
  left:var(--baseline);
  border-left:1px dashed #8e9e7b}
.rank-bar {
  display:block;
  height:9px;
  background:#879d6b}
.state-row:nth-child(even) .rank-bar {
  background:#6f8955}
.relative-price {
  text-align:right;
  font-size:12px;
  color:var(--muted)}
#ranking-count {
  margin-top:16px}
.outline-button {
  border:1px solid #9dac8e;
  border-radius:4px;
  background:transparent;
  padding:9px 18px;
  font-size:12px;
  margin:14px 0;
  min-height:40px}
.outline-button:hover {
  background:var(--light)}
.challenge {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:center;
  gap:45px;
  padding:32px 38px;
  margin-top:60px;
  background:#e9eedf;
  border-radius:8px;
  border:1px solid #d5dfc6}
.challenge h2 {
  font-size:32px;
  margin-bottom:12px}
.challenge>div>p:not(.eyebrow) {
  font-size:14px}
.challenge-choices {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px}
.challenge-choices button {
  min-height:44px;
  padding:10px 20px;
  font-size:14px;
  border:1px solid #95a783;
  border-radius:4px;
  background:#fdfef9}
.challenge-choices button:hover {
  background:#d8e3c5}
.challenge-choices button[aria-pressed=true] {
  background:var(--ink);
  color:white}
.challenge-answer {
  min-height:26px;
  margin-top:16px}
.text-button {
  border:0;
  border-bottom:1px solid #9bad8a;
  background:transparent;
  padding:3px 0;
  font-size:12px;
  margin-top:13px}
.challenge-art {
  text-align:center;
  color:var(--sage);
  font-size:13px}
.challenge-art svg {
  display:block;
  margin:auto;
  width:200px;
  fill:none;
  stroke:var(--sage);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round}
.methodology {
  margin-top:54px;
  max-width:900px}
.methodology h2 {
  font-size:29px;
  margin-bottom:20px}
.methodology details {
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:14px}
.methodology summary {
  cursor:pointer;
  font-weight:600}
.methodology p {
  margin-top:12px;
  color:var(--muted);
  font-size:13px}
.error {
  color:#9c3e27;
  font-size:12px}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
[hidden] {
  display:none!important}

@media(max-width:950px) {
  .col-hero {
  gap:30px}
.compare-controls {
  grid-template-columns:1fr 36px 1fr}
.compare-controls>label:last-child {
  grid-column:1/-1}
.budget-layout {
  gap:30px}
.category-row {
  grid-template-columns:95px 1fr 1fr;
  gap:12px}
.section-heading>p {
  max-width:26ch}
.mini-heading {
  align-items:start;
  flex-direction:column;
  gap:10px}
}

@media(max-width:680px) {
  .col-page {
  padding-top:35px}
.col-hero {
  grid-template-columns:1fr;
  gap:28px}
.col-hero h1 {
  font-size:57px}
.lead {
  font-size:16px}
.section-block {
  margin-top:42px}
.section-heading {
  display:block}
.section-heading>p {
  text-align:left;
  max-width:none;
  margin-top:13px}
.section-heading>p br {
  display:none}
.compare-panel,.explore-panel {
  padding:19px}
.compare-controls {
  gap:10px;
  grid-template-columns:1fr 30px 1fr}
.swap {
  width:30px;
  height:30px}
.budget-layout {
  grid-template-columns:1fr;
  gap:20px;
  margin-top:22px}
.budget-result>strong {
  font-size:48px}
.money-input {
  max-width:100%}
.category-row {
  grid-template-columns:82px 1fr 1fr;
  gap:10px;
  font-size:11px}
.category-value {
  display:flex;
  flex-direction:column-reverse;
  align-items:stretch;
  gap:4px}
.category-value strong {
  text-align:right}
.mini-heading h3 {
  font-size:13px}
.explore-controls {
  grid-template-columns:1fr 1fr;
  gap:15px}
.explore-controls>label:nth-child(2) {
  grid-column:1/-1;
  grid-row:2}
.ranking-header,.state-row {
  grid-template-columns:1fr 1fr;
  gap:10px}
#sort-price {
  justify-self:stretch;
  text-align:right}
.ranking-header>span:last-child {
  display:none}
.state-row {
  position:relative;
  padding:14px 0 25px;
  min-height:75px}
.state-row button {
  font-size:12px;
  gap:7px}
.state-abbr {
  width:25px;
  height:25px;
  font-size:9px}
.rank-price {
  gap:8px;
  grid-template-columns:1fr 53px;
  font-size:14px}
.relative-price {
  position:absolute;
  right:0;
  bottom:6px;
  font-size:10px}
.challenge {
  grid-template-columns:1fr;
  padding:24px;
  gap:0;
  margin-top:40px}
.challenge-art {
  display:none}
.challenge h2 {
  font-size:29px}
.challenge-choices {
  gap:9px}
.challenge-choices button {
  padding:9px 14px}
.methodology {
  margin-top:40px}
.methodology h2 {
  font-size:26px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}

.paycheck-card { background:var(--ink); color:#eff3e6; border-radius:10px; padding:30px 34px; }
.paycheck-kicker { font-size:10px; letter-spacing:.13em; color:#d1ddb9; margin-bottom:12px; }
.paycheck-card h2 { font-size:32px; margin-bottom:22px; }
.paycheck-card label { color:#d7e0ce; font-size:12px; }
.paycheck-card select { border-color:#718565; background:#344c3a; color:#f3f5ec; margin-top:7px; }
.pay-slider-label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:20px; }
.pay-slider-label output { font-size:15px; color:#ecf3db; font-variant-numeric:tabular-nums; }
#hourly-pay { width:100%; min-height:28px; accent-color:#c6d99f; margin:8px 0 17px; }
.paycheck-result { border-top:1px solid #59704f; padding-top:18px; }
.paycheck-result>p:first-child { font-size:12px; color:#d7e0ce; }
.paycheck-result strong { display:inline-block; font:400 53px/1.2 Georgia,serif; letter-spacing:-.035em; margin:7px 8px 8px 0; }
.paycheck-result>span { font-size:12px; color:#d7e0ce; }
#pay-explanation { font-size:13px; line-height:1.5; max-width:42ch; }
#paycheck-note { margin-top:18px; font-size:11px; line-height:1.5; color:#c6d3bc; }
.paycheck-card :is(button,input,select):focus-visible { outline-color:#d4e5b4; }
@media(max-width:950px) { .paycheck-card { padding:25px; } }
@media(max-width:680px) { .paycheck-card h2 { font-size:30px; } }