:root {
  --ink: #141414;
  --muted: #595959;
  --soft: #7a7a7a;
  --line: #e6e6ee;
  --bg: #ffffff;
  --panel: #ffffff;
  --tint: #f7f7f7;
  --tint-purple: #f1f2ff;
  --tint-lav: #ebdfff;
  --accent: #7e76ff;
  --accent-deep: #602ffc;
  --accent-blue: #6d7cff;
  --magenta: #ff51ff;
  --grad: linear-gradient(120deg, #602ffc, #7e76ff 55%, #ff51ff 130%);
  --warn-bg: #fdf3f2;
  --warn-line: #e6c3bd;
  --ok: #17603a;
  --fail: #97321f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(6px);
}

.wordmark { font-weight: 750; letter-spacing: -.02em; font-size: 1.0625rem; }
.wordmark .ai { color: var(--accent-deep); }
.tag { color: var(--muted); font-size: .8125rem; }

.topnav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topnav a { color: var(--muted); text-decoration: none; font-size: .875rem; }
.topnav a:hover { color: var(--accent-deep); }

main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Loading and error views keep the original narrow column. */
#loading, #error { max-width: 46rem; margin-left: auto; margin-right: auto; }
#account { max-width: 56rem; margin-left: auto; margin-right: auto; }

/* Landing nav anchors point into the (hidden) landing section — drop the nav
   entirely once the account view is showing. Sign-out lives in the page. */
body:has(#account:not([hidden])) .topnav { display: none; }

h1 { font-size: 2.625rem; line-height: 1.12; margin: .75rem 0 1rem; letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: 1rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
h3 { font-size: .9375rem; margin: 0; letter-spacing: -.01em; }

.lede { font-size: 1.125rem; color: #2b3239; max-width: 44rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

a { color: var(--accent-deep); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Hero ---------- */

.hero { padding: 2.5rem 0 1.5rem; text-align: center; }
.hero .lede { margin: 0 auto 1.5rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .25rem;
  padding: .375rem .875rem;
  border: 1px solid var(--tint-lav);
  background: var(--tint-purple);
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--accent-deep);
  font-weight: 550;
}
.pill .sep { color: var(--accent); opacity: .5; }

.cta-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0 .75rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  max-width: 46rem;
  margin: 2rem auto 0;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .875rem .5rem .75rem;
}
.stat.hl { border-color: var(--accent); background: var(--tint-purple); }
.stat .pct { display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.stat.hl .pct { color: var(--accent-deep); }
.stat .lvl { display: block; font-size: .75rem; color: var(--muted); margin-top: .125rem; }

/* ---------- Landing sections ---------- */

.sec { margin: 3.5rem 0 0; }
.sec > h2 { font-size: 1.625rem; letter-spacing: -.02em; font-weight: 750; margin: 0 0 .25rem; }
.sec > .sub { color: var(--muted); margin: 0 0 1.5rem; max-width: 46rem; }

/* Comparison table */

.compare { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.compare th, .compare td {
  text-align: left;
  padding: .75rem .875rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare th { font-weight: 650; font-size: .8125rem; color: var(--muted); }
.compare th.us, .compare td.us { background: var(--tint-purple); }
.compare th.us { color: var(--accent-deep); }
.compare td:first-child { font-weight: 550; white-space: nowrap; }
.compare tr:last-child td { border-bottom: 0; }

/* Flow steps */

.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }

.flow-step {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.125rem;
}
.flow-step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: .8125rem;
  font-weight: 650;
  margin-bottom: .5rem;
}
.flow-step h3 { margin-bottom: .25rem; }
.flow-step p { margin: 0; font-size: .875rem; color: var(--muted); }

/* Delegation map (adapted from agent-runtime-viz) */

.viz-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.125rem;
  margin-top: .875rem;
}
.viz-cap { margin: 0 0 .5rem; font-size: .8125rem; color: var(--muted); }
.viz-scroll { overflow-x: auto; }
.viz-scroll svg { display: block; width: 100%; min-width: 56rem; height: auto; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .875rem;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--muted);
}
.legend i {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 3px;
  margin-right: .375rem;
  vertical-align: -1px;
}

/* Tool families */

.families { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .875rem; }

.family {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.125rem;
  border-top: 3px solid var(--fc, var(--accent));
}
.family-head { display: flex; align-items: center; gap: .5rem; }
.family-head .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--fc, var(--accent)); }
.family-head .count {
  margin-left: auto;
  font-size: .75rem;
  color: var(--muted);
  background: var(--tint);
  border-radius: 999px;
  padding: .0625rem .5rem;
}
.family-blurb { margin: .375rem 0 .625rem; font-size: .8125rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .125rem .375rem;
  cursor: help;
}
.chip:hover { border-color: var(--fc, var(--accent)); background: #fff; }

.family[data-fam="computer_use"]   { --fc: #8957e5; }
.family[data-fam="web_research"]   { --fc: #316dca; }
.family[data-fam="archive_wiki"]   { --fc: #1a7f37; }
.family[data-fam="compute"]        { --fc: #bc4c00; }
.family[data-fam="vision_media"]   { --fc: #9a6700; }
.family[data-fam="streetview_geo"] { --fc: #1b7c83; }
.family[data-fam="reasoning"]      { --fc: #bf3989; }
.family[data-fam="memory"]         { --fc: #57606a; }
.family[data-fam="control"]        { --fc: #cf222e; }

/* CTA band */

.cta-band {
  margin: 3.5rem 0 0;
  border-radius: 16px;
  background: var(--grad);
  color: #fff;
  text-align: center;
  padding: 2.25rem 1.5rem;
}
.cta-band h2 { font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.cta-band p { margin: .25rem auto 1.25rem; max-width: 38rem; opacity: .92; }
.cta-band .btn.ghost {
  background: #fff;
  border-color: #fff;
  color: var(--accent-deep);
  font-weight: 600;
  padding: .625rem 1.25rem;
}

/* ---------- Shared components (account view depends on these) ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  margin: 1.25rem 0;
}

.panel.accent { border-color: var(--accent); background: var(--tint-purple); }
.panel.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.panel p:last-child { margin-bottom: 0; }

.steps { padding-left: 1.25rem; }
.steps li { margin: .375rem 0; }

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: .5rem .875rem;
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .55; cursor: default; }

.btn.primary {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  font-weight: 600;
  padding: .625rem 1.25rem;
}

.btn.primary:hover { background: #4c22cc; border-color: #4c22cc; }

.topup-row { display: flex; gap: .5rem; margin: .75rem 0 .5rem; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
}

.block {
  display: block;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .625rem .75rem;
  overflow-x: auto;
  white-space: pre;
}

.copyrow {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .75rem 0 .5rem;
}

.copyrow .block { flex: 1; min-width: 0; }

.figure { font-size: 1.75rem; font-weight: 650; margin: 0; letter-spacing: -.02em; }

.runs { width: 100%; border-collapse: collapse; font-size: .875rem; }
.runs th, .runs td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.runs th { color: var(--muted); font-weight: 500; font-size: .8125rem; }
.runs tr:last-child td { border-bottom: 0; }
.runs .num { text-align: right; white-space: nowrap; }

.runs .q {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  font-size: .75rem;
  text-transform: lowercase;
  border-radius: 999px;
  padding: .0625rem .5rem;
  border: 1px solid var(--line);
  background: var(--tint);
  color: var(--muted);
}
.badge.done { color: var(--ok); background: #e9f5ee; border-color: #c4e3d1; }
.badge.failed { color: var(--fail); background: var(--warn-bg); border-color: var(--warn-line); }
.why { display: block; margin-top: .125rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  margin: 0;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  padding: .5rem .875rem;
  font-size: .875rem;
}

/* ---------- Account view ---------- */

.acct-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 .5rem;
}
.acct-head p { margin: 0; }
.acct-title { font-size: 1.875rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .125rem; }

.acct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem;
  margin: 1.25rem 0;
}
.acct-grid .panel { margin: 0; }

.panel.credit { background: var(--tint-purple); border-color: var(--tint-lav); }
.panel.credit .figure { font-size: 2.25rem; }

.block.term { background: #17131f; color: #eceafb; border-color: #17131f; }

.inline { display: inline; margin: 0; }
.btn.small { padding: .25rem .625rem; font-size: .8125rem; }

.foot {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: .8125rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 48rem) {
  h1 { font-size: 1.875rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; }
  .compare td:first-child { white-space: normal; }
  .topnav a:not(.btn) { display: none; }
  .acct-grid { grid-template-columns: 1fr; }
  .acct-title { font-size: 1.5rem; }
}

@media (max-width: 32rem) {
  .runs .q { max-width: 10rem; }
  .copyrow { flex-direction: column; }
}