/* ==========================================================================
   EDAUtils AI SDK — edautils.ai
   Copyright (C) 2026 EDAUtils - All Rights Reserved, Author: Kanai Ghosh
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Ground: deep indigo, not black — a wafer under inspection light */
  --ink:        #0B1020;
  --ink-2:      #101736;
  --ink-3:      #161E42;
  --rule:       #24304F;
  --rule-soft:  #1B2440;

  /* Signal cyan = clocks, nets, verified paths */
  --signal:     #4CC9F0;
  --signal-dim: #2A93B8;
  /* Violet = the model / the agent */
  --violet:     #8A7CF8;
  /* Amber is reserved for attention states only. Never decoration. */
  --amber:      #F2A65A;
  --pass:       #58D9A4;

  --paper:      #E7ECF5;
  --mute:       #8B9BBC;
  --mute-2:     #5F6E8F;

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1240px;
  --gut: 28px;

  --step--1: clamp(.76rem, .74rem + .1vw, .82rem);
  --step-0:  clamp(.94rem, .9rem + .15vw, 1rem);
  --step-1:  clamp(1.1rem, 1.03rem + .3vw, 1.28rem);
  --step-2:  clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.5rem + 3vw, 4rem);

  --top: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient: a faint orthogonal routing grid, like a floorplan */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 74px 74px;
  opacity: .34;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--paper); }

code, pre, kbd, .mono { font-family: var(--font-mono); font-variant-ligatures: none; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top);
  z-index: 90;
  display: flex; align-items: center;
  background: rgba(11, 16, 32, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
 /* Header runs wider than the 1240px content shell so the brand and the CTA
    sit near the edges, and the links take the middle instead of leaving one
    large dead gap between two clusters. */
.top .shell { max-width: 1460px; display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 15px; flex: none; }
/* Logo.png is 342x76. 38px CSS height needs exactly 76 device px at 2x DPR,
   so this is the largest size the current asset stays sharp at. */
.brand img { height: 38px; width: auto; display: block; }
.brand b {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--paper);
}
.brand span {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--signal-dim);
  border-left: 1px solid var(--rule); padding-left: 15px;
}
.nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 26px; }
.top .top-cta { flex: none; }
.top .nav-cta { display: none; }   /* .btn sets inline-flex later, so scope this */
.nav a {
  font-size: .875rem; color: var(--mute); white-space: nowrap;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--paper); }
.nav a[aria-current='page'] { color: var(--paper); border-bottom-color: var(--signal); }
.burger {
  display: none; background: none; border: 1px solid var(--rule); color: var(--paper);
  border-radius: 7px; padding: 7px 10px; cursor: pointer; font-size: .9rem;
}
main { padding-top: var(--top); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  padding: 11px 21px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-fill  { background: var(--signal); color: #06121C; border-color: var(--signal); font-weight: 600; }
.btn-fill:hover { background: #6ED6F6; color: #06121C; }
.btn-line  { background: transparent; color: var(--paper); border-color: var(--rule); }
.btn-line:hover { border-color: var(--signal); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--mute); padding: 11px 4px; }
.btn-ghost:hover { color: var(--paper); }

/* ---------------------------------------------------------------- sections */
.band { padding: 84px 0; position: relative; z-index: 1; }
.band-tint { background: linear-gradient(180deg, transparent, rgba(16,23,54,.55), transparent); }
.band-solid { background: var(--ink-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .19em; color: var(--signal-dim); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); max-width: 90px; }

.h-sec { font-size: var(--step-3); margin: 0 0 14px; }
.lede { color: var(--mute); max-width: 68ch; margin: 0; font-size: var(--step-1); line-height: 1.55; }
.sec-head { margin-bottom: 46px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 76px 0 66px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 58px; align-items: center; }
.hero h1 { font-size: var(--step-4); font-weight: 600; margin: 0 0 22px; }
.hero h1 .lo { display: block; color: var(--mute-2); font-size: .58em; font-weight: 500; letter-spacing: -.01em; }
.hero h1 .hi {
  display: block;
  background: linear-gradient(96deg, var(--signal) 0%, #9FD8F5 44%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--mute); max-width: 54ch; font-size: 1.02rem; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------- SIGNATURE: the plan card */
.plan {
  background: #080D1B;
  border: 1px solid var(--rule);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 28px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(76,201,240,.06);
}
.plan-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-bottom: 1px solid var(--rule);
  background: var(--ink-2);
}
.plan-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; }
.plan-dot.live { background: var(--pass); box-shadow: 0 0 9px var(--pass); }
.plan-bar b {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  color: var(--mute); letter-spacing: .04em; margin-left: 3px;
}
.plan-bar .plan-target {
  margin-left: auto; font-family: var(--font-mono); font-size: .66rem;
  color: var(--signal-dim); border: 1px solid var(--rule); border-radius: 5px; padding: 3px 8px;
}
.plan-prompt {
  padding: 17px 18px; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.6; color: var(--paper);
  min-height: 3.6em;
}
.plan-prompt .caret {
  color: var(--signal); margin-right: 9px; font-weight: 700;
}
.plan-prompt .cur {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--signal); animation: blink 1.05s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.plan-steps { padding: 7px 0 12px; list-style: none; margin: 0; }
.plan-step {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px;
  padding: 11px 18px;
  opacity: 0; transform: translateY(7px);
  transition: opacity .4s ease, transform .4s ease;
}
.plan-step.in { opacity: 1; transform: none; }
.plan-step + .plan-step { border-top: 1px solid var(--rule-soft); }
.plan-n {
  font-family: var(--font-mono); font-size: .68rem; color: var(--signal);
  border: 1px solid var(--rule); border-radius: 6px;
  height: 22px; display: grid; place-items: center; margin-top: 2px;
}
.plan-step.done .plan-n { color: var(--pass); border-color: rgba(88,217,164,.4); }
.plan-agent {
  font-family: var(--font-mono); font-size: .8rem; color: var(--paper);
  display: block; word-break: break-word;
}
.plan-act { font-size: .78rem; color: var(--mute); display: block; margin-top: 1px; }
.plan-cmd {
  font-family: var(--font-mono); font-size: .705rem; color: var(--signal-dim);
  margin-top: 7px; white-space: pre-wrap; word-break: break-word;
  border-left: 1px solid var(--rule); padding-left: 10px; line-height: 1.55;
}
.plan-foot {
  border-top: 1px solid var(--rule); padding: 11px 18px;
  font-family: var(--font-mono); font-size: .69rem; color: var(--mute-2);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.plan-foot .ok { color: var(--pass); }
.plan-replay {
  background: none; border: 1px solid var(--rule); color: var(--mute);
  font-family: var(--font-mono); font-size: .69rem; border-radius: 6px;
  padding: 4px 10px; margin-left: auto; cursor: pointer;
}
.plan-replay:hover { border-color: var(--signal); color: var(--paper); }

/* ---------------------------------------------------------------- stats */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.stat { padding: 26px 22px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat b {
  display: block; font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 600; color: var(--paper); letter-spacing: -.02em;
}
.stat span {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--mute-2); margin-top: 5px;
}

/* ---------------------------------------------------------------- tiers */
/* The numbering here is real: the product has Tier 0 through Tier 3. */
.tiers { display: grid; gap: 2px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.tier {
  background: var(--ink-2); padding: 24px 26px;
  display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 26px; align-items: start;
}
.tier:hover { background: var(--ink-3); }
.tier-id { font-family: var(--font-mono); font-size: .68rem; color: var(--signal-dim); letter-spacing: .1em; }
.tier-id b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--signal); letter-spacing: -.02em; }
.tier h3 { font-size: var(--step-1); margin-bottom: 6px; }
.tier h3 code { font-size: .66em; color: var(--mute-2); font-weight: 400; margin-left: 9px; }
.tier p { margin: 0; color: var(--mute); font-size: .93rem; max-width: 78ch; }

/* ---------------------------------------------------------------- lifecycle */
.life { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border-radius: 10px; overflow: hidden; }
.life li {
  background: var(--ink); padding: 15px 20px; display: flex; gap: 15px; align-items: baseline;
  font-size: .93rem; color: var(--mute);
}
.life li b { font-family: var(--font-mono); font-size: .72rem; color: var(--signal); flex: none; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; gap: 18px; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--ink-2); border: 1px solid var(--rule); border-radius: 12px;
  padding: 24px; transition: border-color .18s ease, transform .18s ease, background .18s ease;
  position: relative; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--signal-dim); transform: translateY(-2px); }
.card h3 { font-size: var(--step-1); margin-bottom: 9px; }
.card p { margin: 0; color: var(--mute); font-size: .91rem; }
.card .proof {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: .73rem; color: var(--signal-dim); line-height: 1.6;
}

/* domain card */
a.dcard { display: flex; flex-direction: column; color: inherit; }
a.dcard:hover { color: inherit; }
.dcard-top { display: flex; align-items: baseline; gap: 11px; margin-bottom: 11px; flex-wrap: wrap; }
.dcard-top h3 { font-size: var(--step-1); margin: 0; }
.pill {
  font-family: var(--font-mono); font-size: .63rem; text-transform: uppercase;
  letter-spacing: .11em; color: var(--signal-dim);
  border: 1px solid var(--rule); border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.dcard code { font-family: var(--font-mono); font-size: .74rem; color: var(--mute-2); }
.dcard p { flex: 1; }
.chain {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: .71rem; color: var(--mute);
}
.chain i { color: var(--signal-dim); font-style: normal; }
.dcard-more {
  margin-top: 15px; font-family: var(--font-mono); font-size: .72rem; color: var(--signal);
  display: flex; align-items: center; gap: 7px;
}
a.dcard:hover .dcard-more { gap: 12px; }
.dcard-more span { transition: gap .16s; }

/* ---------------------------------------------------------------- explorer */
.finder {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.search { position: relative; flex: 1; min-width: 230px; }
.search input {
  width: 100%; background: var(--ink-2); border: 1px solid var(--rule); color: var(--paper);
  font-family: var(--font-mono); font-size: .85rem; padding: 11px 14px 11px 36px; border-radius: 9px;
}
.search input::placeholder { color: var(--mute-2); }
.search input:focus { border-color: var(--signal); outline: none; }
.search::before {
  content: '⌕'; position: absolute; left: 13px; top: 50%; transform: translateY(-52%);
  color: var(--mute-2); font-size: 1.05rem;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  background: transparent; border: 1px solid var(--rule); color: var(--mute);
  font-family: var(--font-mono); font-size: .72rem; padding: 7px 13px; border-radius: 20px;
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.chip:hover { color: var(--paper); border-color: var(--mute-2); }
.chip[aria-pressed='true'] { background: var(--signal); border-color: var(--signal); color: #06121C; font-weight: 600; }
.count { font-family: var(--font-mono); font-size: .73rem; color: var(--mute-2); white-space: nowrap; }

/* agent row */
.alist { display: grid; gap: 10px; }
.arow {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 16px; align-items: center;
  background: var(--ink-2); border: 1px solid var(--rule); border-radius: 10px;
  padding: 15px 18px; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; font-size: inherit; color: inherit;
  transition: border-color .16s ease, background .16s ease;
}
.arow:hover { border-color: var(--signal-dim); background: var(--ink-3); }
.abadge {
  width: 42px; height: 42px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  background: rgba(76,201,240,.09); color: var(--signal); border: 1px solid rgba(76,201,240,.22);
}
.arow-main strong { font-family: var(--font-mono); font-size: .85rem; font-weight: 500; color: var(--paper); display: block; word-break: break-word; }
.arow-main em { font-style: normal; font-size: .85rem; color: var(--mute); display: block; margin-top: 2px; }
.arow-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.arow-meta code { font-family: var(--font-mono); font-size: .72rem; color: var(--mute-2); }
.tag {
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--violet); border: 1px solid rgba(138,124,248,.3); border-radius: 5px; padding: 2px 8px;
}
.empty { padding: 46px 0; text-align: center; color: var(--mute); }
.empty b { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--paper); margin-bottom: 8px; }

/* ---------------------------------------------------------------- drawer */
.scrim {
  position: fixed; inset: 0; background: rgba(4,7,16,.72); backdrop-filter: blur(3px);
  z-index: 100; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 100%);
  background: var(--ink); border-left: 1px solid var(--rule);
  z-index: 101; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.drawer.open { transform: none; }
.drawer-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 26px; border-bottom: 1px solid var(--rule);
  background: rgba(11,16,32,.94); backdrop-filter: blur(10px);
}
.drawer-bar h2 { font-family: var(--font-mono); font-size: .96rem; font-weight: 500; letter-spacing: -.01em; flex: 1; word-break: break-word; }
.x {
  background: none; border: 1px solid var(--rule); color: var(--mute);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1rem; flex: none;
}
.x:hover { color: var(--paper); border-color: var(--signal); }
.drawer-body { padding: 26px; }
.dsub { color: var(--mute); font-size: 1rem; margin: 0 0 20px; }
.kv { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.kv div { background: var(--ink-2); padding: 11px 15px; display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 14px; align-items: baseline; }
.kv dt, .kv b {
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mute-2); margin: 0;
}
.kv dd, .kv span { margin: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--paper); word-break: break-word; }
.dblock { margin-bottom: 24px; }
.dblock h4 {
  font-family: var(--font-mono); font-size: .67rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--signal-dim); margin: 0 0 9px;
}
.dblock p { margin: 0; color: var(--mute); font-size: .93rem; }
.kwlist { display: flex; flex-wrap: wrap; gap: 6px; }
.kw { font-family: var(--font-mono); font-size: .71rem; color: var(--mute); background: var(--ink-2); border: 1px solid var(--rule); border-radius: 5px; padding: 4px 9px; }

pre.code {
  margin: 0; background: #080D1B; border: 1px solid var(--rule); border-radius: 9px;
  padding: 15px 17px; overflow-x: auto;
  font-size: .755rem; line-height: 1.65; color: var(--signal-dim); white-space: pre;
}
pre.code .c { color: var(--mute-2); }
.io { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.io-box { background: var(--ink-2); border: 1px solid var(--rule); border-radius: 9px; padding: 14px 16px; }
.io-box h5 {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--mute-2); font-weight: 500;
}
.io-box.out { border-color: rgba(88,217,164,.26); }
.io-box.out h5 { color: var(--pass); }
.io-box p, .io-box li { font-family: var(--font-mono); font-size: .76rem; color: var(--paper); margin: 0; line-height: 1.7; }
.io-box ul { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- figures */
figure.dia { margin: 34px 0 0; }
figure.dia img {
  width: 100%; height: auto; display: block; border-radius: 11px;
  border: 1px solid var(--rule); background: #fff;
  /* Deck plates read as inspected artifacts: quiet until you look at them. */
  opacity: .9; filter: saturate(.94);
  transition: opacity .25s ease, filter .25s ease, border-color .25s ease;
}
figure.dia:hover img { opacity: 1; filter: none; border-color: var(--signal-dim); }
figure.dia figcaption {
  font-family: var(--font-mono); font-size: .71rem; color: var(--mute-2);
  margin-top: 11px; text-align: center;
}

/* ---------------------------------------------------------------- table */
.tw { overflow-x: auto; border: 1px solid var(--rule); border-radius: 11px; position: relative; }
/* Below the table's min-width the row scrolls inside this box, not the page.
   Without a hint nobody discovers that, so fade the right edge and say so. */
.tw::after {
  content: ''; position: sticky; right: 0; top: 0; float: right;
  width: 42px; height: 100%; pointer-events: none; display: none;
  background: linear-gradient(90deg, transparent, var(--ink-2));
}
.tw-hint {
  display: none; margin: 9px 0 0;
  font-family: var(--font-mono); font-size: .68rem; color: var(--mute-2);
}
@media (max-width: 820px) {
  .tw::after { display: block; }
  .tw-hint { display: block; }
}
table.cmp { width: 100%; border-collapse: collapse; min-width: 700px; font-size: .87rem; }
table.cmp th, table.cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rule-soft); }
table.cmp thead th {
  background: var(--ink-2); font-family: var(--font-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--mute-2); font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
table.cmp thead th:first-child { color: var(--signal); }
table.cmp tbody th { font-weight: 500; color: var(--paper); font-size: .87rem; }
table.cmp td { color: var(--mute); }
table.cmp td:first-of-type { color: var(--paper); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- lists */
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plain li { display: flex; gap: 12px; align-items: baseline; color: var(--mute); font-size: .93rem; }
.plain li::before { content: '—'; color: var(--signal-dim); flex: none; font-family: var(--font-mono); }
.defs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 11px; overflow: hidden; }
.defs > div { background: var(--ink-2); padding: 15px 19px; display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 20px; align-items: baseline; }
.defs code { font-family: var(--font-mono); font-size: .78rem; color: var(--signal); }
.defs p { margin: 0; color: var(--mute); font-size: .89rem; }

/* ---------------------------------------------------------------- cta */
.cta { text-align: center; padding: 92px 0; }
.cta h2 { font-size: var(--step-3); margin-bottom: 15px; }
.cta p { color: var(--mute); max-width: 56ch; margin: 0 auto 30px; }
.cta .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- marquee */
.marq { overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--ink-2); padding: 9px 0; }
.marq-in { display: flex; gap: 46px; white-space: nowrap; animation: slide 34s linear infinite; font-family: var(--font-mono); font-size: .72rem; color: var(--mute-2); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--rule); background: var(--ink-2); padding: 52px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.foot h5 {
  font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--mute-2); margin: 0 0 14px; font-weight: 500;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--mute); font-size: .87rem; }
.foot a:hover { color: var(--paper); }
.foot-note { color: var(--mute-2); font-size: .87rem; max-width: 40ch; margin: 12px 0 0; }
.foot-bot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .71rem; color: var(--mute-2);
}

/* ---------------------------------------------------------------- utils */
.mt0 { margin-top: 0; }
.mt3 { margin-top: 34px; }
.mt5 { margin-top: 56px; }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: start; }
.wrap-load { padding: 90px 0; text-align: center; color: var(--mute-2); font-family: var(--font-mono); font-size: .8rem; }

/* ---------------------------------------------------------------- responsive */

/* Header-only breakpoints. The full three-cluster header needs about 1240px;
   below that shed the "AI SDK" label, then fall back to the burger — well
   before anything can push the CTA off-screen. */
@media (max-width: 1240px) {
  .brand span { display: none; }
  .nav { gap: 18px; }
  .nav a { font-size: .86rem; }
}
@media (max-width: 1040px) {
  .top .shell { gap: 16px; }
  .nav {
    position: fixed; top: var(--top); left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--rule);
    padding: 8px 20px 18px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule-soft); font-size: .95rem; }
  .top .nav-cta { display: inline-flex; margin-top: 14px; justify-content: center; }
  .top .top-cta { display: none; }
  .burger { display: block; margin-left: auto; }
}

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  :root { --gut: 20px; }
  .band { padding: 62px 0; }
  .brand img { height: 32px; }
  .tier { grid-template-columns: 1fr; gap: 12px; }
  .arow { grid-template-columns: 38px minmax(0,1fr); }
  .arow-meta { grid-column: 1 / -1; justify-content: flex-start; padding-left: 54px; }
  .abadge { width: 38px; height: 38px; }
  .defs > div, .kv div { grid-template-columns: 1fr; gap: 6px; }
  .foot-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--rule); padding: 18px 20px; }
  .stat:nth-child(even) { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .plan-step { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- lead tabs */
/* The hero cycles the Leads. These are a real control, not decoration:
   picking one cancels the carousel for good. */
.lead-tabs {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 11px;
}
.ltab {
  background: transparent; border: 1px solid var(--rule); color: var(--mute-2);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .02em;
  padding: 6px 11px; border-radius: 7px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.ltab:hover { color: var(--paper); border-color: var(--mute-2); }
.ltab[aria-selected='true'] {
  color: #06121C; background: var(--signal); border-color: var(--signal); font-weight: 700;
}

/* ---------------------------------------------------------------- versus */
.versus {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.vs-col { background: var(--ink-2); padding: 26px 28px; }
.vs-col h3 {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .15em; margin: 0 0 17px;
}
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vs-col li { font-size: .92rem; display: flex; gap: 11px; align-items: baseline; }
.vs-col li::before { flex: none; font-family: var(--font-mono); font-size: .82rem; }

.vs-them h3 { color: var(--mute-2); }
.vs-them li { color: var(--mute); }
.vs-them li::before { content: '·'; color: var(--mute-2); }

.vs-us { background: var(--ink-3); }
.vs-us h3 { color: var(--signal); }
.vs-us li { color: var(--paper); }
.vs-us li::before { content: '✓'; color: var(--pass); }

.vs-bottom {
  margin: 22px 0 0; padding: 17px 22px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--ink-2);
  font-family: var(--font-mono); font-size: .8rem; color: var(--signal-dim); line-height: 1.65;
}

/* the EDAUtils column, marked so the eye lands on it */
table.cmp th.me, table.cmp td.me {
  background: rgba(76,201,240,.055);
  border-left: 1px solid rgba(76,201,240,.28);
  border-right: 1px solid rgba(76,201,240,.28);
}
table.cmp td.me { color: var(--paper); font-weight: 500; }
table.cmp thead th.me { color: var(--signal); }

/* ---------------------------------------------------------------- shot */
figure.shot {
  margin: 0; border: 1px solid var(--rule); border-radius: 13px; overflow: hidden;
  background: var(--ink-2); box-shadow: 0 22px 60px -30px rgba(0,0,0,.85);
}
figure.shot img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--rule); }
figure.shot figcaption {
  padding: 17px 22px; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: baseline;
}
figure.shot figcaption strong {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--paper);
}
figure.shot figcaption code { font-family: var(--font-mono); font-size: .72rem; color: var(--signal-dim); }
figure.shot figcaption span { flex: 1 1 320px; color: var(--mute); font-size: .89rem; }
figure.shot figcaption a { font-family: var(--font-mono); font-size: .74rem; white-space: nowrap; }
#gallery .chips { margin-bottom: 18px; }

@media (max-width: 780px) {
  .versus { grid-template-columns: 1fr; }
  .lead-tabs { gap: 4px; }
  .ltab { font-size: .64rem; padding: 5px 9px; }
}