/* ---------- hero: schematic stage ---------- */
.hero {
  position: relative;
  min-height: max(680px, calc(100svh - var(--bar-h)));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--gutter);
  padding: 0 var(--margin);
  overflow: hidden;
}
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.wires .w { fill: none; stroke: var(--wire); stroke-width: 1; transition: stroke 0.6s var(--ease); }
.wires .w.is-live { stroke: var(--bone); }
.wires .w-signal { stroke: rgba(53, 180, 92, 0.5); }
.wires .w-signal.is-live { stroke: var(--run); }
.wires .pulse { fill: none; stroke-width: 2; stroke-linecap: square; }
.wires .joint { fill: var(--ground); stroke: var(--wire-strong); }

.hero-copy { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 3; padding-top: clamp(40px, 7vh, 80px); }
.hero h1 {
  margin: 0;
  max-width: 14ch;
  font: 800 clamp(44px, 5vw, 5.5rem)/0.92 var(--f-display);
  font-variation-settings: "wdth" 78;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-lead { margin: 28px 0 0; max-width: 34ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--bone-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* operator: the portrait dissolves into the studio black */
.operator {
  position: absolute; z-index: 1;
  bottom: 0; left: 50%;
  height: calc(100% - 12px);
  aspect-ratio: 853 / 1280;
  margin: 0;
  transform: translateX(-42%);
}
.operator img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  --fade-x: linear-gradient(to right, transparent 0, #000 24%, #000 78%, transparent 100%);
  --fade-y: linear-gradient(to top, transparent 0, #000 24%, #000 94%, transparent 100%);
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y);
  mask-composite: intersect;
}
.port {
  position: absolute; z-index: 3;
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 4px; align-items: center;
  padding: 8px 12px 9px;
  background: var(--ground);
  border: 1px solid var(--wire-strong);
  white-space: nowrap;
}
.port-operator { left: 49%; top: 63%; }
.port-name { font: 700 15px/1 var(--f-display); font-variation-settings: "wdth" 85; letter-spacing: 0.01em; }
.port-meta { grid-column: 2; font: 400 13px/1 var(--f-text); color: var(--bone-2); }

/* project nodes */
/* node pitch = 2 cells (62 + 34), so every wire lands on a dot row once the stack is aligned in schematic.js */
.nodes { list-style: none; margin: 0; padding: 0; position: relative; z-index: 3; display: grid; gap: 34px; align-content: start; align-self: start; }
.nodes-left { grid-column: 1 / 4; grid-row: 3; align-self: end; padding-bottom: 24px; }
.nodes-right { grid-column: 10 / 13; grid-row: 1; padding-top: clamp(40px, 8vh, 96px); }
.node {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 5px; align-items: center;
  height: 62px;
  padding: 10px 14px;
  background: var(--ground);
  border: 1px solid var(--wire);
  transition: border-color 0.5s var(--ease);
}
.node.is-live { border-color: var(--bone); }
.node-title { font: 600 15px/1.15 var(--f-text); }
.node-meta { grid-column: 2; font: 400 13px/1.3 var(--f-text); font-variant-numeric: tabular-nums; color: var(--bone-2); }

/* AI manager */
.chat {
  grid-column: 10 / 13; grid-row: 2 / 4; align-self: end;
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  margin-bottom: 28px;
  background: var(--panel);
  border: 1px solid var(--wire-strong);
}
/* label over the window: says that the box is a live chat to type into */
.chat-label {
  position: absolute; left: -1px; bottom: 100%; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
  font: 500 14px/1.3 var(--f-text); color: var(--bone); white-space: nowrap;
}
.chat-label::after { content: "↓"; color: var(--run); font-weight: 600; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--wire); }
.chat-title { font: 700 16px/1 var(--f-display); font-variation-settings: "wdth" 85; }
.chat-switch {
  margin: -6px -6px -6px auto; padding: 6px; background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--f-text); color: var(--bone-2);
  text-decoration: underline; text-decoration-color: var(--wire-strong); text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.chat-switch:hover { color: var(--bone); text-decoration-color: var(--bone); }
.chat-body[hidden], .quick[hidden], .quick-error:empty { display: none; }
.chat-body { display: flex; flex-direction: column; }
.chat-log { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 176px; overflow-y: auto; scrollbar-width: thin; }
.msg { max-width: 92%; padding: 9px 12px 10px; font-size: 15px; line-height: 1.4; }
.msg-bot { background: rgba(232, 224, 210, 0.07); }
.msg-user { align-self: flex-end; background: var(--bone); color: var(--ground); }
.msg-typing { color: var(--bone-2); font: 400 13px/1.4 var(--f-text); }
.msg-cta { padding: 0; }
.msg-cta .btn { width: 100%; }
/* how it works: three numbered steps over the field */
.chat-steps[hidden] { display: none; }
.chat-steps {
  list-style: none; counter-reset: step; margin: 0; padding: 0 14px 12px;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font: 400 13px/1.3 var(--f-text); color: var(--bone-2);
}
.chat-steps li { counter-increment: step; display: flex; align-items: baseline; gap: 6px; }
.chat-steps li::before { content: counter(step); font: 500 12px/1 var(--f-data); color: var(--run); }
.chat-chips[hidden] { display: none; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.chat-chips button {
  font: 500 13px/1 var(--f-text); color: var(--bone-2);
  padding: 7px 10px; background: transparent; cursor: pointer;
  border: 1px solid var(--wire); border-radius: 0;
  transition: color 0.2s, border-color 0.2s;
}
.chat-chips button:hover { color: var(--bone); border-color: var(--bone); }
.chat-form { display: flex; border-top: 1px solid var(--wire); }
.chat-form input {
  flex: 1; min-width: 0; height: 52px; padding: 0 14px;
  font: 400 15px/1 var(--f-text); color: var(--bone);
  background: transparent; border: 0; border-radius: 0;
}
.chat-form input::placeholder { color: var(--bone-3); }
.chat-form input:focus-visible { outline: none; }
.chat-form:focus-within { box-shadow: inset 0 0 0 1px var(--busy); }
.chat-send {
  width: 52px; flex: none; display: grid; place-items: center;
  background: var(--run); color: var(--ground); border: 0; cursor: pointer;
  transition: background 0.2s;
}
.chat-send:hover { background: var(--bone); }

/* consent: a flat square that fills run green; amber ring when the manager waits for it */
.consent { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/1.4 var(--f-text); color: var(--bone-2); cursor: pointer; }
.consent a { color: var(--bone); }
.consent input {
  appearance: none; flex: none; width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: 1px solid var(--wire-strong); border-radius: 0; background: transparent no-repeat center / 12px;
}
.consent input:checked {
  background-color: var(--run); border-color: var(--run);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23050708' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}
.consent input:focus-visible { outline: 2px solid var(--busy); outline-offset: 2px; }
.chat-consent { padding: 12px 14px; border-top: 1px solid var(--wire); transition: box-shadow 0.2s, color 0.2s; }
.chat-consent.is-wanted { color: var(--bone); box-shadow: inset 0 0 0 1px var(--busy); }

/* quick lead: the same window, a short form instead of the conversation */
.quick { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.quick-lead { margin: 0; font-size: 15px; line-height: 1.4; }
.field { display: flex; flex-direction: column; gap: 6px; font: 400 13px/1 var(--f-text); color: var(--bone-2); }
.field input, .field textarea {
  width: 100%; padding: 11px 12px; font: 400 15px/1.35 var(--f-text); color: var(--bone);
  background: transparent; border: 1px solid var(--wire); border-radius: 0; resize: vertical;
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--busy); }
.field [aria-invalid="true"] { border-color: var(--busy); }
.quick-error { margin: 0; font-size: 14px; color: var(--busy); }
.quick-send { width: 100%; }
.quick-send:disabled { cursor: wait; opacity: 0.55; }

/* event ticker */
.ticker {
  grid-column: 1 / -1; grid-row: 4;
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  height: 40px; margin: 0 calc(var(--margin) * -1); padding: 0 var(--margin);
  background: var(--ground);
  border-top: 1px solid var(--wire);
  font: 400 12px/1 var(--f-data);
  color: var(--bone-2);
  overflow: hidden;
}
.ticker-tag { flex: none; padding: 5px 7px; color: var(--bone-2); border: 1px solid currentColor; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.ticker-log { list-style: none; margin: 0; padding: 0; min-width: 0; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 64px); mask-image: linear-gradient(to left, transparent 0, #000 64px); display: flex; gap: 40px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticker-log li { animation: tick-in 0.6s var(--ease) both; }
.ticker-log li:first-child { color: var(--bone); }
.ticker-log time { color: var(--bone-3); margin-right: 10px; }
@keyframes tick-in { from { opacity: 0; transform: translateX(-12px); } }

/* short laptop screens: keep the whole schematic in one viewport */
@media (min-width: 1101px) and (max-height: 860px) {
  .hero-copy, .nodes-right { padding-top: 28px; }
  .hero-lead { margin-top: 20px; }
  .hero-actions { margin-top: 24px; }
  .chat-chips { display: none; }
  .chat-log { max-height: 132px; }
}

/* ---------- tablet & phone: the schematic becomes a vertical bus ---------- */
@media (max-width: 1100px) {
  .hero { display: flex; flex-direction: column; gap: 14px; padding-bottom: 0; }
  .hero-copy { padding-top: 32px; }
  .hero h1 { font-size: clamp(42px, 10vw, 76px); }
  .operator {
    position: relative; left: auto; transform: none;
    width: min(100%, 480px); height: auto; margin: -48px auto -64px;
  }
  .port-operator { left: 50%; top: 66%; }
  .nodes, .chat { margin-left: 28px; align-self: stretch; }
  .nodes-left, .nodes-right { padding: 0; }
  .chat { margin-top: 32px; margin-bottom: 20px; align-self: auto; }
  .ticker { margin-top: auto; }
}
@media (max-width: 560px) {
  .hero-lead { font-size: 17px; }
  .operator { width: 100%; margin-bottom: -40px; }
  .port-operator { left: 34%; top: 70%; }
  .chat-chips button { font-size: 13px; }
}
.chat-send:disabled, .chat-form input:disabled { cursor: wait; opacity: 0.55; }