/* haidercode.ai — opencode-school minimalism, Haider's orange pixel identity.
   Mono type everywhere, light page, dark terminal block. */

:root {
  --ink: #111213;
  --ink-soft: #55585c;
  --ink-faint: #9a9ea3;
  --paper: #ffffff;
  --paper-dim: #f6f6f4;
  --line: #e4e4e0;
  --orange: #e0642f;
  --orange-dim: #ef9a6d;
  --term-bg: #121114;
  --term-ink: #d9d4cc;
  --term-dim: #7d7873;
  --term-gold: #e0a63f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

/* ---- nav ---- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 61px;
  height: 22px;
}

.brand-word {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.brand-word b {
  color: var(--ink-faint);
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}

.nav-links a:hover { color: var(--orange); }

.btn-download {
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.btn-download:hover { color: var(--paper); background: #2a2b2d; }

/* ---- banner ---- */

.banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 1060px;
  margin: 26px auto 0;
  padding: 0 24px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
}

/* ---- hero ---- */

.hero {
  max-width: 1060px;
  margin: 0 auto;
  padding: 44px 24px 8px;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 6.4vw, 62px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.06;
}

.hero .sub {
  margin: 0 0 34px;
  color: var(--ink-soft);
  font-size: 16px;
}

/* ---- install card ---- */

.install {
  max-width: 660px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.install-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.tab {
  padding: 9px 14px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.tab:hover { color: var(--ink-soft); }

.tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.install-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px;
  background: var(--paper-dim);
}

.install-body code {
  font-size: 14.5px;
  overflow-x: auto;
  white-space: nowrap;
}

.install-body code b { color: var(--orange); }

.copy {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}

.copy:hover { color: var(--ink); }

/* ---- terminal mock ---- */

.terminal {
  max-width: 1060px;
  margin: 52px auto 0;
  border-radius: 12px 12px 0 0;
  background: var(--term-bg);
  color: var(--term-ink);
  overflow: hidden;
}

.term-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 20px;
  border-bottom: 1px solid #262329;
  font-size: 13.5px;
}

.term-logo { color: var(--orange); letter-spacing: 2px; }
.term-head b { color: var(--orange); }
.term-right { margin-left: auto; color: var(--term-gold); }

.term-body {
  padding: 18px 20px 26px;
  font-size: 13.5px;
  line-height: 1.7;
}

.term-body p { margin: 0 0 4px; }
.t-user { color: var(--term-gold); font-weight: 700; }
.t-agent { color: var(--term-gold); font-weight: 700; }
.t-dim { color: var(--term-dim); }
.t-status { margin-top: 14px; color: var(--term-gold); }

/* ---- features ---- */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1060px;
  margin: 52px auto 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}

.feature {
  padding: 26px 22px;
  background: var(--paper);
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* ---- go / pricing ---- */

.go {
  max-width: 1060px;
  margin: 0 auto;
  padding: 72px 24px 30px;
  text-align: center;
}

.go h2 {
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: -1px;
}

.go h2 b { color: var(--orange); }

.go .sub {
  margin: 0 0 34px;
  color: var(--ink-soft);
}

.plans {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.plan {
  width: 280px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
}

.plan.featured { border-color: var(--orange); }

.plan h3 { margin: 0 0 6px; font-size: 15px; }

.price {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
}

.price span {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.plan ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.plan li { margin: 5px 0; }

.soon {
  margin: 30px 0 0;
  color: var(--ink-faint);
  font-size: 13px;
}

/* ---- footer ---- */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1060px;
  margin: 30px auto 0;
  padding: 22px 24px 34px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 13px;
}

footer nav { display: flex; gap: 20px; }
footer a:hover { color: var(--ink); }

/* ---- small screens ---- */

@media (max-width: 760px) {
  .nav-links { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
  .nav-links[data-splash] a:not(.btn-download) { display: none; }
  .features { grid-template-columns: 1fr; }
  .banner { flex-direction: column; gap: 6px; }
}

/* ---- app pages (auth, dashboard) ---- */

.page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 34px 24px 60px;
  min-height: 60vh;
}

.page h1 { margin: 0 0 14px; font-size: 30px; letter-spacing: -1px; }
.page h2 { margin: 26px 0 8px; font-size: 18px; }
.accent { color: var(--orange); }
.lead { color: var(--ink-soft); margin: 0 0 30px; }
.muted { color: var(--ink-faint); font-size: 13px; }
.big { font-size: 34px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -1px; }
.inline { display: inline-block; }
.nav-email { color: var(--ink-faint); font-size: 13px; }

.btn-primary {
  display: inline-block;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: #2a2b2d; color: var(--paper); }

button:not(.btn-primary):not(.linklike):not(.tab):not(.copy) {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
button:not(.btn-primary):not(.linklike):not(.tab):not(.copy):hover { border-color: var(--ink-faint); }

.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
}
.linklike.danger { color: #b42318; }

.banner-ok, .banner-err {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
}
.banner-ok { background: #eef7ef; border: 1px solid #cfe8d2; }
.banner-err { background: #fbeeec; border: 1px solid #f1cfc9; }
.banner-ok pre { margin: 8px 0 0; }

.block {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-dim);
  font-size: 13px;
  overflow-x: auto;
}

.auth-card {
  max-width: 380px;
  margin: 40px auto;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.auth-card h1 { font-size: 22px; }
.auth-card form { display: grid; gap: 12px; margin: 18px 0 12px; }
.auth-card label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-soft); }

input:not([type=checkbox]) {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
}
input:focus { outline: 2px solid var(--orange-dim); border-color: var(--orange); }

.dash {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 30px;
  align-items: start;
}
.dnav { display: grid; gap: 2px; position: sticky; top: 20px; }
.dnav-item {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}
.dnav-item:hover { background: var(--paper-dim); color: var(--ink); }
.dnav-item.active { background: var(--ink); color: var(--paper); font-weight: 600; }

.dpanel { min-width: 0; }
.card {
  overflow-x: auto;
  margin: 0 0 18px;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card h3 { margin: 0 0 10px; font-size: 15px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; max-width: 420px; }
.stack label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.stack label.row { display: flex; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  padding: 6px 10px 6px 0;
  color: var(--ink-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--paper-dim); }

.meter {
  height: 8px;
  margin: 10px 0 6px;
  border-radius: 99px;
  background: var(--paper-dim);
  overflow: hidden;
}
.meter i { display: block; height: 100%; background: var(--orange); }

@media (max-width: 760px) {
  .dash { grid-template-columns: 1fr; }
  .dnav { display: flex; overflow-x: auto; position: static; }
}

/* ---- expanded splash sections ---- */

.whatis, .twin-section, .privacy, .faq, .waitlist {
  max-width: 1060px;
  margin: 0 auto;
  padding: 64px 24px 8px;
}
.whatis h2, .twin-section h2, .privacy h2, .faq h2, .waitlist h2 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: -1px;
}
.whatis .sub, .twin-section .sub, .waitlist .sub { margin: 0 0 24px; color: var(--ink-soft); }

.checklist {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  max-width: 74ch;
}
.checklist li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 26px;
  color: var(--ink-soft);
  font-size: 14px;
}
.checklist li::before {
  content: "[*]";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 12px;
  top: 2px;
}
.checklist b { color: var(--ink); }

/* twin */
.twin { border-radius: 12px; margin-top: 4px; }
.twin .term-body {
  height: 300px;
  overflow-y: auto;
}
.twin-suggest {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 12px;
  background: var(--term-bg);
}
.twin-suggest button {
  padding: 4px 10px;
  border: 1px solid #35313a;
  border-radius: 999px;
  background: transparent;
  color: var(--term-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.twin-suggest button:hover { color: var(--term-ink); border-color: var(--term-gold); }
.twin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid #262329;
  background: var(--term-bg);
}
.twin-input {
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--term-ink);
  font: inherit;
  font-size: 13.5px;
}
.twin-input:focus { outline: none; }
.twin-tok, .twin-hit { flex: 0 0 auto; font-size: 12px; }

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 1060px;
  margin: 64px auto 0;
  border: 1px solid var(--line);
  background: var(--line);
}
.stat {
  display: grid;
  gap: 2px;
  padding: 26px 22px;
  background: var(--paper);
}
.stat em { color: var(--ink-faint); font-size: 11px; font-style: normal; }
.stat b { font-size: 34px; letter-spacing: -1px; }
.stat span { color: var(--ink-soft); font-size: 13px; }

/* privacy */
.privacy p { max-width: 74ch; color: var(--ink-soft); margin: 0; }

/* faq */
.faq details {
  max-width: 74ch;
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
.faq summary {
  padding: 12px 0;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::before { content: "+ "; color: var(--orange); font-weight: 700; }
.faq details[open] summary::before { content: "− "; }
.faq details p { margin: 0 0 14px; padding-left: 18px; color: var(--ink-soft); font-size: 13.5px; max-width: 70ch; }
.faq code { background: var(--paper-dim); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* waitlist */
.waitlist-form { display: flex; gap: 10px; max-width: 420px; }
.waitlist-form input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* auth extras */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--ink-faint);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.btn-oauth svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn-oauth:hover { border-color: var(--ink-faint); }

/* ---- big footer + plan CTAs ---- */

.plan-cta { display: block; margin-top: 16px; text-align: center; }

.bigfoot {
  display: block;
  max-width: 1060px;
  margin: 40px auto 0;
  padding: 26px 24px 38px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 13px;
}
.bigfoot-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.bigfoot-links a { color: var(--ink-soft); }
.bigfoot-links a:hover { color: var(--ink); }
.foot-badge {
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-faint);
}
.foot-soon { color: var(--ink-faint); cursor: default; }
.bigfoot-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.bigfoot-legal nav { display: flex; gap: 16px; }
.bigfoot-legal a:hover { color: var(--ink); }
.foot-lang { margin-left: auto; }

.twin-full { color: var(--orange); font-weight: 600; white-space: nowrap; }
.twin-full:hover { text-decoration: underline; }

.twin-frame {
  display: block;
  width: 100%;
  height: 720px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f3ead9;
  transition: height 0.15s ease;
}

/* usage chart */
.usage-chart { width: 100%; height: auto; display: block; }
.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.chart-key { display: inline-flex; align-items: center; gap: 5px; }
.chart-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-key i.half { background: #9aa4b1; opacity: 0.45; }
.chart-key i.full { background: #55585c; }

/* ================================================================
   Shared models, splash, and theme components. Splash rules stay
   scoped; shared table and theme rules serve every rendered page.
   ================================================================ */
.tbl.models td:nth-child(n+3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl.models tr.dormant td { color: var(--ink-faint); }
.status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.status.live { background: rgba(34, 197, 94, .14); color: #15803d; }
.status.soon { background: var(--paper-dim); color: var(--ink-faint); }

/* ================================================================
   Splash — quiet, ruled, one central column. Scoped under
   body.splash; shared pages are untouched. Night theme + toggle +
   display face at the end serve every page.
   ================================================================ */

body.splash { background: var(--paper); }

.splash .frame {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 100vh;
}

/* chrome */
.splash .nav {
  max-width: none;
  margin: 0;
  padding: 18px 36px;
  border-bottom: 1px solid var(--line);
}
.splash .banner {
  max-width: none;
  margin: 0;
  padding: 9px 36px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 12.5px;
}
.splash .banner .tag { font-size: 11px; padding: 1px 7px; }

/* bands */
.splash main section {
  max-width: none;
  margin: 0;
  padding: 68px 36px;
  border-bottom: 1px solid var(--line);
}

.splash .eyebrow {
  margin: 0 0 16px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* hero */
.splash .hero { padding: 88px 36px 64px; }
.splash .hero .eyebrow { margin-bottom: 26px; }
.splash .hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 5.4vw, 54px);
  letter-spacing: -1.5px;
  line-height: 1.04;
}
.splash .hero .sub {
  margin: 0 0 38px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}
.splash .install { border-radius: 8px; }
.splash .hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 24px 0 0;
  color: var(--ink-faint);
  font-size: 12.5px;
}
.splash .hero-meta b { color: var(--ink-soft); font-weight: 700; }
.splash .hero-meta i { font-style: normal; margin: 0 8px; color: var(--line); }

.splash .gh-star {
  display: inline-flex;
  align-items: stretch;
  margin-left: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.6;
}
.splash .gh-star-l { padding: 2px 9px; background: var(--paper-dim); font-weight: 700; color: var(--ink); }
.splash .gh-star-r { padding: 2px 9px; border-left: 1px solid var(--line); color: var(--ink-soft); min-width: 2.4em; text-align: center; }
.splash .gh-star:hover .gh-star-l { color: var(--orange); }

/* section headings */
.splash main section h2 {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -0.6px;
}
.splash main section .sub { margin: 0 0 30px; color: var(--ink-soft); font-size: 14.5px; }

/* download */
.splash .dlsect { padding-bottom: 0; }
.splash .dl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 24px -36px 0;
  border-top: 1px solid var(--line);
}
.splash .dl-cell {
  display: grid;
  gap: 2px;
  padding: 20px 22px 16px;
  border-right: 1px solid var(--line);
}
.splash .dl-cell:last-child { border-right: none; }
.splash .dl-cell:hover { background: var(--paper-dim); }
.splash .dl-os { font-weight: 700; font-size: 14.5px; }
.splash .dl-arch { color: var(--ink-faint); font-size: 12px; }
.splash .dl-get { margin-top: 8px; color: var(--orange); font-size: 12.5px; font-weight: 700; }
.splash .dl-shas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 -36px;
  border-top: 1px solid var(--line);
}
.splash .dl-shas a {
  padding: 6px 22px;
  border-right: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
}
.splash .dl-shas a:last-child { border-right: none; }
.splash .dl-shas a:hover { color: var(--orange); }
.splash .dl-note {
  margin: 0 -36px;
  padding: 11px 36px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 12px;
}
.splash .dl-note code { background: var(--paper-dim); padding: 1px 5px; border-radius: 4px; }

/* what-is: checklist flows in two columns on wide screens */
.splash .whatis .checklist { max-width: none; column-gap: 48px; }
@media (min-width: 900px) { .splash .whatis .checklist { columns: 2; } }
.splash .checklist li { break-inside: avoid; margin: 0 0 12px; }

/* twin */
.splash .twin-frame { border-radius: 8px; }

/* stats */
.splash .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--paper);
}
.splash .stat {
  padding: 32px 36px;
  border-right: 1px solid var(--line);
}
.splash .stat:last-child { border-right: none; }
.splash .stat b { font-size: 30px; }

/* go */
.splash .go { text-align: left; }
.splash .go h2 b { color: var(--orange); }
.splash .plans { justify-content: flex-start; margin-top: 0; }
.splash .plan { border-radius: 8px; width: 300px; }
.splash .plan.featured { border-color: var(--line); border-top: 3px solid var(--orange); }
.splash .soon { margin-top: 26px; }

/* footer */
.splash .bigfoot {
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: none;
}
.splash .foot-wait {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 30px 36px;
  border-bottom: 1px solid var(--line);
}
.splash .foot-wait b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; }
.splash .foot-wait span { color: var(--ink-soft); font-size: 13px; }
.splash .foot-wait .waitlist-form { margin: 0; }
.splash .foot-cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.splash .foot-cells > a, .splash .foot-cells > span {
  padding: 24px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.splash .foot-cells > :last-child { border-right: none; }
.splash .foot-cells > a:hover { background: var(--paper-dim); color: var(--ink); }
.splash .foot-count { color: var(--ink-faint); margin-left: 4px; }
.splash .bigfoot-legal {
  padding: 18px 36px 26px;
  border-top: 1px solid var(--line);
}

/* responsive */
@media (max-width: 960px) {
  .splash .frame { border-left: none; border-right: none; }
  .splash main section, .splash .hero { padding-left: 20px; padding-right: 20px; }
  .splash .nav, .splash .banner { padding-left: 20px; padding-right: 20px; }
  .splash .dl-grid, .splash .dl-note, .splash .dl-shas { margin-left: -20px; margin-right: -20px; }
  .splash .dl-note { padding: 11px 20px; }
  .splash .dl-grid { grid-template-columns: repeat(2, 1fr); }
  .splash .dl-cell { border-bottom: 1px solid var(--line); }
  .splash .dl-shas { display: none; }
  .splash .stats { grid-template-columns: repeat(2, 1fr); }
  .splash .stat { padding: 22px 20px; border-bottom: 1px solid var(--line); }
  .splash .foot-cells { grid-template-columns: repeat(2, 1fr); }
  .splash .foot-cells > a, .splash .foot-cells > span { border-bottom: 1px solid var(--line); }
  .splash .foot-wait { padding: 22px 20px; }
  .splash .bigfoot-legal { padding: 16px 20px 24px; }
  .splash .gh-star { margin-left: 0; margin-top: 10px; }
}

/* ================================================================
   Night — Diff Forge ADE-warm dark. /theme.js stamps data-theme
   pre-paint; tokens flip every page, the overrides below repair
   surfaces whose day colors are hardcoded.
   ================================================================ */

:root[data-theme="night"] {
  color-scheme: dark;
  --ink: #ece7dd;
  --ink-soft: #b5ada1;
  --ink-faint: #77716b;
  --paper: #131114;
  --paper-dim: #1a1719;
  --line: #29252a;
  --orange: #ff7a3d;
  --orange-dim: #8a4a22;
  --term-bg: #0d0c0f;
}
:root[data-theme="night"] .btn-download:hover,
:root[data-theme="night"] .btn-primary:hover { background: #d8d1c3; color: var(--paper); }
:root[data-theme="night"] .banner-ok { background: #152318; border-color: #26402b; }
:root[data-theme="night"] .banner-err { background: #2a1715; border-color: #4a2721; }
:root[data-theme="night"] .status.live { background: rgba(34, 197, 94, .18); color: #4ade80; }
:root[data-theme="night"] .linklike.danger { color: #f87171; }
:root[data-theme="night"] .chart-key i.full { background: #b5ada1; }
:root[data-theme="night"] .twin-frame { background: var(--term-bg); }
:root[data-theme="night"] img.brand-mark { filter: brightness(1.18); }

.theme-toggle {
  flex: 0 0 auto;
  /* Flex centring, not line-height: the mark is an SVG now precisely because
     text glyphs cannot be centred reliably across fonts. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
/* `flex: 0 0 auto` is load-bearing: an SVG with only a viewBox has no
   intrinsic width, so as a flex item it collapses to a few pixels. Same
   reason `.btn-oauth svg` carries it. */
.theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.theme-toggle:hover { color: var(--orange); border-color: var(--orange-dim); }

/* ---- display face: JetBrains Mono heavy, self-hosted ----
   Font URLs are busted when style.css's own ?v changes. */
@font-face {
  font-family: "JBM Display";
  src: url("/fonts/jbm-800.woff2?v=20260822a") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JBM Display";
  src: url("/fonts/jbm-700.woff2?v=20260822a") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.brand-word,
.splash .hero h1,
.splash main section h2,
.splash .stat b,
.splash .price {
  font-family: "JBM Display", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 800;
}

/* opencode-style annotated figures (replaces the 4-cell stats band) */
.splash .stats-note .statement { margin: 0 0 14px; font-size: 16px; }
/* Flex here puts the [*] marker in a gutter beside the prose. The prose MUST
   stay wrapped in its own span: bare text between the <b> tags would each
   become an anonymous flex item and lay out as a row of narrow columns that
   runs off the viewport. min() keeps 78ch from exceeding a phone's width. */
.splash .stats-note .annot {
  display: flex;
  gap: 14px;
  max-width: min(78ch, 100%);
  margin: 0 0 44px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.splash .stats-note .annot > em { flex: none; }
.splash .stats-note .annot > span { min-width: 0; }
.splash .stats-note .annot em { font-style: normal; color: var(--ink-faint); }
.splash .stats-note .annot b { color: var(--ink); }
.splash .figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.splash .figs figure { margin: 0; }
.splash .figs svg { display: block; width: 100%; height: auto; color: var(--ink-faint); }
.splash .figs figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}
.splash .figs figcaption b { color: var(--ink); }
@media (max-width: 960px) { .splash .figs { grid-template-columns: 1fr; gap: 30px; } }

/* Models & rates: plan-share toggle (pricing + Billing) */
.card.models-card { position: relative; margin-top: 30px; }
.models-card .pt-radio { position: absolute; opacity: 0; pointer-events: none; }
.models-card .plan-toggle {
  display: inline-flex;
  margin: 2px 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.models-card .plan-toggle label {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.models-card .plan-toggle label + label { border-left: 1px solid var(--line); }
#pt-go:checked ~ .plan-toggle label[for="pt-go"],
#pt-max:checked ~ .plan-toggle label[for="pt-max"] { background: var(--ink); color: var(--paper); }
.models-card .pt-view { display: none; }
#pt-go:checked ~ .pt-view.v-go { display: block; }
#pt-max:checked ~ .pt-view.v-max { display: block; }
.models-card > p.muted:last-child { margin-top: 14px; }
.tbl.models .thbasis { font-weight: 400; font-size: 11px; color: var(--ink-faint); }

/* /status — passive status page */
.statuspage h1 { margin: 0 0 10px; }
.statuspage .overall { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-weight: 700; font-size: 17px; }
.statuspage .overall .dot { width: 11px; height: 11px; border-radius: 50%; }
.statuspage .overall.ok .dot { background: #22c55e; }
.statuspage .overall.deg .dot { background: #f59e0b; }
.statuspage .overall.down .dot { background: #ef4444; }
.statuspage .srow {
  display: grid;
  grid-template-columns: 190px 170px 1fr 200px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-dim);
  font-size: 13px;
}
.statuspage .srow .pill { justify-self: start; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.statuspage .pill.ok { background: rgba(34,197,94,.14); color: #15803d; }
.statuspage .pill.deg { background: rgba(245,158,11,.16); color: #b45309; }
.statuspage .pill.down { background: rgba(239,68,68,.14); color: #b91c1c; }
.statuspage .strip { display: flex; gap: 2px; }
.statuspage .strip .c { flex: 1; max-width: 9px; height: 22px; border-radius: 2px; }
.statuspage .strip .c.ok { background: rgba(34,197,94,.55); }
.statuspage .strip .c.deg { background: #f59e0b; }
.statuspage .strip .c.down { background: #ef4444; }
.statuspage .srow .meta { text-align: right; color: var(--ink-faint); }
.statuspage .pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.statuspage .pstats b { display: block; font-size: 22px; letter-spacing: -0.5px; }
.statuspage .pstats span { color: var(--ink-soft); font-size: 12.5px; }
@media (max-width: 800px) {
  .statuspage .srow { grid-template-columns: 1fr 1fr; }
  .statuspage .srow .strip { grid-column: 1 / -1; }
  .statuspage .srow .meta { text-align: left; }
  .statuspage .pstats { grid-template-columns: repeat(2, 1fr); }
}
:root[data-theme="night"] .statuspage .pill.ok { color: #4ade80; }
:root[data-theme="night"] .statuspage .pill.deg { color: #fbbf24; }
:root[data-theme="night"] .statuspage .pill.down { color: #f87171; }

/* Weekly allowance widget (Go panel + Billing) — ratio, never dollars */
.weekmeter .wm-head { color: var(--ink-soft); font-size: 13px; }
.wm-pct { margin: 6px 0 12px; font-size: 15px; color: var(--ink-soft); }
.wm-pct b {
  margin-right: 6px;
  font-family: "JBM Display", ui-monospace, Menlo, monospace;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
}
/* The meter is a shared component: the weekly view measures a ratio, the
   credits card measures dollars. Keep these selectors UNSCOPED — they were
   once .weekmeter-only, which silently left the credits bar unstyled and
   therefore invisible. */
.wm-bar {
  height: 12px;
  border-radius: 99px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* Healthy allowance reads green and drains; amber under 30%, red under 10%.
   Orange was the brand colour rather than a health signal, so a full week
   and a nearly-spent one looked the same at a glance. */
.wm-bar i {
  display: block;
  height: 100%;
  background: #22c55e;
  transition: width 240ms ease;
}
.wm-bar.warn i { background: #f59e0b; }
.wm-bar.crit i { background: #ef4444; }
.wm-reset { margin: 10px 0 0; color: var(--ink-faint); font-size: 12.5px; }

/* Product marks on the plan cards — pixel art, integer-crisp at any size */
/* Plan cards: a small mark-only badge, not the 800px product art. The big
   square repeated the plan name that sits directly beneath it, and read as a
   stray white box on Go against a heavy black slab on Go Max. The badge
   carries the identity (light for Go, ink for Go Max) without competing with
   the price. The full product art still ships to Stripe Checkout, where a
   large square is exactly right. */
.plan-badge {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  image-rendering: pixelated;
}
.plan.featured .plan-badge { border-color: var(--orange); }

/* The shrine closes the lockup on the right of the wordmark. It is a full
   colour raster (not the flat orange calligraphy), so it keeps its own
   colours in both themes and only drops out when the nav needs the width. */
.brand-shrine {
  width: 26px;
  height: 24px;
  margin-left: 4px;
  object-fit: contain;
}
@media (max-width: 720px) { .brand-shrine { display: none; } }

/* /status: latency sparkline + derived incident log */
.statuspage .srow { grid-template-columns: 175px 155px 1fr 90px 185px; }
.statuspage .sparkwrap { display: block; }
.statuspage .spark { width: 100%; height: 22px; overflow: visible; }
.statuspage .spark polyline { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.statuspage .spark-empty { color: var(--line); font-size: 12px; }
.statuspage .incident {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--paper-dim);
  font-size: 13px;
}
.statuspage .incident:last-child { border-bottom: none; }
@media (max-width: 800px) {
  .statuspage .srow { grid-template-columns: 1fr 1fr; }
  .statuspage .sparkwrap { grid-column: 1 / -1; }
}

/* usage-credits reuse the weekly meter's markup and health colours on
   purpose — one gauge to learn, not two. The dedicated purple accent that
   lived here made the card look like a different product. Only the limit
   form needs its own layout. */
.creditlimit { margin-top: 16px; align-items: flex-end; }
.creditlimit label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.creditlimit input { max-width: 220px; }

/* usage-credits: balance and top-ups share the header row, and the limit
   form runs inline — the stacked version pushed everything below it off
   screen for no informational gain. */
.creditcard .credit-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.creditcard .credit-top h3 { margin-bottom: 2px; }
.creditcard .wm-pct { margin: 0 0 10px; }
.creditcard .wm-pct b { font-size: 22px; letter-spacing: -0.5px; }
/* No monthly limit means the bar has no denominator. Show a neutral track
   rather than a full or empty one — both of those state a number we do not
   have. */
.wm-bar.none { opacity: 0.55; }
.creditcard .credit-actions { gap: 8px; }
.creditcard .wm-reset { margin-top: 8px; }
.creditlimit { margin-top: 14px; align-items: center; gap: 10px; }
.creditlimit label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}
.creditlimit input { max-width: 110px; }
.creditlimit .muted { flex: 1 1 260px; min-width: 0; }

/* Usage history: one dense row per month, bars relative to the busiest month
   shown so early low-spend months stay readable instead of collapsing. */
.months { display: grid; gap: 6px; }
.mrow {
  display: grid;
  grid-template-columns: 78px 1fr 76px 190px;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mrow.current .mname, .mrow.current .mcost { color: var(--ink); font-weight: 700; }
.mname { font-variant-numeric: tabular-nums; }
.mbar { display: block; height: 8px; border-radius: 99px; background: var(--paper-dim); overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--orange); }
.mrow.current .mbar i { background: #22c55e; }
.mcost { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.mmeta { color: var(--ink-faint); }
@media (max-width: 760px) {
  .mrow { grid-template-columns: 66px 1fr 70px; }
  .mmeta { display: none; }
}