/* LLM Bill Benchmark on the KH Labs design system.
   Tokens, nav, footer, buttons, form controls and base type come from /kh-system.css (loaded first).
   Black and white UI; colour only on data: the Pareto frontier and savings use --c-bill (green). */
:root{--fr:var(--c-bill)}
html{scroll-behavior:smooth}
.fine{margin-top:var(--sp4);font-size:14px;line-height:1.55;color:var(--mute);max-width:36em;text-wrap:pretty}

/* type + sections (same rhythm as the Agent Gateway demo) */
section.s{padding:48px 0;border-top:1px solid var(--line)}
h1{max-width:20ch;font-size:clamp(36px,3.7vw,54px)}
h2{max-width:20ch}
.lead{color:var(--mute);font-size:var(--t-lg);line-height:1.55;max-width:54ch;text-wrap:pretty}
.lead b{color:var(--ink);font-weight:500}
.head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp7);align-items:end;margin-bottom:var(--sp7)}
.head--one{grid-template-columns:minmax(0,1fr);margin-bottom:var(--sp5)}
#cta .head{margin-bottom:0}
.acts{display:flex;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp5);align-items:center}
.kick{display:flex;align-items:center;gap:var(--sp2);font:500 var(--t-xs)/1 var(--mono);color:var(--mute);margin-bottom:var(--sp5)}
.kick .mk{font-size:14px}

/* hero */
.hero{padding:clamp(40px,6vh,72px) 0 clamp(40px,6vh,64px)}
.hero__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp7);align-items:center}
.hero__aside p{color:var(--mute);font-size:var(--t-lg);line-height:1.55;max-width:46ch;text-wrap:pretty}
.runline{margin-top:clamp(28px,4vh,40px);padding-top:var(--sp4);border-top:1px solid var(--line);font:400 13px/1.9 var(--mono);color:var(--mute)}
.runline a{color:var(--ink)}

/* market console */
.con{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2);background:#000;padding:var(--sp5)}
.controls{display:flex;flex-wrap:wrap;gap:var(--sp4) var(--sp5);align-items:center;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.k-chip[aria-checked="true"]{background:#fff;color:#000;box-shadow:none}
.k-chip:focus-visible,.seg button:focus-visible{outline:0;box-shadow:var(--ring)}
/* segmented control: same as the Bot Check demo */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px}
.seg button{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);font:500 14px/1 var(--sans);color:var(--mute);white-space:nowrap;transition:background-color var(--t-fast),color var(--t-fast),transform .15s}
.seg button:hover{color:var(--ink);background:var(--hover)}
.seg button:active{transform:scale(.97)}
.seg button[aria-checked="true"]{color:#000;background:#fff}
.mkin{display:grid;grid-template-columns:minmax(0,220px) minmax(0,290px) minmax(0,1fr);gap:var(--sp4) var(--sp5);align-items:end;margin-top:var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--line)}
.mkin__n{margin-top:0;font-size:13px;max-width:36em}
.k-input{font-variant-numeric:tabular-nums}
.k-select option{background:#000;color:var(--ink)}
.chartbox{margin:var(--sp5) 0 0;padding-top:var(--sp4);border-top:1px solid var(--line)}
.chart-host{width:100%}
.chart-host svg{width:100%;height:auto;overflow:visible}
.cap{padding:var(--sp2) 0 0;font:400 13px/1.5 var(--mono);color:var(--mute)}
.ax text{fill:var(--mute);font-family:var(--mono);font-size:13px}
.ax .t{fill:var(--mute);font-family:var(--sans);font-size:13px}
.gridl{stroke:var(--line);stroke-width:1}
.fr{fill:none;stroke:var(--fr);stroke-width:1.6}
.dot{fill:#000;stroke:var(--mute);stroke-width:1.8;cursor:pointer;transition:r .2s var(--out)}
.dot.on{fill:var(--fr);stroke:var(--fr)}
.dot:hover,.dot:focus-visible{r:9}
.dot:focus-visible{outline:none;stroke:#fff;stroke-width:2.5}
.lbl{font-family:var(--mono);font-size:13px;fill:var(--mute);pointer-events:none;paint-order:stroke;stroke:#000;stroke-width:8px;stroke-linejoin:round}
.lbl.on{fill:var(--ink)}
.mk-notes{margin-top:var(--sp5);max-width:32em}
.mk-notes p{font-size:14.5px;color:var(--mute);line-height:1.6}
.mk-notes b{color:var(--ink);font-weight:500}

/* market table */
.tablewrap{overflow-x:auto;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line2);background:#000}
.tablewrap:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--line3),var(--ring)}
.mk-tw{margin-top:var(--sp5)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:760px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:12px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap;color:var(--mute)}
.tbl th:first-child,.tbl td:first-child{text-align:left;position:sticky;left:0;background:#000;z-index:1;white-space:normal;min-width:230px;max-width:330px}
.tbl thead th{font:500 13px/16px var(--mono);color:var(--mute);border-bottom-color:var(--line2);background:#000}
.tbl thead th:first-child{z-index:2}
.tbl th:nth-child(2){white-space:normal}
.tbl th button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:2px 0;border-radius:4px}
.tbl th button:hover{color:var(--ink)}
.tbl th button:focus-visible{box-shadow:var(--ring)}
.tbl th[aria-sort=ascending] button,.tbl th[aria-sort=descending] button{color:var(--ink)}
.tbl th[aria-sort=ascending] button::after{content:"\2191"}
.tbl th[aria-sort=descending] button::after{content:"\2193"}
.tbl tbody tr:hover td{background:var(--bg2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:nth-child(n+2){color:var(--ink)}
.tbl .na{color:var(--mute)}
.mn{font-weight:500;color:var(--ink)}
.sub{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--mute);max-width:34ch}
.sub2{color:var(--mute);font-size:13px}
.nd{margin-top:4px;font-size:13px;color:var(--mute)}
.nd summary{cursor:pointer;width:max-content;color:var(--mute);border-radius:4px}
.nd summary:hover{color:var(--ink)}
.nd summary:focus-visible{outline:0;box-shadow:var(--ring)}
.nd span{display:block;margin-top:4px;line-height:1.45;max-width:36ch;white-space:normal}

/* savings calculator */
.calc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.calc__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);align-content:start;padding:var(--sp6);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2)}
.mix{grid-column:1/-1;border:0;padding:0;margin:var(--sp1) 0 0;min-width:0}
.mix legend{padding:0;margin-bottom:var(--sp2)}
#c-mix{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp2)}
.mx{display:flex;align-items:center;gap:var(--sp2);min-height:48px;padding:4px 4px 4px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--mute);min-width:0}
.mx span{flex:1;min-width:0;line-height:1.25}
.mx input{width:72px;height:38px;flex:none;padding:0 10px;border:1px solid var(--line2);border-radius:10px;background:#000;color:var(--ink);font:400 15px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.mx input:hover{border-color:var(--line3)}
.mx input:focus{outline:0;border-color:#fff;box-shadow:0 0 0 3px rgb(255 255 255 / .12)}
.calc__out{display:flex;flex-direction:column;align-items:flex-start;padding:var(--sp6);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2)}
.calc__out .big{font-size:clamp(40px,4vw,56px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.calc__out .big em{font-style:normal;color:var(--c-bill)}
.calc__out p{color:var(--mute);margin-top:var(--sp3);font-size:15px;line-height:1.55;max-width:52ch}
.calc__out p b{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.calc__out .btn{margin-top:var(--sp5)}
.calc__r .fine{margin-top:var(--sp4)}

/* method */
.method{display:grid;gap:var(--sp4);max-width:38em}
.method p{color:var(--mute);font-size:16px;line-height:1.65}
.dl{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp2)}
.k-prose .dl a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line2);font:500 13px/1 var(--mono);color:var(--ink);text-decoration:none;transition:background-color var(--t-fast),box-shadow var(--t-fast),transform .2s var(--out)}
.k-prose .dl a:hover{background:#1a1a1a;box-shadow:inset 0 0 0 1px var(--line3)}
.k-prose .dl a:active{transform:scale(.97)}
.k-prose .dl a:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--line3),var(--ring)}

/* shared footer fixes (same as the other demos) */
.ft__demos a{white-space:nowrap}.ft__demos a span{white-space:normal}
.ft__ln{display:inline-flex;flex-wrap:wrap;gap:8px 24px}

@media (max-width:1080px){
  .hero__top,.head,.calc{grid-template-columns:minmax(0,1fr)}
  .hero__top,.head{gap:var(--sp5)}
  .head{margin-bottom:var(--sp6)}
  section.s{padding:44px 0}
  .mkin{grid-template-columns:1fr 1fr}.mkin__n{grid-column:1/-1}
}
@media (max-width:720px){
  section.s{padding:40px 0}
  .hero__aside p,.lead{font-size:16.5px}
  .acts .btn{flex:1 1 100%;height:50px}
  .con{padding:var(--sp4)}
  .mkin{grid-template-columns:1fr}
  .calc__in{grid-template-columns:1fr;padding:var(--sp5)}
  .calc__out{padding:var(--sp5);min-height:0}
  .controls{align-items:flex-start}
  .seg{width:100%}.seg button{flex:1;justify-content:center;padding-inline:6px}
}