/* ---- v2 layout experiments: display register + bento production ----
   Display voice stays inside the system: Geist, heavier and tighter.
   No second typeface. */

.display {
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -0.035em;
}

/* hero v2 */
.hero2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
  padding: 96px 0 72px;
}
.hero2 h1 {
  margin: 18px 0 20px;
  font-size: clamp(42px, 5.4vw, 62px);
  line-height: 1.03;
}
.hero2 h1 em {
  font-style: normal;
  color: var(--green-dark);
}
.hero2 .hero-copy {
  max-width: 46ch;
}

/* truth band – 3 real numbers, no theater */
.truth-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.truth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.truth-cell {
  padding: 26px 28px;
  border-left: 1px solid var(--line);
}
.truth-cell:first-child {
  border-left: 0;
}
.truth-cell strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.truth-cell strong .display {
  display: block;
  margin-bottom: 4px;
  font-size: 42px;
  line-height: 1;
  color: var(--green-dark);
}
.truth-cell span {
  display: block;
  margin-top: 4px;
  font: 11.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--band-text);
}

/* two-part section headers: serif claim + literal translation */
.claim {
  max-width: 720px;
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
}
.claim-sub {
  max-width: 62ch;
  margin: 0 0 44px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
}

/* bento sandwich: wide → 2x2 → wide */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cell {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.cell:hover {
  border-color: var(--line-strong);
  box-shadow: 0 12px 32px -20px rgba(23, 25, 24, 0.25);
}
.cell-wide {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
}
.cell h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.cell-wide h3 {
  font-size: 24px;
}
.cell p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.cell-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  font: 600 10.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-dark);
}

/* self-demonstrating media inside cells */
.cell-demo {
  border: 1px solid var(--term-line);
  border-radius: 9px;
  background: var(--term-bg);
  padding: 14px 16px;
  overflow-x: auto;
}
.cell-demo code {
  display: block;
  font: 12px/1.75 var(--mono);
  color: var(--term-text);
  white-space: pre;
}
.cell-demo .ok {
  color: var(--term-green);
}
.cell-demo .cm {
  color: var(--term-comment);
}
.cell-demo-soft {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
  padding: 14px 16px;
  overflow-x: auto;
}
.cell-demo-soft code {
  display: block;
  font: 12px/1.75 var(--mono);
  color: var(--ink);
  white-space: pre;
}
.mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mode-chips span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font: 12px var(--mono);
  color: #3c423e;
}
.mode-chips .is-reco {
  border-color: color-mix(in srgb, var(--green-dark) 45%, transparent);
  background: var(--green-soft);
  color: var(--green-dark);
}

/* two-lane fork */
.fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lane-card {
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.lane-card.is-prod {
  background: var(--term-bg);
  border-color: var(--term-line);
  color: var(--term-text);
}
.lane-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
}
.lane-card > p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.lane-card.is-prod > p {
  color: var(--term-comment);
}
.lane-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lane-steps li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font: 12.5px/1.7 var(--mono);
}
.lane-card.is-prod .lane-steps li {
  border-top-color: var(--term-line);
}
.lane-steps em {
  flex: none;
  font-style: normal;
  color: var(--green-dark);
}
.lane-card.is-prod .lane-steps em {
  color: var(--term-green);
}

/* docs-as-mcp callout */
.agent-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 44px 48px;
  border: 1px solid color-mix(in srgb, var(--green-dark) 30%, var(--line));
  border-radius: 14px;
  background: var(--green-soft);
}
.agent-callout h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
}
.agent-callout p {
  margin: 0;
  color: #3d5a4a;
  font-size: 15px;
  line-height: 1.65;
}
.agent-endpoint {
  border: 1px solid var(--term-line);
  border-radius: 10px;
  background: var(--term-bg);
  padding: 18px 20px;
}
.agent-endpoint code {
  display: block;
  font: 12px/1.8 var(--mono);
  color: var(--term-text);
  white-space: pre-wrap;
  word-break: break-all;
}
.agent-endpoint .cm {
  color: var(--term-comment);
}
.agent-endpoint .ok {
  color: var(--term-green);
}

/* ---------------- stylized layer ----------------
   Contour waves, graph-paper texture, and animated mechanism vignettes.
   Everything drawn from existing tokens; SVG inherits CSS variables. */

/* contour waves behind the hero – infrastructure topography */
.hero2 {
  position: relative;
}
.hero-waves {
  position: absolute;
  inset: -40px 0 auto 0;
  height: 130%;
  width: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-waves canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* graph-paper texture for vignette panels – the engineering-grid feel */
.viz {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--soft);
  background-blend-mode: normal;
  padding: 18px;
  overflow: hidden;
}
.viz svg {
  display: block;
  width: 100%;
  height: auto;
}

/* vignette primitives */
.viz .bubble rect,
.viz .bubble path {
  fill: var(--bg);
  stroke: var(--line-strong);
}
.viz .bubble text,
.viz text {
  font: 500 11px var(--mono);
  fill: var(--ink);
}
.viz text.dim {
  fill: var(--muted);
}
.viz .gate rect {
  fill: var(--green-soft);
  stroke: color-mix(in srgb, var(--green-dark) 45%, transparent);
}
.viz .gate text {
  fill: var(--green-dark);
  font-weight: 600;
}
.viz .row rect {
  fill: var(--bg);
  stroke: var(--line);
}
.viz .check circle {
  fill: var(--green);
}
.viz .check path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz .wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 3 4;
}
.viz .deny rect {
  fill: var(--bg);
  stroke: var(--line);
}
.viz .deny text {
  fill: var(--muted);
}
.viz .cross path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
}

/* choreography: bubble pops, check lands, rows slide – on section reveal */
@keyframes vpop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  65% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes vslide {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
html.js .bento.reveal .viz .v {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
html.js .bento.reveal.is-in .viz .v-pop {
  animation: vpop 0.45s var(--ease) both;
  animation-delay: var(--d, 0.3s);
}
html.js .bento.reveal.is-in .viz .v-slide {
  animation: vslide 0.5s var(--ease) both;
  animation-delay: var(--d, 0.3s);
}

/* checkmark pop inside terminal demos */
html.js .bento.reveal .cell-demo .pop {
  display: inline-block;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: left center;
}
html.js .bento.reveal.is-in .cell-demo .pop {
  animation: vpop 0.4s var(--ease) both;
  animation-delay: var(--d, 0.5s);
}

/* trace pulse: a request travelling the wire */
.pulse-track {
  position: relative;
  height: 2px;
  margin: 14px 2px 4px;
  background: var(--line);
  border-radius: 1px;
  overflow: visible;
}
@keyframes pulse-run {
  0% {
    left: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 6px);
    opacity: 0;
  }
}
html.js .pulse-track::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-run 3.2s var(--ease) infinite;
}

/* ---------------- motion layer ----------------
   Vocabulary ported from the Mintlify system, mapped to honest signals:
   liveness pings, odometer digit rises, staggered entrances, 150-300ms
   micro-acknowledgments. All gated behind .js and reduced-motion. */

/* live signal ping on the eyebrow dot (their signal-ping, radar style) */
@keyframes ping2 {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}
.eyebrow-dot {
  position: relative;
}
.eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: ping2 2.6s var(--ease) infinite;
}

/* odometer-style digit rise for the truth numerals (their digit-in) */
@keyframes digit-rise {
  0% {
    opacity: 0;
    transform: translateY(0.9em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
html.js .truth-band.reveal .truth-cell strong .display {
  opacity: 0;
}
html.js .truth-band.reveal.is-in .truth-cell strong .display {
  animation: digit-rise 0.7s var(--ease) both;
  animation-delay: calc(0.12s + var(--i, 0) * 0.14s);
}

/* these containers stagger their own children – no container-level fade */
html.js .bento.reveal,
html.js .fork.reveal,
html.js .truth-band.reveal {
  opacity: 1;
  transform: none;
}

/* staggered entrance choreography for bento cells, truth cells, lanes */
html.js .bento.reveal .cell,
html.js .fork.reveal .lane-card {
  opacity: 0;
  transform: translateY(14px);
}
html.js .bento.reveal.is-in .cell,
html.js .fork.reveal.is-in .lane-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}

/* hover micro-acknowledgment: corner arrow reveal (their opacity-0 group hover) */
.cell-wide::after {
  content: "→";
  position: absolute;
  right: 22px;
  bottom: 16px;
  font: 500 15px var(--mono);
  color: var(--green-dark);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.cell-wide:hover::after {
  opacity: 1;
  transform: none;
}
.cell:hover {
  transform: translateY(-2px);
}
.cell {
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

/* liveness flicker on the trace cell's status dot (their signal-flicker) */
@keyframes flicker2 {
  0%,
  75%,
  100% {
    opacity: 1;
  }
  85% {
    opacity: 0.35;
  }
}
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  vertical-align: 1px;
  animation: flicker2 3.4s linear infinite;
}

/* terminal caret in the agent endpoint */
@keyframes caret-blink {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  background: var(--term-green);
  vertical-align: -0.15em;
  animation: caret-blink 1.1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow-dot::after,
  .live-dot,
  .caret,
  html.js .pulse-track::after {
    animation: none;
  }
  html.js .bento.reveal .viz .v,
  html.js .bento.reveal .cell-demo .pop {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .eyebrow-dot::after {
    display: none;
  }
  html.js .truth-band.reveal .truth-cell strong .display,
  html.js .bento.reveal .cell,
  html.js .fork.reveal .lane-card {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .cell:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .hero2 {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 0 56px;
  }
  .truth-grid {
    grid-template-columns: 1fr;
  }
  .truth-cell {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .truth-cell:first-child {
    border-top: 0;
  }
  .bento,
  .fork {
    grid-template-columns: 1fr;
  }
  .cell-wide {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
  .agent-callout {
    grid-template-columns: 1fr;
    padding: 32px 28px;
    gap: 28px;
  }
}