:root {
  --ink: #101713;
  --paper: #f4f0e5;
  --panel: #fffdf7;
  --line: #d7d5ca;
  --muted: #626a64;
  --acid: #c9ff52;
  --violet: #7456c8;
  --pine: #173f31;
  --negative: #a23b3b;
  --positive: #24764a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, input { font: inherit; }

.site-header { width: min(1160px, calc(100% - 40px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font: 850 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; letter-spacing: -.04em; }
.wordmark span { color: var(--violet); }
.wordmark b { margin-left: 4px; color: var(--pine); font-size: 11px; }
nav { display: flex; gap: 25px; align-items: center; }
nav a { font-size: 13px; font-weight: 700; text-decoration: none; }
nav a:last-child { padding-bottom: 4px; border-bottom: 2px solid var(--ink); }

.hero { width: min(1160px, calc(100% - 40px)); min-height: 650px; margin: 0 auto; padding: 115px 0 80px; display: grid; grid-template-columns: 1fr .36fr; column-gap: 60px; align-content: center; }
.eyebrow { margin: 0 0 20px; color: var(--pine); font: 750 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-transform: uppercase; }
.hero .eyebrow, .hero h1, .hero .lede { grid-column: 1 / -1; }
h1 { max-width: 960px; margin: 0; font-size: clamp(52px, 8vw, 104px); line-height: .91; letter-spacing: -.075em; }
.lede { max-width: 680px; margin: 32px 0; color: #414943; font-size: clamp(18px, 2vw, 23px); line-height: 1.5; letter-spacing: -.02em; }
.primary-link { width: fit-content; display: inline-flex; gap: 34px; align-items: center; padding: 16px 19px; background: var(--ink); color: white; text-decoration: none; font-weight: 750; }
.primary-link span { color: var(--acid); }

.calculator { padding: 100px max(20px, calc((100vw - 1160px) / 2)); display: grid; grid-template-columns: 1.05fr .75fr; gap: 22px; background: var(--ink); color: white; }
.calculator-copy { padding: 38px; grid-row: span 2; background: var(--panel); color: var(--ink); border-radius: 7px; }
.calculator-copy h2, .method h2, .build-note h2 { margin: 0; font-size: clamp(35px, 5vw, 64px); line-height: 1; letter-spacing: -.055em; }
.calculator-copy > p:not(.eyebrow) { margin: 22px 0 34px; color: var(--muted); line-height: 1.6; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
label { display: grid; gap: 8px; }
label > span:first-child { color: #424943; font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .05em; }
input { width: 100%; min-width: 0; padding: 14px; border: 1px solid #c8c9c1; border-radius: 4px; background: white; color: var(--ink); }
input:focus { outline: 3px solid rgb(116 86 200 / 23%); border-color: var(--violet); }
.input-unit { display: flex; align-items: stretch; border: 1px solid #c8c9c1; border-radius: 4px; background: white; overflow: hidden; }
.input-unit:focus-within { outline: 3px solid rgb(116 86 200 / 23%); border-color: var(--violet); }
.input-unit input { border: 0; outline: 0; }
.input-unit b { display: grid; place-items: center; min-width: 41px; color: var(--muted); font-weight: 700; }

.result-panel, .chart-card { padding: 30px; border-radius: 7px; }
.result-panel { background: var(--acid); color: var(--ink); }
.result-label { margin: 0 0 8px; font: 750 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; }
.result-number { margin: 0; font-size: clamp(52px, 6vw, 82px); line-height: 1; font-weight: 820; letter-spacing: -.07em; }
.result-status { margin: 9px 0 26px; font-size: 13px; font-weight: 700; }
.result-status.negative { color: var(--negative); }
.result-status.positive { color: var(--positive); }
.result-list { margin: 0; border-top: 1px solid rgb(16 23 19 / 25%); }
.result-list div { padding: 11px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgb(16 23 19 / 18%); }
.result-list dt { font-size: 12px; color: rgb(16 23 19 / 65%); }
.result-list dd { margin: 0; font-size: 13px; font-weight: 800; }
.chart-card { display: grid; grid-template-columns: .34fr .66fr; gap: 20px; background: #e8ddf8; color: var(--ink); align-items: center; }
.chart-card > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chart-wrap { position: relative; min-height: 180px; }

.method { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; display: grid; grid-template-columns: .45fr 1fr .7fr; gap: 70px; align-items: start; }
.method h3 { margin: 7px 0 18px; font-size: 21px; letter-spacing: -.03em; }
.method p:not(.eyebrow) { margin: 22px 0 0; color: var(--muted); line-height: 1.7; }
.build-note { padding: 110px max(20px, calc((100vw - 900px) / 2)); background: var(--pine); color: white; }
.build-note .eyebrow { color: var(--acid); }
.build-note ul { margin: 45px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.build-note li { padding: 17px 0 17px 27px; position: relative; border-top: 1px solid rgb(255 255 255 / 18%); }
.build-note li::before { content: "✓"; position: absolute; left: 0; color: var(--acid); font-weight: 800; }

footer { width: min(1160px, calc(100% - 40px)); min-height: 88px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--muted); font-size: 12px; }

@media (max-width: 850px) {
  .calculator, .method { grid-template-columns: 1fr; }
  .calculator-copy { grid-row: auto; }
  .method { gap: 30px; }
  .chart-card { grid-template-columns: 1fr; }
  .chart-wrap { min-height: 240px; }
}

@media (max-width: 560px) {
  .site-header { min-height: 68px; }
  nav a:not(:last-child) { display: none; }
  .hero { width: min(100% - 28px, 1160px); min-height: 580px; padding: 80px 0 65px; display: block; }
  h1 { font-size: clamp(48px, 15vw, 66px); }
  .primary-link { width: 100%; justify-content: space-between; }
  .calculator { padding: 72px 14px; }
  .calculator-copy, .result-panel, .chart-card { padding: 22px 18px; }
  .field-grid, .build-note ul { grid-template-columns: 1fr; }
  .method { width: min(100% - 28px, 1160px); padding: 85px 0; }
  .build-note { padding: 85px 20px; }
  footer { min-height: 115px; flex-direction: column; justify-content: center; text-align: center; gap: 7px; }
}

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