is visible at a time; start.js sets `data-active` on and the rail reflects it. */ /* ── progress rail ───────────────────────────────────────────────────────── */ .rail { border-bottom: 1px solid var(--line); background: var(--bg); } .rail ol { display: flex; align-items: center; gap: 8px; max-width: 1080px; margin: 0 auto; padding: 18px 28px; list-style: none; overflow-x: auto; scrollbar-width: none; } .rail ol::-webkit-scrollbar { display: none; } .rail li { display: flex; align-items: center; gap: 9px; flex: none; padding-right: 8px; font-size: 13px; color: var(--faint); transition: color 0.3s; } .rail li + li::before { content: ""; width: 26px; height: 1px; background: var(--line-strong); margin-right: 12px; } .rail .num { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 11px; line-height: 1; transition: background-color 0.3s, border-color 0.3s, color 0.3s; } .rail li[data-state="current"] { color: var(--ink); } .rail li[data-state="current"] .num { border-color: var(--ink); background: var(--ink); color: #fff; } .rail li[data-state="done"] { color: var(--muted); } .rail li[data-state="done"] .num { border-color: var(--accent); background: var(--accent); color: #fff; } .rail li[data-state="done"] .num::after { content: "✓"; font-size: 11px; } .rail li[data-state="done"] .num { font-size: 0; } /* ── stage ───────────────────────────────────────────────────────────────── */ .stage { padding: 56px 28px 96px; } .step { display: none; } .step[data-active] { display: block; animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .step-inner { margin: 0 auto; } .step-inner.narrow { max-width: 620px; } .step-inner.wide { max-width: 1080px; } .step h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; margin: 14px 0 0; } .step .lede { margin-top: 16px; font-size: 17px; color: var(--muted); max-width: 60ch; } .fineprint { font-size: 13px; color: var(--faint); line-height: 1.5; } /* ── step 1 ──────────────────────────────────────────────────────────────── */ .website-form { display: flex; gap: 12px; margin: 34px 0 16px; } .website-form input { flex: 1; font-size: 18px; padding: 16px 18px; } .website-form .btn { flex: none; } #website-error { margin-bottom: 16px; } /* ── step 2 ──────────────────────────────────────────────────────────────── */ .progress-card { margin: 34px 0 18px; } .progress-line { display: flex; align-items: center; gap: 12px; font-size: 17px; } .progress-track { height: 3px; border-radius: 2px; background: var(--bg-alt); margin: 22px 0; overflow: hidden; } .progress-fill { height: 100%; width: 6%; border-radius: 2px; background: var(--accent); transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .progress-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .progress-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--faint); transition: color 0.3s; } .progress-list li::before { content: ""; flex: none; margin-top: 6px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.3s, border-color 0.3s; } .progress-list li[data-state="active"] { color: var(--ink); } .progress-list li[data-state="active"]::before { border-color: var(--accent); background: var(--accent); animation: pulse 1.4s ease-in-out infinite; } .progress-list li[data-state="done"] { color: var(--muted); } .progress-list li[data-state="done"]::before { border-color: var(--accent); background: var(--accent); } #learning-error { margin-bottom: 16px; } /* ── step 3 ──────────────────────────────────────────────────────────────── */ .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 30px; align-items: start; margin-top: 36px; } .knowledge { display: grid; gap: 16px; } .k-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); } .k-card h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .k-headline { font-size: 24px; letter-spacing: -0.02em; } .k-sub { margin-top: 8px; color: var(--muted); font-size: 15px; } .k-body { font-size: 15px; line-height: 1.6; } .k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .k-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; } .k-list li::before { content: ""; flex: none; margin-top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .k-list .k-desc { color: var(--muted); } .k-tags { display: flex; flex-wrap: wrap; gap: 7px; } .k-faq { display: grid; gap: 14px; } .k-faq dt { font-size: 15px; } .k-faq dd { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55; } .k-warn li::before { background: var(--warn); } .k-sources { font-size: 13px; color: var(--faint); word-break: break-all; display: grid; gap: 5px; } /* The caveat under industry background — quiet, but never absent. */ .k-fine { font-size: 13px; line-height: 1.55; color: var(--faint); margin-top: 14px; } .k-body + .k-tags, .k-tags + .k-list { margin-top: 14px; } /* the call panel */ .call-panel { position: sticky; top: 92px; display: grid; gap: 16px; } .call-form h2, .call-gate h2 { font-size: 22px; margin: 10px 0 8px; } .call-note { font-size: 14px; color: var(--muted); line-height: 1.55; } .call-form form { display: grid; gap: 14px; margin-top: 18px; } .call-form .btn, .call-gate .btn { width: 100%; } .call-form .notice { margin-top: 14px; } .call-gate .btn { margin-top: 20px; } /* Once a call has been placed the transcript is the thing being read, so it takes the top of the panel and the form for the next call drops beneath it. Reordering rather than moving nodes keeps the live card's DOM — and its open event stream — untouched. */ .call-panel[data-called] .call-card { order: 0; } .call-panel[data-called] .call-form, .call-panel[data-called] .call-gate { order: 1; } .call-card { display: flex; flex-direction: column; min-height: 340px; overflow: hidden; } .call-card-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); } .call-timer { font-family: var(--mono); font-size: 13px; color: var(--faint); } .call-card-body { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; } .call-empty { color: var(--faint); font-size: 14px; margin: auto 0; text-align: center; } .turn { display: grid; gap: 4px; animation: rise 0.35s ease both; } .turn .who { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .turn .what { font-size: 15px; line-height: 1.5; } .turn-agent .who { color: var(--accent); } .turn-agent .what { color: var(--ink); } .turn-caller .what { color: var(--muted); } .turn-tool { font-size: 12px; color: var(--faint); font-family: var(--mono); } .call-card-foot { padding: 13px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; min-height: 46px; } .call-summary { font-size: 13px; color: var(--muted); line-height: 1.5; } .step-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; } /* ── step 4 ──────────────────────────────────────────────────────────────── */ .signup-form { display: grid; gap: 18px; margin: 32px 0 18px; } .signup-form .btn { width: 100%; margin-top: 4px; } /* ── narrow screens ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } .call-panel { position: static; } } @media (max-width: 620px) { .stage { padding: 40px 20px 72px; } .topbar { padding: 0 18px; gap: 12px; } .topbar-meta { display: none; } .website-form { flex-direction: column; } .rail li .label { display: none; } .rail li[data-state="current"] .label { display: inline; } }