:root{
  --ink:#0B1220;
  --panel:#0F1B2E;
  --panel-2:#132340;
  --line:#22314A;
  --line-soft:#1A2740;
  --text:#ECEEF3;
  --text-dim:#8CA0BC;
  --text-faint:#5A6E8C;
  --waste:#D63A4B;
  --waste-soft:rgba(214,58,75,0.14);
  --good:#35D0A0;
  --gold:#E7B93B;
  --gold-soft:rgba(231,185,59,0.14);
  --radius:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
.mono{font-family:var(--font-mono);}

/* ---------- topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  border-bottom:1px solid var(--line-soft);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-mark{
  font-family:var(--font-mono);
  font-weight:600;
  background:var(--gold-soft);
  color:var(--gold);
  border:1px solid rgba(231,185,59,0.35);
  border-radius:6px;
  padding:4px 8px;
  font-size:13px;
  letter-spacing:0.02em;
}
.brand-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:17px;
  letter-spacing:-0.01em;
}
.topnav{display:flex; gap:28px;}
.topnav a{
  text-decoration:none;
  color:var(--text-dim);
  font-size:14px;
  font-weight:500;
  transition:color 0.15s ease;
}
.topnav a:hover, .topnav a:focus-visible{color:var(--text);}

/* ---------- hero ---------- */
.hero{
  padding:88px 32px 96px;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 900px 400px at 50% -10%, rgba(231,185,59,0.08), transparent 60%);
}
.hero-inner{max-width:820px; margin:0 auto; text-align:center;}
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:12px;
  color:var(--gold);
  margin:0 0 20px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(28px, 4.4vw, 46px);
  line-height:1.22;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 22px;
}
.hero-ticker-wrap{display:inline-block;}
.hero-ticker{
  display:inline-block;
  color:var(--waste);
  font-weight:600;
  padding:0 4px;
}
.hero-sub{
  font-size:17px;
  color:var(--text-dim);
  max-width:560px;
  margin:0 auto 34px;
}
.cta{
  display:inline-block;
  text-decoration:none;
  background:var(--gold);
  color:#1A1200;
  font-weight:600;
  font-size:15px;
  padding:13px 26px;
  border-radius:999px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(231,185,59,0.25);}
.cta:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- sections ---------- */
main{max-width:1040px; margin:0 auto; padding:0 32px;}
.ledger-section, .results{padding:72px 0;}
.results{border-top:1px solid var(--line-soft);}
.section-head{margin-bottom:32px;}
.section-head h2{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  margin:0 0 8px;
  letter-spacing:-0.01em;
}
.section-head p{color:var(--text-dim); margin:0; font-size:15px;}

/* ---------- assumptions ---------- */
.assumptions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:28px;
}
.assumption{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 16px;
  flex:1 1 200px;
}
.assumption label{
  display:block;
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:6px;
}
.input-suffix{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.input-suffix input{
  width:100%;
  background:transparent;
  border:none;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:500;
  padding:0;
}
.input-suffix input:focus-visible{outline:none;}
.input-suffix span{color:var(--text-faint); font-size:13px;}

/* ---------- table ---------- */
.table-scroll{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}
.ledger-table{
  width:100%;
  border-collapse:collapse;
  min-width:880px;
}
.ledger-table th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-faint);
  font-weight:500;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.ledger-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
  vertical-align:middle;
}
.ledger-table tbody tr:hover{background:var(--panel-2);}
.col-num{text-align:right;}
th.col-num{text-align:right;}
.ledger-table input, .ledger-table select{
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:14px;
  padding:6px 8px;
  width:100%;
  text-align:right;
}
.ledger-table input[data-field="name"]{
  font-family:var(--font-body);
  text-align:left;
  font-weight:500;
}
.ledger-table select{font-family:var(--font-body); text-align:left;}
.ledger-table input:hover, .ledger-table select:hover{border-color:var(--line);}
.ledger-table input:focus-visible, .ledger-table select:focus-visible{
  outline:none;
  border-color:var(--gold);
  background:var(--panel-2);
}
.total-col{color:var(--text); font-weight:500; white-space:nowrap;}
.waste-col{color:var(--waste); font-weight:500; white-space:nowrap;}
.remove-btn{
  background:none;
  border:none;
  color:var(--text-faint);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:6px;
  border-radius:6px;
}
.remove-btn:hover{color:var(--waste); background:var(--waste-soft);}
.remove-btn:focus-visible{outline:2px solid var(--waste);}
.ledger-total-row td{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:15px;
  border-bottom:none;
  padding-top:16px;
  color:var(--text-dim);
}
.ledger-total-row td:first-child{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:11px;
  color:var(--text-faint);
}

.add-row{
  margin-top:16px;
  background:var(--panel);
  border:1px dashed var(--line);
  color:var(--text-dim);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  padding:12px 18px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.15s ease;
}
.add-row:hover{border-color:var(--gold); color:var(--gold); border-style:solid;}
.add-row:focus-visible{outline:2px solid var(--gold);}

/* ---------- summary cards ---------- */
.summary-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-bottom:40px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.card-waste{border-color:rgba(214,58,75,0.35); background:linear-gradient(180deg, var(--waste-soft), var(--panel) 60%);}
.card-label{
  font-size:12px;
  color:var(--text-dim);
  margin:0 0 10px;
}
.card-value{
  font-size:28px;
  font-weight:600;
  margin:0;
}
.card-waste .card-value{color:var(--waste);}

/* ---------- chart ---------- */
.chart-wrap{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
#chart{width:100%; height:auto; display:block;}
.legend{display:flex; gap:24px; margin-top:12px; justify-content:center;}
.legend-item{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim);}
.swatch{width:10px; height:10px; border-radius:2px; display:inline-block;}
.swatch-base{background:var(--good);}
.swatch-waste{background:var(--waste);}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding:32px;
  text-align:center;
  color:var(--text-faint);
  font-size:13px;
}
.site-footer a{color:var(--text-dim); text-decoration:none;}
.site-footer a:hover{color:var(--text);}
.foot-note{margin-top:6px; font-size:12px;}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .topbar{padding:16px 20px;}
  .hero{padding:56px 20px 64px;}
  main{padding:0 20px;}
  .summary-cards{grid-template-columns:1fr;}
  .brand-name{display:none;}
}