:root {
  --bg: oklch(0.97 0.008 130);
  --bg-2: oklch(0.94 0.012 130);
  --ink: oklch(0.18 0.012 150);
  --ink-2: oklch(0.32 0.014 150);
  --ink-3: oklch(0.52 0.012 150);
  --line: oklch(0.85 0.014 140);
  --line-2: oklch(0.90 0.012 140);
  --sage: oklch(0.48 0.075 148);
  --sage-deep: oklch(0.32 0.06 150);
  --sage-soft: oklch(0.88 0.04 145);
  --signal: oklch(0.72 0.18 142);
  --warn: oklch(0.72 0.14 70);
  --paper: oklch(0.99 0.005 130);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

::selection { background: var(--sage); color: var(--paper); }

.mono { font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

a { color: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== NAV ===== */
nav.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
nav.top .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
nav.top .links {
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
nav.top .links a { text-decoration: none; transition: color .2s; }
nav.top .links a:hover { color: var(--ink); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-login {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-login:hover {
  color: var(--ink);
}
.nav-cta {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s;
}
.nav-cta:hover { background: var(--sage-deep); }
.nav-cta::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--signal);
}

/* ===== LOGO ===== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark {
  width: 28px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
}
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-text {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.logo-text .ai {
  color: var(--sage);
  font-weight: 500;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
  opacity: .5;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage-deep);
  background: var(--sage-soft);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sage) 30%, transparent);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--sage);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}

h1.headline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 24px 0 0;
  color: var(--ink);
  text-wrap: pretty;
}
h1.headline .em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--sage-deep);
}

.sub {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 520px;
  text-wrap: pretty;
}

.hero-ctas {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, background .2s;
}
.btn-primary:hover { background: var(--sage-deep); transform: translateY(-1px); }
.btn-primary .arrow {
  width: 14px; height: 14px;
  transition: transform .2s;
}
.btn-primary:hover .arrow { transform: translate(2px, -2px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  padding: 13px 18px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }

.hero-meta {
  margin-top: 40px;
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.hero-meta span::before {
  content: "→ ";
  color: var(--sage);
}

/* Sibling of .eyebrow, not a twin: outlined rather than filled, so the two
   pills in the hero read as a pair instead of competing for the same job. */
.app-soon {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--sage-deep);
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--sage) 38%, transparent);
  padding: 8px 14px;
  border-radius: 999px;
}
.app-soon svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.app-soon strong {
  font-weight: 600;
}

/* ===== AGENT THREAD ===== */
.agent-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 60px -30px oklch(0.32 0.06 150 / 0.18),
    0 8px 20px -8px oklch(0.32 0.06 150 / 0.08);
}
.agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(to bottom, var(--bg-2), var(--paper));
}
.agent-head .lights { display: flex; gap: 6px; }
.agent-head .light {
  width: 10px; height: 10px; border-radius: 50%;
  background: oklch(0.85 0.01 140);
}
.agent-head .light:nth-child(2) { background: oklch(0.85 0.04 90); }
.agent-head .light:nth-child(3) { background: var(--sage-soft); }
.agent-head .title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.agent-head .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage-deep);
}
.agent-head .status .dot {
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--signal);
  animation: pulse 1.6s infinite;
}

.agent-body {
  height: 460px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0) 0 0 / 18px 18px,
    var(--paper);
}
.agent-stream {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: msg-in .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg .avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.msg.system .avatar { background: var(--ink); color: var(--paper); }
.msg.user .avatar {
  background: var(--sage-soft); color: var(--sage-deep);
  border: 1px solid color-mix(in oklab, var(--sage) 30%, transparent);
}
.msg.tool .avatar {
  background: var(--bg-2); color: var(--ink-3);
  border: 1px solid var(--line);
}
.msg .body { flex: 1; min-width: 0; }
.msg .role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.msg .text { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.msg.tool .text { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.msg .text .green { color: var(--sage-deep); }
.msg .text .pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
}

.tool-call {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 4px;
}
.tool-call .head {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.tool-call .head .check { color: var(--sage); font-weight: 700; }
.tool-call .out {
  color: var(--ink-3);
  line-height: 1.4;
  font-size: 11.5px;
  white-space: pre-wrap;
}

.typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 14px;
}
.typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: typing 1.4s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.agent-foot {
  border-top: 1px solid var(--line-2);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.agent-body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(to bottom, var(--paper), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ===== SECTION CHROME ===== */
section.block { padding: 100px 0; position: relative; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sage-deep);
  margin-bottom: 24px;
}
.section-tag::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--sage);
}
.section-title {
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 16px;
  text-wrap: balance;
  max-width: 820px;
}
.section-title .em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--sage-deep); }
.section-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 0 56px;
  text-wrap: pretty;
}

/* ===== FEATURES ===== */
.features {
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature {
  background: var(--paper);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  position: relative;
  transition: background .25s;
}
.feature:hover { background: var(--bg); }
.feature .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.feature h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.feature p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}
.feature .vis {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.feature .kv {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 0;
  color: var(--ink-2);
}
.feature .kv .v { color: var(--sage-deep); }
/* ===== EXPLAINER ===== */
.explainer {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.explainer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.explainer .container { position: relative; }
.explainer .section-tag { color: var(--signal); }
.explainer .section-tag::before { background: var(--signal); }
.explainer .section-title { color: var(--paper); }
.explainer .section-title .em { color: var(--signal); }
.explainer .section-sub { color: oklch(0.75 0.01 140); }

.pipeline {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; }
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid oklch(1 0 0 / 0.1);
  padding-left: 0;
}
.step {
  position: relative;
  padding: 16px 20px;
  cursor: pointer;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: border-color .25s, background .25s;
}
.step.active {
  border-left-color: var(--signal);
  background: oklch(1 0 0 / 0.03);
}
.step .step-num {
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(0.6 0.02 140);
  letter-spacing: 0.08em;
}
.step.active .step-num { color: var(--signal); }
.step .step-name {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 500;
  color: oklch(0.7 0.01 140);
  letter-spacing: -0.01em;
  transition: color .25s;
}
.step.active .step-name { color: var(--paper); }
.step .step-desc {
  margin-top: 6px;
  font-size: 13px;
  color: oklch(0.55 0.01 140);
  line-height: 1.45;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, margin-top .25s;
}
.step.active .step-desc { max-height: 100px; }

.pipeline-display {
  background: oklch(0.22 0.012 150);
  border: 1px solid oklch(1 0 0 / 0.06);
  border-radius: 14px;
  padding: 28px;
  min-height: 460px;
  position: relative;
  overflow: hidden;
}
.pipeline-display .pd-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--signal);
  margin-bottom: 16px;
}
.pipeline-display h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.stage-card {
  background: oklch(0.18 0.01 150);
  border: 1px solid oklch(1 0 0 / 0.06);
  border-radius: 10px;
  padding: 18px;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12.5px;
}
.stage-card .row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed oklch(1 0 0 / 0.06);
}
.stage-card .row:last-child { border-bottom: 0; }
.stage-card .row .k { color: oklch(0.6 0.02 140); }
.stage-card .row .v { color: var(--paper); }
.stage-card .row .v.ok { color: var(--signal); }
.stage-card .row .v.warn { color: var(--warn); }

/* ===== FORM ===== */
.form-section {
  background: var(--bg);
  position: relative;
}
.form-shell {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .form-shell { grid-template-columns: 1fr; gap: 40px; }
}
.form-side h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 16px;
}
.form-side h2 .em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--sage-deep); }
.form-side p {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.form-side .checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-side .checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
}
.form-side .checklist li .c {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 30px 60px -30px oklch(0.32 0.06 150 / 0.15);
}
.form-card .form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.form-card .form-head .t {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.form-card .form-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
}
.field label .opt {
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2350605a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field textarea {
  /* Vertical only: a user-widened textarea breaks the form grid, and the
     inherited `appearance: none` leaves no resize affordance horizontally. */
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
}
.field textarea::placeholder {
  color: var(--ink-3);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 18%, transparent);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .field-row { grid-template-columns: 1fr; }
}
/* honeypot — hidden from real users, visible to bots */
.hp { position: absolute; left: -5000px; opacity: 0; pointer-events: none; }
.consent-group {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; margin-bottom: 4px;
}
.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.consent-row input[type="checkbox"] {
  margin-top: 3px; flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--sage-deep);
  cursor: pointer;
}
.consent-row label { cursor: pointer; flex: 1; }
.consent-row a { color: var(--ink); text-decoration: underline; }
.consent-row .required-mark { color: oklch(0.55 0.18 25); }
.submit {
  margin-top: 8px;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.submit:hover { background: var(--sage-deep); }
.submit:disabled { opacity: .6; cursor: not-allowed; }
.form-foot {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}
.form-error {
  margin-top: 16px;
  padding: 12px 14px;
  background: oklch(0.95 0.03 30);
  border: 1px solid oklch(0.85 0.06 30);
  border-radius: 8px;
  font-size: 13px;
  color: oklch(0.35 0.08 30);
}
.form-error.hidden { display: none; }

.success {
  text-align: center;
  padding: 32px 16px;
}
.success .ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  display: grid; place-items: center;
  font-size: 26px;
}
.success h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.success p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}
.success .ref {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 10px;
  border-radius: 6px;
  border: 1px dashed var(--line);
}

/* ===== FOOTER ===== */
footer.bot {
  border-top: 1px solid var(--line-2);
  background: var(--bg);
  padding: 40px 0 28px;
}
footer.bot .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
footer.bot .copy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
/* Contact / support band */
.contact-section { text-align: center; }
.contact-section h2 { margin: 0 0 14px; }
.contact-lede {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}
.contact-email {
  display: inline-block;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  transition: border-color .15s, color .15s;
}
.contact-email:hover { border-color: var(--sage); color: var(--sage-deep); }
.contact-meta {
  margin-top: 18px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
@media (max-width: 640px) {
  .contact-email { font-size: 15px; padding: 11px 16px; }
}

footer.bot .legal-links {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
footer.bot .legal-links a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s;
}
footer.bot .legal-links a:hover { color: var(--ink); }

/* Social links. Icon-only, so each <a> carries an aria-label and the SVG is
   aria-hidden — there is no text to fall back on. Sized by a 32px tap target
   with a 16px glyph inside it rather than a 16px link, which is below the
   44px-ish minimum people can reliably hit on a phone. */
.social-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -8px 0;
  color: var(--ink-3);
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.social-links a:hover { color: var(--sage); background: var(--bg-2); }
.social-links a:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}
.social-links svg { width: 16px; height: 16px; display: block; }

/* On the contact page the same links sit under the email address, where they
   are a destination rather than a footnote, so they are larger and centred. */
.contact-social-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 26px 0 10px;
}
.contact-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}
.contact-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  transition: color .15s, border-color .15s, transform .15s;
}
.contact-socials a:hover {
  color: var(--sage);
  border-color: var(--sage-soft);
  transform: translateY(-1px);
}
.contact-socials a:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}
.contact-socials svg { width: 20px; height: 20px; display: block; }

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Without JavaScript nothing ever gets `.in`, so every revealed section stays at
   opacity 0 — a blank page for anyone who blocks scripts, and for a crawler that
   does not run them. Browsers that don't know this query ignore the rule and
   behave exactly as before, so it can only help.
   The changelog deliberately uses no .reveal at all: it is the page most likely
   to be linked to directly, and its content should never depend on a script. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* ===== Stat strip ===== */
.stat-strip {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
@media (max-width: 760px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  background: var(--bg);
  padding: 24px 20px;
}
.stat .v {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.stat .v .em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--sage-deep); }
.stat .l {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

/* ===== MOBILE POLISH ===== */
@media (max-width: 760px) {
  .container          { padding: 0 20px; }
  /* The nav wraps to a second row instead of hiding the links.
     Hiding them was right when they were anchors on one long page — you could
     still scroll to everything. Now they are separate pages, so hiding them
     leaves a phone visitor with no way to reach Features, Changelog or Contact
     at all, and most ad traffic is on a phone. Two rows, no JavaScript, no
     hamburger to discover. */
  nav.top .row        { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 8px; row-gap: 8px; }
  nav.top .logo       { order: 1; }
  .nav-actions        { order: 2; }
  nav.top .links {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0;
    font-size: 11.5px;
    padding-top: 6px;
    border-top: 1px solid var(--line-2);
  }
  nav.top .links a[aria-current='page']::after { bottom: -8px; }
  .nav-actions        { gap: 10px; }
  .nav-login          { font-size: 11px; }
  .nav-cta            { font-size: 11px; padding: 8px 12px; }

  section.block       { padding: 64px 0; }
  .hero               { padding: 48px 0 32px; }
  .hero-meta          { gap: 14px; margin-top: 28px; font-size: 10.5px; }
  .stat-strip         { margin-top: 36px; }
  .stat               { padding: 18px 16px; }
  .stat .v            { font-size: 26px; }

  .section-sub        { margin-bottom: 36px; }
  .feature            { padding: 28px 22px; min-height: 0; }
  .feature h3         { font-size: 21px; }

  .pipeline           { gap: 20px; }
  .pipeline-display   { padding: 20px; min-height: 0; }
  .stage-card         { padding: 14px; }

  .form-shell         { gap: 32px; }
  .form-card          { padding: 22px; }
  .form-side h2       { font-size: 30px; }

  footer.bot          { padding: 28px 0 22px; }
  footer.bot .row     { gap: 14px; }
  footer.bot .copy    { font-size: 10px; }
}
@media (max-width: 480px) {
  .agent-body         { height: 380px; }
  .hero-ctas          { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost { justify-content: center; }
}

/* ─────────────────────────────────────────────────────────
   Multi-page additions
   Home, Features, Changelog and Contact share this sheet and an
   identical nav/footer. The only per-page difference in the nav is
   `aria-current="page"` — set in the markup rather than by script, so the
   current page is marked for a screen reader with or without JavaScript.
   ───────────────────────────────────────────────────────── */

nav.top .links a[aria-current='page'] {
  color: var(--ink);
  position: relative;
}
nav.top .links a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--sage);
}

/* Header for the pages that are not the home page. Deliberately not the hero:
   a second full-height hero on every page delays the content people clicked for. */
.page-head {
  position: relative;
  padding: 108px 0 44px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.page-head h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 14px;
  text-wrap: balance;
}
.page-head .lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}

/* ── Changelog ───────────────────────────────────────────
   One entry per deploy, newest first. A rail down the left ties the dates
   together so it reads as a sequence rather than a stack of cards. */
.changelog {
  max-width: 820px;
  margin: 0 auto;
}
.release {
  position: relative;
  padding: 0 0 40px 28px;
  border-left: 1px solid var(--line);
}
.release:last-child {
  border-left-color: transparent;
  padding-bottom: 8px;
}
.release::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--sage);
}
/* The newest deploy is the one people came to see. */
.release:first-child::before {
  background: var(--sage);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sage) 18%, transparent);
}
.release-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sage-deep);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 4px;
}
.release-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.release ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.release li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.release li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}
/* Marks a deploy that changed something a landlord can see, as opposed to one
   that only moved things behind the scenes. */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  margin-left: 8px;
  vertical-align: 2px;
}
.tag.new { color: var(--sage-deep); border-color: var(--sage-soft); background: color-mix(in oklab, var(--sage) 8%, transparent); }
.tag.fix { color: var(--ink-2); }

.changelog-note {
  max-width: 820px;
  margin: 0 auto 40px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--paper);
}

/* ── Cross-page CTA band ──────────────────────────────── */
.cta-band {
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0 0 12px;
}
.cta-band p {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 54ch;
  margin: 0 auto 26px;
}
.cta-band .hero-ctas { justify-content: center; }

@media (max-width: 720px) {
  .page-head { padding: 92px 0 36px; }
  .release { padding-left: 22px; }
}

/* ===== FEATURES: SCROLL SCENES =====================================
   Scoped under .fx-* throughout. This stylesheet is shared by index,
   changelog and contact, and none of them should move because of this
   block.

   NOTHING HERE HIDES CONTENT BY DEFAULT. Every rule that sets opacity to 0
   sits under `html.gsap-ready`, a class features-scenes.js adds only once
   GSAP has actually loaded. With the CDN blocked, or JavaScript off, the
   page renders complete and static. CLAUDE.md makes this point about
   `.reveal` on the changelog; it matters more here, on the page the ads
   point at. */

.fx-features {
  position: relative;

  /* Scene palette. The landing site and the app do NOT share a palette — the
     app has --moss, --cream, --clay and --gold; this stylesheet has none of
     them. Mapping them here keeps the shared :root untouched and means a
     scene can only ever use a tone that exists.

     The red and the two tints have no landing equivalent at all, so they are
     declared outright, in the same oklch family as the rest. */
  --fx-deep: var(--sage-deep);
  --fx-tint: var(--sage-soft);
  --fx-wash: var(--bg-2);
  --fx-faint: oklch(0.65 0.012 150);
  --fx-warn: var(--warn);
  --fx-warn-tint: oklch(0.94 0.05 70);
  --fx-bad: oklch(0.55 0.15 28);
  --fx-bad-tint: oklch(0.93 0.05 28);
}

/* ---- the scene ---- */
.fx-scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Clears the sticky nav and the rail, which both sit over the top of a
     pinned scene. --fx-nav-h is measured and set by features-scenes.js. */
  padding: calc(var(--fx-nav-h, 60px) + 52px) 0 48px;
}
.fx-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  width: 100%;
}
.fx-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fx-copy .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.fx-copy h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fx-copy p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  text-wrap: pretty;
  max-width: 54ch;
}
.fx-copy .vis {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}

/* A .vis row is the content; the scrub only changes its emphasis, so a row
   is always legible whether or not its beat has landed. */
.fx-copy .kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 0;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}
.fx-copy .kv .v {
  color: var(--sage-deep);
  text-align: right;
}
.fx-copy .kv.is-done {
  color: var(--ink-2);
}
.fx-copy .kv.is-live {
  border-left-color: var(--fx-deep);
  background: var(--fx-tint);
  color: var(--ink);
}
.fx-copy .kv.is-live .v {
  color: var(--fx-deep);
}

/* ---- the canvas ---- */
.fx-canvas {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 18px;
}
.fx-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Says out loud that the figures in a scene are an example, not a claim about
   the reader's own area. The page's whole argument is that Tenora does not
   invent numbers; an unlabelled $1,480 on it would be doing exactly that. */
.fx-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--fx-faint);
  background: var(--bg-2);
  border-radius: 4px;
  padding: 2px 6px;
}
.fx-mono {
  font-family: var(--mono);
  font-size: 10.5px;
}
.fx-sans {
  font-family: var(--sans);
  font-size: 13px;
}
.fx-num {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
}
.fx-ink {
  fill: var(--ink);
}
.fx-dim {
  fill: var(--ink-3);
}

/* ---- the progress rail ---- */
/* Horizontal, directly under the sticky nav. It began as a vertical column on
   the left and that was wrong: `.container` is 1280px wide, so on anything
   narrower than about 1500px a fixed left rail prints straight over the
   feature copy. A strip under the nav costs no horizontal space at any width,
   and sits where the eye already is.

   Hidden until pinned mode is actually on, and faded out when the features
   are not on screen — with nothing pinned it is a floating menu over a page
   that scrolls perfectly well by itself. */
.fx-rail {
  display: none;
}
.fx-rail.is-on {
  display: flex;
  position: fixed;
  top: var(--fx-nav-h, 60px);
  left: 0;
  right: 0;
  z-index: 19; /* under nav.top, which is 50 */
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 7px 16px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.fx-rail.is-on.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.fx-rail a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fx-faint);
  white-space: nowrap;
  transition:
    color 200ms ease,
    background 200ms ease;
}
.fx-rail a:hover {
  color: var(--ink-2);
  background: var(--bg-2);
}
.fx-rail a.is-current {
  color: var(--fx-deep);
  background: var(--fx-tint);
}
.fx-rail-n {
  font-weight: 600;
}
.fx-rail-l {
  letter-spacing: 0.06em;
}
.fx-rail a:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}
/* Numbers only when the strip would otherwise crowd. */
@media (max-width: 1080px) {
  .fx-rail-l {
    display: none;
  }
}

/* ---- initial states, applied ONLY once GSAP is confirmed loaded ---- */
html.gsap-ready .fx-copy .kv {
  color: var(--fx-faint);
}
html.gsap-ready .fx-copy .kv .v {
  color: var(--fx-faint);
}
html.gsap-ready .fx-copy .kv.is-done,
html.gsap-ready .fx-copy .kv.is-live {
  color: var(--ink-2);
}
html.gsap-ready .fx-copy .kv.is-done .v {
  color: var(--sage-deep);
}

/* ---- short viewports ----
   A pinned scene taller than the viewport has an unreachable bottom: pinning
   holds it still, so whatever overflows can never be scrolled to. The Market
   scene has the longest paragraph on the page and was 690px against a 620px
   viewport, which cut off its last .vis row — the one that says no figure on
   that screen is invented, which is the whole point of the feature.

   Tightening type on short viewports rather than cutting the copy: the line
   about a made-up number looking exactly like a real one is the best sentence
   on the page. */
@media (max-height: 780px) {
  .fx-scene {
    padding: calc(var(--fx-nav-h, 60px) + 28px) 0 28px;
  }
  .fx-copy {
    gap: 12px;
  }
  .fx-copy h3 {
    font-size: 25px;
  }
  .fx-copy p {
    font-size: 14px;
    line-height: 1.5;
  }
  .fx-copy .vis {
    margin-top: 2px;
    padding-top: 12px;
  }
  .fx-copy .kv {
    padding: 4px 0 4px 10px;
    font-size: 11px;
  }
}

/* ---- phones: the canvas goes away ----
   The scene SVGs are laid out in a 440-unit viewBox with 10.5px labels. At
   375px the canvas renders 297px wide, which scales that text to about 7px —
   present, and unreadable. There is no reflow to do: the positions are fixed
   coordinates.

   Nothing is lost. The .vis list carries every claim the scene illustrates,
   which is the rule the whole section is built on — a beat with no row is a
   beat making something up — so dropping the picture drops no information.
   Above 600px the single-column stage gives the SVG ~600px and its labels
   land back around 14px, which is fine. */
@media (max-width: 600px) {
  .fx-canvas {
    display: none;
  }
}

/* ---- narrow screens: nothing pins ---- */
@media (max-width: 899px) {
  .fx-scene {
    min-height: 0;
    padding: 36px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .fx-scene:last-of-type {
    border-bottom: none;
  }
  .fx-stage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fx-copy h3 {
    font-size: 26px;
  }
  .fx-rail.is-on {
    display: none;
  }
}

/* ---- reduced motion: nothing pins, nothing scrubs, nothing is hidden ----
   The site had no prefers-reduced-motion handling at all before this. The
   scenes still render, complete, in their final state — the JS marks every
   beat done and fills every counter so nothing reads as half-finished. */
@media (prefers-reduced-motion: reduce) {
  .fx-scene {
    min-height: 0;
    padding: 36px 0;
  }
  .fx-rail.is-on {
    display: none;
  }
  html.gsap-ready .fx-copy .kv,
  html.gsap-ready .fx-copy .kv .v {
    color: var(--ink-2);
  }
  html.gsap-ready .fx-copy .kv .v {
    color: var(--sage-deep);
  }
  .fx-copy .kv {
    transition: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}