@import url("/tokens/colors.css");

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-500-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-700-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-600-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f2efe7;
  --paper-deep: #e8e4da;
  --ink: #171816;
  --muted: #64665f;
  --line: rgba(23, 24, 22, 0.16);
  --line-strong: rgba(23, 24, 22, 0.28);
  --lime: #d7ff63;
  --lime-deep: #a8e72c;
  --violet: #c9baff;
  --sky: #b9ddff;
  --peach: #ff9d74;
  --ui: var(--workspace-surface);
  --ui-raised: var(--workspace-surface-raised);
  --ui-soft: var(--workspace-surface-hover);
  --ui-line: var(--workspace-border);
  --ui-muted: var(--workspace-muted);
  --ui-text: var(--workspace-text);
  --green: var(--workspace-accent);
  --red: var(--workspace-danger);
  --max: 1240px;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --shadow: 0 34px 90px rgba(25, 28, 22, 0.18), 0 4px 14px rgba(25, 28, 22, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(23, 24, 22, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 24, 22, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  pointer-events: none;
}

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

button,
input {
  font: inherit;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border: 1px solid var(--ink);
  background: var(--lime);
  font-family: var(--mono);
  font-size: 12px;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(242, 239, 231, 0.88);
  backdrop-filter: blur(18px);
}

.nav {
  display: flex;
  align-items: center;
  min-height: 66px;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 14px;
}

.nav-links a,
.nav-login {
  color: #454740;
  font-family: var(--mono);
  font-size: 12px;
  transition: color 150ms ease;
}

.nav-links a:hover,
.nav-login:hover,
.footer-links a:hover {
  color: #000;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 0 0 rgba(23, 24, 22, 0);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.button-primary {
  background: var(--ink);
  color: #fff;
}

.button-primary .button-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

.button-lime {
  background: var(--lime);
  color: var(--ink);
}

.button-ghost {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.24);
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 94px 0 72px;
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.hero::before {
  top: -420px;
  left: calc(50% - 570px);
  width: 820px;
  height: 820px;
  background: rgba(201, 186, 255, 0.55);
  filter: blur(1px);
}

.hero::after {
  top: -330px;
  right: calc(50% - 690px);
  width: 720px;
  height: 720px;
  background: rgba(185, 221, 255, 0.5);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto 64px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime-deep);
  box-shadow: 0 0 0 4px rgba(168, 231, 44, 0.18);
  content: "";
}

.hero h1 {
  max-width: 940px;
  margin: 0 auto;
  font-size: clamp(54px, 7.5vw, 102px);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.91;
}

.hero h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
}

.hero h1 em::after {
  position: absolute;
  z-index: -1;
  right: -0.02em;
  bottom: 0.02em;
  left: -0.02em;
  height: 0.22em;
  transform: rotate(-1deg);
  background: var(--lime);
  content: "";
}

.hero-lede {
  max-width: 730px;
  margin: 30px auto 0;
  color: #3e403a;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55;
}

.hero-proof {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin: 26px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hero-proof li {
  position: relative;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: #3e403a;
  font-size: 14px;
  line-height: 1.45;
}

.hero-proof li::before {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--lime);
  content: "";
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.hero-proof strong {
  color: #171816;
  font-weight: 650;
}

.hero-proof code {
  font-family: var(--mono);
  font-size: 12px;
  color: #2a2c28;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-demo-note {
  margin: 14px 0 0;
  color: #6d7268;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.product-stage {
  position: relative;
  display: block;
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: linear-gradient(145deg, #c9baff 0%, #b9ddff 49%, #d7ff63 100%);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

a.product-stage-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 70px rgba(23, 24, 22, 0.22);
}

a.product-stage-link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}

.stage-click-hint {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 28px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  background: rgba(16, 18, 15, 0.88);
  color: #f2f4ed;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Demo strip + before/after */
.demo-strip {
  padding: 28px 0 8px;
}

.demo-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 22px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #171916;
  color: #f2f4ed;
  box-shadow: var(--shadow);
}

.demo-strip-copy {
  max-width: 640px;
}

.demo-strip .section-kicker {
  color: #b9f85e;
}

.demo-strip-title {
  margin: 6px 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.demo-strip-copy p:last-child {
  margin: 0;
  color: #9ba097;
  font-size: 15px;
  line-height: 1.5;
}

.compare-section {
  padding-top: 36px;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.compare-col {
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
}

.compare-after {
  border-color: rgba(185, 248, 94, 0.55);
  background: linear-gradient(180deg, rgba(185, 248, 94, 0.14), rgba(255, 255, 255, 0.5));
}

.compare-head {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6158;
}

.compare-after .compare-head {
  color: #2f4a12;
}

.compare-list {
  margin: 0;
  padding: 0 0 0 18px;
  color: #3e403a;
  font-size: 15px;
  line-height: 1.55;
}

.compare-list li + li {
  margin-top: 8px;
}

.pricing-note {
  max-width: 720px;
  margin: 22px auto 0;
  color: #6d7268;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.pricing-note a {
  color: #2a2c28;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-stage::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(23, 24, 22, 0.17);
  border-radius: 15px;
  content: "";
  pointer-events: none;
}

.app-window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 12px;
  background: var(--ui);
  color: var(--ui-text);
  box-shadow: 0 42px 80px rgba(23, 24, 22, 0.32);
}

/* Real /demo screenshot — fills the stage instead of the old HTML mock. */
.app-window-shot {
  line-height: 0;
  background: #10120f;
}

.product-shot {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.app-chrome {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ui-line);
  background: #111310;
}

.window-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4c5048;
}

.window-dot:first-child {
  background: #ff8e81;
}

.window-dot:nth-child(2) {
  background: #ffd35c;
}

.window-dot:nth-child(3) {
  background: #aee85a;
}

.chrome-title {
  margin: 0 auto;
  color: #767b71;
  font-family: var(--mono);
  font-size: 12px;
}

.chrome-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ca196;
  font-family: var(--mono);
  font-size: 12px;
}

.chrome-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(185, 248, 94, 0.8);
}

.app-grid {
  display: grid;
  min-height: 590px;
  grid-template-columns: 226px minmax(0, 1fr) 284px;
}

.app-sidebar {
  min-width: 0;
  padding: 13px 10px;
  border-right: 1px solid var(--ui-line);
  background: #121411;
}

.app-brandline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 7px 13px;
  font-size: 12px;
  font-weight: 700;
}

.app-brandline span:first-child {
  color: var(--green);
  font-family: var(--mono);
}

.app-new {
  display: flex;
  width: 100%;
  height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid #484d43;
  border-radius: 6px;
  background: #23261f;
  color: var(--ui-text);
  font-family: var(--mono);
  font-size: 12px;
}

.app-new strong {
  color: var(--green);
  font-size: 13px;
}

.side-label {
  margin: 20px 8px 8px;
  color: #62675d;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.side-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 0 8px;
  border-radius: 5px;
  color: #aeb2aa;
  font-size: 12px;
}

.side-item.active {
  background: #292d26;
  color: #fff;
}

.side-item i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #777b72;
}

.side-item i.run {
  background: var(--green);
  box-shadow: 0 0 7px rgba(185, 248, 94, 0.45);
}

.side-item i.wait {
  background: #ffd35c;
}

.side-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-item b {
  color: #666b62;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
}

.app-conversation {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #171916;
}

.thread-head {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ui-line);
}

.engine-badge {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #51564d;
  border-radius: 6px;
  background: #292d27;
  color: #e9a986;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

.thread-title {
  min-width: 0;
}

.thread-title strong,
.thread-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-title strong {
  font-size: 12px;
  font-weight: 500;
}

.thread-title span {
  margin-top: 3px;
  color: #72776d;
  font-family: var(--mono);
  font-size: 12px;
}

.thread-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid rgba(185, 248, 94, 0.25);
  border-radius: 999px;
  background: rgba(185, 248, 94, 0.06);
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
}

.messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 16px;
}

.message-label {
  margin-bottom: 7px;
  color: #73786e;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.message p {
  margin: 0;
  color: #ced2c8;
  font-size: 12px;
  line-height: 1.65;
}

.message.user {
  width: 78%;
  align-self: flex-end;
  padding: 11px 12px;
  border: 1px solid #3c4039;
  border-radius: 8px 8px 2px 8px;
  background: #242722;
}

.tool-call {
  overflow: hidden;
  border: 1px solid #343830;
  border-radius: 7px;
  background: #111310;
}

.tool-call-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid #30342d;
  color: #b8bcb3;
  font-family: var(--mono);
  font-size: 12px;
}

.tool-call-head i {
  color: var(--green);
  font-style: normal;
}

.tool-call code {
  display: block;
  padding: 12px;
  color: #8f958a;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.approval {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 211, 92, 0.3);
  border-radius: 7px;
  background: rgba(255, 211, 92, 0.055);
}

.approval-icon {
  display: grid;
  width: 25px;
  height: 25px;
  flex: none;
  place-items: center;
  border-radius: 6px;
  background: #3d3825;
  color: #ffd35c;
  font-family: var(--mono);
  font-size: 12px;
}

.approval-copy {
  min-width: 0;
  flex: 1;
}

.approval-copy strong,
.approval-copy span {
  display: block;
}

.approval-copy strong {
  font-size: 12px;
}

.approval-copy span {
  overflow: hidden;
  margin-top: 3px;
  color: #858a80;
  font-family: var(--mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-actions {
  display: flex;
  gap: 5px;
}

.approval-actions span {
  padding: 5px 7px;
  border: 1px solid #4a4f45;
  border-radius: 4px;
  color: #b5bab0;
  font-family: var(--mono);
  font-size: 12px;
}

.approval-actions span:last-child {
  border-color: var(--green);
  background: var(--green);
  color: #151714;
}

.composer {
  margin: 0 18px 17px;
  padding: 10px 11px;
  border: 1px solid #3d4239;
  border-radius: 7px;
  background: #111310;
}

.composer-placeholder {
  color: #646960;
  font-family: var(--mono);
  font-size: 12px;
}

.composer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: #777c72;
  font-family: var(--mono);
  font-size: 12px;
}

.composer-meta span:last-child {
  margin-left: auto;
  color: var(--green);
}

.app-inspector {
  min-width: 0;
  border-left: 1px solid var(--ui-line);
  background: #131512;
}

.inspector-tabs {
  display: flex;
  height: 38px;
  align-items: flex-end;
  border-bottom: 1px solid var(--ui-line);
}

.inspector-tabs span {
  display: grid;
  height: 38px;
  place-items: center;
  padding: 0 12px;
  color: #6d7268;
  font-family: var(--mono);
  font-size: 12px;
}

.inspector-tabs span.active {
  border-bottom: 1px solid var(--green);
  color: #fff;
}

.diff-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px;
  border-bottom: 1px solid var(--ui-line);
  font-family: var(--mono);
  font-size: 12px;
}

.diff-summary span:nth-child(2) {
  margin-left: auto;
  color: var(--green);
}

.diff-summary span:last-child {
  color: var(--red);
}

.file-row {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #9da298;
  font-family: var(--mono);
  font-size: 12px;
}

.file-row.active {
  background: #20231e;
  color: #fff;
}

.file-row i {
  color: var(--green);
  font-style: normal;
}

.file-row span:last-child {
  margin-left: auto;
  color: #74796f;
}

.diff-code {
  padding: 12px 0;
  color: #83887f;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
}

.code-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 0 10px 0 0;
}

.code-line b {
  color: #4f544c;
  font-weight: 400;
  text-align: right;
}

.code-line code {
  padding-left: 9px;
  overflow-wrap: anywhere;
}

.code-line.add {
  background: rgba(185, 248, 94, 0.08);
  color: #bde98a;
}

.code-line.remove {
  background: rgba(255, 142, 129, 0.08);
  color: #df9289;
}

.stage-float {
  position: absolute;
  z-index: 4;
  right: 7px;
  bottom: -28px;
  display: flex;
  width: 245px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
}

.stage-float-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 6px;
  background: var(--lime);
  font-family: var(--mono);
  font-size: 12px;
}

.stage-float strong,
.stage-float span {
  display: block;
}

.stage-float strong {
  font-size: 12px;
}

.stage-float span {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.engine-strip {
  padding: 84px 0 72px;
  border-top: 1px solid var(--line);
}

.engine-strip-head {
  max-width: 720px;
}

.engine-strip-title {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.engine-logos {
  display: grid;
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.engine-logos > li {
  display: flex;
  min-height: 0;
}

.engine-logo-card {
  display: flex;
  min-height: 210px;
  flex: 1;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease;
}

a.engine-logo-card {
  cursor: pointer;
}

.engine-logo-card:hover {
  background: rgba(255, 255, 255, 0.4);
}

a.engine-logo-card:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
  z-index: 1;
}

/* Inline product-name links → /vs/* engine pages */
.engine-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  transition: border-color 160ms ease, color 160ms ease;
}

.engine-link:hover {
  border-bottom-color: currentColor;
  color: var(--ink);
}

.engine-link:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.footer-statusbar .engine-link,
.footer-command .engine-link,
.footer-brand .engine-link {
  border-bottom-color: color-mix(in srgb, currentColor 22%, transparent);
}

.footer-statusbar .engine-link:hover,
.footer-command .engine-link:hover,
.footer-brand .engine-link:hover {
  color: var(--workspace-accent, #b9f85e);
  border-bottom-color: currentColor;
}

.usage-showcase-point .engine-link {
  border-bottom: none;
}

.usage-showcase-point .engine-link:hover {
  color: var(--ink);
}

.engine-logo-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.engine-logo-copy {
  margin-top: 22px;
}

.engine-logo-copy strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.engine-logo-copy span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.engine-logo-flag {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--lime);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.engine-logo-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.engine-logo-card code {
  font-family: var(--mono);
  font-size: 12px;
}

.engine-strip-legal {
  margin: 20px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
}

.engine-strip-legal a {
  border-bottom: 1px solid var(--line-strong);
}

.intent-rail {
  overflow: hidden;
  border-block: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}

.intent-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 22px;
  padding: 13px 0;
  animation: rail 35s linear infinite;
}

.intent-track a,
.intent-track span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intent-track span {
  color: var(--lime);
}

@keyframes rail {
  to { transform: translateX(-50%); }
}

.section {
  padding: 120px 0;
}

.section-compact {
  padding: 92px 0;
}

.section-dark {
  background: var(--ui);
  color: var(--ui-text);
}

.section-kicker {
  margin: 0 0 17px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-dark .section-kicker {
  color: #74796f;
}

.section-title {
  max-width: 850px;
  margin: 0;
  font-size: clamp(42px, 5.8vw, 78px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.section-title-small {
  max-width: 720px;
  font-size: clamp(36px, 4.7vw, 62px);
}

.section-lede {
  max-width: 610px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.section-dark .section-lede {
  color: #a3a89e;
}

.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap: 110px;
  align-items: end;
}

.manifesto-note {
  border-top: 1px solid var(--ink);
  padding-top: 19px;
  color: #444640;
  font-size: 16px;
  line-height: 1.65;
}

.manifesto-note strong {
  color: var(--ink);
}

.proof-grid {
  display: grid;
  margin-top: 68px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  grid-template-columns: repeat(4, 1fr);
}

.proof {
  min-height: 160px;
  padding: 24px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.15);
}

.proof strong {
  display: block;
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.proof span {
  display: block;
  margin-top: 26px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.section-head-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 12px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.feature-card {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
}

.feature-card h3 {
  max-width: 420px;
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.feature-card p {
  max-width: 450px;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.feature-index {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--mono);
  font-size: 12px;
}

.feature-wide {
  grid-column: span 7;
  background: var(--violet);
}

.feature-phone {
  grid-column: span 5;
  background: var(--sky);
}

.feature-diff {
  grid-column: span 5;
  background: var(--peach);
}

.feature-local {
  grid-column: span 7;
  background: var(--lime);
}

.mini-fleet {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ui);
  color: #fff;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 6px 6px 0 rgba(23, 24, 22, 0.18);
}

.mini-agent {
  min-width: 0;
  min-height: 120px;
  padding: 15px;
  border-right: 1px solid var(--ui-line);
}

.mini-agent:last-child {
  border-right: 0;
}

.mini-agent-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c5c9bf;
  font-family: var(--mono);
  font-size: 12px;
}

.mini-agent-head i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.mini-agent:nth-child(2) .mini-agent-head i {
  background: #ffd35c;
}

.mini-agent:nth-child(3) .mini-agent-head i {
  background: var(--sky);
}

.mini-agent strong {
  display: block;
  overflow: hidden;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-agent span {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: #747a70;
  font-family: var(--mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-phone {
  position: absolute;
  right: 46px;
  bottom: -56px;
  width: 190px;
  height: 290px;
  padding: 8px;
  border: 1px solid var(--ink);
  border-radius: 30px 30px 0 0;
  background: #1a1c18;
  box-shadow: 10px 10px 0 rgba(23, 24, 22, 0.14);
}

.phone-screen {
  height: 100%;
  padding: 19px 12px;
  border-radius: 22px 22px 0 0;
  background: #f0eee7;
}

.phone-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

.phone-top i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ink);
}

.phone-notice {
  margin-top: 27px;
  padding: 13px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: #fff;
}

.phone-notice b,
.phone-notice span {
  display: block;
}

.phone-notice b {
  font-size: 12px;
}

.phone-notice span {
  margin-top: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

.phone-buttons {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  grid-template-columns: 1fr 1fr;
}

.phone-buttons i {
  padding: 8px 2px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.phone-buttons i:last-child {
  background: var(--lime);
}

.mini-diff {
  position: absolute;
  right: -22px;
  bottom: 25px;
  width: 78%;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ui);
  color: #b8bdb3;
  box-shadow: -8px 8px 0 rgba(23, 24, 22, 0.15);
}

.mini-diff-top {
  display: flex;
  padding: 10px 13px;
  border-bottom: 1px solid var(--ui-line);
  font-family: var(--mono);
  font-size: 12px;
}

.mini-diff-top span:last-child {
  margin-left: auto;
  color: var(--green);
}

.mini-diff pre {
  margin: 0;
  padding: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.mini-diff .add {
  color: var(--green);
}

.security-stack {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: grid;
  gap: 8px;
}

.security-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
  font-family: var(--mono);
  font-size: 12px;
}

.security-line b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 4px;
  background: var(--ink);
  color: var(--lime);
}

.security-line span:last-child {
  color: #41610b;
  font-weight: 600;
}

.video-band {
  border-block: 1px solid var(--line-strong);
  background: var(--paper-deep);
}

.video-grid {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 70px;
  align-items: center;
}

.product-demo-frame {
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: #000;
  box-shadow: 8px 8px 0 var(--ink);
}

.product-demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.usage-showcase-section {
  overflow: hidden;
  padding: 120px 0;
  background: var(--ui);
  color: var(--ui-text);
}

.usage-showcase-head {
  display: grid;
  margin-bottom: 42px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: end;
}

.usage-showcase-copy {
  margin: 20px 0 0;
  color: #9ba097;
  font-size: 16px;
  line-height: 1.65;
}

.usage-showcase-points {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.usage-showcase-point {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #1c1f1a;
  color: #b4b9af;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-showcase-point::before {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  background: var(--green);
  content: "";
}

.usage-demo-frame {
  overflow: hidden;
  border: 1px solid #4b5047;
  border-radius: 11px;
  background: #10120f;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
}

.usage-demo-topbar {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ui-line);
  background: #171916;
}

.usage-demo-title {
  font-size: 16px;
  font-weight: 500;
}

.usage-demo-caption {
  margin-top: 4px;
  color: #6d7268;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.usage-demo-control {
  padding: 6px 8px;
  border: 1px solid #3b4037;
  border-radius: 4px;
  color: #8f9489;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-control.active {
  border-color: var(--green);
  color: var(--green);
}

.usage-demo-body {
  padding: 14px;
}

.usage-demo-metrics {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  grid-template-columns: repeat(4, 1fr);
}

.usage-demo-metric {
  min-height: 77px;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #171916;
}

.usage-demo-metric-label {
  color: #747970;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.usage-demo-metric-value {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 18px;
}

.usage-demo-metric-note {
  margin-top: 3px;
  color: #5f645b;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-analytics {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  grid-template-columns: minmax(0, 1.55fr) minmax(230px, 0.75fr);
}

.usage-demo-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #151714;
}

.usage-demo-card-head {
  display: flex;
  justify-content: space-between;
  color: #959a90;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.usage-demo-chart {
  display: flex;
  height: 105px;
  align-items: flex-end;
  gap: 5px;
  margin-top: 12px;
  padding: 0 4px;
  border-bottom: 1px solid #33372f;
  background: repeating-linear-gradient(to top, transparent 0, transparent 25px, rgba(255,255,255,.035) 26px);
}

.usage-demo-bar {
  display: block;
  flex: 1;
  max-width: 17px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #758d44, var(--green));
}

.usage-demo-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: #60655c;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-models {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.usage-demo-model {
  display: grid;
  align-items: center;
  gap: 8px;
  color: #aeb3a9;
  font-family: var(--mono);
  font-size: 12px;
  grid-template-columns: minmax(90px, 1fr) minmax(50px, 0.7fr) auto;
}

.usage-demo-model-name {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.usage-demo-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 2px;
}

.usage-demo-model-track,
.usage-demo-meter {
  overflow: hidden;
  border-radius: 2px;
  background: #2b2e29;
}

.usage-demo-model-track {
  height: 4px;
}

.usage-demo-model-track i,
.usage-demo-meter i {
  display: block;
  height: 100%;
  background: var(--green);
}

.usage-demo-table-shell {
  overflow-x: auto;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #111310;
}

.usage-demo-table-head {
  display: flex;
  min-width: 820px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid var(--ui-line);
}

.usage-demo-table-title {
  font-size: 12px;
}

.usage-demo-table-sub {
  margin-top: 3px;
  color: #62675e;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-search {
  padding: 5px 8px;
  border: 1px solid #33372f;
  border-radius: 4px;
  color: #666b62;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-project-grid {
  display: grid;
  min-width: 820px;
  align-items: center;
  gap: 10px;
  grid-template-columns: minmax(220px, 2fr) 85px minmax(170px, 1.3fr) 60px 85px 65px;
}

.usage-demo-columns {
  padding: 7px 12px;
  border-bottom: 1px solid var(--ui-line);
  color: #5f645b;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.usage-demo-columns span:nth-child(n+4) {
  text-align: right;
}

.usage-demo-project-row {
  min-height: 45px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #9ea39a;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-project-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.usage-demo-chevron {
  color: #777c72;
}

.usage-demo-project-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: none;
  place-items: center;
  border: 1px solid #3e433a;
  border-radius: 5px;
  background: #20231e;
  color: #fff;
}

.usage-demo-project-name,
.usage-demo-project-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-demo-project-name {
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
}

.usage-demo-project-path {
  margin-top: 2px;
  color: #5f645b;
  font-size: 12px;
}

.usage-demo-agent {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.usage-demo-agent-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
}

.usage-demo-num {
  text-align: right;
}

.usage-demo-token {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.usage-demo-meter {
  display: block;
  width: 48px;
  height: 3px;
}

.usage-demo-drawer {
  min-width: 820px;
  margin: 0 9px 9px 40px;
  overflow: hidden;
  border: 1px solid #3c4039;
  border-radius: 5px;
  background: #0c0e0b;
}

.usage-demo-drawer-head {
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
  border-bottom: 1px solid var(--ui-line);
  color: #7b8076;
  font-family: var(--mono);
  font-size: 12px;
}

.usage-demo-drawer-head strong {
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
}

.usage-demo-session {
  display: grid;
  min-height: 33px;
  align-items: center;
  gap: 10px;
  padding: 5px 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #777c72;
  font-family: var(--mono);
  font-size: 12px;
  grid-template-columns: minmax(210px, 2fr) minmax(160px, 1.4fr) 55px 65px 60px;
}

.usage-demo-session strong {
  overflow: hidden;
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-demo-session span:nth-child(n+3) {
  text-align: right;
}

.usage-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.usage-cta .text-link {
  color: var(--green);
}

.discovery-grid {
  display: grid;
  margin-top: 52px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  grid-template-columns: repeat(4, 1fr);
}

.discovery-card {
  position: relative;
  min-height: 320px;
  padding: 27px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  transition: background 160ms ease;
}

.discovery-card:hover {
  background: rgba(255, 255, 255, 0.3);
}

.discovery-card .engine-tag {
  display: inline-flex;
  padding: 6px 8px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
}

.discovery-card h3 {
  margin: 52px 0 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.discovery-card p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.discovery-card .arrow {
  position: absolute;
  right: 27px;
  bottom: 25px;
  font-family: var(--mono);
  font-size: 18px;
}

.discovery-card:nth-child(1) .engine-tag {
  background: var(--peach);
}

.discovery-card:nth-child(2) .engine-tag {
  background: var(--sky);
}

.discovery-card:nth-child(3) .engine-tag {
  background: var(--violet);
}

.steps {
  display: grid;
  margin-top: 58px;
  border-top: 1px solid var(--ui-line);
  grid-template-columns: repeat(3, 1fr);
}

.step {
  min-height: 250px;
  padding: 26px;
  border-right: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.step:first-child {
  border-left: 1px solid var(--ui-line);
}

.step-number {
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
}

.step h3 {
  margin: 82px 0 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.step p {
  margin: 10px 0 0;
  color: #92978e;
  font-size: 13px;
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  gap: 16px;
  margin-top: 55px;
  grid-template-columns: 1fr 1fr;
}

.price-card {
  position: relative;
  min-height: 510px;
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
}

.price-card.featured {
  background: var(--lime);
}

.price-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price {
  margin-top: 23px;
  font-size: clamp(48px, 6vw, 74px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
}

.price small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
}

.price-card > p {
  max-width: 470px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.price-list {
  display: grid;
  gap: 10px;
  margin: 27px 0 32px;
  padding: 23px 0 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.price-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.price-list li::before {
  content: "↳";
  font-family: var(--mono);
}

.price-card .button {
  width: 100%;
}

.faq-grid {
  display: grid;
  margin-top: 50px;
  border-top: 1px solid var(--line-strong);
  grid-template-columns: 1fr 1fr;
}

.faq-grid details {
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.faq-grid details:nth-child(odd) {
  border-left: 1px solid var(--line-strong);
}

.faq-grid summary {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  cursor: pointer;
  font-size: 16px;
  list-style: none;
}

.faq-grid summary::-webkit-details-marker {
  display: none;
}

.faq-grid summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px;
}

.faq-grid details[open] summary::after {
  content: "−";
}

.faq-grid p {
  margin: -5px 22px 25px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.final-cta {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  border-block: 1px solid var(--ink);
  background: var(--violet);
}

.final-cta::after {
  position: absolute;
  right: -180px;
  bottom: -350px;
  width: 700px;
  height: 700px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
  content: "";
}

.final-copy {
  position: relative;
  z-index: 2;
  max-width: 850px;
}

.final-copy h2 {
  margin: 0;
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.93;
}

.final-copy p {
  max-width: 610px;
  margin: 25px 0 0;
  color: #3e3a4a;
  font-size: 18px;
  line-height: 1.55;
}

.final-copy .hero-actions {
  justify-content: flex-start;
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 72px 0 30px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--workspace-bg);
  background-size: 36px 36px;
  color: var(--workspace-text);
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--workspace-accent) 28%, rgba(185, 248, 94, 0.18) 72%, transparent 96%);
  content: "";
}

.footer-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--workspace-border-strong);
  border-radius: 8px;
  background: rgba(21, 23, 20, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.footer-statusbar {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  border-bottom: 1px solid var(--workspace-border);
  background: var(--workspace-bg);
  color: var(--workspace-faint);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--workspace-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
}

.footer-brand,
.footer-links {
  min-height: 236px;
  padding: 34px 30px;
  border-right: 1px solid var(--workspace-border);
}

.footer-links:last-child {
  border-right: 0;
}

.footer-brand p {
  max-width: 300px;
  margin: 17px 0 0;
  color: var(--workspace-muted);
  font-size: 13px;
  line-height: 1.6;
}

.site-footer .brand-mark {
  border: 1px solid rgba(var(--workspace-accent-rgb), 0.42);
  background: rgba(var(--workspace-accent-rgb), 0.08);
  color: var(--workspace-accent);
  box-shadow: none;
}

.footer-build {
  display: block;
  margin-top: 34px;
  color: var(--workspace-faint);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.footer-links h3 {
  margin: 0 0 18px;
  color: var(--workspace-faint);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: var(--workspace-muted);
  font-size: 12px;
  transition: color 150ms ease, transform 150ms ease;
}

.footer-links a::before {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--workspace-border-strong);
  content: "";
  transition: background 150ms ease;
}

.footer-links a:hover {
  color: var(--workspace-text);
  transform: translateX(3px);
}

.footer-links a:hover::before {
  background: var(--workspace-accent);
}

.footer-terminal {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border-top: 1px solid var(--workspace-border);
  border-bottom: 1px solid var(--workspace-border);
  background: var(--workspace-bg);
  font-family: var(--mono);
  font-size: 12px;
}

.footer-prompt {
  color: var(--workspace-accent);
  font-weight: 600;
}

.footer-command {
  color: var(--workspace-faint);
}

.footer-launch {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid rgba(var(--workspace-accent-rgb), 0.5);
  border-radius: 4px;
  background: rgba(var(--workspace-accent-rgb), 0.07);
  color: var(--workspace-accent);
  transition: background 150ms ease, color 150ms ease;
}

.footer-launch:hover {
  background: var(--workspace-accent);
  color: var(--workspace-bg);
}

.footer-legal {
  padding: 22px 16px;
  border-top: 1px solid var(--workspace-border);
}

.footer-legal h3 {
  margin: 0 0 12px;
  color: var(--workspace-faint);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-legal p {
  max-width: 78ch;
  margin: 0 0 8px;
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.65;
}

.footer-legal p:last-child {
  margin-bottom: 0;
}

.footer-legal a {
  color: var(--workspace-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}

.footer-legal a:hover {
  color: var(--workspace-accent);
}

.footer-base {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding: 0 16px;
  color: var(--workspace-faint);
  font-family: var(--mono);
  font-size: 12px;
}

.footer-base span:last-child {
  margin-left: auto;
}

@media (max-width: 1040px) {
  .nav-links {
    display: none;
  }

  .app-grid {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .app-inspector {
    display: none;
  }

  .manifesto-grid,
  .video-grid,
  .usage-showcase-head {
    gap: 50px;
  }

  .proof-grid,
  .discovery-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-wide,
  .feature-phone,
  .feature-diff,
  .feature-local {
    grid-column: span 6;
  }

  .mini-fleet {
    grid-template-columns: 1fr;
  }

  .mini-agent {
    min-height: 54px;
    border-right: 0;
    border-bottom: 1px solid var(--ui-line);
  }

  .mini-agent:nth-child(n+2) {
    display: none;
  }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 28px, var(--max));
  }

  .nav {
    min-height: 58px;
  }

  .nav-login {
    display: none;
  }

  .nav-actions {
    gap: 8px;
  }

  .nav-actions .button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .hero {
    padding: 70px 0 58px;
  }

  .engine-strip {
    padding: 56px 0 48px;
  }

  .hero-copy {
    margin-bottom: 42px;
  }

  .hero h1 {
    font-size: clamp(48px, 15vw, 70px);
  }

  .hero-lede {
    font-size: 16px;
  }

  .hero-proof {
    max-width: none;
  }

  .demo-strip-inner {
    padding: 18px;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .stage-click-hint {
    right: 16px;
    bottom: 16px;
  }

  .product-stage {
    padding: 14px;
    border-radius: 15px;
  }

  .product-stage::before {
    display: none;
  }

  .app-grid {
    min-height: 510px;
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    display: none;
  }

  .thread-state,
  .approval-actions {
    display: none;
  }

  .messages {
    padding: 17px 15px 12px;
  }

  .message.user {
    width: 88%;
  }

  .stage-float {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 24px);
    margin: -12px auto 0;
  }

  .section,
  .usage-showcase-section {
    padding: 86px 0;
  }

  .section-compact {
    padding: 70px 0;
  }

  .manifesto-grid,
  .video-grid,
  .usage-showcase-head,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid,
  .discovery-grid,
  .engine-logos,
  .steps,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .engine-logo-card {
    min-height: 0;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  .footer-brand,
  .footer-links {
    min-height: 210px;
    border-bottom: 1px solid var(--workspace-border);
  }

  .footer-grid > :nth-child(2) {
    border-right: 0;
  }

  .footer-grid > :nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .proof-grid,
  .discovery-grid,
  .steps,
  .faq-grid {
    border-left: 1px solid var(--line-strong);
  }

  .proof,
  .discovery-card,
  .step,
  .faq-grid details,
  .faq-grid details:nth-child(odd) {
    border-left: 0;
  }

  .step {
    border-color: var(--ui-line);
  }

  .section-head-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .feature-wide,
  .feature-phone,
  .feature-diff,
  .feature-local {
    grid-column: 1 / -1;
  }

  .feature-card {
    min-height: 400px;
  }

  .mini-phone {
    right: 28px;
  }

  .usage-showcase-points,
  .usage-demo-analytics {
    grid-template-columns: 1fr;
  }

  .usage-demo-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .usage-demo-controls {
    justify-content: flex-start;
  }

  .usage-demo-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .usage-demo-body {
    padding: 9px;
  }

  .discovery-card {
    min-height: 260px;
  }

  .final-cta {
    padding: 85px 0;
  }

  .final-cta::after {
    opacity: 0.35;
  }

  .footer-base {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-base span:last-child {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 50px 0 18px;
    background-size: 30px 30px;
  }

  .footer-statusbar {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
  }

  .footer-status {
    width: 100%;
    margin-right: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-links {
    min-height: 0;
    padding: 26px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--workspace-border);
  }

  .footer-grid > :nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--workspace-border);
  }

  .footer-grid > :last-child {
    border-bottom: 0;
  }

  .footer-terminal {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px;
  }

  .footer-command {
    flex: 1;
  }

  .footer-launch {
    width: 100%;
    justify-content: space-between;
    margin: 0;
  }

  .footer-base {
    min-height: 0;
    padding: 14px 12px;
  }
}

@media (max-width: 430px) {
  .brand {
    font-size: 16px;
  }

  .brand-mark {
    width: 25px;
    height: 25px;
  }

  .nav-actions .button-ghost {
    display: none;
  }

  .hero-actions .button {
    width: 100%;
  }

  .approval-copy span {
    max-width: 180px;
  }

  .feature-card {
    padding: 22px;
  }

  .feature-index {
    top: 22px;
    right: 22px;
  }

  .mini-fleet,
  .security-stack {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .mini-phone {
    right: 18px;
  }

  .usage-demo-metric-value {
    font-size: 16px;
  }

  .price-card {
    padding: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .intent-track {
    animation: none;
  }

  .button {
    transition: none;
  }
}