/* US Household Pulse: editorial pages (home, data, states, metric pages).
   Ink background and amber signal come from the brand; type does the rest:
   Caslon for statements, DM Sans for reading, JetBrains Mono only for numbers. */
:root{
  --ink:#070a0c; --panel:#0d1215; --rule:#232b30; --rule2:#1a2125;
  --paper:#efebe2; --muted:#9ba3a8; --faint:#6b747a;
  --amber:#f2a007; --up:#86c84a; --down:#f2604f;
  --serif:'Libre Caslon Display',Georgia,serif; --sans:'DM Sans',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1180px; --gut:clamp(18px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--ink);color:var(--paper);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit;text-decoration-color:rgba(242,160,7,.55);text-underline-offset:3px}
a:hover{text-decoration-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);color:var(--ink);padding:8px 12px;z-index:9}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* Masthead: matches the original app pages (measured from /budget/). */
.shell{margin:0 22px}
.masthead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:81px;padding:calc(env(safe-area-inset-top,0px)) 18px 0;border-bottom:1px solid #2a3034}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand svg{width:48px;height:34px;fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 48px}
.brand-text{display:flex;flex-direction:column}
.brand-name{font:700 15px/1.05 var(--sans);letter-spacing:.025em;text-transform:uppercase}
.brand-tag{margin-top:2px;font:600 9px/1.28 var(--mono);letter-spacing:.04em;color:#92999f;text-transform:uppercase}
.tabs{display:flex;justify-content:center;gap:26px}
.tabs a{position:relative;font:700 9px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#777f84;text-decoration:none;padding:0 2px;white-space:nowrap}
.tabs a:hover{color:var(--paper)}
.tabs a[aria-current]{color:var(--paper)}
.tabs a[aria-current]::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-12px;height:2px;background:var(--amber)}
.head-actions{display:flex;align-items:center;gap:24px}
.state{font:600 9px var(--mono);letter-spacing:.08em;color:#d3cec5;text-transform:uppercase;white-space:nowrap}
.method-btn{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border:1px solid #8a8171;border-radius:4px;font:700 9px var(--mono);letter-spacing:.045em;text-transform:uppercase;text-decoration:none;color:#f3eee5;white-space:nowrap}
.method-btn span{font-size:15px}
.tape{height:38px;overflow:hidden;border-bottom:1px solid #2a3034;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tape-track{display:flex;width:max-content}
.tape-group{display:flex;align-items:center;flex:none}
.tk{font:600 10px var(--mono);letter-spacing:.05em;color:#d3cec5;white-space:nowrap;padding:0 18px}
.tk b{font-weight:700;color:var(--paper);text-transform:uppercase;letter-spacing:.07em;margin-right:6px}
.tk-sep{color:#4a5257;font-size:7px}
@media(prefers-reduced-motion:no-preference){.tape-track{animation:tape 70s linear infinite}.tape:hover .tape-track{animation-play-state:paused}@keyframes tape{to{transform:translateX(-50%)}}}
@media(max-width:1180px){.masthead{grid-template-columns:auto 1fr;height:auto;padding:14px 12px;row-gap:14px}.head-actions{justify-self:end}.tabs{grid-column:1/-1;justify-content:flex-start;overflow-x:auto;padding-bottom:12px}.state{display:none}}
@media(max-width:560px){.shell{margin:0 10px}.brand-tag{display:none}.method-btn{height:34px;padding:0 10px}}

/* Type: bold DM Sans headlines with tight tracking, Caslon italic for the accent phrase,
   small uppercase mono kickers and labels. */
h1,h2,h3{font-family:var(--sans);font-weight:700;margin:0;color:var(--paper)}
h1{font-size:clamp(44px,5.2vw,75px);line-height:.92;letter-spacing:-.06em}
h1 em,h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:#d8d1c5;letter-spacing:-.05em}
h2{font-size:clamp(28px,3vw,43px);line-height:1;letter-spacing:-.045em}
h3{font-size:18px;letter-spacing:-.02em}
.lede{font-size:15px;line-height:1.55;color:#b9bec2;max-width:64ch;margin:18px 0 0}
.muted{color:var(--muted)}
.small{font-size:12px;color:#818a8e}
.kicker,.q,.crumbs{font:700 9px/1.3 var(--mono);letter-spacing:.075em;text-transform:uppercase;color:#787f85}
.crumbs{margin:26px 0 20px}.crumbs a{color:#9aa1a6;text-decoration:none}.crumbs a:hover{color:var(--paper)}
.q{color:var(--amber);margin:0 0 12px}
.wrap{max-width:none;margin:0 22px;padding:0 38px}
@media(max-width:700px){.wrap{margin:0 10px;padding:0 8px}}
section{margin-top:28px}
/* Sections with a heading become bordered panels, like the original budget panels. */
section:has(> .section-head){border:1px solid #2a3034;background:rgba(255,255,255,.008);padding:0 22px 22px}
section:has(> .section-head) > .section-head{margin-left:-22px;margin-right:-22px}
section:has(> .section-head) > .rows{margin:-22px -22px -22px}
section:has(> .section-head) > .rows .row{padding-left:22px;padding-right:22px}
@media(max-width:560px){section:has(> .section-head){padding:0 14px 16px}section:has(> .section-head) > .section-head{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}section:has(> .section-head) > .rows{margin:-22px -14px -16px}section:has(> .section-head) > .rows .row{padding-left:14px;padding-right:14px}}
.callout .actions{flex-wrap:wrap}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;padding:24px 22px 20px;border-bottom:1px solid #2a3034;margin-bottom:22px}
.section-head p{margin:0;font-size:11px;line-height:1.5;color:#818a8e;max-width:52ch;text-align:right}
@media(max-width:700px){.section-head p{text-align:left}}
.prose{max-width:68ch;font-size:15px;line-height:1.65;color:#c4c8cb}.prose p{margin:0 0 1em}.prose h2{margin-bottom:16px;font-size:clamp(24px,2.4vw,32px)}
.prose strong{color:var(--paper)}

/* Metric page hero */
.metric-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:18px 0 40px;border-bottom:1px solid #2a3034}

.reading{border:1px solid #2a3034;padding:26px 28px;background:rgba(255,255,255,.008)}
.reading .big{font:700 clamp(54px,8vw,92px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.reading .when{font:600 9px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#818a8e;margin-top:14px}
.reading .chg{font:700 11px var(--mono);letter-spacing:.03em;margin-top:8px}
.chg.good{color:var(--up)}.chg.bad{color:var(--down)}.chg.flat{color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#d3cec5;background:#090d0f;border:1px solid #2a3034;border-radius:4px;padding:9px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn:hover{border-color:#8a8171;color:var(--paper)}
.btn.on{border-color:var(--amber);color:var(--amber)}
@media(max-width:820px){.metric-hero{grid-template-columns:1fr}.reading{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}}

/* Charts */
.chart-block{margin-top:34px}
.chart-controls{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:14px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid #2a3034;border-radius:4px;overflow:hidden}
.seg button{font:700 8.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8e989c;background:#090d0f;border:0;padding:8px 10px;cursor:pointer}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed=true]{background:#1a2024;color:var(--paper);box-shadow:inset 0 -2px 0 var(--amber)}
.chart-block{border:1px solid #2a3034;background:rgba(255,255,255,.008);padding:16px 18px 12px}
.chart-frame{position:relative;border-top:1px solid #252d31;padding:10px 0 4px}
.chart-svg{display:block;width:100%;height:auto}
.chart-svg .rec{fill:rgba(239,235,226,.06)}
.chart-svg .grid{stroke:var(--rule2);stroke-width:1}
.chart-svg .zero{stroke:#56606a;stroke-width:1.2}
.chart-svg .ytick,.chart-svg .xtick{fill:var(--faint);font:500 12px var(--mono)}
.chart-svg .ytick{paint-order:stroke;stroke:var(--ink);stroke-width:5px;stroke-linejoin:round}
.chart-svg .line2{fill:none;stroke:#8d969c;stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.chart-svg .last2{fill:var(--muted);font:500 13px var(--mono)}
.key-line{display:inline-block;width:18px;height:0;border-top:2px solid var(--amber);vertical-align:3px;margin:0 6px 0 14px}.key-line.cmp{border-top:2px dashed #8d969c}
.chart-svg .xtick{text-anchor:middle}
.chart-svg .line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-svg .dot{fill:var(--amber)}
.chart-svg .last{fill:var(--paper);font:700 14px var(--mono)}
.chart-svg .cross{stroke:var(--muted);stroke-dasharray:3 3}
.chart-tip{position:absolute;pointer-events:none;background:var(--paper);color:var(--ink);font:500 13px var(--sans);padding:6px 9px;border-radius:5px;white-space:nowrap;transform:translate(-50%,-120%)}
.chart-tip b{font-family:var(--mono)}
.chart-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 8.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#737c82;margin-top:10px}
.chart-note .key::before{content:"";display:inline-block;width:12px;height:10px;background:rgba(239,235,226,.14);margin-right:6px;vertical-align:-1px}
.chart-empty{color:var(--muted);padding:40px 0}

/* Two-column body */
.body-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,6vw,80px)}
.aside{border:1px solid #2a3034;align-self:start}
.aside h3{font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0;padding:12px 16px;border-bottom:1px solid #252d31}
.aside ul{list-style:none;margin:0;padding:0}
.aside li+li{border-top:1px solid #252d31}
.aside li a{display:block;padding:12px 16px;text-decoration:none;font:700 12px var(--mono);color:#d9d9d4}
.aside li a:hover{background:rgba(255,255,255,.02)}
.aside .small,.aside > p{padding:0 16px}
.aside li a span{display:block;font:400 11px/1.4 var(--sans);color:#818a8e;margin-top:3px}
.source{font-size:11px;line-height:1.6;color:#818a8e;border-top:1px solid #2a3034;padding-top:14px;margin-top:28px}
@media(max-width:860px){.body-grid{grid-template-columns:1fr}}

/* Instrument rows: label, trend, reading, change */
.rows{}
.row{display:grid;grid-template-columns:minmax(0,1.6fr) 130px minmax(110px,.8fr) minmax(120px,.9fr);align-items:center;gap:18px;padding:13px 18px;border-bottom:1px solid #2a3034;text-decoration:none}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(255,255,255,.02)}
.row:hover .row-name{color:var(--amber)}
.row-name{font:700 12px var(--mono);color:#d9d9d4;text-transform:uppercase;letter-spacing:.03em}.row-name small{display:block;font:400 11px/1.4 var(--sans);text-transform:none;letter-spacing:0;color:#818a8e;margin-top:3px}
.row-val{font:700 21px var(--mono);letter-spacing:-.03em;text-align:right;font-variant-numeric:tabular-nums}
.row-chg{font:700 10px var(--mono);text-align:right}
.row-when{display:block;font:600 8px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#777e85;margin-top:5px}
.spark{width:120px;height:32px;overflow:visible}.spark path{fill:none;stroke:var(--amber);stroke-width:1.6;vector-effect:non-scaling-stroke}.spark circle{fill:var(--amber)}
@media(max-width:640px){.row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.row .spark{display:none}.row-chg{grid-column:2}.row-val{grid-row:1;grid-column:2}}

/* Home: the household dollar */
.home-hero{padding-top:clamp(28px,4vw,46px);padding-bottom:40px;border-bottom:1px solid #2a3034}
.home-hero h1{max-width:13ch;margin-top:10px}
.dollar{margin-top:clamp(32px,5vw,56px)}
.cents{display:grid;grid-template-columns:repeat(50,1fr);gap:3px;max-width:980px}
.cents i{display:block;aspect-ratio:1/1.6;background:#2b3338;border-radius:1.5px}
.cents i.saved{background:var(--amber)}
.cents i.was{box-shadow:inset 0 0 0 1.5px rgba(239,235,226,.7)}
@media(max-width:640px){.cents{grid-template-columns:repeat(25,1fr)}}
.dollar-legend{display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:16px;font:600 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9aa1a6;align-items:center}
.dollar-legend b{font:700 14px var(--mono);color:var(--paper);letter-spacing:0;margin-left:4px}
.sw{display:inline-block;width:12px;height:16px;border-radius:2px;vertical-align:-3px;margin-right:6px;background:#2b3338}
.sw.saved{background:var(--amber)}.sw.was{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(239,235,226,.7)}
.verdict{font:600 clamp(19px,2vw,25px)/1.3 var(--sans);letter-spacing:-.02em;max-width:46ch;margin:clamp(28px,4vw,40px) 0 0;padding-left:16px;border-left:2px solid var(--amber)}

/* Calculators */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:860px){.tools{grid-template-columns:1fr}}
.tool{border:1px solid #2a3034;background:#090d0f;padding:20px 22px;border-radius:0}
.tool h3{margin-bottom:6px;font-size:20px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:18px 0}
.fields label{font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#818a8e;display:flex;flex-direction:column;gap:7px}
input,select{font:600 15px var(--mono);color:var(--paper);background:#070a0c;border:1px solid #2a3034;border-radius:4px;padding:10px 12px;width:100%;text-transform:none;letter-spacing:0}
input:focus,select:focus{border-color:var(--amber);outline:none}
.result{font:600 18px/1.4 var(--sans);letter-spacing:-.01em;min-height:3.2em}
.result .num{font-size:.95em;color:var(--amber)}
.result-detail{font-size:11px;line-height:1.5;color:#818a8e}

/* Lists, grids */
.link-cols{columns:3 260px;column-gap:48px}
.link-group{break-inside:avoid;margin-bottom:28px}
.link-group h3{font:700 9px var(--mono);letter-spacing:.075em;text-transform:uppercase;color:#787f85;margin-bottom:10px}
.link-group a{display:block;padding:5px 0;font-size:14px;text-decoration:none;color:#d3cec5}.link-group a:hover{color:var(--amber)}
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.state-grid a{display:flex;justify-content:space-between;gap:8px;padding:11px 14px 11px 0;border-bottom:1px solid #252d31;text-decoration:none;font:700 11px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:#d9d9d4}.state-grid a:hover{color:var(--amber)}
.state-grid a .num{color:var(--muted);font-size:14px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid #2a3034;background:rgba(255,255,255,.008)}
.fact{padding:18px 20px;border-right:1px solid #2a3034}.fact:last-child{border-right:0}
.fact .k{font:700 9px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#9aa1a6}
.fact .v{font:700 30px/1.15 var(--mono);letter-spacing:-.03em;margin-top:6px}
.fact .d{font:600 8px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#777e85;margin-top:6px}
.releases{list-style:none;margin:0;padding:0}
.releases li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #252d31;font-size:14px}.releases li:last-child{border-bottom:0}.releases a{text-decoration:none;color:#d3cec5}.releases a:hover{color:var(--amber)}
.releases time{font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#818a8e;padding-top:3px}
@media(max-width:560px){.releases li{grid-template-columns:1fr;gap:2px}}
.callout{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:1px solid #2a3034;background:#090d0f;padding:22px 24px}
.callout .num{font-size:clamp(26px,3vw,36px);font-weight:700}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th,table.data td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.data th{font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#818a8e}
.table-scroll{overflow-x:auto}
pre.code{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:14px;overflow-x:auto;font:500 13px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all}

/* Signup + footer */
.signup{margin:56px 22px 0;padding:28px 38px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;border:1px solid #2a3034;background:#090d0f}
.signup h2{font-size:clamp(22px,2.2vw,30px)}
.signup p{color:#9aa1a6;font-size:13px;margin:10px 0 0;max-width:48ch}
.signup-form{display:flex;flex-wrap:wrap;gap:10px}
.signup-form input[type=email]{flex:1 1 220px;font-family:var(--sans)}
.signup-form button{font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--amber);color:#111;border:0;border-radius:4px;padding:0 20px;min-height:44px;cursor:pointer}
.signup-form .form-note{flex-basis:100%;margin:0;font-size:12px;min-height:1.4em;color:#9aa1a6}
.hp-field{position:absolute;left:-9999px}
@media(max-width:760px){.signup{grid-template-columns:1fr;margin:40px 10px 0;padding:22px 18px}.site-foot{margin:0 10px;padding:28px 8px}}
.site-foot{margin:0 22px;padding:32px 38px 40px;color:#7f858a;font-size:12px}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot-cols nav{display:flex;flex-direction:column;gap:8px;font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.foot-cols nav a{text-decoration:none}.foot-cols nav a:hover{color:var(--paper)}
.foot-brand{color:var(--paper);font:700 13px var(--sans);letter-spacing:.025em;text-transform:uppercase;margin:0 0 6px}
.foot-meta,.foot-legal{font:600 8.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#6b747a}
.foot-legal{margin-top:32px;border-top:1px solid var(--rule);padding-top:16px}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:6px;font-size:14px;z-index:20}
@media(prefers-reduced-motion:no-preference){.cents i.saved{animation:fill .5s ease-out both;animation-delay:calc(var(--i)*40ms)}@keyframes fill{from{background:#2b3338}}}