/* The landing page wears the workspace's Warm neutrals skin, so the preview here and
   the workspace look like one product. The tokens, the panel widgets and the
   block-diagram shapes follow web/src/styles.css and web/src/diagram.css in the
   Orukan repo; change them there first, then here. */

:root {
  --bg: #ffffff;
  --panel: #fdfcf9;
  --side: #f4f2ec;
  --elev: #ffffff;
  --border: #e4e0d7;
  --border-strong: #cfc9bd;
  --text: #2b2620;
  --text-strong: #16130f;
  --muted: #6f675b;
  --faint: #857d70;
  --hover: #efece6;
  --active: #e6e2da;
  /* The page's accent is the logo's orange (--brand-wire). Buttons and links use a
     deeper shade of it so white or body-coloured text stays readable (5.2:1). */
  --focus: #e8590c;
  --accent: #c2410c;
  --accent-hi: #a8380a;
  --accent-text: #ffffff;
  /* The demo keeps the workspace's own blue, so it looks like the product. */
  --product-accent: #3d63f2;
  --product-accent-hi: #5a7cf5;
  --good: #1f9a4c;
  --bad: #c4392b;
  --warn: #9a6a12;
  --ft-or: #3d63f2;
  --led-green: #1fb85a;
  --agent: #7a4fc4;
  --brand-wire: #e8590c; /* the logo's wires */

  /* Block diagram */
  --wire-int: #3d63f2;
  --wire-bool: #1f9a4c;
  --frame: #d9d4ca;
  --frame-inside: #fffefb;
  --frame-stack-1: #e6e2da;
  --frame-stack-2: #efece6;
  --frame-fold: #c6c0b4;
  --prim: #ffd978;
  --prim-edge: #c4951c;
  --prim-ink: #5c4500;
  --subvi: #fffdf8;
  --subvi-edge: #9a9184;
  --banner-sim: #e2700c;

  /* The page's own type. The preview keeps --ui, the workspace's system font. */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Manrope", "Inter", system-ui, sans-serif;
  --ui: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  --page: 1120px;
  --gutter: 24px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--panel); color: var(--text);
  font: 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-heading); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nowrap { white-space: nowrap; }
@media (max-width: 400px) { .nowrap { white-space: normal; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.site-head, main, .site-foot { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Header and hero ------------------------------------------------------- */

.site-head { display: flex; align-items: center; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 600; text-decoration: none; }
.brand img { display: block; height: 30px; width: auto; }

/* Headline on the left; the pitch and calls to action on the right, on its last line. */
.hero {
  padding: 36px 0 40px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  column-gap: 56px; align-items: end;
}
.hero h1 {
  margin: 0; max-width: 22ch; color: var(--text-strong);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede { margin: 0; max-width: 46ch; font-size: 1.125rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--border-strong); border-radius: 7px; background: var(--elev); color: var(--text-strong);
  font: 600 15px var(--font-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(43, 38, 32, 0.04);
}
.cta:hover { background: var(--hover); }
.cta.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.cta.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.cta:disabled { opacity: 0.6; cursor: default; }
.cta-arrow { margin-left: 6px; font-weight: 500; }

/* --- The preview window ----------------------------------------------------- */

/* The preview is two cards: the workspace window and, beside it, the agent chat. */
.preview {
  margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 330px); gap: 16px;
  font: 13px/1.4 var(--ui);
}
.window {
  min-width: 0; overflow: hidden; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(43, 38, 32, 0.06), 0 18px 48px -12px rgba(43, 38, 32, 0.22);
}
.titlebar {
  min-height: 40px; display: flex; align-items: center; gap: 14px; padding: 5px 8px 5px 12px;
  background: var(--side); border-bottom: 1px solid var(--border); user-select: none;
}
.titlebar .brand { gap: 7px; font-size: 13px; }
.titlebar .brand-mark { width: 16px; height: 16px; flex: none; }
.crumb { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftype { font: 700 10px var(--mono); color: var(--ft-or); }
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px;
  border-radius: 5px; border: 1px solid var(--border-strong); background: var(--elev); color: var(--text);
  font: 12px var(--ui); cursor: pointer;
}
.btn:hover { background: var(--hover); }
.btn svg { width: 14px; height: 14px; }
.btn[hidden] { display: none; }

.stage { display: grid; grid-template-columns: minmax(0, 1.12fr) 1px minmax(0, 1fr); }
.sash { background: var(--border); }
.pane { min-width: 0; display: flex; flex-direction: column; }
.pane-head {
  height: 32px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.runstate { display: inline-flex; align-items: center; gap: 5px; font: 11px var(--ui); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.runstate .dot { width: 7px; height: 7px; border-radius: 50%; }
.runstate.ok { color: var(--good); }
.runstate.ok .dot { background: var(--good); }

/* --- Block diagram ---------------------------------------------------------- */

.diagram-box { flex: 1; display: grid; place-items: center; padding: 6px 14px 18px; }
.diagram { display: block; width: 100%; max-width: 470px; height: auto; overflow: visible; }
.t-int { --wire: var(--wire-int); }
.t-bool { --wire: var(--wire-bool); }

.dg-sheet-1 { fill: var(--frame-stack-1); }
.dg-sheet-2 { fill: var(--frame-stack-2); }
.dg-frame { fill: var(--frame-inside); stroke: var(--frame); stroke-width: 5; }
.dg-fold { fill: var(--frame-fold); }
.dg-wire { fill: none; stroke: var(--wire); stroke-width: 1.5; stroke-linejoin: round; }
.dg-wire.list { stroke-width: 3.5; }
.dg-dot { fill: var(--wire); }
.dg-tunnel, .dg-chip { fill: color-mix(in srgb, var(--wire) 9%, #ffffff); stroke: var(--wire); stroke-width: 1.5; }
.dg-tunnel { fill: var(--wire); stroke: var(--frame-inside); stroke-width: 1; }
.dg-chip-text { font: 700 9.5px var(--ui); fill: var(--wire); text-anchor: middle; dominant-baseline: central; }
.dg-name { font: 500 12px var(--ui); fill: var(--text); }
.dg-name.mid { font-size: 10px; font-weight: 400; fill: var(--muted); text-anchor: middle; }
.dg-term { fill: var(--wire); }
.dg-term-fill { fill: color-mix(in srgb, var(--wire) 10%, var(--bg)); }
.dg-tag { font: 700 9px var(--ui); letter-spacing: 0.02em; fill: var(--wire); dominant-baseline: central; }
.dg-tag.end { text-anchor: end; }
.dg-arrow { fill: var(--wire); }
.dg-ring { fill: none; stroke: var(--product-accent); stroke-width: 1.5; stroke-dasharray: 3 2.5; opacity: 0; }

.lv-prim-body { fill: var(--prim); stroke: var(--prim-edge); stroke-width: 1.25; stroke-linejoin: round; }
.lv-g, .lv-g-thin { fill: none; stroke: var(--prim-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lv-g-thin { stroke-width: 1.15; }
.lv-dot { fill: var(--prim-ink); }
.lv-subvi-body { fill: var(--subvi); stroke: var(--subvi-edge); stroke-width: 1.25; }
.lv-banner { fill: var(--banner-sim); }
.lv-banner-text { font: 800 4.6px var(--ui); fill: #ffffff; letter-spacing: 0.06em; text-anchor: middle; dominant-baseline: central; }

/* The edit: wires draw in from where the values already are, then the comparison,
   its tunnel and its indicator appear. Rewinding (no .has-diagram) is instant. */
.dg-add-wire { stroke-dasharray: 1; stroke-dashoffset: 0; }
.preview:not(.has-diagram) .dg-add-wire { stroke-dashoffset: 1; }
.preview:not(.has-diagram) .dg-add { opacity: 0; }
.has-diagram .dg-add-wire { transition: stroke-dashoffset 0.55s ease-in-out; }
.has-diagram .dg-add { transition: opacity 0.3s ease-out; }
.has-diagram .n1 { transition-delay: 0.05s; }
.has-diagram .n2 { transition-delay: 0.5s; }
.has-diagram .w2 { transition-delay: 0.8s; transition-duration: 0.3s; }
.has-diagram .n3 { transition-delay: 0.85s; }
.has-diagram .n4 { transition-delay: 1.05s; }
/* The ring marks what the agent is editing right now. */
.dg-ring { transition: opacity 0.6s ease-out; }
[data-focus="1"] .dg-ring.r1, [data-focus="2"] .dg-ring.r2 { opacity: 1; transition: opacity 0.3s ease-out 0.4s; }

/* The second edit: a 50 ms wait between setting the relay and reading its input. */
.preview:not(.has-wait) .wait-node { opacity: 0; }
.has-wait .wait-node { transition: opacity 0.35s ease-out 0.3s; }

/* --- Front panel ------------------------------------------------------------ */

/* A plain instrument table: toggle switches for the commands, lamps for the
   readbacks, and a pill per relay once the Status column is added. */
.panel-scope { flex: 1; padding: 6px 14px 18px; color: var(--text); }

.relay-table { font: 13px/1.3 var(--mono); }
.rt-row {
  display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(0, 0.9fr) 6.6em; align-items: center; column-gap: 8px;
  min-height: 40px; padding: 0 5px; border-bottom: 1px solid var(--border);
}
.rt-head { min-height: 30px; color: var(--muted); font-size: 11px; }
.rt-name { font-weight: 700; }
.rt-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }

.toggle {
  width: 26px; height: 15px; flex: none; padding: 2px; border-radius: 9px;
  border: 1px solid var(--frame); background: var(--active);
}
.toggle::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: #5c554a; }
.toggle.on { background: var(--good); border-color: var(--good); }
.toggle.on::before { transform: translateX(11px); background: #ffffff; }

.led { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--active); box-shadow: inset 0 0 0 1px var(--border-strong); }
.led.on { background: var(--led-green); box-shadow: none; }

div.rt-row > .rt-status {
  justify-self: start; padding: 3px 6px; border-radius: 4px; font-size: 11px; line-height: 1.3;
}
div.rt-head > .rt-status { padding: 0; }
.rt-status.ok { color: var(--good); background: #e9f4ec; }
.rt-status.bad { color: var(--warn); background: #f7ecd3; }
/* While the settling test runs, no relay is judged until its 50 ms sample. */
.rt-status.wait { color: var(--muted); background: var(--hover); }

/* The Status column: its space is always there, so adding it moves nothing else. */
.rt-row.bad { background: #fbf4e5; }
.preview:not(.has-panel) .rt-status { opacity: 0; }
.preview:not(.has-panel) .rt-row.bad { background: none; }
.has-panel .rt-status { transition: opacity 0.25s ease-out calc(0.2s + var(--i, -1) * 0.12s); }
.has-panel .rt-row.bad { transition: background-color 0.3s ease-out 0.55s; }
.rt-readback .led { transition: background-color 0.12s, box-shadow 0.12s; }

.rt-sample { margin-top: 14px; font: 12px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.preview:not(.has-wait) .rt-sample { visibility: hidden; }

/* The third edit: the chart's slot opens, then the chart fades in. */
.chart-slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s ease-in-out; }
.chart-inner { min-height: 0; overflow: hidden; }
.chart-card {
  margin-top: 14px; padding: 12px; background: var(--elev); border: 1px solid var(--border); border-radius: 5px;
  transition: opacity 0.35s ease-out 0.35s;
}
.preview:not(.has-chart) .chart-slot { grid-template-rows: 0fr; }
.preview:not(.has-chart) .chart-card { opacity: 0; transition: none; }
.chart-title { margin: 0 0 9px; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.chart-note { float: right; font: 400 11px var(--font-body); color: var(--muted); }
.trace { display: block; width: 100%; height: auto; }
.trace-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.trace-label, .trace-axis, .trace-mark { font: 10.5px var(--mono); fill: var(--muted); }
.trace-axis, .trace-mark { text-anchor: middle; }
.trace-command, .trace-readback { fill: none; stroke-width: 2.25; stroke-linejoin: round; }
.trace-command { stroke: var(--product-accent); }
.trace-readback { stroke: var(--banner-sim); }
.trace-sample { fill: none; stroke: var(--banner-sim); stroke-width: 1.25; stroke-dasharray: 3 3; }
.trace-dot { fill: var(--banner-sim); }

/* --- Agent chat sidecar ---------------------------------------------------- */

/* The window and the chat are two cards side by side. The chat takes the window's
   height (size containment keeps its own content from setting the row), and its
   thread scrolls as the conversation grows. */
.chat {
  min-width: 0; display: flex; flex-direction: column; contain: size;
  background: var(--side); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(43, 38, 32, 0.06), 0 18px 48px -12px rgba(43, 38, 32, 0.22);
}
.chat-head {
  min-height: 40px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--border);
}
.agent-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.agent-tag svg { width: 14px; height: 14px; color: var(--agent); }

.thread {
  flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  list-style: none; margin: 0; padding: 12px 12px 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.turn { display: flex; flex-direction: column; gap: 8px; }
.msg { margin: 0; overflow-wrap: anywhere; }
.msg.user {
  align-self: flex-end; max-width: 88%; padding: 7px 10px;
  background: var(--elev); border: 1px solid var(--border-strong); border-radius: 8px 8px 2px 8px; color: var(--text-strong);
}
.msg.agent { color: var(--text); padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--agent) 45%, transparent); }
/* Rewound lines take no space; the thread fills in as the script plays. */
.turn:not(.shown), .msg:not(.shown), .tool:not(.show) { display: none; }
.tools { display: flex; flex-direction: column; gap: 3px; }
.tools:not(:has(.show)) { display: none; }
.tool { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tool .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; transform: translateY(-1px); }
.tool.running .dot { background: var(--product-accent-hi); animation: pulse 0.7s infinite alternate; }
.tool.ok .dot { background: var(--good); }
.tool .name { color: var(--text); }
.tool .file { font: 12px var(--mono); color: var(--ft-or); overflow: hidden; text-overflow: ellipsis; }
.tool .note { color: var(--faint); }
.is-scripted .turn.shown, .is-scripted .msg.shown, .is-scripted .tool.show { animation: rise 0.25s ease-out; }
@keyframes pulse { to { opacity: 0.3; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

.composer {
  flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 8px 10px 10px; padding: 6px 6px 6px 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--elev);
}
.is-typing .composer { border-color: var(--product-accent); }
.composer-text { flex: 1; min-width: 0; min-height: 48px; display: block; line-height: 24px; color: var(--text-strong); overflow-wrap: anywhere; }
.placeholder { color: var(--faint); }
.is-typing .placeholder { display: none; }
.caret { display: none; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--text-strong); animation: blink 1s steps(2, jump-none) infinite; }
.is-typing .caret { display: inline-block; }
@keyframes blink { to { opacity: 0; } }
.send { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--product-accent); color: #fff; display: grid; place-items: center; opacity: 0.4; }
.is-typing .send { opacity: 1; }
.send svg { width: 14px; height: 14px; }

/* --- Waitlist --------------------------------------------------------------- */

/* A rule across the page, then the pitch on the left and the form on the right. */
.waitlist {
  margin-top: 88px; padding: 56px 0 72px; border-top: 1px solid var(--border-strong); scroll-margin-top: 8px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start;
}
.waitlist-form, .waitlist-done { grid-column: 2; grid-row: 1; }
.waitlist h2 { margin: 0; max-width: 18ch; color: var(--text-strong); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.waitlist-lede { margin: 12px 0 0; font-size: 1.125rem; color: var(--muted); }
.waitlist-form { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.form-field { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.optional { margin-left: 4px; font-weight: 400; color: var(--faint); }
.form-field input, .form-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--elev); color: var(--text-strong); font: 16px/1.4 var(--font-body);
  box-shadow: inset 0 1px 2px rgba(43, 38, 32, 0.06);
}
.form-field input { min-height: 44px; }
.form-field textarea { resize: vertical; min-height: 88px; }
.form-field :is(input, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; color: var(--bad); font-size: 14px; }
.form-error[hidden], .waitlist-form[hidden], .waitlist-done[hidden] { display: none; }

.waitlist-done {
  display: flex; gap: 14px; padding: 20px;
  border: 1px solid color-mix(in srgb, var(--good) 40%, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--good) 6%, var(--elev));
}
.waitlist-done:focus { outline: none; }
.done-mark { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; }
.done-mark svg { width: 16px; height: 16px; }
.waitlist-done h3 { margin: 0; font-size: 1.125rem; line-height: 28px; color: var(--text-strong); }
.waitlist-done p { margin: 6px 0 16px; color: var(--text); overflow-wrap: anywhere; }

.site-foot {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 28px;
  border-top: 1px solid var(--border); font-size: 14px; color: var(--faint);
}
.site-foot a { color: var(--muted); }

/* The Worker's answer to a form posted without JavaScript. */
.plain-page { max-width: 560px; padding-top: 96px; }
.plain-page h1 { margin: 0 0 12px; font-size: 1.75rem; color: var(--text-strong); }

/* --- Narrower screens: the chat under the window, then the diagram above the panel */

@media (max-width: 1120px) {
  .preview { grid-template-columns: minmax(0, 1fr); }
  .chat { contain: none; }
  .thread { flex: none; height: 260px; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .waitlist { grid-template-columns: minmax(0, 1fr); margin-top: 64px; padding-top: 44px; }
  .waitlist-form, .waitlist-done { grid-column: 1; grid-row: 2; margin-top: 28px; }
  .hero h1 { max-width: 21ch; }
  .lede { margin-top: 18px; max-width: 56ch; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .sash { height: 1px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .site-head { height: 48px; }
  .hero { padding: 16px 0 28px; }
  .lede { font-size: 1rem; }
  .cta-row .cta { flex: 1 1 auto; }
  .preview { margin: 0 -6px; gap: 12px; }
  .crumb { display: none; }
  .diagram-box, .panel-scope { padding: 4px 8px 14px; }
  .pane-head { padding: 0 10px; }
  .rt-row { grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 0.9fr) 6.2em; column-gap: 6px; padding: 0 3px; }
  .rt-cell { gap: 6px; }
  .waitlist { margin-top: 48px; padding: 36px 0 56px; }
  .waitlist-form .cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preview *, .preview *::before { transition: none !important; animation: none !important; }
  .thread { scroll-behavior: auto; }
}
@media (max-width: 360px) {
  .relay-table { font-size: 11px; }
  .rt-row { grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 0.85fr) 6.6em; }
}